diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css index 59dc16789c..aa979070b5 100644 --- 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 index 239aa9e1d1..8f3648bd01 100644 --- 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 index a22ba2d085..63765509b7 100644 --- 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 index 026aef21c3..6a84e62882 100644 --- 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 index a5d4000c01..699f8002cd 100644 --- 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 index 10641729e9..7de735f936 100644 --- 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 index 2d1230775e..c04a182499 100644 --- 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 index 1b92f74daf..b280f4589f 100644 --- 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 index d27053402a..fea70a2f30 100644 --- 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 index 753ee2ae14..f37acd3b49 100644 --- 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 index ec7b1d1448..c73a770707 100644 --- 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 index 07dd893472..3576779146 100644 --- 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',