migrate global colors on storefront

digdir · Jun 4, 2024 · 985e0c7 · 985e0c7
1 parent 0e5bca2
commit 985e0c7
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 38 deletions.
diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css
@@ -58,14 +58,14 @@
 .one {
   top: 0;
   left: 0;
-  border-color: var(--fds-brand-alt1-600);
+  border-color: var(--ds-color-brand1-6);
   animation: one 1.5s forwards ease-out;
 }
 
 .two {
   top: 0;
   right: 0;
-  border-color: var(--fds-brand-alt3-600);
+  border-color: var(--ds-color-brand3-6);
   animation: two 1.5s forwards ease-out;
 }
 
@@ -79,7 +79,7 @@
 .four {
   left: 0;
   bottom: 0;
-  border-color: var(--fds-brand-alt2-600);
+  border-color: var(--ds-color-brand2-6);
   animation: four 1.5s forwards ease-out;
 }
 

diff --git a/apps/storefront/components/Blog/Card/BlogCard.module.css b/apps/storefront/components/Blog/Card/BlogCard.module.css
@@ -48,6 +48,6 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--fds-brand-alt1-600);
+  background-color: var(--ds-color-brand1-6);
   margin: auto;
 }
diff --git a/apps/storefront/components/Blog/Contributors/Contributors.module.css b/apps/storefront/components/Blog/Contributors/Contributors.module.css
@@ -55,7 +55,7 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--fds-brand-alt1-600);
+  background-color: var(--ds-color-brand1-6);
   margin: auto 0;
   break-after: avoid;
 }
diff --git a/apps/storefront/components/Header/Header.module.css b/apps/storefront/components/Header/Header.module.css
@@ -75,11 +75,11 @@
 }
 
 .linkIcon.figma path {
-  stroke: var(--fds-colors-grey-800);
+  stroke: var(--ds-color-neutral-8);
 }
 
 .linkIcon.github path {
-  fill: var(--fds-colors-grey-800);
+  fill: var(--ds-color-neutral-8);
 }
 
 .linkIcon.figma:hover path {

diff --git a/apps/storefront/components/ImageBanner/ImageBanner.module.css b/apps/storefront/components/ImageBanner/ImageBanner.module.css
@@ -4,15 +4,15 @@
 }
 
 .blue {
-  background-color: var(--fds-brand-alt3-300);
+  background-color: var(--ds-color-brand3-3);
 }
 
 .red {
-  background-color: var(--fds-brand-alt1-300);
+  background-color: var(--ds-color-brand1-3);
 }
 
 .yellow {
-  background-color: var(--fds-brand-alt2-300);
+  background-color: var(--ds-color-brand2-3);
 }
 
 .grey {

diff --git a/apps/storefront/components/ImageSection/ImageSection.module.css b/apps/storefront/components/ImageSection/ImageSection.module.css
@@ -9,15 +9,15 @@
 }
 
 .blue {
-  background-color: var(--fds-brand-alt3-300);
+  background-color: var(--ds-color-brand3-3);
 }
 
 .red {
-  background-color: var(--fds-brand-alt1-300);
+  background-color: var(--ds-color-brand1-3);
 }
 
 .yellow {
-  background-color: var(--fds-brand-alt2-300);
+  background-color: var(--ds-color-brand2-3);
 }
 
 .grey {

diff --git a/apps/storefront/components/NavigationCard/NavigationCard.module.css b/apps/storefront/components/NavigationCard/NavigationCard.module.css
@@ -38,15 +38,15 @@
 }
 
 .red {
-  background-color: var(--fds-brand-alt1-300);
+  background-color: var(--ds-color-brand1-3);
 }
 
 .blue {
-  background-color: var(--fds-brand-alt3-300);
+  background-color: var(--ds-color-brand3-3);
 }
 
 .yellow {
-  background-color: var(--fds-brand-alt2-300);
+  background-color: var(--ds-color-brand2-3);
 }
 
 .grey {

diff --git a/apps/storefront/components/SubPages/Banner/Banner.module.css b/apps/storefront/components/SubPages/Banner/Banner.module.css
@@ -26,7 +26,7 @@
   display: grid;
   place-items: center;
   transform: rotate(45deg);
-  background-color: var(--fds-brand-alt2-600);
+  background-color: var(--ds-color-brand2-6);
   border-radius: 3px;
   margin-top: var(--ds-spacing-2);
   margin-bottom: var(--ds-spacing-2);
@@ -39,15 +39,15 @@
 }
 
 .red {
-  background-color: var(--fds-brand-alt1-600);
+  background-color: var(--ds-color-brand1-6);
 }
 
 .yellow {
-  background-color: var(--fds-brand-alt2-600);
+  background-color: var(--ds-color-brand2-6);
 }
 
 .blue {
-  background-color: var(--fds-brand-alt3-600);
+  background-color: var(--ds-color-brand3-6);
 }
 
 .logo {
@@ -78,13 +78,13 @@
 }
 
 .logo.svg-red path {
-  fill: var(--fds-brand-alt1-600);
+  fill: var(--ds-color-brand1-6);
 }
 
 .logo.svg-yellow path {
-  fill: var(--fds-brand-alt2-600);
+  fill: var(--ds-color-brand2-6);
 }
 
 .logo.svg-blue path {
-  fill: var(--fds-brand-alt3-600);
+  fill: var(--ds-color-brand3-6);
 }
diff --git a/apps/storefront/layouts/BlogArticleLayout/BlogArticleLayout.module.css b/apps/storefront/layouts/BlogArticleLayout/BlogArticleLayout.module.css
@@ -38,7 +38,7 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--fds-brand-alt1-600);
+  background-color: var(--ds-color-brand1-6);
   margin: auto 0;
 }
 
@@ -87,7 +87,7 @@
 .wantToWrite {
   margin-top: var(--ds-spacing-12);
   border-radius: var(--ds-border-radius-2xl);
-  background: var(--fds-brand-alt1-200);
+  background: var(--ds-color-brand1-2);
   padding: var(--ds-spacing-8);
   display: flex;
   flex-wrap: wrap;

diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css
@@ -59,15 +59,15 @@
 }
 
 .iconContainer.red {
-  border-color: var(--fds-brand-alt1-400);
+  border-color: var(--ds-color-brand1-4);
 }
 
 .iconContainer.blue {
-  border-color: var(--fds-brand-alt3-400);
+  border-color: var(--ds-color-brand3-4);
 }
 
 .iconContainer.yellow {
-  border-color: var(--fds-brand-alt2-400);
+  border-color: var(--ds-color-brand2-4);
 }
 
 .iconContainer svg {
@@ -80,15 +80,15 @@
 }
 
 .iconContainer.red svg {
-  color: var(--fds-brand-alt1-600);
+  color: var(--ds-color-brand1-6);
 }
 
 .iconContainer.blue svg {
-  color: var(--fds-brand-alt3-600);
+  color: var(--ds-color-brand3-6);
 }
 
 .iconContainer.yellow svg {
-  color: var(--fds-brand-alt2-600);
+  color: var(--ds-color-brand2-6);
 }
 
 .content {

diff --git a/apps/storefront/layouts/PageLayout/PageLayout.module.css b/apps/storefront/layouts/PageLayout/PageLayout.module.css
@@ -4,7 +4,7 @@
 }
 
 .header {
-  background-color: var(--fds-brand-alt3-300);
+  background-color: var(--ds-color-brand3-3);
   padding-top: var(--ds-spacing-7);
 }
 

diff --git a/packages/cli/src/migrations/beta-to-v1.ts b/packages/cli/src/migrations/beta-to-v1.ts
@@ -282,11 +282,12 @@ export default (glob?: string) =>
         '--fds-colors-blue-700': '--ds-global-blue-7',
         '--fds-colors-blue-800': '--ds-global-blue-8',
         '--fds-colors-blue-900': '--ds-global-blue-9',
-        '--fds-colors-grey-100': '--ds-global-grey-1',
-        '--fds-colors-grey-200': '--ds-global-grey-2',
-        '--fds-colors-grey-600': '--ds-global-grey-6',
-        '--fds-colors-grey-700': '--ds-global-grey-7',
-        '--fds-colors-grey-800': '--ds-global-grey-8',
+        '--fds-colors-grey-100': '--ds-color-neutral-1',
+        '--fds-colors-grey-200': '--ds-color-neutral-2',
+        '--fds-colors-grey-400': '--ds-color-neutral-4',
+        '--fds-colors-grey-600': '--ds-color-neutral-6',
+        '--fds-colors-grey-700': '--ds-color-neutral-7',
+        '--fds-colors-grey-800': '--ds-color-neutral-8',
         '--fds-colors-green-200': '--ds-global-green-2',
         '--fds-colors-green-300': '--ds-global-green-3',
         '--fds-colors-green-700': '--ds-global-green-7',
@@ -301,7 +302,6 @@ export default (glob?: string) =>
         '--fds-colors-orange-600': '--ds-global-orange-6',
         '--fds-colors-orange-700': '--ds-global-orange-7',
         '--fds-colors-orange-800': '--ds-global-orange-8',
-        '--fds-colors-grey-400': '--ds-global-grey-4',
         '--fds-colors-red-800': '--ds-global-red-8',
         '--fds-colors-purple-700': '--ds-global-purple-7',
         '--fds-colors-red-100': '--ds-global-red-1',