diff --git a/.changeset/eleven-apples-clean.md b/.changeset/eleven-apples-clean.md new file mode 100644 index 0000000000..4051aca6b9 --- /dev/null +++ b/.changeset/eleven-apples-clean.md @@ -0,0 +1,6 @@ +--- +"@digdir/designsystemet-theme": minor +"@digdir/designsystemet": minor +--- + +Renamed background, surface and contrast color tokens and CSS variables diff --git a/.changeset/hot-chairs-drop.md b/.changeset/hot-chairs-drop.md new file mode 100644 index 0000000000..9f758862d6 --- /dev/null +++ b/.changeset/hot-chairs-drop.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet": patch +--- + +Added migration for color tokens renaming. Run `designsystemet migrate css-renames-next48-to-next49 --glob "./**/*.css"` diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.module.css b/apps/_components/src/CodeSnippet/CodeSnippet.module.css index c33579886b..28881edf7b 100644 --- a/apps/_components/src/CodeSnippet/CodeSnippet.module.css +++ b/apps/_components/src/CodeSnippet/CodeSnippet.module.css @@ -9,7 +9,7 @@ .codeSnippet > pre { padding-right: var(--ds-size-18) !important; - background-color: var(--ds-color-neutral-background-subtle) !important; + background-color: var(--ds-color-neutral-background-tinted) !important; } .codeSnippet > pre > code { diff --git a/apps/_components/src/Footer/Footer.module.css b/apps/_components/src/Footer/Footer.module.css index 669819edf8..0a517934ac 100644 --- a/apps/_components/src/Footer/Footer.module.css +++ b/apps/_components/src/Footer/Footer.module.css @@ -1,5 +1,5 @@ .footer { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); border-top: 1px solid var(--ds-color-neutral-border-default); } diff --git a/apps/_components/src/Header/Header.module.css b/apps/_components/src/Header/Header.module.css index 4bdf25f6cc..0834b20d92 100644 --- a/apps/_components/src/Header/Header.module.css +++ b/apps/_components/src/Header/Header.module.css @@ -8,7 +8,7 @@ [data-color-scheme='dark'] &, [data-color-scheme='auto'] & { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } } diff --git a/apps/_components/src/Showcase/Showcase.module.css b/apps/_components/src/Showcase/Showcase.module.css index 8392080c66..fc21726b17 100644 --- a/apps/_components/src/Showcase/Showcase.module.css +++ b/apps/_components/src/Showcase/Showcase.module.css @@ -9,7 +9,7 @@ } .card { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); border-radius: var(--ds-border-radius-md); padding: 24px; } diff --git a/apps/storefront/app/(frontpage)/layout.module.css b/apps/storefront/app/(frontpage)/layout.module.css index da1c7af384..93e518f558 100644 --- a/apps/storefront/app/(frontpage)/layout.module.css +++ b/apps/storefront/app/(frontpage)/layout.module.css @@ -7,7 +7,7 @@ .content::before { content: ''; - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); position: absolute; z-index: 0; height: 200vh; diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css index 4e039ef154..729b221792 100644 --- a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css +++ b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css @@ -19,7 +19,7 @@ .card { [data-color-scheme='dark'] &, [data-color-scheme='auto'] & { - --dsc-card-background: var(--ds-color-neutral-surface-default); + --dsc-card-background: var(--ds-color-neutral-surface-tinted); } } diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css index ff1d3d9622..f93d8a737f 100644 --- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css +++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css @@ -96,7 +96,7 @@ .wantToWrite { margin-top: var(--ds-size-12); border-radius: var(--ds-border-radius-lg); - background: var(--ds-color-brand1-surface-default); + background: var(--ds-color-brand1-surface-tinted); color: var(--ds-color-brand1-text-default); padding: var(--ds-size-8); display: flex; diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css index 44e92f2d07..4f34e5fa3d 100644 --- a/apps/storefront/components/Banner/Banner.module.css +++ b/apps/storefront/components/Banner/Banner.module.css @@ -14,7 +14,7 @@ [data-color-scheme='dark'] &, [data-color-scheme='auto'] & { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } } diff --git a/apps/storefront/components/ComponentCard/ComponentCard.module.css b/apps/storefront/components/ComponentCard/ComponentCard.module.css index 7232567ebc..55008fdce1 100644 --- a/apps/storefront/components/ComponentCard/ComponentCard.module.css +++ b/apps/storefront/components/ComponentCard/ComponentCard.module.css @@ -11,7 +11,7 @@ [data-color-scheme='dark'] &, [data-color-scheme='auto'] & { - background-color: var(--ds-color-neutral-surface-default); + background-color: var(--ds-color-neutral-surface-tinted); } } diff --git a/apps/storefront/components/ImageBanner/ImageBanner.module.css b/apps/storefront/components/ImageBanner/ImageBanner.module.css index cf2aebbac2..0e335345c6 100644 --- a/apps/storefront/components/ImageBanner/ImageBanner.module.css +++ b/apps/storefront/components/ImageBanner/ImageBanner.module.css @@ -4,19 +4,19 @@ } .blue { - background-color: var(--ds-color-brand3-surface-default); + background-color: var(--ds-color-brand3-surface-tinted); } .red { - background-color: var(--ds-color-brand1-surface-default); + background-color: var(--ds-color-brand1-surface-tinted); } .yellow { - background-color: var(--ds-color-brand2-surface-default); + background-color: var(--ds-color-brand2-surface-tinted); } .grey { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } .white { diff --git a/apps/storefront/components/MdxContent/MdxContent.module.css b/apps/storefront/components/MdxContent/MdxContent.module.css index 564e4732c2..d283634e88 100644 --- a/apps/storefront/components/MdxContent/MdxContent.module.css +++ b/apps/storefront/components/MdxContent/MdxContent.module.css @@ -130,7 +130,7 @@ margin: 1px; font-size: 0.9em; white-space: break-spaces; - background-color: var(--ds-color-neutral-surface-default); + background-color: var(--ds-color-neutral-surface-tinted); border-radius: var(--ds-border-radius-md); } @@ -140,7 +140,7 @@ & > pre, & > p pre { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); padding: var(--ds-size-5); margin: var(--ds-size-7) 0; border-radius: var(--ds-border-radius-md); diff --git a/apps/storefront/components/NavigationCard/NavigationCard.module.css b/apps/storefront/components/NavigationCard/NavigationCard.module.css index 567b1e3758..cd5f96050b 100644 --- a/apps/storefront/components/NavigationCard/NavigationCard.module.css +++ b/apps/storefront/components/NavigationCard/NavigationCard.module.css @@ -61,7 +61,7 @@ [data-color-scheme='dark'] &, [data-color-scheme='auto'] & { - background-color: var(--ds-color-neutral-surface-default); + background-color: var(--ds-color-neutral-surface-tinted); } } @@ -70,7 +70,7 @@ [data-color-scheme='dark'] &, [data-color-scheme='auto'] & { - background-color: var(--ds-color-neutral-surface-default); + background-color: var(--ds-color-neutral-surface-tinted); } } diff --git a/apps/storefront/components/Section/Section.module.css b/apps/storefront/components/Section/Section.module.css index b3cbe424e5..4a0d90f0c2 100644 --- a/apps/storefront/components/Section/Section.module.css +++ b/apps/storefront/components/Section/Section.module.css @@ -1,5 +1,5 @@ .section { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); padding: calc(var(--ds-size-14) + var(--ds-size-2)) 0 var(--ds-size-18) 0; } @@ -8,7 +8,7 @@ } .grey { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } .header { @@ -43,7 +43,7 @@ position: absolute; top: -37px; left: calc(50% - 37px); - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); padding: 24px; } diff --git a/apps/storefront/components/SidebarMenu/SidebarMenu.module.css b/apps/storefront/components/SidebarMenu/SidebarMenu.module.css index 32077ec471..9cf192c827 100644 --- a/apps/storefront/components/SidebarMenu/SidebarMenu.module.css +++ b/apps/storefront/components/SidebarMenu/SidebarMenu.module.css @@ -73,7 +73,7 @@ border-left-color: var(--ds-color-neutral-border-strong); color: inherit; font-weight: 500; - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } .linkActive:hover { diff --git a/apps/storefront/components/TeaserCard/TeaserCard.module.css b/apps/storefront/components/TeaserCard/TeaserCard.module.css index b64107242a..51a84d05e1 100644 --- a/apps/storefront/components/TeaserCard/TeaserCard.module.css +++ b/apps/storefront/components/TeaserCard/TeaserCard.module.css @@ -13,7 +13,7 @@ [data-color-scheme='dark'] &, [data-color-scheme='auto'] & { - background-color: var(--ds-color-neutral-surface-default); + background-color: var(--ds-color-neutral-surface-tinted); } } diff --git a/apps/storefront/globals.css b/apps/storefront/globals.css index 3b7c5383ba..e4887ecc70 100644 --- a/apps/storefront/globals.css +++ b/apps/storefront/globals.css @@ -45,7 +45,7 @@ body { /* Utility classes */ .greyBackground { - background: var(--ds-color-neutral-background-subtle); + background: var(--ds-color-neutral-background-tinted); } @layer normalize { diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css index 3611ee3356..9d21f9ead9 100644 --- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css +++ b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css @@ -28,7 +28,7 @@ padding: var(--ds-size-10); width: 100%; border-radius: var(--ds-border-radius-lg); - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } .headerText { diff --git a/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css b/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css index a483ae6d16..0a63b6cc72 100644 --- a/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css +++ b/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css @@ -18,7 +18,7 @@ } .outerPage { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); [data-color-scheme='dark'] &, [data-color-scheme='auto'] & { diff --git a/apps/storefront/layouts/PageLayout/PageLayout.module.css b/apps/storefront/layouts/PageLayout/PageLayout.module.css index dcdf938b9e..e76979afc2 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(--ds-color-brand3-surface-default); + background-color: var(--ds-color-brand3-surface-tinted); padding-top: var(--ds-size-7); } diff --git a/apps/storefront/tokens/altinn/dark.ts b/apps/storefront/tokens/altinn/dark.ts index 4af884806b..daaec71df9 100644 --- a/apps/storefront/tokens/altinn/dark.ts +++ b/apps/storefront/tokens/altinn/dark.ts @@ -30,14 +30,14 @@ export const color = [ $type: "color", $value: "{color.accent.2}" }, - name: "--ds-color-accent-background-subtle", + name: "--ds-color-accent-background-tinted", attributes: {}, path: [ "color", "accent", - "background-subtle" + "background-tinted" ], - key: "{color.accent.background-subtle}" + key: "{color.accent.background-tinted}" }, { $type: "color", @@ -48,14 +48,14 @@ export const color = [ $type: "color", $value: "{color.accent.3}" }, - name: "--ds-color-accent-surface-default", + name: "--ds-color-accent-surface-tinted", attributes: {}, path: [ "color", "accent", - "surface-default" + "surface-tinted" ], - key: "{color.accent.surface-default}" + key: "{color.accent.surface-tinted}" }, { $type: "color", @@ -246,14 +246,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-1}" }, - name: "--ds-color-accent-contrast-default", + name: "--ds-color-accent-base-contrast-default", attributes: {}, path: [ "color", "accent", - "contrast-default" + "base-contrast-default" ], - key: "{color.accent.contrast-default}" + key: "{color.accent.base-contrast-default}" }, { $type: "color", @@ -264,14 +264,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-2}" }, - name: "--ds-color-accent-contrast-subtle", + name: "--ds-color-accent-base-contrast-subtle", attributes: {}, path: [ "color", "accent", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.accent.contrast-subtle}" + key: "{color.accent.base-contrast-subtle}" }, { $type: "color", @@ -300,14 +300,14 @@ export const color = [ $type: "color", $value: "{color.neutral.2}" }, - name: "--ds-color-neutral-background-subtle", + name: "--ds-color-neutral-background-tinted", attributes: {}, path: [ "color", "neutral", - "background-subtle" + "background-tinted" ], - key: "{color.neutral.background-subtle}" + key: "{color.neutral.background-tinted}" }, { $type: "color", @@ -318,14 +318,14 @@ export const color = [ $type: "color", $value: "{color.neutral.3}" }, - name: "--ds-color-neutral-surface-default", + name: "--ds-color-neutral-surface-tinted", attributes: {}, path: [ "color", "neutral", - "surface-default" + "surface-tinted" ], - key: "{color.neutral.surface-default}" + key: "{color.neutral.surface-tinted}" }, { $type: "color", @@ -516,14 +516,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-1}" }, - name: "--ds-color-neutral-contrast-default", + name: "--ds-color-neutral-base-contrast-default", attributes: {}, path: [ "color", "neutral", - "contrast-default" + "base-contrast-default" ], - key: "{color.neutral.contrast-default}" + key: "{color.neutral.base-contrast-default}" }, { $type: "color", @@ -534,14 +534,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-2}" }, - name: "--ds-color-neutral-contrast-subtle", + name: "--ds-color-neutral-base-contrast-subtle", attributes: {}, path: [ "color", "neutral", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.neutral.contrast-subtle}" + key: "{color.neutral.base-contrast-subtle}" }, { $type: "color", @@ -570,14 +570,14 @@ export const color = [ $type: "color", $value: "{color.brand1.2}" }, - name: "--ds-color-brand1-background-subtle", + name: "--ds-color-brand1-background-tinted", attributes: {}, path: [ "color", "brand1", - "background-subtle" + "background-tinted" ], - key: "{color.brand1.background-subtle}" + key: "{color.brand1.background-tinted}" }, { $type: "color", @@ -588,14 +588,14 @@ export const color = [ $type: "color", $value: "{color.brand1.3}" }, - name: "--ds-color-brand1-surface-default", + name: "--ds-color-brand1-surface-tinted", attributes: {}, path: [ "color", "brand1", - "surface-default" + "surface-tinted" ], - key: "{color.brand1.surface-default}" + key: "{color.brand1.surface-tinted}" }, { $type: "color", @@ -786,14 +786,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-1}" }, - name: "--ds-color-brand1-contrast-default", + name: "--ds-color-brand1-base-contrast-default", attributes: {}, path: [ "color", "brand1", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand1.contrast-default}" + key: "{color.brand1.base-contrast-default}" }, { $type: "color", @@ -804,14 +804,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-2}" }, - name: "--ds-color-brand1-contrast-subtle", + name: "--ds-color-brand1-base-contrast-subtle", attributes: {}, path: [ "color", "brand1", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand1.contrast-subtle}" + key: "{color.brand1.base-contrast-subtle}" }, { $type: "color", @@ -840,14 +840,14 @@ export const color = [ $type: "color", $value: "{color.brand2.2}" }, - name: "--ds-color-brand2-background-subtle", + name: "--ds-color-brand2-background-tinted", attributes: {}, path: [ "color", "brand2", - "background-subtle" + "background-tinted" ], - key: "{color.brand2.background-subtle}" + key: "{color.brand2.background-tinted}" }, { $type: "color", @@ -858,14 +858,14 @@ export const color = [ $type: "color", $value: "{color.brand2.3}" }, - name: "--ds-color-brand2-surface-default", + name: "--ds-color-brand2-surface-tinted", attributes: {}, path: [ "color", "brand2", - "surface-default" + "surface-tinted" ], - key: "{color.brand2.surface-default}" + key: "{color.brand2.surface-tinted}" }, { $type: "color", @@ -1056,14 +1056,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-1}" }, - name: "--ds-color-brand2-contrast-default", + name: "--ds-color-brand2-base-contrast-default", attributes: {}, path: [ "color", "brand2", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand2.contrast-default}" + key: "{color.brand2.base-contrast-default}" }, { $type: "color", @@ -1074,14 +1074,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-2}" }, - name: "--ds-color-brand2-contrast-subtle", + name: "--ds-color-brand2-base-contrast-subtle", attributes: {}, path: [ "color", "brand2", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand2.contrast-subtle}" + key: "{color.brand2.base-contrast-subtle}" }, { $type: "color", @@ -1110,14 +1110,14 @@ export const color = [ $type: "color", $value: "{color.brand3.2}" }, - name: "--ds-color-brand3-background-subtle", + name: "--ds-color-brand3-background-tinted", attributes: {}, path: [ "color", "brand3", - "background-subtle" + "background-tinted" ], - key: "{color.brand3.background-subtle}" + key: "{color.brand3.background-tinted}" }, { $type: "color", @@ -1128,14 +1128,14 @@ export const color = [ $type: "color", $value: "{color.brand3.3}" }, - name: "--ds-color-brand3-surface-default", + name: "--ds-color-brand3-surface-tinted", attributes: {}, path: [ "color", "brand3", - "surface-default" + "surface-tinted" ], - key: "{color.brand3.surface-default}" + key: "{color.brand3.surface-tinted}" }, { $type: "color", @@ -1326,14 +1326,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-1}" }, - name: "--ds-color-brand3-contrast-default", + name: "--ds-color-brand3-base-contrast-default", attributes: {}, path: [ "color", "brand3", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand3.contrast-default}" + key: "{color.brand3.base-contrast-default}" }, { $type: "color", @@ -1344,14 +1344,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-2}" }, - name: "--ds-color-brand3-contrast-subtle", + name: "--ds-color-brand3-base-contrast-subtle", attributes: {}, path: [ "color", "brand3", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand3.contrast-subtle}" + key: "{color.brand3.base-contrast-subtle}" }, { $type: "color", @@ -1380,14 +1380,14 @@ export const color = [ $type: "color", $value: "{global.green.2}" }, - name: "--ds-color-success-background-subtle", + name: "--ds-color-success-background-tinted", attributes: {}, path: [ "color", "success", - "background-subtle" + "background-tinted" ], - key: "{color.success.background-subtle}" + key: "{color.success.background-tinted}" }, { $type: "color", @@ -1398,14 +1398,14 @@ export const color = [ $type: "color", $value: "{global.green.3}" }, - name: "--ds-color-success-surface-default", + name: "--ds-color-success-surface-tinted", attributes: {}, path: [ "color", "success", - "surface-default" + "surface-tinted" ], - key: "{color.success.surface-default}" + key: "{color.success.surface-tinted}" }, { $type: "color", @@ -1596,14 +1596,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-1}" }, - name: "--ds-color-success-contrast-default", + name: "--ds-color-success-base-contrast-default", attributes: {}, path: [ "color", "success", - "contrast-default" + "base-contrast-default" ], - key: "{color.success.contrast-default}" + key: "{color.success.base-contrast-default}" }, { $type: "color", @@ -1614,14 +1614,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-2}" }, - name: "--ds-color-success-contrast-subtle", + name: "--ds-color-success-base-contrast-subtle", attributes: {}, path: [ "color", "success", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.success.contrast-subtle}" + key: "{color.success.base-contrast-subtle}" }, { $type: "color", @@ -1650,14 +1650,14 @@ export const color = [ $type: "color", $value: "{global.red.2}" }, - name: "--ds-color-danger-background-subtle", + name: "--ds-color-danger-background-tinted", attributes: {}, path: [ "color", "danger", - "background-subtle" + "background-tinted" ], - key: "{color.danger.background-subtle}" + key: "{color.danger.background-tinted}" }, { $type: "color", @@ -1668,14 +1668,14 @@ export const color = [ $type: "color", $value: "{global.red.3}" }, - name: "--ds-color-danger-surface-default", + name: "--ds-color-danger-surface-tinted", attributes: {}, path: [ "color", "danger", - "surface-default" + "surface-tinted" ], - key: "{color.danger.surface-default}" + key: "{color.danger.surface-tinted}" }, { $type: "color", @@ -1866,14 +1866,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-1}" }, - name: "--ds-color-danger-contrast-default", + name: "--ds-color-danger-base-contrast-default", attributes: {}, path: [ "color", "danger", - "contrast-default" + "base-contrast-default" ], - key: "{color.danger.contrast-default}" + key: "{color.danger.base-contrast-default}" }, { $type: "color", @@ -1884,14 +1884,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-2}" }, - name: "--ds-color-danger-contrast-subtle", + name: "--ds-color-danger-base-contrast-subtle", attributes: {}, path: [ "color", "danger", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.danger.contrast-subtle}" + key: "{color.danger.base-contrast-subtle}" }, { $type: "color", @@ -1920,14 +1920,14 @@ export const color = [ $type: "color", $value: "{global.blue.2}" }, - name: "--ds-color-info-background-subtle", + name: "--ds-color-info-background-tinted", attributes: {}, path: [ "color", "info", - "background-subtle" + "background-tinted" ], - key: "{color.info.background-subtle}" + key: "{color.info.background-tinted}" }, { $type: "color", @@ -1938,14 +1938,14 @@ export const color = [ $type: "color", $value: "{global.blue.3}" }, - name: "--ds-color-info-surface-default", + name: "--ds-color-info-surface-tinted", attributes: {}, path: [ "color", "info", - "surface-default" + "surface-tinted" ], - key: "{color.info.surface-default}" + key: "{color.info.surface-tinted}" }, { $type: "color", @@ -2136,14 +2136,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-1}" }, - name: "--ds-color-info-contrast-default", + name: "--ds-color-info-base-contrast-default", attributes: {}, path: [ "color", "info", - "contrast-default" + "base-contrast-default" ], - key: "{color.info.contrast-default}" + key: "{color.info.base-contrast-default}" }, { $type: "color", @@ -2154,14 +2154,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-2}" }, - name: "--ds-color-info-contrast-subtle", + name: "--ds-color-info-base-contrast-subtle", attributes: {}, path: [ "color", "info", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.info.contrast-subtle}" + key: "{color.info.base-contrast-subtle}" }, { $type: "color", @@ -2190,14 +2190,14 @@ export const color = [ $type: "color", $value: "{global.yellow.2}" }, - name: "--ds-color-warning-background-subtle", + name: "--ds-color-warning-background-tinted", attributes: {}, path: [ "color", "warning", - "background-subtle" + "background-tinted" ], - key: "{color.warning.background-subtle}" + key: "{color.warning.background-tinted}" }, { $type: "color", @@ -2208,14 +2208,14 @@ export const color = [ $type: "color", $value: "{global.yellow.3}" }, - name: "--ds-color-warning-surface-default", + name: "--ds-color-warning-surface-tinted", attributes: {}, path: [ "color", "warning", - "surface-default" + "surface-tinted" ], - key: "{color.warning.surface-default}" + key: "{color.warning.surface-tinted}" }, { $type: "color", @@ -2406,14 +2406,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-1}" }, - name: "--ds-color-warning-contrast-default", + name: "--ds-color-warning-base-contrast-default", attributes: {}, path: [ "color", "warning", - "contrast-default" + "base-contrast-default" ], - key: "{color.warning.contrast-default}" + key: "{color.warning.base-contrast-default}" }, { $type: "color", @@ -2424,14 +2424,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-2}" }, - name: "--ds-color-warning-contrast-subtle", + name: "--ds-color-warning-base-contrast-subtle", attributes: {}, path: [ "color", "warning", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.warning.contrast-subtle}" + key: "{color.warning.base-contrast-subtle}" }, { $type: "color", diff --git a/apps/storefront/tokens/altinn/light.ts b/apps/storefront/tokens/altinn/light.ts index 74372bc8ff..20e25d19db 100644 --- a/apps/storefront/tokens/altinn/light.ts +++ b/apps/storefront/tokens/altinn/light.ts @@ -30,14 +30,14 @@ export const color = [ $type: "color", $value: "{color.accent.2}" }, - name: "--ds-color-accent-background-subtle", + name: "--ds-color-accent-background-tinted", attributes: {}, path: [ "color", "accent", - "background-subtle" + "background-tinted" ], - key: "{color.accent.background-subtle}" + key: "{color.accent.background-tinted}" }, { $type: "color", @@ -48,14 +48,14 @@ export const color = [ $type: "color", $value: "{color.accent.3}" }, - name: "--ds-color-accent-surface-default", + name: "--ds-color-accent-surface-tinted", attributes: {}, path: [ "color", "accent", - "surface-default" + "surface-tinted" ], - key: "{color.accent.surface-default}" + key: "{color.accent.surface-tinted}" }, { $type: "color", @@ -246,14 +246,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-1}" }, - name: "--ds-color-accent-contrast-default", + name: "--ds-color-accent-base-contrast-default", attributes: {}, path: [ "color", "accent", - "contrast-default" + "base-contrast-default" ], - key: "{color.accent.contrast-default}" + key: "{color.accent.base-contrast-default}" }, { $type: "color", @@ -264,14 +264,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-2}" }, - name: "--ds-color-accent-contrast-subtle", + name: "--ds-color-accent-base-contrast-subtle", attributes: {}, path: [ "color", "accent", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.accent.contrast-subtle}" + key: "{color.accent.base-contrast-subtle}" }, { $type: "color", @@ -300,14 +300,14 @@ export const color = [ $type: "color", $value: "{color.neutral.2}" }, - name: "--ds-color-neutral-background-subtle", + name: "--ds-color-neutral-background-tinted", attributes: {}, path: [ "color", "neutral", - "background-subtle" + "background-tinted" ], - key: "{color.neutral.background-subtle}" + key: "{color.neutral.background-tinted}" }, { $type: "color", @@ -318,14 +318,14 @@ export const color = [ $type: "color", $value: "{color.neutral.3}" }, - name: "--ds-color-neutral-surface-default", + name: "--ds-color-neutral-surface-tinted", attributes: {}, path: [ "color", "neutral", - "surface-default" + "surface-tinted" ], - key: "{color.neutral.surface-default}" + key: "{color.neutral.surface-tinted}" }, { $type: "color", @@ -516,14 +516,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-1}" }, - name: "--ds-color-neutral-contrast-default", + name: "--ds-color-neutral-base-contrast-default", attributes: {}, path: [ "color", "neutral", - "contrast-default" + "base-contrast-default" ], - key: "{color.neutral.contrast-default}" + key: "{color.neutral.base-contrast-default}" }, { $type: "color", @@ -534,14 +534,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-2}" }, - name: "--ds-color-neutral-contrast-subtle", + name: "--ds-color-neutral-base-contrast-subtle", attributes: {}, path: [ "color", "neutral", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.neutral.contrast-subtle}" + key: "{color.neutral.base-contrast-subtle}" }, { $type: "color", @@ -570,14 +570,14 @@ export const color = [ $type: "color", $value: "{color.brand1.2}" }, - name: "--ds-color-brand1-background-subtle", + name: "--ds-color-brand1-background-tinted", attributes: {}, path: [ "color", "brand1", - "background-subtle" + "background-tinted" ], - key: "{color.brand1.background-subtle}" + key: "{color.brand1.background-tinted}" }, { $type: "color", @@ -588,14 +588,14 @@ export const color = [ $type: "color", $value: "{color.brand1.3}" }, - name: "--ds-color-brand1-surface-default", + name: "--ds-color-brand1-surface-tinted", attributes: {}, path: [ "color", "brand1", - "surface-default" + "surface-tinted" ], - key: "{color.brand1.surface-default}" + key: "{color.brand1.surface-tinted}" }, { $type: "color", @@ -786,14 +786,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-1}" }, - name: "--ds-color-brand1-contrast-default", + name: "--ds-color-brand1-base-contrast-default", attributes: {}, path: [ "color", "brand1", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand1.contrast-default}" + key: "{color.brand1.base-contrast-default}" }, { $type: "color", @@ -804,14 +804,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-2}" }, - name: "--ds-color-brand1-contrast-subtle", + name: "--ds-color-brand1-base-contrast-subtle", attributes: {}, path: [ "color", "brand1", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand1.contrast-subtle}" + key: "{color.brand1.base-contrast-subtle}" }, { $type: "color", @@ -840,14 +840,14 @@ export const color = [ $type: "color", $value: "{color.brand2.2}" }, - name: "--ds-color-brand2-background-subtle", + name: "--ds-color-brand2-background-tinted", attributes: {}, path: [ "color", "brand2", - "background-subtle" + "background-tinted" ], - key: "{color.brand2.background-subtle}" + key: "{color.brand2.background-tinted}" }, { $type: "color", @@ -858,14 +858,14 @@ export const color = [ $type: "color", $value: "{color.brand2.3}" }, - name: "--ds-color-brand2-surface-default", + name: "--ds-color-brand2-surface-tinted", attributes: {}, path: [ "color", "brand2", - "surface-default" + "surface-tinted" ], - key: "{color.brand2.surface-default}" + key: "{color.brand2.surface-tinted}" }, { $type: "color", @@ -1056,14 +1056,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-1}" }, - name: "--ds-color-brand2-contrast-default", + name: "--ds-color-brand2-base-contrast-default", attributes: {}, path: [ "color", "brand2", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand2.contrast-default}" + key: "{color.brand2.base-contrast-default}" }, { $type: "color", @@ -1074,14 +1074,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-2}" }, - name: "--ds-color-brand2-contrast-subtle", + name: "--ds-color-brand2-base-contrast-subtle", attributes: {}, path: [ "color", "brand2", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand2.contrast-subtle}" + key: "{color.brand2.base-contrast-subtle}" }, { $type: "color", @@ -1110,14 +1110,14 @@ export const color = [ $type: "color", $value: "{color.brand3.2}" }, - name: "--ds-color-brand3-background-subtle", + name: "--ds-color-brand3-background-tinted", attributes: {}, path: [ "color", "brand3", - "background-subtle" + "background-tinted" ], - key: "{color.brand3.background-subtle}" + key: "{color.brand3.background-tinted}" }, { $type: "color", @@ -1128,14 +1128,14 @@ export const color = [ $type: "color", $value: "{color.brand3.3}" }, - name: "--ds-color-brand3-surface-default", + name: "--ds-color-brand3-surface-tinted", attributes: {}, path: [ "color", "brand3", - "surface-default" + "surface-tinted" ], - key: "{color.brand3.surface-default}" + key: "{color.brand3.surface-tinted}" }, { $type: "color", @@ -1326,14 +1326,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-1}" }, - name: "--ds-color-brand3-contrast-default", + name: "--ds-color-brand3-base-contrast-default", attributes: {}, path: [ "color", "brand3", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand3.contrast-default}" + key: "{color.brand3.base-contrast-default}" }, { $type: "color", @@ -1344,14 +1344,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-2}" }, - name: "--ds-color-brand3-contrast-subtle", + name: "--ds-color-brand3-base-contrast-subtle", attributes: {}, path: [ "color", "brand3", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand3.contrast-subtle}" + key: "{color.brand3.base-contrast-subtle}" }, { $type: "color", @@ -1380,14 +1380,14 @@ export const color = [ $type: "color", $value: "{global.green.2}" }, - name: "--ds-color-success-background-subtle", + name: "--ds-color-success-background-tinted", attributes: {}, path: [ "color", "success", - "background-subtle" + "background-tinted" ], - key: "{color.success.background-subtle}" + key: "{color.success.background-tinted}" }, { $type: "color", @@ -1398,14 +1398,14 @@ export const color = [ $type: "color", $value: "{global.green.3}" }, - name: "--ds-color-success-surface-default", + name: "--ds-color-success-surface-tinted", attributes: {}, path: [ "color", "success", - "surface-default" + "surface-tinted" ], - key: "{color.success.surface-default}" + key: "{color.success.surface-tinted}" }, { $type: "color", @@ -1596,14 +1596,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-1}" }, - name: "--ds-color-success-contrast-default", + name: "--ds-color-success-base-contrast-default", attributes: {}, path: [ "color", "success", - "contrast-default" + "base-contrast-default" ], - key: "{color.success.contrast-default}" + key: "{color.success.base-contrast-default}" }, { $type: "color", @@ -1614,14 +1614,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-2}" }, - name: "--ds-color-success-contrast-subtle", + name: "--ds-color-success-base-contrast-subtle", attributes: {}, path: [ "color", "success", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.success.contrast-subtle}" + key: "{color.success.base-contrast-subtle}" }, { $type: "color", @@ -1650,14 +1650,14 @@ export const color = [ $type: "color", $value: "{global.red.2}" }, - name: "--ds-color-danger-background-subtle", + name: "--ds-color-danger-background-tinted", attributes: {}, path: [ "color", "danger", - "background-subtle" + "background-tinted" ], - key: "{color.danger.background-subtle}" + key: "{color.danger.background-tinted}" }, { $type: "color", @@ -1668,14 +1668,14 @@ export const color = [ $type: "color", $value: "{global.red.3}" }, - name: "--ds-color-danger-surface-default", + name: "--ds-color-danger-surface-tinted", attributes: {}, path: [ "color", "danger", - "surface-default" + "surface-tinted" ], - key: "{color.danger.surface-default}" + key: "{color.danger.surface-tinted}" }, { $type: "color", @@ -1866,14 +1866,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-1}" }, - name: "--ds-color-danger-contrast-default", + name: "--ds-color-danger-base-contrast-default", attributes: {}, path: [ "color", "danger", - "contrast-default" + "base-contrast-default" ], - key: "{color.danger.contrast-default}" + key: "{color.danger.base-contrast-default}" }, { $type: "color", @@ -1884,14 +1884,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-2}" }, - name: "--ds-color-danger-contrast-subtle", + name: "--ds-color-danger-base-contrast-subtle", attributes: {}, path: [ "color", "danger", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.danger.contrast-subtle}" + key: "{color.danger.base-contrast-subtle}" }, { $type: "color", @@ -1920,14 +1920,14 @@ export const color = [ $type: "color", $value: "{global.blue.2}" }, - name: "--ds-color-info-background-subtle", + name: "--ds-color-info-background-tinted", attributes: {}, path: [ "color", "info", - "background-subtle" + "background-tinted" ], - key: "{color.info.background-subtle}" + key: "{color.info.background-tinted}" }, { $type: "color", @@ -1938,14 +1938,14 @@ export const color = [ $type: "color", $value: "{global.blue.3}" }, - name: "--ds-color-info-surface-default", + name: "--ds-color-info-surface-tinted", attributes: {}, path: [ "color", "info", - "surface-default" + "surface-tinted" ], - key: "{color.info.surface-default}" + key: "{color.info.surface-tinted}" }, { $type: "color", @@ -2136,14 +2136,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-1}" }, - name: "--ds-color-info-contrast-default", + name: "--ds-color-info-base-contrast-default", attributes: {}, path: [ "color", "info", - "contrast-default" + "base-contrast-default" ], - key: "{color.info.contrast-default}" + key: "{color.info.base-contrast-default}" }, { $type: "color", @@ -2154,14 +2154,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-2}" }, - name: "--ds-color-info-contrast-subtle", + name: "--ds-color-info-base-contrast-subtle", attributes: {}, path: [ "color", "info", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.info.contrast-subtle}" + key: "{color.info.base-contrast-subtle}" }, { $type: "color", @@ -2190,14 +2190,14 @@ export const color = [ $type: "color", $value: "{global.yellow.2}" }, - name: "--ds-color-warning-background-subtle", + name: "--ds-color-warning-background-tinted", attributes: {}, path: [ "color", "warning", - "background-subtle" + "background-tinted" ], - key: "{color.warning.background-subtle}" + key: "{color.warning.background-tinted}" }, { $type: "color", @@ -2208,14 +2208,14 @@ export const color = [ $type: "color", $value: "{global.yellow.3}" }, - name: "--ds-color-warning-surface-default", + name: "--ds-color-warning-surface-tinted", attributes: {}, path: [ "color", "warning", - "surface-default" + "surface-tinted" ], - key: "{color.warning.surface-default}" + key: "{color.warning.surface-tinted}" }, { $type: "color", @@ -2406,14 +2406,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-1}" }, - name: "--ds-color-warning-contrast-default", + name: "--ds-color-warning-base-contrast-default", attributes: {}, path: [ "color", "warning", - "contrast-default" + "base-contrast-default" ], - key: "{color.warning.contrast-default}" + key: "{color.warning.base-contrast-default}" }, { $type: "color", @@ -2424,14 +2424,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-2}" }, - name: "--ds-color-warning-contrast-subtle", + name: "--ds-color-warning-base-contrast-subtle", attributes: {}, path: [ "color", "warning", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.warning.contrast-subtle}" + key: "{color.warning.base-contrast-subtle}" }, { $type: "color", diff --git a/apps/storefront/tokens/digdir/dark.ts b/apps/storefront/tokens/digdir/dark.ts index 7d5bcc9f3c..d4b5d62ca0 100644 --- a/apps/storefront/tokens/digdir/dark.ts +++ b/apps/storefront/tokens/digdir/dark.ts @@ -30,14 +30,14 @@ export const color = [ $type: "color", $value: "{color.accent.2}" }, - name: "--ds-color-accent-background-subtle", + name: "--ds-color-accent-background-tinted", attributes: {}, path: [ "color", "accent", - "background-subtle" + "background-tinted" ], - key: "{color.accent.background-subtle}" + key: "{color.accent.background-tinted}" }, { $type: "color", @@ -48,14 +48,14 @@ export const color = [ $type: "color", $value: "{color.accent.3}" }, - name: "--ds-color-accent-surface-default", + name: "--ds-color-accent-surface-tinted", attributes: {}, path: [ "color", "accent", - "surface-default" + "surface-tinted" ], - key: "{color.accent.surface-default}" + key: "{color.accent.surface-tinted}" }, { $type: "color", @@ -246,14 +246,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-1}" }, - name: "--ds-color-accent-contrast-default", + name: "--ds-color-accent-base-contrast-default", attributes: {}, path: [ "color", "accent", - "contrast-default" + "base-contrast-default" ], - key: "{color.accent.contrast-default}" + key: "{color.accent.base-contrast-default}" }, { $type: "color", @@ -264,14 +264,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-2}" }, - name: "--ds-color-accent-contrast-subtle", + name: "--ds-color-accent-base-contrast-subtle", attributes: {}, path: [ "color", "accent", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.accent.contrast-subtle}" + key: "{color.accent.base-contrast-subtle}" }, { $type: "color", @@ -300,14 +300,14 @@ export const color = [ $type: "color", $value: "{color.neutral.2}" }, - name: "--ds-color-neutral-background-subtle", + name: "--ds-color-neutral-background-tinted", attributes: {}, path: [ "color", "neutral", - "background-subtle" + "background-tinted" ], - key: "{color.neutral.background-subtle}" + key: "{color.neutral.background-tinted}" }, { $type: "color", @@ -318,14 +318,14 @@ export const color = [ $type: "color", $value: "{color.neutral.3}" }, - name: "--ds-color-neutral-surface-default", + name: "--ds-color-neutral-surface-tinted", attributes: {}, path: [ "color", "neutral", - "surface-default" + "surface-tinted" ], - key: "{color.neutral.surface-default}" + key: "{color.neutral.surface-tinted}" }, { $type: "color", @@ -516,14 +516,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-1}" }, - name: "--ds-color-neutral-contrast-default", + name: "--ds-color-neutral-base-contrast-default", attributes: {}, path: [ "color", "neutral", - "contrast-default" + "base-contrast-default" ], - key: "{color.neutral.contrast-default}" + key: "{color.neutral.base-contrast-default}" }, { $type: "color", @@ -534,14 +534,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-2}" }, - name: "--ds-color-neutral-contrast-subtle", + name: "--ds-color-neutral-base-contrast-subtle", attributes: {}, path: [ "color", "neutral", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.neutral.contrast-subtle}" + key: "{color.neutral.base-contrast-subtle}" }, { $type: "color", @@ -570,14 +570,14 @@ export const color = [ $type: "color", $value: "{color.brand1.2}" }, - name: "--ds-color-brand1-background-subtle", + name: "--ds-color-brand1-background-tinted", attributes: {}, path: [ "color", "brand1", - "background-subtle" + "background-tinted" ], - key: "{color.brand1.background-subtle}" + key: "{color.brand1.background-tinted}" }, { $type: "color", @@ -588,14 +588,14 @@ export const color = [ $type: "color", $value: "{color.brand1.3}" }, - name: "--ds-color-brand1-surface-default", + name: "--ds-color-brand1-surface-tinted", attributes: {}, path: [ "color", "brand1", - "surface-default" + "surface-tinted" ], - key: "{color.brand1.surface-default}" + key: "{color.brand1.surface-tinted}" }, { $type: "color", @@ -786,14 +786,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-1}" }, - name: "--ds-color-brand1-contrast-default", + name: "--ds-color-brand1-base-contrast-default", attributes: {}, path: [ "color", "brand1", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand1.contrast-default}" + key: "{color.brand1.base-contrast-default}" }, { $type: "color", @@ -804,14 +804,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-2}" }, - name: "--ds-color-brand1-contrast-subtle", + name: "--ds-color-brand1-base-contrast-subtle", attributes: {}, path: [ "color", "brand1", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand1.contrast-subtle}" + key: "{color.brand1.base-contrast-subtle}" }, { $type: "color", @@ -840,14 +840,14 @@ export const color = [ $type: "color", $value: "{color.brand2.2}" }, - name: "--ds-color-brand2-background-subtle", + name: "--ds-color-brand2-background-tinted", attributes: {}, path: [ "color", "brand2", - "background-subtle" + "background-tinted" ], - key: "{color.brand2.background-subtle}" + key: "{color.brand2.background-tinted}" }, { $type: "color", @@ -858,14 +858,14 @@ export const color = [ $type: "color", $value: "{color.brand2.3}" }, - name: "--ds-color-brand2-surface-default", + name: "--ds-color-brand2-surface-tinted", attributes: {}, path: [ "color", "brand2", - "surface-default" + "surface-tinted" ], - key: "{color.brand2.surface-default}" + key: "{color.brand2.surface-tinted}" }, { $type: "color", @@ -1056,14 +1056,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-1}" }, - name: "--ds-color-brand2-contrast-default", + name: "--ds-color-brand2-base-contrast-default", attributes: {}, path: [ "color", "brand2", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand2.contrast-default}" + key: "{color.brand2.base-contrast-default}" }, { $type: "color", @@ -1074,14 +1074,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-2}" }, - name: "--ds-color-brand2-contrast-subtle", + name: "--ds-color-brand2-base-contrast-subtle", attributes: {}, path: [ "color", "brand2", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand2.contrast-subtle}" + key: "{color.brand2.base-contrast-subtle}" }, { $type: "color", @@ -1110,14 +1110,14 @@ export const color = [ $type: "color", $value: "{color.brand3.2}" }, - name: "--ds-color-brand3-background-subtle", + name: "--ds-color-brand3-background-tinted", attributes: {}, path: [ "color", "brand3", - "background-subtle" + "background-tinted" ], - key: "{color.brand3.background-subtle}" + key: "{color.brand3.background-tinted}" }, { $type: "color", @@ -1128,14 +1128,14 @@ export const color = [ $type: "color", $value: "{color.brand3.3}" }, - name: "--ds-color-brand3-surface-default", + name: "--ds-color-brand3-surface-tinted", attributes: {}, path: [ "color", "brand3", - "surface-default" + "surface-tinted" ], - key: "{color.brand3.surface-default}" + key: "{color.brand3.surface-tinted}" }, { $type: "color", @@ -1326,14 +1326,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-1}" }, - name: "--ds-color-brand3-contrast-default", + name: "--ds-color-brand3-base-contrast-default", attributes: {}, path: [ "color", "brand3", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand3.contrast-default}" + key: "{color.brand3.base-contrast-default}" }, { $type: "color", @@ -1344,14 +1344,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-2}" }, - name: "--ds-color-brand3-contrast-subtle", + name: "--ds-color-brand3-base-contrast-subtle", attributes: {}, path: [ "color", "brand3", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand3.contrast-subtle}" + key: "{color.brand3.base-contrast-subtle}" }, { $type: "color", @@ -1380,14 +1380,14 @@ export const color = [ $type: "color", $value: "{global.green.2}" }, - name: "--ds-color-success-background-subtle", + name: "--ds-color-success-background-tinted", attributes: {}, path: [ "color", "success", - "background-subtle" + "background-tinted" ], - key: "{color.success.background-subtle}" + key: "{color.success.background-tinted}" }, { $type: "color", @@ -1398,14 +1398,14 @@ export const color = [ $type: "color", $value: "{global.green.3}" }, - name: "--ds-color-success-surface-default", + name: "--ds-color-success-surface-tinted", attributes: {}, path: [ "color", "success", - "surface-default" + "surface-tinted" ], - key: "{color.success.surface-default}" + key: "{color.success.surface-tinted}" }, { $type: "color", @@ -1596,14 +1596,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-1}" }, - name: "--ds-color-success-contrast-default", + name: "--ds-color-success-base-contrast-default", attributes: {}, path: [ "color", "success", - "contrast-default" + "base-contrast-default" ], - key: "{color.success.contrast-default}" + key: "{color.success.base-contrast-default}" }, { $type: "color", @@ -1614,14 +1614,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-2}" }, - name: "--ds-color-success-contrast-subtle", + name: "--ds-color-success-base-contrast-subtle", attributes: {}, path: [ "color", "success", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.success.contrast-subtle}" + key: "{color.success.base-contrast-subtle}" }, { $type: "color", @@ -1650,14 +1650,14 @@ export const color = [ $type: "color", $value: "{global.red.2}" }, - name: "--ds-color-danger-background-subtle", + name: "--ds-color-danger-background-tinted", attributes: {}, path: [ "color", "danger", - "background-subtle" + "background-tinted" ], - key: "{color.danger.background-subtle}" + key: "{color.danger.background-tinted}" }, { $type: "color", @@ -1668,14 +1668,14 @@ export const color = [ $type: "color", $value: "{global.red.3}" }, - name: "--ds-color-danger-surface-default", + name: "--ds-color-danger-surface-tinted", attributes: {}, path: [ "color", "danger", - "surface-default" + "surface-tinted" ], - key: "{color.danger.surface-default}" + key: "{color.danger.surface-tinted}" }, { $type: "color", @@ -1866,14 +1866,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-1}" }, - name: "--ds-color-danger-contrast-default", + name: "--ds-color-danger-base-contrast-default", attributes: {}, path: [ "color", "danger", - "contrast-default" + "base-contrast-default" ], - key: "{color.danger.contrast-default}" + key: "{color.danger.base-contrast-default}" }, { $type: "color", @@ -1884,14 +1884,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-2}" }, - name: "--ds-color-danger-contrast-subtle", + name: "--ds-color-danger-base-contrast-subtle", attributes: {}, path: [ "color", "danger", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.danger.contrast-subtle}" + key: "{color.danger.base-contrast-subtle}" }, { $type: "color", @@ -1920,14 +1920,14 @@ export const color = [ $type: "color", $value: "{global.blue.2}" }, - name: "--ds-color-info-background-subtle", + name: "--ds-color-info-background-tinted", attributes: {}, path: [ "color", "info", - "background-subtle" + "background-tinted" ], - key: "{color.info.background-subtle}" + key: "{color.info.background-tinted}" }, { $type: "color", @@ -1938,14 +1938,14 @@ export const color = [ $type: "color", $value: "{global.blue.3}" }, - name: "--ds-color-info-surface-default", + name: "--ds-color-info-surface-tinted", attributes: {}, path: [ "color", "info", - "surface-default" + "surface-tinted" ], - key: "{color.info.surface-default}" + key: "{color.info.surface-tinted}" }, { $type: "color", @@ -2136,14 +2136,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-1}" }, - name: "--ds-color-info-contrast-default", + name: "--ds-color-info-base-contrast-default", attributes: {}, path: [ "color", "info", - "contrast-default" + "base-contrast-default" ], - key: "{color.info.contrast-default}" + key: "{color.info.base-contrast-default}" }, { $type: "color", @@ -2154,14 +2154,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-2}" }, - name: "--ds-color-info-contrast-subtle", + name: "--ds-color-info-base-contrast-subtle", attributes: {}, path: [ "color", "info", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.info.contrast-subtle}" + key: "{color.info.base-contrast-subtle}" }, { $type: "color", @@ -2190,14 +2190,14 @@ export const color = [ $type: "color", $value: "{global.yellow.2}" }, - name: "--ds-color-warning-background-subtle", + name: "--ds-color-warning-background-tinted", attributes: {}, path: [ "color", "warning", - "background-subtle" + "background-tinted" ], - key: "{color.warning.background-subtle}" + key: "{color.warning.background-tinted}" }, { $type: "color", @@ -2208,14 +2208,14 @@ export const color = [ $type: "color", $value: "{global.yellow.3}" }, - name: "--ds-color-warning-surface-default", + name: "--ds-color-warning-surface-tinted", attributes: {}, path: [ "color", "warning", - "surface-default" + "surface-tinted" ], - key: "{color.warning.surface-default}" + key: "{color.warning.surface-tinted}" }, { $type: "color", @@ -2406,14 +2406,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-1}" }, - name: "--ds-color-warning-contrast-default", + name: "--ds-color-warning-base-contrast-default", attributes: {}, path: [ "color", "warning", - "contrast-default" + "base-contrast-default" ], - key: "{color.warning.contrast-default}" + key: "{color.warning.base-contrast-default}" }, { $type: "color", @@ -2424,14 +2424,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-2}" }, - name: "--ds-color-warning-contrast-subtle", + name: "--ds-color-warning-base-contrast-subtle", attributes: {}, path: [ "color", "warning", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.warning.contrast-subtle}" + key: "{color.warning.base-contrast-subtle}" }, { $type: "color", diff --git a/apps/storefront/tokens/digdir/light.ts b/apps/storefront/tokens/digdir/light.ts index b4417a440e..7dbd5aabf5 100644 --- a/apps/storefront/tokens/digdir/light.ts +++ b/apps/storefront/tokens/digdir/light.ts @@ -30,14 +30,14 @@ export const color = [ $type: "color", $value: "{color.accent.2}" }, - name: "--ds-color-accent-background-subtle", + name: "--ds-color-accent-background-tinted", attributes: {}, path: [ "color", "accent", - "background-subtle" + "background-tinted" ], - key: "{color.accent.background-subtle}" + key: "{color.accent.background-tinted}" }, { $type: "color", @@ -48,14 +48,14 @@ export const color = [ $type: "color", $value: "{color.accent.3}" }, - name: "--ds-color-accent-surface-default", + name: "--ds-color-accent-surface-tinted", attributes: {}, path: [ "color", "accent", - "surface-default" + "surface-tinted" ], - key: "{color.accent.surface-default}" + key: "{color.accent.surface-tinted}" }, { $type: "color", @@ -246,14 +246,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-1}" }, - name: "--ds-color-accent-contrast-default", + name: "--ds-color-accent-base-contrast-default", attributes: {}, path: [ "color", "accent", - "contrast-default" + "base-contrast-default" ], - key: "{color.accent.contrast-default}" + key: "{color.accent.base-contrast-default}" }, { $type: "color", @@ -264,14 +264,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-2}" }, - name: "--ds-color-accent-contrast-subtle", + name: "--ds-color-accent-base-contrast-subtle", attributes: {}, path: [ "color", "accent", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.accent.contrast-subtle}" + key: "{color.accent.base-contrast-subtle}" }, { $type: "color", @@ -300,14 +300,14 @@ export const color = [ $type: "color", $value: "{color.neutral.2}" }, - name: "--ds-color-neutral-background-subtle", + name: "--ds-color-neutral-background-tinted", attributes: {}, path: [ "color", "neutral", - "background-subtle" + "background-tinted" ], - key: "{color.neutral.background-subtle}" + key: "{color.neutral.background-tinted}" }, { $type: "color", @@ -318,14 +318,14 @@ export const color = [ $type: "color", $value: "{color.neutral.3}" }, - name: "--ds-color-neutral-surface-default", + name: "--ds-color-neutral-surface-tinted", attributes: {}, path: [ "color", "neutral", - "surface-default" + "surface-tinted" ], - key: "{color.neutral.surface-default}" + key: "{color.neutral.surface-tinted}" }, { $type: "color", @@ -516,14 +516,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-1}" }, - name: "--ds-color-neutral-contrast-default", + name: "--ds-color-neutral-base-contrast-default", attributes: {}, path: [ "color", "neutral", - "contrast-default" + "base-contrast-default" ], - key: "{color.neutral.contrast-default}" + key: "{color.neutral.base-contrast-default}" }, { $type: "color", @@ -534,14 +534,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-2}" }, - name: "--ds-color-neutral-contrast-subtle", + name: "--ds-color-neutral-base-contrast-subtle", attributes: {}, path: [ "color", "neutral", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.neutral.contrast-subtle}" + key: "{color.neutral.base-contrast-subtle}" }, { $type: "color", @@ -570,14 +570,14 @@ export const color = [ $type: "color", $value: "{color.brand1.2}" }, - name: "--ds-color-brand1-background-subtle", + name: "--ds-color-brand1-background-tinted", attributes: {}, path: [ "color", "brand1", - "background-subtle" + "background-tinted" ], - key: "{color.brand1.background-subtle}" + key: "{color.brand1.background-tinted}" }, { $type: "color", @@ -588,14 +588,14 @@ export const color = [ $type: "color", $value: "{color.brand1.3}" }, - name: "--ds-color-brand1-surface-default", + name: "--ds-color-brand1-surface-tinted", attributes: {}, path: [ "color", "brand1", - "surface-default" + "surface-tinted" ], - key: "{color.brand1.surface-default}" + key: "{color.brand1.surface-tinted}" }, { $type: "color", @@ -786,14 +786,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-1}" }, - name: "--ds-color-brand1-contrast-default", + name: "--ds-color-brand1-base-contrast-default", attributes: {}, path: [ "color", "brand1", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand1.contrast-default}" + key: "{color.brand1.base-contrast-default}" }, { $type: "color", @@ -804,14 +804,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-2}" }, - name: "--ds-color-brand1-contrast-subtle", + name: "--ds-color-brand1-base-contrast-subtle", attributes: {}, path: [ "color", "brand1", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand1.contrast-subtle}" + key: "{color.brand1.base-contrast-subtle}" }, { $type: "color", @@ -840,14 +840,14 @@ export const color = [ $type: "color", $value: "{color.brand2.2}" }, - name: "--ds-color-brand2-background-subtle", + name: "--ds-color-brand2-background-tinted", attributes: {}, path: [ "color", "brand2", - "background-subtle" + "background-tinted" ], - key: "{color.brand2.background-subtle}" + key: "{color.brand2.background-tinted}" }, { $type: "color", @@ -858,14 +858,14 @@ export const color = [ $type: "color", $value: "{color.brand2.3}" }, - name: "--ds-color-brand2-surface-default", + name: "--ds-color-brand2-surface-tinted", attributes: {}, path: [ "color", "brand2", - "surface-default" + "surface-tinted" ], - key: "{color.brand2.surface-default}" + key: "{color.brand2.surface-tinted}" }, { $type: "color", @@ -1056,14 +1056,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-1}" }, - name: "--ds-color-brand2-contrast-default", + name: "--ds-color-brand2-base-contrast-default", attributes: {}, path: [ "color", "brand2", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand2.contrast-default}" + key: "{color.brand2.base-contrast-default}" }, { $type: "color", @@ -1074,14 +1074,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-2}" }, - name: "--ds-color-brand2-contrast-subtle", + name: "--ds-color-brand2-base-contrast-subtle", attributes: {}, path: [ "color", "brand2", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand2.contrast-subtle}" + key: "{color.brand2.base-contrast-subtle}" }, { $type: "color", @@ -1110,14 +1110,14 @@ export const color = [ $type: "color", $value: "{color.brand3.2}" }, - name: "--ds-color-brand3-background-subtle", + name: "--ds-color-brand3-background-tinted", attributes: {}, path: [ "color", "brand3", - "background-subtle" + "background-tinted" ], - key: "{color.brand3.background-subtle}" + key: "{color.brand3.background-tinted}" }, { $type: "color", @@ -1128,14 +1128,14 @@ export const color = [ $type: "color", $value: "{color.brand3.3}" }, - name: "--ds-color-brand3-surface-default", + name: "--ds-color-brand3-surface-tinted", attributes: {}, path: [ "color", "brand3", - "surface-default" + "surface-tinted" ], - key: "{color.brand3.surface-default}" + key: "{color.brand3.surface-tinted}" }, { $type: "color", @@ -1326,14 +1326,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-1}" }, - name: "--ds-color-brand3-contrast-default", + name: "--ds-color-brand3-base-contrast-default", attributes: {}, path: [ "color", "brand3", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand3.contrast-default}" + key: "{color.brand3.base-contrast-default}" }, { $type: "color", @@ -1344,14 +1344,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-2}" }, - name: "--ds-color-brand3-contrast-subtle", + name: "--ds-color-brand3-base-contrast-subtle", attributes: {}, path: [ "color", "brand3", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand3.contrast-subtle}" + key: "{color.brand3.base-contrast-subtle}" }, { $type: "color", @@ -1380,14 +1380,14 @@ export const color = [ $type: "color", $value: "{global.green.2}" }, - name: "--ds-color-success-background-subtle", + name: "--ds-color-success-background-tinted", attributes: {}, path: [ "color", "success", - "background-subtle" + "background-tinted" ], - key: "{color.success.background-subtle}" + key: "{color.success.background-tinted}" }, { $type: "color", @@ -1398,14 +1398,14 @@ export const color = [ $type: "color", $value: "{global.green.3}" }, - name: "--ds-color-success-surface-default", + name: "--ds-color-success-surface-tinted", attributes: {}, path: [ "color", "success", - "surface-default" + "surface-tinted" ], - key: "{color.success.surface-default}" + key: "{color.success.surface-tinted}" }, { $type: "color", @@ -1596,14 +1596,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-1}" }, - name: "--ds-color-success-contrast-default", + name: "--ds-color-success-base-contrast-default", attributes: {}, path: [ "color", "success", - "contrast-default" + "base-contrast-default" ], - key: "{color.success.contrast-default}" + key: "{color.success.base-contrast-default}" }, { $type: "color", @@ -1614,14 +1614,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-2}" }, - name: "--ds-color-success-contrast-subtle", + name: "--ds-color-success-base-contrast-subtle", attributes: {}, path: [ "color", "success", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.success.contrast-subtle}" + key: "{color.success.base-contrast-subtle}" }, { $type: "color", @@ -1650,14 +1650,14 @@ export const color = [ $type: "color", $value: "{global.red.2}" }, - name: "--ds-color-danger-background-subtle", + name: "--ds-color-danger-background-tinted", attributes: {}, path: [ "color", "danger", - "background-subtle" + "background-tinted" ], - key: "{color.danger.background-subtle}" + key: "{color.danger.background-tinted}" }, { $type: "color", @@ -1668,14 +1668,14 @@ export const color = [ $type: "color", $value: "{global.red.3}" }, - name: "--ds-color-danger-surface-default", + name: "--ds-color-danger-surface-tinted", attributes: {}, path: [ "color", "danger", - "surface-default" + "surface-tinted" ], - key: "{color.danger.surface-default}" + key: "{color.danger.surface-tinted}" }, { $type: "color", @@ -1866,14 +1866,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-1}" }, - name: "--ds-color-danger-contrast-default", + name: "--ds-color-danger-base-contrast-default", attributes: {}, path: [ "color", "danger", - "contrast-default" + "base-contrast-default" ], - key: "{color.danger.contrast-default}" + key: "{color.danger.base-contrast-default}" }, { $type: "color", @@ -1884,14 +1884,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-2}" }, - name: "--ds-color-danger-contrast-subtle", + name: "--ds-color-danger-base-contrast-subtle", attributes: {}, path: [ "color", "danger", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.danger.contrast-subtle}" + key: "{color.danger.base-contrast-subtle}" }, { $type: "color", @@ -1920,14 +1920,14 @@ export const color = [ $type: "color", $value: "{global.blue.2}" }, - name: "--ds-color-info-background-subtle", + name: "--ds-color-info-background-tinted", attributes: {}, path: [ "color", "info", - "background-subtle" + "background-tinted" ], - key: "{color.info.background-subtle}" + key: "{color.info.background-tinted}" }, { $type: "color", @@ -1938,14 +1938,14 @@ export const color = [ $type: "color", $value: "{global.blue.3}" }, - name: "--ds-color-info-surface-default", + name: "--ds-color-info-surface-tinted", attributes: {}, path: [ "color", "info", - "surface-default" + "surface-tinted" ], - key: "{color.info.surface-default}" + key: "{color.info.surface-tinted}" }, { $type: "color", @@ -2136,14 +2136,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-1}" }, - name: "--ds-color-info-contrast-default", + name: "--ds-color-info-base-contrast-default", attributes: {}, path: [ "color", "info", - "contrast-default" + "base-contrast-default" ], - key: "{color.info.contrast-default}" + key: "{color.info.base-contrast-default}" }, { $type: "color", @@ -2154,14 +2154,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-2}" }, - name: "--ds-color-info-contrast-subtle", + name: "--ds-color-info-base-contrast-subtle", attributes: {}, path: [ "color", "info", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.info.contrast-subtle}" + key: "{color.info.base-contrast-subtle}" }, { $type: "color", @@ -2190,14 +2190,14 @@ export const color = [ $type: "color", $value: "{global.yellow.2}" }, - name: "--ds-color-warning-background-subtle", + name: "--ds-color-warning-background-tinted", attributes: {}, path: [ "color", "warning", - "background-subtle" + "background-tinted" ], - key: "{color.warning.background-subtle}" + key: "{color.warning.background-tinted}" }, { $type: "color", @@ -2208,14 +2208,14 @@ export const color = [ $type: "color", $value: "{global.yellow.3}" }, - name: "--ds-color-warning-surface-default", + name: "--ds-color-warning-surface-tinted", attributes: {}, path: [ "color", "warning", - "surface-default" + "surface-tinted" ], - key: "{color.warning.surface-default}" + key: "{color.warning.surface-tinted}" }, { $type: "color", @@ -2406,14 +2406,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-1}" }, - name: "--ds-color-warning-contrast-default", + name: "--ds-color-warning-base-contrast-default", attributes: {}, path: [ "color", "warning", - "contrast-default" + "base-contrast-default" ], - key: "{color.warning.contrast-default}" + key: "{color.warning.base-contrast-default}" }, { $type: "color", @@ -2424,14 +2424,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-2}" }, - name: "--ds-color-warning-contrast-subtle", + name: "--ds-color-warning-base-contrast-subtle", attributes: {}, path: [ "color", "warning", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.warning.contrast-subtle}" + key: "{color.warning.base-contrast-subtle}" }, { $type: "color", diff --git a/apps/storefront/tokens/portal/dark.ts b/apps/storefront/tokens/portal/dark.ts index a87cda4030..2b7f38b4b6 100644 --- a/apps/storefront/tokens/portal/dark.ts +++ b/apps/storefront/tokens/portal/dark.ts @@ -30,14 +30,14 @@ export const color = [ $type: "color", $value: "{color.accent.2}" }, - name: "--ds-color-accent-background-subtle", + name: "--ds-color-accent-background-tinted", attributes: {}, path: [ "color", "accent", - "background-subtle" + "background-tinted" ], - key: "{color.accent.background-subtle}" + key: "{color.accent.background-tinted}" }, { $type: "color", @@ -48,14 +48,14 @@ export const color = [ $type: "color", $value: "{color.accent.3}" }, - name: "--ds-color-accent-surface-default", + name: "--ds-color-accent-surface-tinted", attributes: {}, path: [ "color", "accent", - "surface-default" + "surface-tinted" ], - key: "{color.accent.surface-default}" + key: "{color.accent.surface-tinted}" }, { $type: "color", @@ -246,14 +246,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-1}" }, - name: "--ds-color-accent-contrast-default", + name: "--ds-color-accent-base-contrast-default", attributes: {}, path: [ "color", "accent", - "contrast-default" + "base-contrast-default" ], - key: "{color.accent.contrast-default}" + key: "{color.accent.base-contrast-default}" }, { $type: "color", @@ -264,14 +264,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-2}" }, - name: "--ds-color-accent-contrast-subtle", + name: "--ds-color-accent-base-contrast-subtle", attributes: {}, path: [ "color", "accent", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.accent.contrast-subtle}" + key: "{color.accent.base-contrast-subtle}" }, { $type: "color", @@ -300,14 +300,14 @@ export const color = [ $type: "color", $value: "{color.neutral.2}" }, - name: "--ds-color-neutral-background-subtle", + name: "--ds-color-neutral-background-tinted", attributes: {}, path: [ "color", "neutral", - "background-subtle" + "background-tinted" ], - key: "{color.neutral.background-subtle}" + key: "{color.neutral.background-tinted}" }, { $type: "color", @@ -318,14 +318,14 @@ export const color = [ $type: "color", $value: "{color.neutral.3}" }, - name: "--ds-color-neutral-surface-default", + name: "--ds-color-neutral-surface-tinted", attributes: {}, path: [ "color", "neutral", - "surface-default" + "surface-tinted" ], - key: "{color.neutral.surface-default}" + key: "{color.neutral.surface-tinted}" }, { $type: "color", @@ -516,14 +516,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-1}" }, - name: "--ds-color-neutral-contrast-default", + name: "--ds-color-neutral-base-contrast-default", attributes: {}, path: [ "color", "neutral", - "contrast-default" + "base-contrast-default" ], - key: "{color.neutral.contrast-default}" + key: "{color.neutral.base-contrast-default}" }, { $type: "color", @@ -534,14 +534,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-2}" }, - name: "--ds-color-neutral-contrast-subtle", + name: "--ds-color-neutral-base-contrast-subtle", attributes: {}, path: [ "color", "neutral", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.neutral.contrast-subtle}" + key: "{color.neutral.base-contrast-subtle}" }, { $type: "color", @@ -570,14 +570,14 @@ export const color = [ $type: "color", $value: "{color.brand1.2}" }, - name: "--ds-color-brand1-background-subtle", + name: "--ds-color-brand1-background-tinted", attributes: {}, path: [ "color", "brand1", - "background-subtle" + "background-tinted" ], - key: "{color.brand1.background-subtle}" + key: "{color.brand1.background-tinted}" }, { $type: "color", @@ -588,14 +588,14 @@ export const color = [ $type: "color", $value: "{color.brand1.3}" }, - name: "--ds-color-brand1-surface-default", + name: "--ds-color-brand1-surface-tinted", attributes: {}, path: [ "color", "brand1", - "surface-default" + "surface-tinted" ], - key: "{color.brand1.surface-default}" + key: "{color.brand1.surface-tinted}" }, { $type: "color", @@ -786,14 +786,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-1}" }, - name: "--ds-color-brand1-contrast-default", + name: "--ds-color-brand1-base-contrast-default", attributes: {}, path: [ "color", "brand1", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand1.contrast-default}" + key: "{color.brand1.base-contrast-default}" }, { $type: "color", @@ -804,14 +804,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-2}" }, - name: "--ds-color-brand1-contrast-subtle", + name: "--ds-color-brand1-base-contrast-subtle", attributes: {}, path: [ "color", "brand1", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand1.contrast-subtle}" + key: "{color.brand1.base-contrast-subtle}" }, { $type: "color", @@ -840,14 +840,14 @@ export const color = [ $type: "color", $value: "{color.brand2.2}" }, - name: "--ds-color-brand2-background-subtle", + name: "--ds-color-brand2-background-tinted", attributes: {}, path: [ "color", "brand2", - "background-subtle" + "background-tinted" ], - key: "{color.brand2.background-subtle}" + key: "{color.brand2.background-tinted}" }, { $type: "color", @@ -858,14 +858,14 @@ export const color = [ $type: "color", $value: "{color.brand2.3}" }, - name: "--ds-color-brand2-surface-default", + name: "--ds-color-brand2-surface-tinted", attributes: {}, path: [ "color", "brand2", - "surface-default" + "surface-tinted" ], - key: "{color.brand2.surface-default}" + key: "{color.brand2.surface-tinted}" }, { $type: "color", @@ -1056,14 +1056,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-1}" }, - name: "--ds-color-brand2-contrast-default", + name: "--ds-color-brand2-base-contrast-default", attributes: {}, path: [ "color", "brand2", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand2.contrast-default}" + key: "{color.brand2.base-contrast-default}" }, { $type: "color", @@ -1074,14 +1074,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-2}" }, - name: "--ds-color-brand2-contrast-subtle", + name: "--ds-color-brand2-base-contrast-subtle", attributes: {}, path: [ "color", "brand2", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand2.contrast-subtle}" + key: "{color.brand2.base-contrast-subtle}" }, { $type: "color", @@ -1110,14 +1110,14 @@ export const color = [ $type: "color", $value: "{color.brand3.2}" }, - name: "--ds-color-brand3-background-subtle", + name: "--ds-color-brand3-background-tinted", attributes: {}, path: [ "color", "brand3", - "background-subtle" + "background-tinted" ], - key: "{color.brand3.background-subtle}" + key: "{color.brand3.background-tinted}" }, { $type: "color", @@ -1128,14 +1128,14 @@ export const color = [ $type: "color", $value: "{color.brand3.3}" }, - name: "--ds-color-brand3-surface-default", + name: "--ds-color-brand3-surface-tinted", attributes: {}, path: [ "color", "brand3", - "surface-default" + "surface-tinted" ], - key: "{color.brand3.surface-default}" + key: "{color.brand3.surface-tinted}" }, { $type: "color", @@ -1326,14 +1326,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-1}" }, - name: "--ds-color-brand3-contrast-default", + name: "--ds-color-brand3-base-contrast-default", attributes: {}, path: [ "color", "brand3", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand3.contrast-default}" + key: "{color.brand3.base-contrast-default}" }, { $type: "color", @@ -1344,14 +1344,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-2}" }, - name: "--ds-color-brand3-contrast-subtle", + name: "--ds-color-brand3-base-contrast-subtle", attributes: {}, path: [ "color", "brand3", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand3.contrast-subtle}" + key: "{color.brand3.base-contrast-subtle}" }, { $type: "color", @@ -1380,14 +1380,14 @@ export const color = [ $type: "color", $value: "{global.green.2}" }, - name: "--ds-color-success-background-subtle", + name: "--ds-color-success-background-tinted", attributes: {}, path: [ "color", "success", - "background-subtle" + "background-tinted" ], - key: "{color.success.background-subtle}" + key: "{color.success.background-tinted}" }, { $type: "color", @@ -1398,14 +1398,14 @@ export const color = [ $type: "color", $value: "{global.green.3}" }, - name: "--ds-color-success-surface-default", + name: "--ds-color-success-surface-tinted", attributes: {}, path: [ "color", "success", - "surface-default" + "surface-tinted" ], - key: "{color.success.surface-default}" + key: "{color.success.surface-tinted}" }, { $type: "color", @@ -1596,14 +1596,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-1}" }, - name: "--ds-color-success-contrast-default", + name: "--ds-color-success-base-contrast-default", attributes: {}, path: [ "color", "success", - "contrast-default" + "base-contrast-default" ], - key: "{color.success.contrast-default}" + key: "{color.success.base-contrast-default}" }, { $type: "color", @@ -1614,14 +1614,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-2}" }, - name: "--ds-color-success-contrast-subtle", + name: "--ds-color-success-base-contrast-subtle", attributes: {}, path: [ "color", "success", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.success.contrast-subtle}" + key: "{color.success.base-contrast-subtle}" }, { $type: "color", @@ -1650,14 +1650,14 @@ export const color = [ $type: "color", $value: "{global.red.2}" }, - name: "--ds-color-danger-background-subtle", + name: "--ds-color-danger-background-tinted", attributes: {}, path: [ "color", "danger", - "background-subtle" + "background-tinted" ], - key: "{color.danger.background-subtle}" + key: "{color.danger.background-tinted}" }, { $type: "color", @@ -1668,14 +1668,14 @@ export const color = [ $type: "color", $value: "{global.red.3}" }, - name: "--ds-color-danger-surface-default", + name: "--ds-color-danger-surface-tinted", attributes: {}, path: [ "color", "danger", - "surface-default" + "surface-tinted" ], - key: "{color.danger.surface-default}" + key: "{color.danger.surface-tinted}" }, { $type: "color", @@ -1866,14 +1866,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-1}" }, - name: "--ds-color-danger-contrast-default", + name: "--ds-color-danger-base-contrast-default", attributes: {}, path: [ "color", "danger", - "contrast-default" + "base-contrast-default" ], - key: "{color.danger.contrast-default}" + key: "{color.danger.base-contrast-default}" }, { $type: "color", @@ -1884,14 +1884,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-2}" }, - name: "--ds-color-danger-contrast-subtle", + name: "--ds-color-danger-base-contrast-subtle", attributes: {}, path: [ "color", "danger", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.danger.contrast-subtle}" + key: "{color.danger.base-contrast-subtle}" }, { $type: "color", @@ -1920,14 +1920,14 @@ export const color = [ $type: "color", $value: "{global.blue.2}" }, - name: "--ds-color-info-background-subtle", + name: "--ds-color-info-background-tinted", attributes: {}, path: [ "color", "info", - "background-subtle" + "background-tinted" ], - key: "{color.info.background-subtle}" + key: "{color.info.background-tinted}" }, { $type: "color", @@ -1938,14 +1938,14 @@ export const color = [ $type: "color", $value: "{global.blue.3}" }, - name: "--ds-color-info-surface-default", + name: "--ds-color-info-surface-tinted", attributes: {}, path: [ "color", "info", - "surface-default" + "surface-tinted" ], - key: "{color.info.surface-default}" + key: "{color.info.surface-tinted}" }, { $type: "color", @@ -2136,14 +2136,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-1}" }, - name: "--ds-color-info-contrast-default", + name: "--ds-color-info-base-contrast-default", attributes: {}, path: [ "color", "info", - "contrast-default" + "base-contrast-default" ], - key: "{color.info.contrast-default}" + key: "{color.info.base-contrast-default}" }, { $type: "color", @@ -2154,14 +2154,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-2}" }, - name: "--ds-color-info-contrast-subtle", + name: "--ds-color-info-base-contrast-subtle", attributes: {}, path: [ "color", "info", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.info.contrast-subtle}" + key: "{color.info.base-contrast-subtle}" }, { $type: "color", @@ -2190,14 +2190,14 @@ export const color = [ $type: "color", $value: "{global.yellow.2}" }, - name: "--ds-color-warning-background-subtle", + name: "--ds-color-warning-background-tinted", attributes: {}, path: [ "color", "warning", - "background-subtle" + "background-tinted" ], - key: "{color.warning.background-subtle}" + key: "{color.warning.background-tinted}" }, { $type: "color", @@ -2208,14 +2208,14 @@ export const color = [ $type: "color", $value: "{global.yellow.3}" }, - name: "--ds-color-warning-surface-default", + name: "--ds-color-warning-surface-tinted", attributes: {}, path: [ "color", "warning", - "surface-default" + "surface-tinted" ], - key: "{color.warning.surface-default}" + key: "{color.warning.surface-tinted}" }, { $type: "color", @@ -2406,14 +2406,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-1}" }, - name: "--ds-color-warning-contrast-default", + name: "--ds-color-warning-base-contrast-default", attributes: {}, path: [ "color", "warning", - "contrast-default" + "base-contrast-default" ], - key: "{color.warning.contrast-default}" + key: "{color.warning.base-contrast-default}" }, { $type: "color", @@ -2424,14 +2424,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-2}" }, - name: "--ds-color-warning-contrast-subtle", + name: "--ds-color-warning-base-contrast-subtle", attributes: {}, path: [ "color", "warning", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.warning.contrast-subtle}" + key: "{color.warning.base-contrast-subtle}" }, { $type: "color", diff --git a/apps/storefront/tokens/portal/light.ts b/apps/storefront/tokens/portal/light.ts index bdb02743a5..cb7f756850 100644 --- a/apps/storefront/tokens/portal/light.ts +++ b/apps/storefront/tokens/portal/light.ts @@ -30,14 +30,14 @@ export const color = [ $type: "color", $value: "{color.accent.2}" }, - name: "--ds-color-accent-background-subtle", + name: "--ds-color-accent-background-tinted", attributes: {}, path: [ "color", "accent", - "background-subtle" + "background-tinted" ], - key: "{color.accent.background-subtle}" + key: "{color.accent.background-tinted}" }, { $type: "color", @@ -48,14 +48,14 @@ export const color = [ $type: "color", $value: "{color.accent.3}" }, - name: "--ds-color-accent-surface-default", + name: "--ds-color-accent-surface-tinted", attributes: {}, path: [ "color", "accent", - "surface-default" + "surface-tinted" ], - key: "{color.accent.surface-default}" + key: "{color.accent.surface-tinted}" }, { $type: "color", @@ -246,14 +246,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-1}" }, - name: "--ds-color-accent-contrast-default", + name: "--ds-color-accent-base-contrast-default", attributes: {}, path: [ "color", "accent", - "contrast-default" + "base-contrast-default" ], - key: "{color.accent.contrast-default}" + key: "{color.accent.base-contrast-default}" }, { $type: "color", @@ -264,14 +264,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-2}" }, - name: "--ds-color-accent-contrast-subtle", + name: "--ds-color-accent-base-contrast-subtle", attributes: {}, path: [ "color", "accent", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.accent.contrast-subtle}" + key: "{color.accent.base-contrast-subtle}" }, { $type: "color", @@ -300,14 +300,14 @@ export const color = [ $type: "color", $value: "{color.neutral.2}" }, - name: "--ds-color-neutral-background-subtle", + name: "--ds-color-neutral-background-tinted", attributes: {}, path: [ "color", "neutral", - "background-subtle" + "background-tinted" ], - key: "{color.neutral.background-subtle}" + key: "{color.neutral.background-tinted}" }, { $type: "color", @@ -318,14 +318,14 @@ export const color = [ $type: "color", $value: "{color.neutral.3}" }, - name: "--ds-color-neutral-surface-default", + name: "--ds-color-neutral-surface-tinted", attributes: {}, path: [ "color", "neutral", - "surface-default" + "surface-tinted" ], - key: "{color.neutral.surface-default}" + key: "{color.neutral.surface-tinted}" }, { $type: "color", @@ -516,14 +516,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-1}" }, - name: "--ds-color-neutral-contrast-default", + name: "--ds-color-neutral-base-contrast-default", attributes: {}, path: [ "color", "neutral", - "contrast-default" + "base-contrast-default" ], - key: "{color.neutral.contrast-default}" + key: "{color.neutral.base-contrast-default}" }, { $type: "color", @@ -534,14 +534,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-2}" }, - name: "--ds-color-neutral-contrast-subtle", + name: "--ds-color-neutral-base-contrast-subtle", attributes: {}, path: [ "color", "neutral", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.neutral.contrast-subtle}" + key: "{color.neutral.base-contrast-subtle}" }, { $type: "color", @@ -570,14 +570,14 @@ export const color = [ $type: "color", $value: "{color.brand1.2}" }, - name: "--ds-color-brand1-background-subtle", + name: "--ds-color-brand1-background-tinted", attributes: {}, path: [ "color", "brand1", - "background-subtle" + "background-tinted" ], - key: "{color.brand1.background-subtle}" + key: "{color.brand1.background-tinted}" }, { $type: "color", @@ -588,14 +588,14 @@ export const color = [ $type: "color", $value: "{color.brand1.3}" }, - name: "--ds-color-brand1-surface-default", + name: "--ds-color-brand1-surface-tinted", attributes: {}, path: [ "color", "brand1", - "surface-default" + "surface-tinted" ], - key: "{color.brand1.surface-default}" + key: "{color.brand1.surface-tinted}" }, { $type: "color", @@ -786,14 +786,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-1}" }, - name: "--ds-color-brand1-contrast-default", + name: "--ds-color-brand1-base-contrast-default", attributes: {}, path: [ "color", "brand1", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand1.contrast-default}" + key: "{color.brand1.base-contrast-default}" }, { $type: "color", @@ -804,14 +804,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-2}" }, - name: "--ds-color-brand1-contrast-subtle", + name: "--ds-color-brand1-base-contrast-subtle", attributes: {}, path: [ "color", "brand1", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand1.contrast-subtle}" + key: "{color.brand1.base-contrast-subtle}" }, { $type: "color", @@ -840,14 +840,14 @@ export const color = [ $type: "color", $value: "{color.brand2.2}" }, - name: "--ds-color-brand2-background-subtle", + name: "--ds-color-brand2-background-tinted", attributes: {}, path: [ "color", "brand2", - "background-subtle" + "background-tinted" ], - key: "{color.brand2.background-subtle}" + key: "{color.brand2.background-tinted}" }, { $type: "color", @@ -858,14 +858,14 @@ export const color = [ $type: "color", $value: "{color.brand2.3}" }, - name: "--ds-color-brand2-surface-default", + name: "--ds-color-brand2-surface-tinted", attributes: {}, path: [ "color", "brand2", - "surface-default" + "surface-tinted" ], - key: "{color.brand2.surface-default}" + key: "{color.brand2.surface-tinted}" }, { $type: "color", @@ -1056,14 +1056,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-1}" }, - name: "--ds-color-brand2-contrast-default", + name: "--ds-color-brand2-base-contrast-default", attributes: {}, path: [ "color", "brand2", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand2.contrast-default}" + key: "{color.brand2.base-contrast-default}" }, { $type: "color", @@ -1074,14 +1074,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-2}" }, - name: "--ds-color-brand2-contrast-subtle", + name: "--ds-color-brand2-base-contrast-subtle", attributes: {}, path: [ "color", "brand2", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand2.contrast-subtle}" + key: "{color.brand2.base-contrast-subtle}" }, { $type: "color", @@ -1110,14 +1110,14 @@ export const color = [ $type: "color", $value: "{color.brand3.2}" }, - name: "--ds-color-brand3-background-subtle", + name: "--ds-color-brand3-background-tinted", attributes: {}, path: [ "color", "brand3", - "background-subtle" + "background-tinted" ], - key: "{color.brand3.background-subtle}" + key: "{color.brand3.background-tinted}" }, { $type: "color", @@ -1128,14 +1128,14 @@ export const color = [ $type: "color", $value: "{color.brand3.3}" }, - name: "--ds-color-brand3-surface-default", + name: "--ds-color-brand3-surface-tinted", attributes: {}, path: [ "color", "brand3", - "surface-default" + "surface-tinted" ], - key: "{color.brand3.surface-default}" + key: "{color.brand3.surface-tinted}" }, { $type: "color", @@ -1326,14 +1326,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-1}" }, - name: "--ds-color-brand3-contrast-default", + name: "--ds-color-brand3-base-contrast-default", attributes: {}, path: [ "color", "brand3", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand3.contrast-default}" + key: "{color.brand3.base-contrast-default}" }, { $type: "color", @@ -1344,14 +1344,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-2}" }, - name: "--ds-color-brand3-contrast-subtle", + name: "--ds-color-brand3-base-contrast-subtle", attributes: {}, path: [ "color", "brand3", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand3.contrast-subtle}" + key: "{color.brand3.base-contrast-subtle}" }, { $type: "color", @@ -1380,14 +1380,14 @@ export const color = [ $type: "color", $value: "{global.green.2}" }, - name: "--ds-color-success-background-subtle", + name: "--ds-color-success-background-tinted", attributes: {}, path: [ "color", "success", - "background-subtle" + "background-tinted" ], - key: "{color.success.background-subtle}" + key: "{color.success.background-tinted}" }, { $type: "color", @@ -1398,14 +1398,14 @@ export const color = [ $type: "color", $value: "{global.green.3}" }, - name: "--ds-color-success-surface-default", + name: "--ds-color-success-surface-tinted", attributes: {}, path: [ "color", "success", - "surface-default" + "surface-tinted" ], - key: "{color.success.surface-default}" + key: "{color.success.surface-tinted}" }, { $type: "color", @@ -1596,14 +1596,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-1}" }, - name: "--ds-color-success-contrast-default", + name: "--ds-color-success-base-contrast-default", attributes: {}, path: [ "color", "success", - "contrast-default" + "base-contrast-default" ], - key: "{color.success.contrast-default}" + key: "{color.success.base-contrast-default}" }, { $type: "color", @@ -1614,14 +1614,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-2}" }, - name: "--ds-color-success-contrast-subtle", + name: "--ds-color-success-base-contrast-subtle", attributes: {}, path: [ "color", "success", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.success.contrast-subtle}" + key: "{color.success.base-contrast-subtle}" }, { $type: "color", @@ -1650,14 +1650,14 @@ export const color = [ $type: "color", $value: "{global.red.2}" }, - name: "--ds-color-danger-background-subtle", + name: "--ds-color-danger-background-tinted", attributes: {}, path: [ "color", "danger", - "background-subtle" + "background-tinted" ], - key: "{color.danger.background-subtle}" + key: "{color.danger.background-tinted}" }, { $type: "color", @@ -1668,14 +1668,14 @@ export const color = [ $type: "color", $value: "{global.red.3}" }, - name: "--ds-color-danger-surface-default", + name: "--ds-color-danger-surface-tinted", attributes: {}, path: [ "color", "danger", - "surface-default" + "surface-tinted" ], - key: "{color.danger.surface-default}" + key: "{color.danger.surface-tinted}" }, { $type: "color", @@ -1866,14 +1866,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-1}" }, - name: "--ds-color-danger-contrast-default", + name: "--ds-color-danger-base-contrast-default", attributes: {}, path: [ "color", "danger", - "contrast-default" + "base-contrast-default" ], - key: "{color.danger.contrast-default}" + key: "{color.danger.base-contrast-default}" }, { $type: "color", @@ -1884,14 +1884,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-2}" }, - name: "--ds-color-danger-contrast-subtle", + name: "--ds-color-danger-base-contrast-subtle", attributes: {}, path: [ "color", "danger", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.danger.contrast-subtle}" + key: "{color.danger.base-contrast-subtle}" }, { $type: "color", @@ -1920,14 +1920,14 @@ export const color = [ $type: "color", $value: "{global.blue.2}" }, - name: "--ds-color-info-background-subtle", + name: "--ds-color-info-background-tinted", attributes: {}, path: [ "color", "info", - "background-subtle" + "background-tinted" ], - key: "{color.info.background-subtle}" + key: "{color.info.background-tinted}" }, { $type: "color", @@ -1938,14 +1938,14 @@ export const color = [ $type: "color", $value: "{global.blue.3}" }, - name: "--ds-color-info-surface-default", + name: "--ds-color-info-surface-tinted", attributes: {}, path: [ "color", "info", - "surface-default" + "surface-tinted" ], - key: "{color.info.surface-default}" + key: "{color.info.surface-tinted}" }, { $type: "color", @@ -2136,14 +2136,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-1}" }, - name: "--ds-color-info-contrast-default", + name: "--ds-color-info-base-contrast-default", attributes: {}, path: [ "color", "info", - "contrast-default" + "base-contrast-default" ], - key: "{color.info.contrast-default}" + key: "{color.info.base-contrast-default}" }, { $type: "color", @@ -2154,14 +2154,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-2}" }, - name: "--ds-color-info-contrast-subtle", + name: "--ds-color-info-base-contrast-subtle", attributes: {}, path: [ "color", "info", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.info.contrast-subtle}" + key: "{color.info.base-contrast-subtle}" }, { $type: "color", @@ -2190,14 +2190,14 @@ export const color = [ $type: "color", $value: "{global.yellow.2}" }, - name: "--ds-color-warning-background-subtle", + name: "--ds-color-warning-background-tinted", attributes: {}, path: [ "color", "warning", - "background-subtle" + "background-tinted" ], - key: "{color.warning.background-subtle}" + key: "{color.warning.background-tinted}" }, { $type: "color", @@ -2208,14 +2208,14 @@ export const color = [ $type: "color", $value: "{global.yellow.3}" }, - name: "--ds-color-warning-surface-default", + name: "--ds-color-warning-surface-tinted", attributes: {}, path: [ "color", "warning", - "surface-default" + "surface-tinted" ], - key: "{color.warning.surface-default}" + key: "{color.warning.surface-tinted}" }, { $type: "color", @@ -2406,14 +2406,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-1}" }, - name: "--ds-color-warning-contrast-default", + name: "--ds-color-warning-base-contrast-default", attributes: {}, path: [ "color", "warning", - "contrast-default" + "base-contrast-default" ], - key: "{color.warning.contrast-default}" + key: "{color.warning.base-contrast-default}" }, { $type: "color", @@ -2424,14 +2424,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-2}" }, - name: "--ds-color-warning-contrast-subtle", + name: "--ds-color-warning-base-contrast-subtle", attributes: {}, path: [ "color", "warning", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.warning.contrast-subtle}" + key: "{color.warning.base-contrast-subtle}" }, { $type: "color", diff --git a/apps/storefront/tokens/uutilsynet/dark.ts b/apps/storefront/tokens/uutilsynet/dark.ts index 104e1f161b..c5d42af793 100644 --- a/apps/storefront/tokens/uutilsynet/dark.ts +++ b/apps/storefront/tokens/uutilsynet/dark.ts @@ -30,14 +30,14 @@ export const color = [ $type: "color", $value: "{color.accent.2}" }, - name: "--ds-color-accent-background-subtle", + name: "--ds-color-accent-background-tinted", attributes: {}, path: [ "color", "accent", - "background-subtle" + "background-tinted" ], - key: "{color.accent.background-subtle}" + key: "{color.accent.background-tinted}" }, { $type: "color", @@ -48,14 +48,14 @@ export const color = [ $type: "color", $value: "{color.accent.3}" }, - name: "--ds-color-accent-surface-default", + name: "--ds-color-accent-surface-tinted", attributes: {}, path: [ "color", "accent", - "surface-default" + "surface-tinted" ], - key: "{color.accent.surface-default}" + key: "{color.accent.surface-tinted}" }, { $type: "color", @@ -246,14 +246,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-1}" }, - name: "--ds-color-accent-contrast-default", + name: "--ds-color-accent-base-contrast-default", attributes: {}, path: [ "color", "accent", - "contrast-default" + "base-contrast-default" ], - key: "{color.accent.contrast-default}" + key: "{color.accent.base-contrast-default}" }, { $type: "color", @@ -264,14 +264,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-2}" }, - name: "--ds-color-accent-contrast-subtle", + name: "--ds-color-accent-base-contrast-subtle", attributes: {}, path: [ "color", "accent", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.accent.contrast-subtle}" + key: "{color.accent.base-contrast-subtle}" }, { $type: "color", @@ -300,14 +300,14 @@ export const color = [ $type: "color", $value: "{color.neutral.2}" }, - name: "--ds-color-neutral-background-subtle", + name: "--ds-color-neutral-background-tinted", attributes: {}, path: [ "color", "neutral", - "background-subtle" + "background-tinted" ], - key: "{color.neutral.background-subtle}" + key: "{color.neutral.background-tinted}" }, { $type: "color", @@ -318,14 +318,14 @@ export const color = [ $type: "color", $value: "{color.neutral.3}" }, - name: "--ds-color-neutral-surface-default", + name: "--ds-color-neutral-surface-tinted", attributes: {}, path: [ "color", "neutral", - "surface-default" + "surface-tinted" ], - key: "{color.neutral.surface-default}" + key: "{color.neutral.surface-tinted}" }, { $type: "color", @@ -516,14 +516,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-1}" }, - name: "--ds-color-neutral-contrast-default", + name: "--ds-color-neutral-base-contrast-default", attributes: {}, path: [ "color", "neutral", - "contrast-default" + "base-contrast-default" ], - key: "{color.neutral.contrast-default}" + key: "{color.neutral.base-contrast-default}" }, { $type: "color", @@ -534,14 +534,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-2}" }, - name: "--ds-color-neutral-contrast-subtle", + name: "--ds-color-neutral-base-contrast-subtle", attributes: {}, path: [ "color", "neutral", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.neutral.contrast-subtle}" + key: "{color.neutral.base-contrast-subtle}" }, { $type: "color", @@ -570,14 +570,14 @@ export const color = [ $type: "color", $value: "{color.brand1.2}" }, - name: "--ds-color-brand1-background-subtle", + name: "--ds-color-brand1-background-tinted", attributes: {}, path: [ "color", "brand1", - "background-subtle" + "background-tinted" ], - key: "{color.brand1.background-subtle}" + key: "{color.brand1.background-tinted}" }, { $type: "color", @@ -588,14 +588,14 @@ export const color = [ $type: "color", $value: "{color.brand1.3}" }, - name: "--ds-color-brand1-surface-default", + name: "--ds-color-brand1-surface-tinted", attributes: {}, path: [ "color", "brand1", - "surface-default" + "surface-tinted" ], - key: "{color.brand1.surface-default}" + key: "{color.brand1.surface-tinted}" }, { $type: "color", @@ -786,14 +786,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-1}" }, - name: "--ds-color-brand1-contrast-default", + name: "--ds-color-brand1-base-contrast-default", attributes: {}, path: [ "color", "brand1", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand1.contrast-default}" + key: "{color.brand1.base-contrast-default}" }, { $type: "color", @@ -804,14 +804,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-2}" }, - name: "--ds-color-brand1-contrast-subtle", + name: "--ds-color-brand1-base-contrast-subtle", attributes: {}, path: [ "color", "brand1", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand1.contrast-subtle}" + key: "{color.brand1.base-contrast-subtle}" }, { $type: "color", @@ -840,14 +840,14 @@ export const color = [ $type: "color", $value: "{color.brand2.2}" }, - name: "--ds-color-brand2-background-subtle", + name: "--ds-color-brand2-background-tinted", attributes: {}, path: [ "color", "brand2", - "background-subtle" + "background-tinted" ], - key: "{color.brand2.background-subtle}" + key: "{color.brand2.background-tinted}" }, { $type: "color", @@ -858,14 +858,14 @@ export const color = [ $type: "color", $value: "{color.brand2.3}" }, - name: "--ds-color-brand2-surface-default", + name: "--ds-color-brand2-surface-tinted", attributes: {}, path: [ "color", "brand2", - "surface-default" + "surface-tinted" ], - key: "{color.brand2.surface-default}" + key: "{color.brand2.surface-tinted}" }, { $type: "color", @@ -1056,14 +1056,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-1}" }, - name: "--ds-color-brand2-contrast-default", + name: "--ds-color-brand2-base-contrast-default", attributes: {}, path: [ "color", "brand2", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand2.contrast-default}" + key: "{color.brand2.base-contrast-default}" }, { $type: "color", @@ -1074,14 +1074,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-2}" }, - name: "--ds-color-brand2-contrast-subtle", + name: "--ds-color-brand2-base-contrast-subtle", attributes: {}, path: [ "color", "brand2", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand2.contrast-subtle}" + key: "{color.brand2.base-contrast-subtle}" }, { $type: "color", @@ -1110,14 +1110,14 @@ export const color = [ $type: "color", $value: "{color.brand3.2}" }, - name: "--ds-color-brand3-background-subtle", + name: "--ds-color-brand3-background-tinted", attributes: {}, path: [ "color", "brand3", - "background-subtle" + "background-tinted" ], - key: "{color.brand3.background-subtle}" + key: "{color.brand3.background-tinted}" }, { $type: "color", @@ -1128,14 +1128,14 @@ export const color = [ $type: "color", $value: "{color.brand3.3}" }, - name: "--ds-color-brand3-surface-default", + name: "--ds-color-brand3-surface-tinted", attributes: {}, path: [ "color", "brand3", - "surface-default" + "surface-tinted" ], - key: "{color.brand3.surface-default}" + key: "{color.brand3.surface-tinted}" }, { $type: "color", @@ -1326,14 +1326,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-1}" }, - name: "--ds-color-brand3-contrast-default", + name: "--ds-color-brand3-base-contrast-default", attributes: {}, path: [ "color", "brand3", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand3.contrast-default}" + key: "{color.brand3.base-contrast-default}" }, { $type: "color", @@ -1344,14 +1344,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-2}" }, - name: "--ds-color-brand3-contrast-subtle", + name: "--ds-color-brand3-base-contrast-subtle", attributes: {}, path: [ "color", "brand3", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand3.contrast-subtle}" + key: "{color.brand3.base-contrast-subtle}" }, { $type: "color", @@ -1380,14 +1380,14 @@ export const color = [ $type: "color", $value: "{global.green.2}" }, - name: "--ds-color-success-background-subtle", + name: "--ds-color-success-background-tinted", attributes: {}, path: [ "color", "success", - "background-subtle" + "background-tinted" ], - key: "{color.success.background-subtle}" + key: "{color.success.background-tinted}" }, { $type: "color", @@ -1398,14 +1398,14 @@ export const color = [ $type: "color", $value: "{global.green.3}" }, - name: "--ds-color-success-surface-default", + name: "--ds-color-success-surface-tinted", attributes: {}, path: [ "color", "success", - "surface-default" + "surface-tinted" ], - key: "{color.success.surface-default}" + key: "{color.success.surface-tinted}" }, { $type: "color", @@ -1596,14 +1596,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-1}" }, - name: "--ds-color-success-contrast-default", + name: "--ds-color-success-base-contrast-default", attributes: {}, path: [ "color", "success", - "contrast-default" + "base-contrast-default" ], - key: "{color.success.contrast-default}" + key: "{color.success.base-contrast-default}" }, { $type: "color", @@ -1614,14 +1614,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-2}" }, - name: "--ds-color-success-contrast-subtle", + name: "--ds-color-success-base-contrast-subtle", attributes: {}, path: [ "color", "success", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.success.contrast-subtle}" + key: "{color.success.base-contrast-subtle}" }, { $type: "color", @@ -1650,14 +1650,14 @@ export const color = [ $type: "color", $value: "{global.red.2}" }, - name: "--ds-color-danger-background-subtle", + name: "--ds-color-danger-background-tinted", attributes: {}, path: [ "color", "danger", - "background-subtle" + "background-tinted" ], - key: "{color.danger.background-subtle}" + key: "{color.danger.background-tinted}" }, { $type: "color", @@ -1668,14 +1668,14 @@ export const color = [ $type: "color", $value: "{global.red.3}" }, - name: "--ds-color-danger-surface-default", + name: "--ds-color-danger-surface-tinted", attributes: {}, path: [ "color", "danger", - "surface-default" + "surface-tinted" ], - key: "{color.danger.surface-default}" + key: "{color.danger.surface-tinted}" }, { $type: "color", @@ -1866,14 +1866,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-1}" }, - name: "--ds-color-danger-contrast-default", + name: "--ds-color-danger-base-contrast-default", attributes: {}, path: [ "color", "danger", - "contrast-default" + "base-contrast-default" ], - key: "{color.danger.contrast-default}" + key: "{color.danger.base-contrast-default}" }, { $type: "color", @@ -1884,14 +1884,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-2}" }, - name: "--ds-color-danger-contrast-subtle", + name: "--ds-color-danger-base-contrast-subtle", attributes: {}, path: [ "color", "danger", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.danger.contrast-subtle}" + key: "{color.danger.base-contrast-subtle}" }, { $type: "color", @@ -1920,14 +1920,14 @@ export const color = [ $type: "color", $value: "{global.blue.2}" }, - name: "--ds-color-info-background-subtle", + name: "--ds-color-info-background-tinted", attributes: {}, path: [ "color", "info", - "background-subtle" + "background-tinted" ], - key: "{color.info.background-subtle}" + key: "{color.info.background-tinted}" }, { $type: "color", @@ -1938,14 +1938,14 @@ export const color = [ $type: "color", $value: "{global.blue.3}" }, - name: "--ds-color-info-surface-default", + name: "--ds-color-info-surface-tinted", attributes: {}, path: [ "color", "info", - "surface-default" + "surface-tinted" ], - key: "{color.info.surface-default}" + key: "{color.info.surface-tinted}" }, { $type: "color", @@ -2136,14 +2136,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-1}" }, - name: "--ds-color-info-contrast-default", + name: "--ds-color-info-base-contrast-default", attributes: {}, path: [ "color", "info", - "contrast-default" + "base-contrast-default" ], - key: "{color.info.contrast-default}" + key: "{color.info.base-contrast-default}" }, { $type: "color", @@ -2154,14 +2154,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-2}" }, - name: "--ds-color-info-contrast-subtle", + name: "--ds-color-info-base-contrast-subtle", attributes: {}, path: [ "color", "info", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.info.contrast-subtle}" + key: "{color.info.base-contrast-subtle}" }, { $type: "color", @@ -2190,14 +2190,14 @@ export const color = [ $type: "color", $value: "{global.yellow.2}" }, - name: "--ds-color-warning-background-subtle", + name: "--ds-color-warning-background-tinted", attributes: {}, path: [ "color", "warning", - "background-subtle" + "background-tinted" ], - key: "{color.warning.background-subtle}" + key: "{color.warning.background-tinted}" }, { $type: "color", @@ -2208,14 +2208,14 @@ export const color = [ $type: "color", $value: "{global.yellow.3}" }, - name: "--ds-color-warning-surface-default", + name: "--ds-color-warning-surface-tinted", attributes: {}, path: [ "color", "warning", - "surface-default" + "surface-tinted" ], - key: "{color.warning.surface-default}" + key: "{color.warning.surface-tinted}" }, { $type: "color", @@ -2406,14 +2406,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-1}" }, - name: "--ds-color-warning-contrast-default", + name: "--ds-color-warning-base-contrast-default", attributes: {}, path: [ "color", "warning", - "contrast-default" + "base-contrast-default" ], - key: "{color.warning.contrast-default}" + key: "{color.warning.base-contrast-default}" }, { $type: "color", @@ -2424,14 +2424,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-2}" }, - name: "--ds-color-warning-contrast-subtle", + name: "--ds-color-warning-base-contrast-subtle", attributes: {}, path: [ "color", "warning", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.warning.contrast-subtle}" + key: "{color.warning.base-contrast-subtle}" }, { $type: "color", diff --git a/apps/storefront/tokens/uutilsynet/light.ts b/apps/storefront/tokens/uutilsynet/light.ts index 2c0f391a4f..a52f4c55f1 100644 --- a/apps/storefront/tokens/uutilsynet/light.ts +++ b/apps/storefront/tokens/uutilsynet/light.ts @@ -30,14 +30,14 @@ export const color = [ $type: "color", $value: "{color.accent.2}" }, - name: "--ds-color-accent-background-subtle", + name: "--ds-color-accent-background-tinted", attributes: {}, path: [ "color", "accent", - "background-subtle" + "background-tinted" ], - key: "{color.accent.background-subtle}" + key: "{color.accent.background-tinted}" }, { $type: "color", @@ -48,14 +48,14 @@ export const color = [ $type: "color", $value: "{color.accent.3}" }, - name: "--ds-color-accent-surface-default", + name: "--ds-color-accent-surface-tinted", attributes: {}, path: [ "color", "accent", - "surface-default" + "surface-tinted" ], - key: "{color.accent.surface-default}" + key: "{color.accent.surface-tinted}" }, { $type: "color", @@ -246,14 +246,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-1}" }, - name: "--ds-color-accent-contrast-default", + name: "--ds-color-accent-base-contrast-default", attributes: {}, path: [ "color", "accent", - "contrast-default" + "base-contrast-default" ], - key: "{color.accent.contrast-default}" + key: "{color.accent.base-contrast-default}" }, { $type: "color", @@ -264,14 +264,14 @@ export const color = [ $type: "color", $value: "{color.accent.contrast-2}" }, - name: "--ds-color-accent-contrast-subtle", + name: "--ds-color-accent-base-contrast-subtle", attributes: {}, path: [ "color", "accent", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.accent.contrast-subtle}" + key: "{color.accent.base-contrast-subtle}" }, { $type: "color", @@ -300,14 +300,14 @@ export const color = [ $type: "color", $value: "{color.neutral.2}" }, - name: "--ds-color-neutral-background-subtle", + name: "--ds-color-neutral-background-tinted", attributes: {}, path: [ "color", "neutral", - "background-subtle" + "background-tinted" ], - key: "{color.neutral.background-subtle}" + key: "{color.neutral.background-tinted}" }, { $type: "color", @@ -318,14 +318,14 @@ export const color = [ $type: "color", $value: "{color.neutral.3}" }, - name: "--ds-color-neutral-surface-default", + name: "--ds-color-neutral-surface-tinted", attributes: {}, path: [ "color", "neutral", - "surface-default" + "surface-tinted" ], - key: "{color.neutral.surface-default}" + key: "{color.neutral.surface-tinted}" }, { $type: "color", @@ -516,14 +516,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-1}" }, - name: "--ds-color-neutral-contrast-default", + name: "--ds-color-neutral-base-contrast-default", attributes: {}, path: [ "color", "neutral", - "contrast-default" + "base-contrast-default" ], - key: "{color.neutral.contrast-default}" + key: "{color.neutral.base-contrast-default}" }, { $type: "color", @@ -534,14 +534,14 @@ export const color = [ $type: "color", $value: "{color.neutral.contrast-2}" }, - name: "--ds-color-neutral-contrast-subtle", + name: "--ds-color-neutral-base-contrast-subtle", attributes: {}, path: [ "color", "neutral", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.neutral.contrast-subtle}" + key: "{color.neutral.base-contrast-subtle}" }, { $type: "color", @@ -570,14 +570,14 @@ export const color = [ $type: "color", $value: "{color.brand1.2}" }, - name: "--ds-color-brand1-background-subtle", + name: "--ds-color-brand1-background-tinted", attributes: {}, path: [ "color", "brand1", - "background-subtle" + "background-tinted" ], - key: "{color.brand1.background-subtle}" + key: "{color.brand1.background-tinted}" }, { $type: "color", @@ -588,14 +588,14 @@ export const color = [ $type: "color", $value: "{color.brand1.3}" }, - name: "--ds-color-brand1-surface-default", + name: "--ds-color-brand1-surface-tinted", attributes: {}, path: [ "color", "brand1", - "surface-default" + "surface-tinted" ], - key: "{color.brand1.surface-default}" + key: "{color.brand1.surface-tinted}" }, { $type: "color", @@ -786,14 +786,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-1}" }, - name: "--ds-color-brand1-contrast-default", + name: "--ds-color-brand1-base-contrast-default", attributes: {}, path: [ "color", "brand1", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand1.contrast-default}" + key: "{color.brand1.base-contrast-default}" }, { $type: "color", @@ -804,14 +804,14 @@ export const color = [ $type: "color", $value: "{color.brand1.contrast-2}" }, - name: "--ds-color-brand1-contrast-subtle", + name: "--ds-color-brand1-base-contrast-subtle", attributes: {}, path: [ "color", "brand1", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand1.contrast-subtle}" + key: "{color.brand1.base-contrast-subtle}" }, { $type: "color", @@ -840,14 +840,14 @@ export const color = [ $type: "color", $value: "{color.brand2.2}" }, - name: "--ds-color-brand2-background-subtle", + name: "--ds-color-brand2-background-tinted", attributes: {}, path: [ "color", "brand2", - "background-subtle" + "background-tinted" ], - key: "{color.brand2.background-subtle}" + key: "{color.brand2.background-tinted}" }, { $type: "color", @@ -858,14 +858,14 @@ export const color = [ $type: "color", $value: "{color.brand2.3}" }, - name: "--ds-color-brand2-surface-default", + name: "--ds-color-brand2-surface-tinted", attributes: {}, path: [ "color", "brand2", - "surface-default" + "surface-tinted" ], - key: "{color.brand2.surface-default}" + key: "{color.brand2.surface-tinted}" }, { $type: "color", @@ -1056,14 +1056,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-1}" }, - name: "--ds-color-brand2-contrast-default", + name: "--ds-color-brand2-base-contrast-default", attributes: {}, path: [ "color", "brand2", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand2.contrast-default}" + key: "{color.brand2.base-contrast-default}" }, { $type: "color", @@ -1074,14 +1074,14 @@ export const color = [ $type: "color", $value: "{color.brand2.contrast-2}" }, - name: "--ds-color-brand2-contrast-subtle", + name: "--ds-color-brand2-base-contrast-subtle", attributes: {}, path: [ "color", "brand2", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand2.contrast-subtle}" + key: "{color.brand2.base-contrast-subtle}" }, { $type: "color", @@ -1110,14 +1110,14 @@ export const color = [ $type: "color", $value: "{color.brand3.2}" }, - name: "--ds-color-brand3-background-subtle", + name: "--ds-color-brand3-background-tinted", attributes: {}, path: [ "color", "brand3", - "background-subtle" + "background-tinted" ], - key: "{color.brand3.background-subtle}" + key: "{color.brand3.background-tinted}" }, { $type: "color", @@ -1128,14 +1128,14 @@ export const color = [ $type: "color", $value: "{color.brand3.3}" }, - name: "--ds-color-brand3-surface-default", + name: "--ds-color-brand3-surface-tinted", attributes: {}, path: [ "color", "brand3", - "surface-default" + "surface-tinted" ], - key: "{color.brand3.surface-default}" + key: "{color.brand3.surface-tinted}" }, { $type: "color", @@ -1326,14 +1326,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-1}" }, - name: "--ds-color-brand3-contrast-default", + name: "--ds-color-brand3-base-contrast-default", attributes: {}, path: [ "color", "brand3", - "contrast-default" + "base-contrast-default" ], - key: "{color.brand3.contrast-default}" + key: "{color.brand3.base-contrast-default}" }, { $type: "color", @@ -1344,14 +1344,14 @@ export const color = [ $type: "color", $value: "{color.brand3.contrast-2}" }, - name: "--ds-color-brand3-contrast-subtle", + name: "--ds-color-brand3-base-contrast-subtle", attributes: {}, path: [ "color", "brand3", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.brand3.contrast-subtle}" + key: "{color.brand3.base-contrast-subtle}" }, { $type: "color", @@ -1380,14 +1380,14 @@ export const color = [ $type: "color", $value: "{global.green.2}" }, - name: "--ds-color-success-background-subtle", + name: "--ds-color-success-background-tinted", attributes: {}, path: [ "color", "success", - "background-subtle" + "background-tinted" ], - key: "{color.success.background-subtle}" + key: "{color.success.background-tinted}" }, { $type: "color", @@ -1398,14 +1398,14 @@ export const color = [ $type: "color", $value: "{global.green.3}" }, - name: "--ds-color-success-surface-default", + name: "--ds-color-success-surface-tinted", attributes: {}, path: [ "color", "success", - "surface-default" + "surface-tinted" ], - key: "{color.success.surface-default}" + key: "{color.success.surface-tinted}" }, { $type: "color", @@ -1596,14 +1596,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-1}" }, - name: "--ds-color-success-contrast-default", + name: "--ds-color-success-base-contrast-default", attributes: {}, path: [ "color", "success", - "contrast-default" + "base-contrast-default" ], - key: "{color.success.contrast-default}" + key: "{color.success.base-contrast-default}" }, { $type: "color", @@ -1614,14 +1614,14 @@ export const color = [ $type: "color", $value: "{global.green.contrast-2}" }, - name: "--ds-color-success-contrast-subtle", + name: "--ds-color-success-base-contrast-subtle", attributes: {}, path: [ "color", "success", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.success.contrast-subtle}" + key: "{color.success.base-contrast-subtle}" }, { $type: "color", @@ -1650,14 +1650,14 @@ export const color = [ $type: "color", $value: "{global.red.2}" }, - name: "--ds-color-danger-background-subtle", + name: "--ds-color-danger-background-tinted", attributes: {}, path: [ "color", "danger", - "background-subtle" + "background-tinted" ], - key: "{color.danger.background-subtle}" + key: "{color.danger.background-tinted}" }, { $type: "color", @@ -1668,14 +1668,14 @@ export const color = [ $type: "color", $value: "{global.red.3}" }, - name: "--ds-color-danger-surface-default", + name: "--ds-color-danger-surface-tinted", attributes: {}, path: [ "color", "danger", - "surface-default" + "surface-tinted" ], - key: "{color.danger.surface-default}" + key: "{color.danger.surface-tinted}" }, { $type: "color", @@ -1866,14 +1866,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-1}" }, - name: "--ds-color-danger-contrast-default", + name: "--ds-color-danger-base-contrast-default", attributes: {}, path: [ "color", "danger", - "contrast-default" + "base-contrast-default" ], - key: "{color.danger.contrast-default}" + key: "{color.danger.base-contrast-default}" }, { $type: "color", @@ -1884,14 +1884,14 @@ export const color = [ $type: "color", $value: "{global.red.contrast-2}" }, - name: "--ds-color-danger-contrast-subtle", + name: "--ds-color-danger-base-contrast-subtle", attributes: {}, path: [ "color", "danger", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.danger.contrast-subtle}" + key: "{color.danger.base-contrast-subtle}" }, { $type: "color", @@ -1920,14 +1920,14 @@ export const color = [ $type: "color", $value: "{global.blue.2}" }, - name: "--ds-color-info-background-subtle", + name: "--ds-color-info-background-tinted", attributes: {}, path: [ "color", "info", - "background-subtle" + "background-tinted" ], - key: "{color.info.background-subtle}" + key: "{color.info.background-tinted}" }, { $type: "color", @@ -1938,14 +1938,14 @@ export const color = [ $type: "color", $value: "{global.blue.3}" }, - name: "--ds-color-info-surface-default", + name: "--ds-color-info-surface-tinted", attributes: {}, path: [ "color", "info", - "surface-default" + "surface-tinted" ], - key: "{color.info.surface-default}" + key: "{color.info.surface-tinted}" }, { $type: "color", @@ -2136,14 +2136,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-1}" }, - name: "--ds-color-info-contrast-default", + name: "--ds-color-info-base-contrast-default", attributes: {}, path: [ "color", "info", - "contrast-default" + "base-contrast-default" ], - key: "{color.info.contrast-default}" + key: "{color.info.base-contrast-default}" }, { $type: "color", @@ -2154,14 +2154,14 @@ export const color = [ $type: "color", $value: "{global.blue.contrast-2}" }, - name: "--ds-color-info-contrast-subtle", + name: "--ds-color-info-base-contrast-subtle", attributes: {}, path: [ "color", "info", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.info.contrast-subtle}" + key: "{color.info.base-contrast-subtle}" }, { $type: "color", @@ -2190,14 +2190,14 @@ export const color = [ $type: "color", $value: "{global.yellow.2}" }, - name: "--ds-color-warning-background-subtle", + name: "--ds-color-warning-background-tinted", attributes: {}, path: [ "color", "warning", - "background-subtle" + "background-tinted" ], - key: "{color.warning.background-subtle}" + key: "{color.warning.background-tinted}" }, { $type: "color", @@ -2208,14 +2208,14 @@ export const color = [ $type: "color", $value: "{global.yellow.3}" }, - name: "--ds-color-warning-surface-default", + name: "--ds-color-warning-surface-tinted", attributes: {}, path: [ "color", "warning", - "surface-default" + "surface-tinted" ], - key: "{color.warning.surface-default}" + key: "{color.warning.surface-tinted}" }, { $type: "color", @@ -2406,14 +2406,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-1}" }, - name: "--ds-color-warning-contrast-default", + name: "--ds-color-warning-base-contrast-default", attributes: {}, path: [ "color", "warning", - "contrast-default" + "base-contrast-default" ], - key: "{color.warning.contrast-default}" + key: "{color.warning.base-contrast-default}" }, { $type: "color", @@ -2424,14 +2424,14 @@ export const color = [ $type: "color", $value: "{global.orange.contrast-2}" }, - name: "--ds-color-warning-contrast-subtle", + name: "--ds-color-warning-base-contrast-subtle", attributes: {}, path: [ "color", "warning", - "contrast-subtle" + "base-contrast-subtle" ], - key: "{color.warning.contrast-subtle}" + key: "{color.warning.base-contrast-subtle}" }, { $type: "color", diff --git a/apps/storybook/docs-components/DoAndDont/DoAndDont.module.css b/apps/storybook/docs-components/DoAndDont/DoAndDont.module.css index ccb46328e5..3cf1471528 100644 --- a/apps/storybook/docs-components/DoAndDont/DoAndDont.module.css +++ b/apps/storybook/docs-components/DoAndDont/DoAndDont.module.css @@ -2,7 +2,7 @@ display: flex; flex-direction: column; box-sizing: border-box; - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); padding: 24px; width: calc(50% - (var(--ds-size-4) / 2)); height: 100%; diff --git a/apps/storybook/stories/showcase.module.css b/apps/storybook/stories/showcase.module.css index d20a468861..507bd5678b 100644 --- a/apps/storybook/stories/showcase.module.css +++ b/apps/storybook/stories/showcase.module.css @@ -8,6 +8,6 @@ } .controls code { - background: var(--ds-color-neutral-background-subtle); + background: var(--ds-color-neutral-background-tinted); padding: var(--ds-size-1); } diff --git a/apps/theme/app/globals.css b/apps/theme/app/globals.css index bf4a0a76c5..b8379953a6 100644 --- a/apps/theme/app/globals.css +++ b/apps/theme/app/globals.css @@ -50,7 +50,7 @@ code { width: 100%; gap: 12px; padding: 28px; - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); border-radius: 0 8px 8px 0; } diff --git a/apps/theme/app/themebuilder/_components/ThemePages.module.css b/apps/theme/app/themebuilder/_components/ThemePages.module.css index 120565a0e5..dd85924be3 100644 --- a/apps/theme/app/themebuilder/_components/ThemePages.module.css +++ b/apps/theme/app/themebuilder/_components/ThemePages.module.css @@ -1,5 +1,5 @@ .panel { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); border: 1px solid var(--ds-color-neutral-border-subtle); border-radius: 8px; margin-top: 28px; diff --git a/apps/theme/components/BorderRadiusInput/BorderRadiusInput.module.css b/apps/theme/components/BorderRadiusInput/BorderRadiusInput.module.css index a880fc500a..b3f3e0d830 100644 --- a/apps/theme/components/BorderRadiusInput/BorderRadiusInput.module.css +++ b/apps/theme/components/BorderRadiusInput/BorderRadiusInput.module.css @@ -11,7 +11,7 @@ .active .inner { border-color: var(--ds-color-accent-border-default); - background-color: var(--ds-color-accent-surface-default); + background-color: var(--ds-color-accent-surface-tinted); } .active .box { @@ -34,11 +34,11 @@ } .box:hover { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } .inner { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); border: 5px solid var(--ds-color-neutral-border-default); height: 33px; width: 72px; diff --git a/apps/theme/components/ColorContrasts/ColorContrasts.module.css b/apps/theme/components/ColorContrasts/ColorContrasts.module.css index 07cec3bfb0..5641835233 100644 --- a/apps/theme/components/ColorContrasts/ColorContrasts.module.css +++ b/apps/theme/components/ColorContrasts/ColorContrasts.module.css @@ -93,7 +93,7 @@ .th { border: 1px solid var(--ds-color-neutral-border-subtle); border-collapse: collapse; - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } .th { diff --git a/apps/theme/components/ColorInput/ColorInput.module.css b/apps/theme/components/ColorInput/ColorInput.module.css index 9fd3eeeb0c..d5ac329a2e 100644 --- a/apps/theme/components/ColorInput/ColorInput.module.css +++ b/apps/theme/components/ColorInput/ColorInput.module.css @@ -18,7 +18,7 @@ } .box:hover { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } .leftContent { diff --git a/apps/theme/components/ColorPreview/ColorPreview.module.css b/apps/theme/components/ColorPreview/ColorPreview.module.css index 1f7671673a..806a85dc3f 100644 --- a/apps/theme/components/ColorPreview/ColorPreview.module.css +++ b/apps/theme/components/ColorPreview/ColorPreview.module.css @@ -10,7 +10,7 @@ height: auto; padding: 18px; border: 1px solid var(--ds-color-accent-border-subtle); - background-color: var(--ds-color-accent-surface-default); + background-color: var(--ds-color-accent-surface-tinted); } .title { diff --git a/apps/theme/components/ContrastChart/ContrastChart.module.css b/apps/theme/components/ContrastChart/ContrastChart.module.css index 9de6862c30..2e1760bdd9 100644 --- a/apps/theme/components/ContrastChart/ContrastChart.module.css +++ b/apps/theme/components/ContrastChart/ContrastChart.module.css @@ -68,7 +68,7 @@ .th { border: 4px solid var(--ds-color-neutral-background-default); border-collapse: collapse; - background-color: var(--ds-color-neutral-surface-default); + background-color: var(--ds-color-neutral-surface-tinted); } .th { diff --git a/apps/theme/components/Previews/Dashboard/Dashboard.module.css b/apps/theme/components/Previews/Dashboard/Dashboard.module.css index bc37b458f6..55cf7f6e8b 100644 --- a/apps/theme/components/Previews/Dashboard/Dashboard.module.css +++ b/apps/theme/components/Previews/Dashboard/Dashboard.module.css @@ -39,7 +39,7 @@ } .btnActive { - background-color: var(--ds-color-accent-surface-default); + background-color: var(--ds-color-accent-surface-tinted); } .logo { diff --git a/apps/theme/components/Previews/Previews.module.css b/apps/theme/components/Previews/Previews.module.css index 086233b09d..6ed22ce573 100644 --- a/apps/theme/components/Previews/Previews.module.css +++ b/apps/theme/components/Previews/Previews.module.css @@ -6,7 +6,7 @@ } .preview { - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); padding: var(--ds-size-6); border-radius: var(--ds-border-radius-lg); box-shadow: var(--ds-shadow-md); diff --git a/apps/theme/components/Sidebar/Sidebar.module.css b/apps/theme/components/Sidebar/Sidebar.module.css index 870b1a8d7f..7015e922f8 100644 --- a/apps/theme/components/Sidebar/Sidebar.module.css +++ b/apps/theme/components/Sidebar/Sidebar.module.css @@ -62,7 +62,7 @@ .appearance { border-bottom: 1px solid var(--ds-color-neutral-border-subtle); - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); & h4 { margin-bottom: var(--ds-size-2); diff --git a/apps/theme/components/SizeInput/SizeInput.module.css b/apps/theme/components/SizeInput/SizeInput.module.css index cb2add142d..8152f5079a 100644 --- a/apps/theme/components/SizeInput/SizeInput.module.css +++ b/apps/theme/components/SizeInput/SizeInput.module.css @@ -24,7 +24,7 @@ .box:hover { cursor: pointer; - background-color: var(--ds-color-neutral-background-subtle); + background-color: var(--ds-color-neutral-background-tinted); } .icon { diff --git a/apps/theme/components/ThemeHeader/ThemeHeader.module.css b/apps/theme/components/ThemeHeader/ThemeHeader.module.css index c4005434ec..ab96309524 100644 --- a/apps/theme/components/ThemeHeader/ThemeHeader.module.css +++ b/apps/theme/components/ThemeHeader/ThemeHeader.module.css @@ -1,5 +1,5 @@ .header { - background-color: var(--ds-color-accent-surface-default); + background-color: var(--ds-color-accent-surface-tinted); padding: var(--ds-size-10); padding-bottom: 0; display: flex; diff --git a/apps/theme/components/TokenModal/TokenModal.module.css b/apps/theme/components/TokenModal/TokenModal.module.css index 30d13c1baf..1b3faf751e 100644 --- a/apps/theme/components/TokenModal/TokenModal.module.css +++ b/apps/theme/components/TokenModal/TokenModal.module.css @@ -101,7 +101,7 @@ .step span { background-color: var(--ds-color-accent-base-default); - color: var(--ds-color-accent-contrast-default); + color: var(--ds-color-accent-base-contrast-default); aspect-ratio: 1; border-radius: var(--ds-border-radius-full); width: var(--ds-size-8); diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json index aec8615974..dc42b5c71c 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -1493,8 +1493,8 @@ "focus.outer": "S:544c0a24225aebd09cf60ab32ef9d90054cfae35,", "focus.inner": "S:4b74102c425dc79dca763d220f748c9dd8fe67fa,", "color.accent.background-default": "S:a279b88bb2ce95b70adea89d5a452eddfcb27064,", - "color.accent.background-subtle": "S:1d4568b5eaf4f70f36af00b61f7fab2c5d8dd28b,", - "color.accent.surface-default": "S:621fd453be59d697a1fb30d7583e55d9b5bc1bbf,", + "color.accent.background-tinted": "S:1d4568b5eaf4f70f36af00b61f7fab2c5d8dd28b,", + "color.accent.surface-tinted": "S:621fd453be59d697a1fb30d7583e55d9b5bc1bbf,", "color.accent.surface-hover": "S:e933ab9d7969daa6912dad89c647a27d56cc6041,", "color.accent.surface-active": "S:60ca0139b40319858fe9fe8e247e7120d87a33f1,", "color.accent.border-subtle": "S:3773f273f056d5bb0882021dfbd008f70cbf138a,", @@ -1505,11 +1505,11 @@ "color.accent.base-active": "S:299329b34abf189c76a30061b9772f79ef4ce5ca,", "color.accent.text-subtle": "S:e070c7394f547e993ef4bdba36d123ca27af5e04,", "color.accent.text-default": "S:96bbb1a13f13eeba7cd80f1d71abcd2fc6bbf1c1,", - "color.accent.contrast-default": "S:326ef1b33a492c8270142d92dde01949ed838772,", - "color.accent.contrast-subtle": "S:871c959e34b646bf04e80422cd2d3dfeea154ef6,", + "color.accent.base-contrast-default": "S:326ef1b33a492c8270142d92dde01949ed838772,", + "color.accent.base-contrast-subtle": "S:871c959e34b646bf04e80422cd2d3dfeea154ef6,", "color.neutral.background-default": "S:275455a95e09f67cccc64d0e5c8181556f33d490,", - "color.neutral.background-subtle": "S:f597ff30bf9c0e2392856b890fd456c3fa35228f,", - "color.neutral.surface-default": "S:36e32d08b5437b8958812e6be2e1b589e19a9bb2,", + "color.neutral.background-tinted": "S:f597ff30bf9c0e2392856b890fd456c3fa35228f,", + "color.neutral.surface-tinted": "S:36e32d08b5437b8958812e6be2e1b589e19a9bb2,", "color.neutral.surface-hover": "S:48a5861e8099bced3aba543929fe0fdbf205d300,", "color.neutral.surface-active": "S:e2eba9090dd49ab2103dedb18f7292bcd5a8b0b7,", "color.neutral.border-subtle": "S:2f5b3c3030f6632598c5562adb213f07976cdfc3,", @@ -1520,11 +1520,11 @@ "color.neutral.base-active": "S:17e0b74558ac2a092184e97559d5d907dc523f18,", "color.neutral.text-subtle": "S:38d232cf270a355ef80fe7fc6d4704051d6a7b8b,", "color.neutral.text-default": "S:69c09330b10f7fbdaad6c9e27b9e3075fc849969,", - "color.neutral.contrast-default": "S:962d0b5d2d62d6575c457bccaef63a8a47aa486c,", - "color.neutral.contrast-subtle": "S:9ffbd0152aabe9328775f371a54308f78def6344,", + "color.neutral.base-contrast-default": "S:962d0b5d2d62d6575c457bccaef63a8a47aa486c,", + "color.neutral.base-contrast-subtle": "S:9ffbd0152aabe9328775f371a54308f78def6344,", "color.brand1.background-default": "S:1472197036612292fc24af0814c019ba1de66707,", - "color.brand1.background-subtle": "S:8ba6aa4e0c7b3090a5d1d1337c2eb1cb45db4e8c,", - "color.brand1.surface-default": "S:1a3d74253844ae1d7b608348dac0ec99d22a928b,", + "color.brand1.background-tinted": "S:8ba6aa4e0c7b3090a5d1d1337c2eb1cb45db4e8c,", + "color.brand1.surface-tinted": "S:1a3d74253844ae1d7b608348dac0ec99d22a928b,", "color.brand1.surface-hover": "S:edb1a5fff4d03ef29e2a05a476e787ec320c66e2,", "color.brand1.surface-active": "S:3b3b6f67b7b0f1297f79f68d74e68bebdeee03b3,", "color.brand1.border-subtle": "S:86cd0b2971de525e676e82a0c6dc50c68a0f58ca,", @@ -1535,11 +1535,11 @@ "color.brand1.base-active": "S:991d150dd1af5f31023bd54634ceb94c6d02416c,", "color.brand1.text-subtle": "S:21ea19042a04e3d542770f0b1f31a23097527356,", "color.brand1.text-default": "S:12edb89c4e24b0631e0fe98d3fe8ee84f044b28a,", - "color.brand1.contrast-default": "S:a6a773d78dca9e0141a24dfe1c1d1a52410a8002,", - "color.brand1.contrast-subtle": "S:15e43ce5a1a3181c89f353381f136c6be8498497,", + "color.brand1.base-contrast-default": "S:a6a773d78dca9e0141a24dfe1c1d1a52410a8002,", + "color.brand1.base-contrast-subtle": "S:15e43ce5a1a3181c89f353381f136c6be8498497,", "color.brand2.background-default": "S:e82ee222a9c6ee36e223c4b7de9871def76e53a0,", - "color.brand2.background-subtle": "S:4894e462e21e81cb610c6f73e573af5f93aab3ef,", - "color.brand2.surface-default": "S:5a7c749db3d4ef8185a430fe139b8448ed79f760,", + "color.brand2.background-tinted": "S:4894e462e21e81cb610c6f73e573af5f93aab3ef,", + "color.brand2.surface-tinted": "S:5a7c749db3d4ef8185a430fe139b8448ed79f760,", "color.brand2.surface-hover": "S:5b5514ce96a637925a8a18a6f007f439c5a3ace3,", "color.brand2.surface-active": "S:cf55fa91f0d306dbd9f69ffdbf0040380d4e980a,", "color.brand2.border-subtle": "S:f392133f5071069e12625cd18f15a567197e7014,", @@ -1550,11 +1550,11 @@ "color.brand2.base-active": "S:f27622ed41614775761ed80e2cb95505eddc791e,", "color.brand2.text-subtle": "S:f1fa838c2d942f1c43f91a1e80b4510e800b0814,", "color.brand2.text-default": "S:d140345938290231f92171973bb5d6b957e76773,", - "color.brand2.contrast-default": "S:8e341f12e91f15500be2212e7871348491ff5e98,", - "color.brand2.contrast-subtle": "S:f918f387a53ba778fe749738f313de50e9a0cfbb,", + "color.brand2.base-contrast-default": "S:8e341f12e91f15500be2212e7871348491ff5e98,", + "color.brand2.base-contrast-subtle": "S:f918f387a53ba778fe749738f313de50e9a0cfbb,", "color.brand3.background-default": "S:bad65ffb47dbbeebc6ba479dedc14d3c9773bc0c,", - "color.brand3.background-subtle": "S:02cda0a2aaaee5686d3768fc1dbd447496cf0a38,", - "color.brand3.surface-default": "S:9166292a21736b2ae37f2489122965378c39260f,", + "color.brand3.background-tinted": "S:02cda0a2aaaee5686d3768fc1dbd447496cf0a38,", + "color.brand3.surface-tinted": "S:9166292a21736b2ae37f2489122965378c39260f,", "color.brand3.surface-hover": "S:1aa80845daea2a082e7392732d225378915c5f1b,", "color.brand3.surface-active": "S:75b8aef4390b8c10691a921858a11d7c309db526,", "color.brand3.border-subtle": "S:447ea3540b31de3144252c2b1ae9adc1704d5ebe,", @@ -1565,11 +1565,11 @@ "color.brand3.base-active": "S:24fec77f575f5b0bce378ab76e48d5f42798d7ee,", "color.brand3.text-subtle": "S:1bd33b3c9aa9cded5cdf156a0d6b17116acb4828,", "color.brand3.text-default": "S:a1e8a2eaec7c3711a3b806ce861036a045b01dd6,", - "color.brand3.contrast-default": "S:1015cd239cc8b8953e105b14825afedb1bca6dc2,", - "color.brand3.contrast-subtle": "S:7c546d789f8b0b29673fbfd55232e23bbc9747a5,", + "color.brand3.base-contrast-default": "S:1015cd239cc8b8953e105b14825afedb1bca6dc2,", + "color.brand3.base-contrast-subtle": "S:7c546d789f8b0b29673fbfd55232e23bbc9747a5,", "color.success.background-default": "S:ac7456aa5dbd5ca6d9514a01742dc5eb3dcfa877,", - "color.success.background-subtle": "S:2ec8b5d79ab5c952b5bd92767c14162fb2cae317,", - "color.success.surface-default": "S:161b0e28be484ec03852b54a656b1267cb7f182f,", + "color.success.background-tinted": "S:2ec8b5d79ab5c952b5bd92767c14162fb2cae317,", + "color.success.surface-tinted": "S:161b0e28be484ec03852b54a656b1267cb7f182f,", "color.success.surface-hover": "S:0c39f45c823f16a8b5cb066149e3593027334bc6,", "color.success.surface-active": "S:0532941c904e93af3ff28c0f1268127f86817c4f,", "color.success.border-subtle": "S:2f9c0d953a81790f39240008e17d8d77b4cd74e8,", @@ -1580,11 +1580,11 @@ "color.success.base-active": "S:0c7313151ee129dd21ccca81fd91902ddc38c468,", "color.success.text-subtle": "S:5e3a2e871b9b0a7d0fdc5510943e5b76e8512070,", "color.success.text-default": "S:a820cbfe1dea1f3f44271518f1388ea21f73be03,", - "color.success.contrast-default": "S:604ab86c2a022f5ea6804bb9651029b264b2a27a,", - "color.success.contrast-subtle": "S:53517095835dd9e73c09b3be505fe2a64b06d00e,", + "color.success.base-contrast-default": "S:604ab86c2a022f5ea6804bb9651029b264b2a27a,", + "color.success.base-contrast-subtle": "S:53517095835dd9e73c09b3be505fe2a64b06d00e,", "color.danger.background-default": "S:e4cc43d2d0ab1bcbfdeadae3bce71f820ffbf193,", - "color.danger.background-subtle": "S:f2bbcafc9ed6178764a3fe5f401fb2625215a9ae,", - "color.danger.surface-default": "S:3901f4577917e2a7a1a51a3a978a31332613941d,", + "color.danger.background-tinted": "S:f2bbcafc9ed6178764a3fe5f401fb2625215a9ae,", + "color.danger.surface-tinted": "S:3901f4577917e2a7a1a51a3a978a31332613941d,", "color.danger.surface-hover": "S:c2ce7b8e32ef47a9330df5d01d79496cc2d9b6de,", "color.danger.surface-active": "S:4292118819f7ee1d2f0ab8b4d9e660d8b3e24860,", "color.danger.border-subtle": "S:1c82b35c781da3c252f66ac19aaaed3286b032fd,", @@ -1595,11 +1595,11 @@ "color.danger.base-active": "S:f90f7a12b47a9198d1a1e764571558093cf3978d,", "color.danger.text-subtle": "S:16f8cef63d5db322a417a0e55fc4181ce4c1ae9e,", "color.danger.text-default": "S:ccc84acfc5cb43feb25b59baf3b4a0dad1200cad,", - "color.danger.contrast-default": "S:4dac5ab1579b885ac02db56b7f6a55e6c680cbfa,", - "color.danger.contrast-subtle": "S:6612d1b5c53ae020ca420326b9a3baa241fabaac,", + "color.danger.base-contrast-default": "S:4dac5ab1579b885ac02db56b7f6a55e6c680cbfa,", + "color.danger.base-contrast-subtle": "S:6612d1b5c53ae020ca420326b9a3baa241fabaac,", "color.info.background-default": "S:b086dd46c0ff8bcf632da96dca9b9cbb0bdbfcea,", - "color.info.background-subtle": "S:f05854c8b97a652b5d41f1bb9335c70c393ee7a4,", - "color.info.surface-default": "S:d0df27f27ed34f774e6227a3c161c5cd91947431,", + "color.info.background-tinted": "S:f05854c8b97a652b5d41f1bb9335c70c393ee7a4,", + "color.info.surface-tinted": "S:d0df27f27ed34f774e6227a3c161c5cd91947431,", "color.info.surface-hover": "S:4c6c5398a31fdf01382648fafb2a0fd83882eb11,", "color.info.surface-active": "S:4644440333cb46ac03d66d609d4a06451d65c364,", "color.info.border-subtle": "S:da03a25e834eca8e0f8a67188e29f1e3ba479177,", @@ -1610,11 +1610,11 @@ "color.info.base-active": "S:9b7d3d044cdcc2534fee60c19072855925b27556,", "color.info.text-subtle": "S:28bcbf1a3496a22a20eb0065ada3f173bbc3a502,", "color.info.text-default": "S:17b47c62ae61d72aadaad7d248986e3128fc667f,", - "color.info.contrast-default": "S:2da6bb8da7607671ff4f0158672055a46d39cab7,", - "color.info.contrast-subtle": "S:563d7bb00cd085490712cca0a8aedb85ff63a728,", + "color.info.base-contrast-default": "S:2da6bb8da7607671ff4f0158672055a46d39cab7,", + "color.info.base-contrast-subtle": "S:563d7bb00cd085490712cca0a8aedb85ff63a728,", "color.warning.background-default": "S:7a8104d02f405188e7f94127837b43c9cf4bb8f1,", - "color.warning.background-subtle": "S:f50634325dac534dc2887fd64e27981db2be7775,", - "color.warning.surface-default": "S:d7b679696d6fba53145bf3fa05ef9a0627916ee9,", + "color.warning.background-tinted": "S:f50634325dac534dc2887fd64e27981db2be7775,", + "color.warning.surface-tinted": "S:d7b679696d6fba53145bf3fa05ef9a0627916ee9,", "color.warning.surface-hover": "S:8ac0b38181d268f4ea10b3af3fb2cba17b3ff726,", "color.warning.surface-active": "S:ad56052a3831b6eb30572436413405671f240554,", "color.warning.border-subtle": "S:c951ad9eba4eb2ec7418e840fc253ec5846b1deb,", @@ -1625,8 +1625,8 @@ "color.warning.base-active": "S:78a246824dbc87f0a5eaab3536468821335635a9,", "color.warning.text-subtle": "S:d06da9391358ce0af4a68995377347ff8374c9b6,", "color.warning.text-default": "S:6b03b2b4ff1a5b89257db7074362ac5132cbfdac,", - "color.warning.contrast-default": "S:9074781839f41e4c47ab4430d615d92fc5037ac1,", - "color.warning.contrast-subtle": "S:817882711910b09e78721645177e8ba5d435b9c0,", + "color.warning.base-contrast-default": "S:9074781839f41e4c47ab4430d615d92fc5037ac1,", + "color.warning.base-contrast-subtle": "S:817882711910b09e78721645177e8ba5d435b9c0,", "typography.heading.2xl": "S:6522dc4b8ed783367ffae3547373fe4065d05105,", "typography.heading.xl": "S:83a17fe1cc6aefa0f3d092e96390370cb3bf1097,", "typography.heading.lg": "S:93d79f54c0354e0a279bfd28787a183dc77e1ecb,", @@ -1812,8 +1812,8 @@ "$figmaModeId": "34811:5", "$figmaVariableReferences": { "color.accent.background-default": "f49a8ae82b185007b22920fbae7187b691eeaf3a", - "color.accent.background-subtle": "5e3b9a411452fa4d0f73919246ca9453c304f141", - "color.accent.surface-default": "85ffd2bc928286dfa2cec7d4349da6d84b3e0426", + "color.accent.background-tinted": "5e3b9a411452fa4d0f73919246ca9453c304f141", + "color.accent.surface-tinted": "85ffd2bc928286dfa2cec7d4349da6d84b3e0426", "color.accent.surface-hover": "7a0286bd72986f196347d16f2ed155c0759c56c5", "color.accent.surface-active": "0031b42b668339ad217dc08b036a59b2a2b2a069", "color.accent.border-subtle": "84694789f949bc1d07d460243d3341eec4b1cd6c", @@ -1824,11 +1824,11 @@ "color.accent.base-active": "cabe1ca5c92be03ff0f8ecc641f61e062f9205d0", "color.accent.text-subtle": "c61420d1591cb3054b7b674d8b5e66a3da32f45d", "color.accent.text-default": "69c1ab821f155ef310a787a582bd7044cc2024c2", - "color.accent.contrast-default": "a005e23a4c703e2562b36d0857d100615d63b7ba", - "color.accent.contrast-subtle": "17cd3a87dbdb6d98f4812df22a01c9bf7c9e6eb7", + "color.accent.base-contrast-default": "a005e23a4c703e2562b36d0857d100615d63b7ba", + "color.accent.base-contrast-subtle": "17cd3a87dbdb6d98f4812df22a01c9bf7c9e6eb7", "color.neutral.background-default": "d6f9694139ef613a1180e0aadb285c5c45f91399", - "color.neutral.background-subtle": "8a721b17adff4e28757ebc6b0042a5516520f366", - "color.neutral.surface-default": "e2c03a3b331f3012faa7f51d417ecff359f234e3", + "color.neutral.background-tinted": "8a721b17adff4e28757ebc6b0042a5516520f366", + "color.neutral.surface-tinted": "e2c03a3b331f3012faa7f51d417ecff359f234e3", "color.neutral.surface-hover": "4e5e3c9e72aa0168ae419bf666cea5bb7537b618", "color.neutral.surface-active": "89b0801103ecac86ae0e61dc676eff413add2156", "color.neutral.border-subtle": "7a663945c2fe3ae09c99372033dad23536950bf9", @@ -1839,11 +1839,11 @@ "color.neutral.base-active": "1e91d5c7998403e54a410cc7c0afcbdc23e67876", "color.neutral.text-subtle": "353b7978d08eb6a48bbadb41fa6ea0b14423c935", "color.neutral.text-default": "5fbef256bec38be70d71aa18f7829e8425c17231", - "color.neutral.contrast-default": "2bf90ab84530df97211233a74a3f64360ecbba9c", - "color.neutral.contrast-subtle": "c73acc58f560f3a1b38d38d427cfe2587210d524", + "color.neutral.base-contrast-default": "2bf90ab84530df97211233a74a3f64360ecbba9c", + "color.neutral.base-contrast-subtle": "c73acc58f560f3a1b38d38d427cfe2587210d524", "color.brand1.background-default": "daa99d6c64bfa1627651be4ff35c01fb4feebf17", - "color.brand1.background-subtle": "7932cc19647fd645e41edcf31e58af032d498bff", - "color.brand1.surface-default": "8f148ef8f46b44be191cade330704a6176582d16", + "color.brand1.background-tinted": "7932cc19647fd645e41edcf31e58af032d498bff", + "color.brand1.surface-tinted": "8f148ef8f46b44be191cade330704a6176582d16", "color.brand1.surface-hover": "5ebcedaa73262b30ee59ac40fd7468d3a174b6a6", "color.brand1.surface-active": "4317f602cb1ffb1b2c563987489c28b26ea5d0d5", "color.brand1.border-subtle": "334ed85302e055bb93afbb44b498537e3df75927", @@ -1854,11 +1854,11 @@ "color.brand1.base-active": "e999cacdf408310d97ce33739b1ec154ff3c5e98", "color.brand1.text-subtle": "38331588055038d86eddadad9e50b500647ab4db", "color.brand1.text-default": "3a69d217642b5cefd8daf62eec49f44f2afa5825", - "color.brand1.contrast-default": "acc41cb4669ed5ddb8cd6f3226dd9624b222b217", - "color.brand1.contrast-subtle": "85f3a92d7440c4e4cf72f1da86d8429590710d38", + "color.brand1.base-contrast-default": "acc41cb4669ed5ddb8cd6f3226dd9624b222b217", + "color.brand1.base-contrast-subtle": "85f3a92d7440c4e4cf72f1da86d8429590710d38", "color.brand2.background-default": "acc174832ad87ef85cc066ea8cbdbb5dc656bb5d", - "color.brand2.background-subtle": "e2c3e574128bd48db220a9962cbf2c3015601be1", - "color.brand2.surface-default": "d1d41d19926b2d39440cdc8461eafb258b5c7faa", + "color.brand2.background-tinted": "e2c3e574128bd48db220a9962cbf2c3015601be1", + "color.brand2.surface-tinted": "d1d41d19926b2d39440cdc8461eafb258b5c7faa", "color.brand2.surface-hover": "c9a889bc802d0344dedbbe43cd27605579f1c44b", "color.brand2.surface-active": "f56d9b334f7f62457e7eed8ae9e9e6e4c4492d25", "color.brand2.border-subtle": "448d523fdcc10f45b55ba43a2bff1ca3bc5765ad", @@ -1869,11 +1869,11 @@ "color.brand2.base-active": "46cbfdf8ee73045a58f8ffdf3170415c3d8f597b", "color.brand2.text-subtle": "f18fe585ef084bd062194b8310e5a95d6859b7e2", "color.brand2.text-default": "3425c43c78c9b23116bb307bf283f7da90193e53", - "color.brand2.contrast-default": "6be545988d38c38a43887779afcab1a955dc0376", - "color.brand2.contrast-subtle": "602c4e1f274f2e6ec679f0260fb36ba4747837b1", + "color.brand2.base-contrast-default": "6be545988d38c38a43887779afcab1a955dc0376", + "color.brand2.base-contrast-subtle": "602c4e1f274f2e6ec679f0260fb36ba4747837b1", "color.brand3.background-default": "cedcec3bec005fc536b5f6c6e24e2bd75cc8aced", - "color.brand3.background-subtle": "255f5334bc3cb8355f16a73f152d28c934062a2d", - "color.brand3.surface-default": "12ef1bf674d809053f040809b2cf56bbded54cbf", + "color.brand3.background-tinted": "255f5334bc3cb8355f16a73f152d28c934062a2d", + "color.brand3.surface-tinted": "12ef1bf674d809053f040809b2cf56bbded54cbf", "color.brand3.surface-hover": "b09c83201802a5f1f8c9d797361fd4c942a969e3", "color.brand3.surface-active": "4e9e95a169f99f705a9a3f882191b3cf71e2eed7", "color.brand3.border-subtle": "1dff48ff9dd8ac8a0ef302eddd3a83da1765872d", @@ -1884,11 +1884,11 @@ "color.brand3.base-active": "6b629dcc25826eaf4089a93598d47591e665b780", "color.brand3.text-subtle": "ffb4ac12f250b94f85254fab2ea936bcb17e7567", "color.brand3.text-default": "df525269b6c216c5211c61e5eb411f007d1c49ac", - "color.brand3.contrast-default": "03cdf3563a32c9314726705e0c331842ab2b3e60", - "color.brand3.contrast-subtle": "c22ec18ade8eaf0e37caa17f6ffd42182e979de1", + "color.brand3.base-contrast-default": "03cdf3563a32c9314726705e0c331842ab2b3e60", + "color.brand3.base-contrast-subtle": "c22ec18ade8eaf0e37caa17f6ffd42182e979de1", "color.success.background-default": "05ab00df7037fc1de4625e3e2a0e99bedcdd9f85", - "color.success.background-subtle": "b3735ad2a6b23e4f9c8441c232df673d8d314845", - "color.success.surface-default": "61f83be49fd5050bb7ed42d62f7f27a39556a083", + "color.success.background-tinted": "b3735ad2a6b23e4f9c8441c232df673d8d314845", + "color.success.surface-tinted": "61f83be49fd5050bb7ed42d62f7f27a39556a083", "color.success.surface-hover": "5a35761501c289fd8f16a9058a296c3e8d07de2a", "color.success.surface-active": "95ad2224fbbc245291a9147baf6995073cd6f0d1", "color.success.border-subtle": "f698c4465ad9121225a0a36e4a1637b6700aad35", @@ -1899,11 +1899,11 @@ "color.success.base-active": "523431bbfc284985dd5dcf0264a6671d6aa7395c", "color.success.text-subtle": "4e39ae5eb65355087ff23a941627dcec33871a88", "color.success.text-default": "7839ffaf51cf696e80b43994fecef03c8b6d30d5", - "color.success.contrast-default": "623434d11c686ee908e8b8a1b92e1003a171c37d", - "color.success.contrast-subtle": "added0c656770c52d3d4871773740ef90a7094eb", + "color.success.base-contrast-default": "623434d11c686ee908e8b8a1b92e1003a171c37d", + "color.success.base-contrast-subtle": "added0c656770c52d3d4871773740ef90a7094eb", "color.danger.background-default": "566615a9d7cc071382ed88bdb6b407251ea56d41", - "color.danger.background-subtle": "74644bb0df2c26c7de3d348e0d5ed74a80f1c87f", - "color.danger.surface-default": "1749ef78dd030f3350976c469c2de04a33016808", + "color.danger.background-tinted": "74644bb0df2c26c7de3d348e0d5ed74a80f1c87f", + "color.danger.surface-tinted": "1749ef78dd030f3350976c469c2de04a33016808", "color.danger.surface-hover": "aa318b1c5b7b31427fb2f3bdb6d7a2d89994d44f", "color.danger.surface-active": "ac29ead842824e61df9a702f1b319fbc266f314e", "color.danger.border-subtle": "c347bec0633f44c67ab76dd464e0c174d140a437", @@ -1914,11 +1914,11 @@ "color.danger.base-active": "cf8652537239ef17c09fbadcfb8d3c12beb6ee1a", "color.danger.text-subtle": "aebac14e197ff73ff2438f3c4ba6ed13e3f6afb5", "color.danger.text-default": "7db406326afa5a5bb00bf68b12123e64530f5c63", - "color.danger.contrast-default": "e8edda99009eae8aef5bb7e7538c990b766439e0", - "color.danger.contrast-subtle": "370acca07c8c26e070bfeab6e6bf423ec0b7effc", + "color.danger.base-contrast-default": "e8edda99009eae8aef5bb7e7538c990b766439e0", + "color.danger.base-contrast-subtle": "370acca07c8c26e070bfeab6e6bf423ec0b7effc", "color.info.background-default": "0fa5b671b5e304a9044c6e1a9e76f88daa60292f", - "color.info.background-subtle": "672bd0ce8ae3b0edebbf74f40b53bbaee1cb9083", - "color.info.surface-default": "6344f85031e43a952f90156935f901442be233ed", + "color.info.background-tinted": "672bd0ce8ae3b0edebbf74f40b53bbaee1cb9083", + "color.info.surface-tinted": "6344f85031e43a952f90156935f901442be233ed", "color.info.surface-hover": "020d6366c9e5a8886599c316b29f949a49053940", "color.info.surface-active": "801ae4b9235d2bb1461ebf1b50c0d95c4f6a3ba3", "color.info.border-subtle": "9319cfbfa7693a72d5e2d56d555bdb2ecca791d5", @@ -1929,11 +1929,11 @@ "color.info.base-active": "073fe124f096447e2bc7fd0fbb26fefc5c8019c2", "color.info.text-subtle": "469fd37a9f5a9326fa79f673da580531f864a801", "color.info.text-default": "5fa4d18382f7d4a23c98ecb3d1a5af6530cd6017", - "color.info.contrast-default": "5d20ef679fafa42e691bba582e7f1a748967918f", - "color.info.contrast-subtle": "dbbbf393822c99d5f07fa500baddc470094ef3f3", + "color.info.base-contrast-default": "5d20ef679fafa42e691bba582e7f1a748967918f", + "color.info.base-contrast-subtle": "dbbbf393822c99d5f07fa500baddc470094ef3f3", "color.warning.background-default": "0b67c817cb26096be9a15654f2089d06a77490fd", - "color.warning.background-subtle": "9808b3e7df39e86997ca7157d2684484cf0ccaf3", - "color.warning.surface-default": "0a1b03a23074d996758ae0daaafd80751234499a", + "color.warning.background-tinted": "9808b3e7df39e86997ca7157d2684484cf0ccaf3", + "color.warning.surface-tinted": "0a1b03a23074d996758ae0daaafd80751234499a", "color.warning.surface-hover": "e84de2b9c1d1b0fdd9310a236863ad7d7febae49", "color.warning.surface-active": "175d21478a345bb2a736a92fe42d4c9c75c02af9", "color.warning.border-subtle": "44ddecf5d46ff4903f0e7eceb9f1cea475c38fbf", @@ -1944,8 +1944,8 @@ "color.warning.base-active": "1581c75ed7144a8f5d2f8ec851b4183559df1da8", "color.warning.text-subtle": "5caaee96e45f0a32a430c7e5dc495a8e9fdc7bb8", "color.warning.text-default": "72a826e2cbae00a765d085c59fce739d872b6198", - "color.warning.contrast-default": "35c4bdd207c9e4331d4fb547d95834365fe5bf28", - "color.warning.contrast-subtle": "a17743c65773a4291b16901247c8f024143807d1", + "color.warning.base-contrast-default": "35c4bdd207c9e4331d4fb547d95834365fe5bf28", + "color.warning.base-contrast-subtle": "a17743c65773a4291b16901247c8f024143807d1", "color.focus.inner": "c45b468ce89293d0b4c4f4183720d2fc90416551", "color.focus.outer": "872f0d2f20cdcb0fe1a2e0b5b40d2cec3f3ace7d", "disabled.opacity": "1c95cc4644615162e7bc8ac0067c0b8072a97f08", @@ -2010,8 +2010,8 @@ "$figmaModeId": "40350:0", "$figmaVariableReferences": { "color.main.background-default": "5a1c10917bd3dd0c93b581f52dc865498aaf058f", - "color.main.background-subtle": "2dda43c74eed383ea9b678916cb563ed4111d318", - "color.main.surface-default": "db7c9a7ccf77b7ce8e2f19a14c49418c2104f5f5", + "color.main.background-tinted": "2dda43c74eed383ea9b678916cb563ed4111d318", + "color.main.surface-tinted": "db7c9a7ccf77b7ce8e2f19a14c49418c2104f5f5", "color.main.surface-hover": "6c5c6346ffeb84e5af8887003565fe3344de51d4", "color.main.surface-active": "4227430e1958272eb53e814430f04684344fba13", "color.main.border-subtle": "9bae92e2405beecec84ec286150fa96871efcc5d", @@ -2022,8 +2022,8 @@ "color.main.base-active": "0960e79a0ebfce1a9a672af7cda70f44226990b3", "color.main.text-subtle": "7c4155a9ba2fff44aaa1f38bc024a0320644b849", "color.main.text-default": "5c36cac71fd419cac01079812cdc5a21e671f9d1", - "color.main.contrast-default": "93c3b64301733412617e795dceb3e912b2d91f20", - "color.main.contrast-subtle": "9ff40f41b57e858dda52bd167f0f7a5f3dbf981e" + "color.main.base-contrast-default": "93c3b64301733412617e795dceb3e912b2d91f20", + "color.main.base-contrast-subtle": "9ff40f41b57e858dda52bd167f0f7a5f3dbf981e" }, "group": "Main color" }, @@ -2038,8 +2038,8 @@ "$figmaModeId": "40350:1", "$figmaVariableReferences": { "color.support.background-default": "3de6663f7c078f73a5f0b712ff7da5d32927af20", - "color.support.background-subtle": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", - "color.support.surface-default": "cae32dc4ddd4b08799c28570400c5ff67d612f02", + "color.support.background-tinted": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", + "color.support.surface-tinted": "cae32dc4ddd4b08799c28570400c5ff67d612f02", "color.support.surface-hover": "64b794a11777dcd20e989241cb328510deee796d", "color.support.surface-active": "92b89fa58489c3b5666de70bdccbc527fe1a1b05", "color.support.border-subtle": "b7e94885482f0f56d5b219a447fbd08fa7da50cf", @@ -2050,8 +2050,8 @@ "color.support.base-active": "5cf788e1b97453219736627cc110ecacb1f2eac9", "color.support.text-subtle": "82b874ab403889814c58c83d95b5dca7e0a39301", "color.support.text-default": "67e0c8e254ef6dfdbf6ae96ca8d6393d23122765", - "color.support.contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", - "color.support.contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" + "color.support.base-contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", + "color.support.base-contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" }, "group": "Support color" }, @@ -2066,8 +2066,8 @@ "$figmaModeId": "40350:2", "$figmaVariableReferences": { "color.support.background-default": "3de6663f7c078f73a5f0b712ff7da5d32927af20", - "color.support.background-subtle": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", - "color.support.surface-default": "cae32dc4ddd4b08799c28570400c5ff67d612f02", + "color.support.background-tinted": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", + "color.support.surface-tinted": "cae32dc4ddd4b08799c28570400c5ff67d612f02", "color.support.surface-hover": "64b794a11777dcd20e989241cb328510deee796d", "color.support.surface-active": "92b89fa58489c3b5666de70bdccbc527fe1a1b05", "color.support.border-subtle": "b7e94885482f0f56d5b219a447fbd08fa7da50cf", @@ -2078,8 +2078,8 @@ "color.support.base-active": "5cf788e1b97453219736627cc110ecacb1f2eac9", "color.support.text-subtle": "82b874ab403889814c58c83d95b5dca7e0a39301", "color.support.text-default": "67e0c8e254ef6dfdbf6ae96ca8d6393d23122765", - "color.support.contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", - "color.support.contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" + "color.support.base-contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", + "color.support.base-contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" }, "group": "Support color" }, @@ -2094,8 +2094,8 @@ "$figmaModeId": "40350:3", "$figmaVariableReferences": { "color.support.background-default": "3de6663f7c078f73a5f0b712ff7da5d32927af20", - "color.support.background-subtle": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", - "color.support.surface-default": "cae32dc4ddd4b08799c28570400c5ff67d612f02", + "color.support.background-tinted": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", + "color.support.surface-tinted": "cae32dc4ddd4b08799c28570400c5ff67d612f02", "color.support.surface-hover": "64b794a11777dcd20e989241cb328510deee796d", "color.support.surface-active": "92b89fa58489c3b5666de70bdccbc527fe1a1b05", "color.support.border-subtle": "b7e94885482f0f56d5b219a447fbd08fa7da50cf", @@ -2106,9 +2106,9 @@ "color.support.base-active": "5cf788e1b97453219736627cc110ecacb1f2eac9", "color.support.text-subtle": "82b874ab403889814c58c83d95b5dca7e0a39301", "color.support.text-default": "67e0c8e254ef6dfdbf6ae96ca8d6393d23122765", - "color.support.contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", - "color.support.contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" + "color.support.base-contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", + "color.support.base-contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" }, "group": "Support color" } -] \ No newline at end of file +] diff --git a/design-tokens/semantic/color.json b/design-tokens/semantic/color.json index d723cd2e1e..c0552644ec 100644 --- a/design-tokens/semantic/color.json +++ b/design-tokens/semantic/color.json @@ -5,11 +5,11 @@ "$type": "color", "$value": "{color.accent.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{color.accent.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{color.accent.3}" }, @@ -53,11 +53,11 @@ "$type": "color", "$value": "{color.accent.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{color.accent.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{color.accent.contrast-2}" } @@ -67,11 +67,11 @@ "$type": "color", "$value": "{color.neutral.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{color.neutral.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{color.neutral.3}" }, @@ -115,11 +115,11 @@ "$type": "color", "$value": "{color.neutral.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{color.neutral.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{color.neutral.contrast-2}" } @@ -129,11 +129,11 @@ "$type": "color", "$value": "{color.brand1.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{color.brand1.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{color.brand1.3}" }, @@ -177,11 +177,11 @@ "$type": "color", "$value": "{color.brand1.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{color.brand1.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{color.brand1.contrast-2}" } @@ -191,11 +191,11 @@ "$type": "color", "$value": "{color.brand2.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{color.brand2.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{color.brand2.3}" }, @@ -239,11 +239,11 @@ "$type": "color", "$value": "{color.brand2.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{color.brand2.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{color.brand2.contrast-2}" } @@ -253,11 +253,11 @@ "$type": "color", "$value": "{color.brand3.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{color.brand3.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{color.brand3.3}" }, @@ -301,11 +301,11 @@ "$type": "color", "$value": "{color.brand3.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{color.brand3.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{color.brand3.contrast-2}" } @@ -315,11 +315,11 @@ "$type": "color", "$value": "{global.green.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{global.green.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{global.green.3}" }, @@ -363,11 +363,11 @@ "$type": "color", "$value": "{global.green.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{global.green.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{global.green.contrast-2}" } @@ -377,11 +377,11 @@ "$type": "color", "$value": "{global.red.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{global.red.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{global.red.3}" }, @@ -425,11 +425,11 @@ "$type": "color", "$value": "{global.red.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{global.red.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{global.red.contrast-2}" } @@ -439,11 +439,11 @@ "$type": "color", "$value": "{global.blue.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{global.blue.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{global.blue.3}" }, @@ -487,11 +487,11 @@ "$type": "color", "$value": "{global.blue.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{global.blue.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{global.blue.contrast-2}" } @@ -501,11 +501,11 @@ "$type": "color", "$value": "{global.yellow.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{global.yellow.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{global.yellow.3}" }, @@ -549,11 +549,11 @@ "$type": "color", "$value": "{global.orange.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{global.orange.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{global.orange.contrast-2}" } @@ -569,4 +569,4 @@ } } } -} \ No newline at end of file +} diff --git a/design-tokens/semantic/modes/main-color/accent.json b/design-tokens/semantic/modes/main-color/accent.json index 67bbf1ee5d..c5bb1de73b 100644 --- a/design-tokens/semantic/modes/main-color/accent.json +++ b/design-tokens/semantic/modes/main-color/accent.json @@ -5,13 +5,13 @@ "$type": "color", "$value": "{color.accent.background-default}" }, - "background-subtle": { + "background-tinted": { "$type": "color", - "$value": "{color.accent.background-subtle}" + "$value": "{color.accent.background-tinted}" }, - "surface-default": { + "surface-tinted": { "$type": "color", - "$value": "{color.accent.surface-default}" + "$value": "{color.accent.surface-tinted}" }, "surface-hover": { "$type": "color", @@ -53,14 +53,14 @@ "$type": "color", "$value": "{color.accent.text-default}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", - "$value": "{color.accent.contrast-default}" + "$value": "{color.accent.base-contrast-default}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", - "$value": "{color.accent.contrast-subtle}" + "$value": "{color.accent.base-contrast-subtle}" } } } -} \ No newline at end of file +} diff --git a/design-tokens/semantic/modes/support-color/brand1.json b/design-tokens/semantic/modes/support-color/brand1.json index e7835b9f1f..be650c486c 100644 --- a/design-tokens/semantic/modes/support-color/brand1.json +++ b/design-tokens/semantic/modes/support-color/brand1.json @@ -5,13 +5,13 @@ "$type": "color", "$value": "{color.brand1.background-default}" }, - "background-subtle": { + "background-tinted": { "$type": "color", - "$value": "{color.brand1.background-subtle}" + "$value": "{color.brand1.background-tinted}" }, - "surface-default": { + "surface-tinted": { "$type": "color", - "$value": "{color.brand1.surface-default}" + "$value": "{color.brand1.surface-tinted}" }, "surface-hover": { "$type": "color", @@ -53,14 +53,14 @@ "$type": "color", "$value": "{color.brand1.text-default}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", - "$value": "{color.brand1.contrast-default}" + "$value": "{color.brand1.base-contrast-default}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", - "$value": "{color.brand1.contrast-subtle}" + "$value": "{color.brand1.base-contrast-subtle}" } } } -} \ No newline at end of file +} diff --git a/design-tokens/semantic/modes/support-color/brand2.json b/design-tokens/semantic/modes/support-color/brand2.json index 88f89b34b0..3f59a68736 100644 --- a/design-tokens/semantic/modes/support-color/brand2.json +++ b/design-tokens/semantic/modes/support-color/brand2.json @@ -5,13 +5,13 @@ "$type": "color", "$value": "{color.brand2.background-default}" }, - "background-subtle": { + "background-tinted": { "$type": "color", - "$value": "{color.brand2.background-subtle}" + "$value": "{color.brand2.background-tinted}" }, - "surface-default": { + "surface-tinted": { "$type": "color", - "$value": "{color.brand2.surface-default}" + "$value": "{color.brand2.surface-tinted}" }, "surface-hover": { "$type": "color", @@ -53,14 +53,14 @@ "$type": "color", "$value": "{color.brand2.text-default}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", - "$value": "{color.brand2.contrast-default}" + "$value": "{color.brand2.base-contrast-default}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", - "$value": "{color.brand2.contrast-subtle}" + "$value": "{color.brand2.base-contrast-subtle}" } } } -} \ No newline at end of file +} diff --git a/design-tokens/semantic/modes/support-color/brand3.json b/design-tokens/semantic/modes/support-color/brand3.json index fa915792c0..e84269bd2d 100644 --- a/design-tokens/semantic/modes/support-color/brand3.json +++ b/design-tokens/semantic/modes/support-color/brand3.json @@ -5,13 +5,13 @@ "$type": "color", "$value": "{color.brand3.background-default}" }, - "background-subtle": { + "background-tinted": { "$type": "color", - "$value": "{color.brand3.background-subtle}" + "$value": "{color.brand3.background-tinted}" }, - "surface-default": { + "surface-tinted": { "$type": "color", - "$value": "{color.brand3.surface-default}" + "$value": "{color.brand3.surface-tinted}" }, "surface-hover": { "$type": "color", @@ -53,14 +53,14 @@ "$type": "color", "$value": "{color.brand3.text-default}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", - "$value": "{color.brand3.contrast-default}" + "$value": "{color.brand3.base-contrast-default}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", - "$value": "{color.brand3.contrast-subtle}" + "$value": "{color.brand3.base-contrast-subtle}" } } } -} \ No newline at end of file +} diff --git a/packages/cli/src/migrations/codemods/css/plugins.ts b/packages/cli/src/migrations/codemods/css/plugins.ts index 96dfff55e0..106fee1236 100644 --- a/packages/cli/src/migrations/codemods/css/plugins.ts +++ b/packages/cli/src/migrations/codemods/css/plugins.ts @@ -33,19 +33,23 @@ export const cssVarRename: PluginGenerator = (dictionary) => ({ const { value, prop } = decl; const deleted = new Set(); + let count = 0; for (const [from, to] of Object.entries(dictionary)) { - if (!R.isEmpty(to)) { + if (R.isNotEmpty(to)) { + if (to === '[delete]') { + deleted.add(deleteMsg(decl, from)); + } + if (R.includes(from, value)) { - if (to === '[delete]') { - deleted.add(deleteMsg(decl, from)); - } decl.value = value.replace(from, to); - } else if (R.includes(from, prop) && decl.variable) { - if (to === '[delete]') { - deleted.add(deleteMsg(decl, from)); - } + count++; + continue; + } + + if (R.includes(from, prop) && decl.variable) { decl.prop = prop.replace(from, to); + count++; } } } @@ -53,5 +57,9 @@ export const cssVarRename: PluginGenerator = (dictionary) => ({ if (deleted.size > 0) { Array.from(deleted).forEach(printDelete); } + + if (count > 0) { + console.log(`Renamed ${count} variables`); + } }, }); diff --git a/packages/cli/src/migrations/codemods/css/run.ts b/packages/cli/src/migrations/codemods/css/run.ts index 132211868d..b54f44b1a3 100644 --- a/packages/cli/src/migrations/codemods/css/run.ts +++ b/packages/cli/src/migrations/codemods/css/run.ts @@ -13,9 +13,17 @@ export const runCssCodemod = async ({ plugins = [], globPattern = './**/*.css' } const processor = postcss(plugins); const transform = async () => { - const files = await glob(globPattern, { ignore: ['node_modules/**', 'dist/**'] }); + console.log(`Running migration in ${globPattern}`); + const files = await glob([globPattern], { + ignore: ['**/node_modules/**', '**/dist/**'], // TODO: Not working as expected + absolute: true, + }); const filePromises = files.map(async (file) => { + if (file.includes('node_modules') || file.includes('dist')) { + // console.log(`Skipping ${file}`); + return; + } const contents = fs.readFileSync(file).toString(); const result = await processor.process(contents, { from: file }); diff --git a/packages/cli/src/migrations/color-rename-next49.ts b/packages/cli/src/migrations/color-rename-next49.ts new file mode 100644 index 0000000000..334ffc2190 --- /dev/null +++ b/packages/cli/src/migrations/color-rename-next49.ts @@ -0,0 +1,54 @@ +import * as R from 'ramda'; +import { cssVarRename } from './codemods/css/plugins.js'; +import { runCssCodemod } from './codemods/css/run.js'; + +/** + * Replaces placeholders [color] in the given templates with the provided colors. + * + * @param {string} oldTemplate - The template string containing the placeholder to be replaced. + * @param {string} newTemplate - The template string containing the placeholder to be replaced. + * @param {string[]} colors - An array of color strings to replace the placeholder in the templates. + * @returns {Record} An object mapping the old template with replaced colors to the new template with replaced colors. + */ +const replace = ( + oldTemplate: string, + newTemplate: string, + colors: string[], + placeholder = '[color]', +): Record => + R.reduce( + (acc: Record, color) => { + acc[oldTemplate.replace(placeholder, color)] = newTemplate.replace(placeholder, color); + return acc; + }, + {} as Record, + colors, + ); + +const colors = ['neutral', 'accent', 'brand1', 'brand2', 'brand3', 'danger', 'warning', 'success', 'info']; + +export default (glob?: string) => { + const renames = { + // Background + '--ds-color-background-subtle': '--ds-color-background-tinted', + ...replace('--ds-color-[color]-background-subtle', '--ds-color-[color]-background-tinted', colors), + // Surface + '--ds-color-surface-default': '--ds-color-surface-tinted', + ...replace('--ds-color-[color]-surface-default', '--ds-color-[color]-surface-tinted', colors), + // Contrast + '--ds-color-contrast-default': '--ds-color-base-contrast-default', + '--ds-color-contrast-subtle': '--ds-color-base-contrast-subtle', + ...replace('--ds-color-[color]-contrast-default', '--ds-color-[color]-base-contrast-default', colors), + ...replace('--ds-color-[color]-contrast-subtle', '--ds-color-[color]-base-contrast-subtle', colors), + }; + + console.log(`Renaming ${Object.keys(renames).length} variables`, renames); + + return runCssCodemod({ + globPattern: glob, + plugins: [ + // https://github.com/digdir/designsystemet/issues/3046 + cssVarRename(renames), + ], + }); +}; diff --git a/packages/cli/src/migrations/index.ts b/packages/cli/src/migrations/index.ts index 4e6d287bef..723a9d44a9 100644 --- a/packages/cli/src/migrations/index.ts +++ b/packages/cli/src/migrations/index.ts @@ -1,7 +1,9 @@ import betaToV1 from './beta-to-v1.js'; +import colorRenameNext49 from './color-rename-next49.js'; import reactBetaToV1 from './react-beta-to-v1.js'; export default { 'css-beta-to-v1': betaToV1, 'react-beta-to-v1': reactBetaToV1, + 'css-renames-next48-to-next49': colorRenameNext49, }; diff --git a/packages/cli/src/tokens/build/builtin-colors.css b/packages/cli/src/tokens/build/builtin-colors.css index dc0c68db90..d99596f2f4 100644 --- a/packages/cli/src/tokens/build/builtin-colors.css +++ b/packages/cli/src/tokens/build/builtin-colors.css @@ -1,8 +1,8 @@ @layer ds.theme.color { [data-color='neutral'] { --ds-color-background-default: var(--ds-color-neutral-background-default); - --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); - --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); --ds-color-surface-active: var(--ds-color-neutral-surface-active); --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); @@ -13,14 +13,14 @@ --ds-color-base-active: var(--ds-color-neutral-base-active); --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); --ds-color-text-default: var(--ds-color-neutral-text-default); - --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); } [data-color='success'] { --ds-color-background-default: var(--ds-color-success-background-default); - --ds-color-background-subtle: var(--ds-color-success-background-subtle); - --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); --ds-color-surface-hover: var(--ds-color-success-surface-hover); --ds-color-surface-active: var(--ds-color-success-surface-active); --ds-color-border-subtle: var(--ds-color-success-border-subtle); @@ -31,14 +31,14 @@ --ds-color-base-active: var(--ds-color-success-base-active); --ds-color-text-subtle: var(--ds-color-success-text-subtle); --ds-color-text-default: var(--ds-color-success-text-default); - --ds-color-contrast-default: var(--ds-color-success-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); } [data-color='warning'] { --ds-color-background-default: var(--ds-color-warning-background-default); - --ds-color-background-subtle: var(--ds-color-warning-background-subtle); - --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); --ds-color-surface-hover: var(--ds-color-warning-surface-hover); --ds-color-surface-active: var(--ds-color-warning-surface-active); --ds-color-border-subtle: var(--ds-color-warning-border-subtle); @@ -49,14 +49,14 @@ --ds-color-base-active: var(--ds-color-warning-base-active); --ds-color-text-subtle: var(--ds-color-warning-text-subtle); --ds-color-text-default: var(--ds-color-warning-text-default); - --ds-color-contrast-default: var(--ds-color-warning-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); } [data-color='danger'] { --ds-color-background-default: var(--ds-color-danger-background-default); - --ds-color-background-subtle: var(--ds-color-danger-background-subtle); - --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); --ds-color-surface-hover: var(--ds-color-danger-surface-hover); --ds-color-surface-active: var(--ds-color-danger-surface-active); --ds-color-border-subtle: var(--ds-color-danger-border-subtle); @@ -67,14 +67,14 @@ --ds-color-base-active: var(--ds-color-danger-base-active); --ds-color-text-subtle: var(--ds-color-danger-text-subtle); --ds-color-text-default: var(--ds-color-danger-text-default); - --ds-color-contrast-default: var(--ds-color-danger-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); } [data-color='info'] { --ds-color-background-default: var(--ds-color-info-background-default); - --ds-color-background-subtle: var(--ds-color-info-background-subtle); - --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); --ds-color-surface-hover: var(--ds-color-info-surface-hover); --ds-color-surface-active: var(--ds-color-info-surface-active); --ds-color-border-subtle: var(--ds-color-info-border-subtle); @@ -85,7 +85,7 @@ --ds-color-base-active: var(--ds-color-info-base-active); --ds-color-text-subtle: var(--ds-color-info-text-subtle); --ds-color-text-default: var(--ds-color-info-text-default); - --ds-color-contrast-default: var(--ds-color-info-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); } } diff --git a/packages/cli/src/tokens/design-tokens/template/$themes.json b/packages/cli/src/tokens/design-tokens/template/$themes.json index bcfcddf74f..f619dc6943 100644 --- a/packages/cli/src/tokens/design-tokens/template/$themes.json +++ b/packages/cli/src/tokens/design-tokens/template/$themes.json @@ -1176,8 +1176,8 @@ "$figmaModeId": "34811:5", "$figmaVariableReferences": { "color.accent.background-default": "f49a8ae82b185007b22920fbae7187b691eeaf3a", - "color.accent.background-subtle": "5e3b9a411452fa4d0f73919246ca9453c304f141", - "color.accent.surface-default": "85ffd2bc928286dfa2cec7d4349da6d84b3e0426", + "color.accent.background-tinted": "5e3b9a411452fa4d0f73919246ca9453c304f141", + "color.accent.surface-tinted": "85ffd2bc928286dfa2cec7d4349da6d84b3e0426", "color.accent.surface-hover": "7a0286bd72986f196347d16f2ed155c0759c56c5", "color.accent.surface-active": "0031b42b668339ad217dc08b036a59b2a2b2a069", "color.accent.border-subtle": "84694789f949bc1d07d460243d3341eec4b1cd6c", @@ -1188,11 +1188,11 @@ "color.accent.base-active": "cabe1ca5c92be03ff0f8ecc641f61e062f9205d0", "color.accent.text-subtle": "c61420d1591cb3054b7b674d8b5e66a3da32f45d", "color.accent.text-default": "69c1ab821f155ef310a787a582bd7044cc2024c2", - "color.accent.contrast-default": "a005e23a4c703e2562b36d0857d100615d63b7ba", - "color.accent.contrast-subtle": "17cd3a87dbdb6d98f4812df22a01c9bf7c9e6eb7", + "color.accent.base-contrast-default": "a005e23a4c703e2562b36d0857d100615d63b7ba", + "color.accent.base-contrast-subtle": "17cd3a87dbdb6d98f4812df22a01c9bf7c9e6eb7", "color.neutral.background-default": "d6f9694139ef613a1180e0aadb285c5c45f91399", - "color.neutral.background-subtle": "8a721b17adff4e28757ebc6b0042a5516520f366", - "color.neutral.surface-default": "e2c03a3b331f3012faa7f51d417ecff359f234e3", + "color.neutral.background-tinted": "8a721b17adff4e28757ebc6b0042a5516520f366", + "color.neutral.surface-tinted": "e2c03a3b331f3012faa7f51d417ecff359f234e3", "color.neutral.surface-hover": "4e5e3c9e72aa0168ae419bf666cea5bb7537b618", "color.neutral.surface-active": "89b0801103ecac86ae0e61dc676eff413add2156", "color.neutral.border-subtle": "7a663945c2fe3ae09c99372033dad23536950bf9", @@ -1203,11 +1203,11 @@ "color.neutral.base-active": "1e91d5c7998403e54a410cc7c0afcbdc23e67876", "color.neutral.text-subtle": "353b7978d08eb6a48bbadb41fa6ea0b14423c935", "color.neutral.text-default": "5fbef256bec38be70d71aa18f7829e8425c17231", - "color.neutral.contrast-default": "2bf90ab84530df97211233a74a3f64360ecbba9c", - "color.neutral.contrast-subtle": "c73acc58f560f3a1b38d38d427cfe2587210d524", + "color.neutral.base-contrast-default": "2bf90ab84530df97211233a74a3f64360ecbba9c", + "color.neutral.base-contrast-subtle": "c73acc58f560f3a1b38d38d427cfe2587210d524", "color.brand1.background-default": "daa99d6c64bfa1627651be4ff35c01fb4feebf17", - "color.brand1.background-subtle": "7932cc19647fd645e41edcf31e58af032d498bff", - "color.brand1.surface-default": "8f148ef8f46b44be191cade330704a6176582d16", + "color.brand1.background-tinted": "7932cc19647fd645e41edcf31e58af032d498bff", + "color.brand1.surface-tinted": "8f148ef8f46b44be191cade330704a6176582d16", "color.brand1.surface-hover": "5ebcedaa73262b30ee59ac40fd7468d3a174b6a6", "color.brand1.surface-active": "4317f602cb1ffb1b2c563987489c28b26ea5d0d5", "color.brand1.border-subtle": "334ed85302e055bb93afbb44b498537e3df75927", @@ -1218,11 +1218,11 @@ "color.brand1.base-active": "e999cacdf408310d97ce33739b1ec154ff3c5e98", "color.brand1.text-subtle": "38331588055038d86eddadad9e50b500647ab4db", "color.brand1.text-default": "3a69d217642b5cefd8daf62eec49f44f2afa5825", - "color.brand1.contrast-default": "acc41cb4669ed5ddb8cd6f3226dd9624b222b217", - "color.brand1.contrast-subtle": "85f3a92d7440c4e4cf72f1da86d8429590710d38", + "color.brand1.base-contrast-default": "acc41cb4669ed5ddb8cd6f3226dd9624b222b217", + "color.brand1.base-contrast-subtle": "85f3a92d7440c4e4cf72f1da86d8429590710d38", "color.brand2.background-default": "acc174832ad87ef85cc066ea8cbdbb5dc656bb5d", - "color.brand2.background-subtle": "e2c3e574128bd48db220a9962cbf2c3015601be1", - "color.brand2.surface-default": "d1d41d19926b2d39440cdc8461eafb258b5c7faa", + "color.brand2.background-tinted": "e2c3e574128bd48db220a9962cbf2c3015601be1", + "color.brand2.surface-tinted": "d1d41d19926b2d39440cdc8461eafb258b5c7faa", "color.brand2.surface-hover": "c9a889bc802d0344dedbbe43cd27605579f1c44b", "color.brand2.surface-active": "f56d9b334f7f62457e7eed8ae9e9e6e4c4492d25", "color.brand2.border-subtle": "448d523fdcc10f45b55ba43a2bff1ca3bc5765ad", @@ -1233,11 +1233,11 @@ "color.brand2.base-active": "46cbfdf8ee73045a58f8ffdf3170415c3d8f597b", "color.brand2.text-subtle": "f18fe585ef084bd062194b8310e5a95d6859b7e2", "color.brand2.text-default": "3425c43c78c9b23116bb307bf283f7da90193e53", - "color.brand2.contrast-default": "6be545988d38c38a43887779afcab1a955dc0376", - "color.brand2.contrast-subtle": "602c4e1f274f2e6ec679f0260fb36ba4747837b1", + "color.brand2.base-contrast-default": "6be545988d38c38a43887779afcab1a955dc0376", + "color.brand2.base-contrast-subtle": "602c4e1f274f2e6ec679f0260fb36ba4747837b1", "color.brand3.background-default": "cedcec3bec005fc536b5f6c6e24e2bd75cc8aced", - "color.brand3.background-subtle": "255f5334bc3cb8355f16a73f152d28c934062a2d", - "color.brand3.surface-default": "12ef1bf674d809053f040809b2cf56bbded54cbf", + "color.brand3.background-tinted": "255f5334bc3cb8355f16a73f152d28c934062a2d", + "color.brand3.surface-tinted": "12ef1bf674d809053f040809b2cf56bbded54cbf", "color.brand3.surface-hover": "b09c83201802a5f1f8c9d797361fd4c942a969e3", "color.brand3.surface-active": "4e9e95a169f99f705a9a3f882191b3cf71e2eed7", "color.brand3.border-subtle": "1dff48ff9dd8ac8a0ef302eddd3a83da1765872d", @@ -1248,11 +1248,11 @@ "color.brand3.base-active": "6b629dcc25826eaf4089a93598d47591e665b780", "color.brand3.text-subtle": "ffb4ac12f250b94f85254fab2ea936bcb17e7567", "color.brand3.text-default": "df525269b6c216c5211c61e5eb411f007d1c49ac", - "color.brand3.contrast-default": "03cdf3563a32c9314726705e0c331842ab2b3e60", - "color.brand3.contrast-subtle": "c22ec18ade8eaf0e37caa17f6ffd42182e979de1", + "color.brand3.base-contrast-default": "03cdf3563a32c9314726705e0c331842ab2b3e60", + "color.brand3.base-contrast-subtle": "c22ec18ade8eaf0e37caa17f6ffd42182e979de1", "color.success.background-default": "05ab00df7037fc1de4625e3e2a0e99bedcdd9f85", - "color.success.background-subtle": "b3735ad2a6b23e4f9c8441c232df673d8d314845", - "color.success.surface-default": "61f83be49fd5050bb7ed42d62f7f27a39556a083", + "color.success.background-tinted": "b3735ad2a6b23e4f9c8441c232df673d8d314845", + "color.success.surface-tinted": "61f83be49fd5050bb7ed42d62f7f27a39556a083", "color.success.surface-hover": "5a35761501c289fd8f16a9058a296c3e8d07de2a", "color.success.surface-active": "95ad2224fbbc245291a9147baf6995073cd6f0d1", "color.success.border-subtle": "f698c4465ad9121225a0a36e4a1637b6700aad35", @@ -1263,11 +1263,11 @@ "color.success.base-active": "523431bbfc284985dd5dcf0264a6671d6aa7395c", "color.success.text-subtle": "4e39ae5eb65355087ff23a941627dcec33871a88", "color.success.text-default": "7839ffaf51cf696e80b43994fecef03c8b6d30d5", - "color.success.contrast-default": "623434d11c686ee908e8b8a1b92e1003a171c37d", - "color.success.contrast-subtle": "added0c656770c52d3d4871773740ef90a7094eb", + "color.success.base-contrast-default": "623434d11c686ee908e8b8a1b92e1003a171c37d", + "color.success.base-contrast-subtle": "added0c656770c52d3d4871773740ef90a7094eb", "color.danger.background-default": "566615a9d7cc071382ed88bdb6b407251ea56d41", - "color.danger.background-subtle": "74644bb0df2c26c7de3d348e0d5ed74a80f1c87f", - "color.danger.surface-default": "1749ef78dd030f3350976c469c2de04a33016808", + "color.danger.background-tinted": "74644bb0df2c26c7de3d348e0d5ed74a80f1c87f", + "color.danger.surface-tinted": "1749ef78dd030f3350976c469c2de04a33016808", "color.danger.surface-hover": "aa318b1c5b7b31427fb2f3bdb6d7a2d89994d44f", "color.danger.surface-active": "ac29ead842824e61df9a702f1b319fbc266f314e", "color.danger.border-subtle": "c347bec0633f44c67ab76dd464e0c174d140a437", @@ -1278,11 +1278,11 @@ "color.danger.base-active": "cf8652537239ef17c09fbadcfb8d3c12beb6ee1a", "color.danger.text-subtle": "aebac14e197ff73ff2438f3c4ba6ed13e3f6afb5", "color.danger.text-default": "7db406326afa5a5bb00bf68b12123e64530f5c63", - "color.danger.contrast-default": "e8edda99009eae8aef5bb7e7538c990b766439e0", - "color.danger.contrast-subtle": "370acca07c8c26e070bfeab6e6bf423ec0b7effc", + "color.danger.base-contrast-default": "e8edda99009eae8aef5bb7e7538c990b766439e0", + "color.danger.base-contrast-subtle": "370acca07c8c26e070bfeab6e6bf423ec0b7effc", "color.info.background-default": "0fa5b671b5e304a9044c6e1a9e76f88daa60292f", - "color.info.background-subtle": "672bd0ce8ae3b0edebbf74f40b53bbaee1cb9083", - "color.info.surface-default": "6344f85031e43a952f90156935f901442be233ed", + "color.info.background-tinted": "672bd0ce8ae3b0edebbf74f40b53bbaee1cb9083", + "color.info.surface-tinted": "6344f85031e43a952f90156935f901442be233ed", "color.info.surface-hover": "020d6366c9e5a8886599c316b29f949a49053940", "color.info.surface-active": "801ae4b9235d2bb1461ebf1b50c0d95c4f6a3ba3", "color.info.border-subtle": "9319cfbfa7693a72d5e2d56d555bdb2ecca791d5", @@ -1293,11 +1293,11 @@ "color.info.base-active": "073fe124f096447e2bc7fd0fbb26fefc5c8019c2", "color.info.text-subtle": "469fd37a9f5a9326fa79f673da580531f864a801", "color.info.text-default": "5fa4d18382f7d4a23c98ecb3d1a5af6530cd6017", - "color.info.contrast-default": "5d20ef679fafa42e691bba582e7f1a748967918f", - "color.info.contrast-subtle": "dbbbf393822c99d5f07fa500baddc470094ef3f3", + "color.info.base-contrast-default": "5d20ef679fafa42e691bba582e7f1a748967918f", + "color.info.base-contrast-subtle": "dbbbf393822c99d5f07fa500baddc470094ef3f3", "color.warning.background-default": "0b67c817cb26096be9a15654f2089d06a77490fd", - "color.warning.background-subtle": "9808b3e7df39e86997ca7157d2684484cf0ccaf3", - "color.warning.surface-default": "0a1b03a23074d996758ae0daaafd80751234499a", + "color.warning.background-tinted": "9808b3e7df39e86997ca7157d2684484cf0ccaf3", + "color.warning.surface-tinted": "0a1b03a23074d996758ae0daaafd80751234499a", "color.warning.surface-hover": "e84de2b9c1d1b0fdd9310a236863ad7d7febae49", "color.warning.surface-active": "175d21478a345bb2a736a92fe42d4c9c75c02af9", "color.warning.border-subtle": "44ddecf5d46ff4903f0e7eceb9f1cea475c38fbf", @@ -1308,8 +1308,8 @@ "color.warning.base-active": "1581c75ed7144a8f5d2f8ec851b4183559df1da8", "color.warning.text-subtle": "5caaee96e45f0a32a430c7e5dc495a8e9fdc7bb8", "color.warning.text-default": "72a826e2cbae00a765d085c59fce739d872b6198", - "color.warning.contrast-default": "35c4bdd207c9e4331d4fb547d95834365fe5bf28", - "color.warning.contrast-subtle": "a17743c65773a4291b16901247c8f024143807d1", + "color.warning.base-contrast-default": "35c4bdd207c9e4331d4fb547d95834365fe5bf28", + "color.warning.base-contrast-subtle": "a17743c65773a4291b16901247c8f024143807d1", "color.focus.inner": "c45b468ce89293d0b4c4f4183720d2fc90416551", "color.focus.outer": "872f0d2f20cdcb0fe1a2e0b5b40d2cec3f3ace7d", "disabled.opacity": "1c95cc4644615162e7bc8ac0067c0b8072a97f08", @@ -1374,8 +1374,8 @@ "$figmaModeId": "40350:0", "$figmaVariableReferences": { "color.main.background-default": "5a1c10917bd3dd0c93b581f52dc865498aaf058f", - "color.main.background-subtle": "2dda43c74eed383ea9b678916cb563ed4111d318", - "color.main.surface-default": "db7c9a7ccf77b7ce8e2f19a14c49418c2104f5f5", + "color.main.background-tinted": "2dda43c74eed383ea9b678916cb563ed4111d318", + "color.main.surface-tinted": "db7c9a7ccf77b7ce8e2f19a14c49418c2104f5f5", "color.main.surface-hover": "6c5c6346ffeb84e5af8887003565fe3344de51d4", "color.main.surface-active": "4227430e1958272eb53e814430f04684344fba13", "color.main.border-subtle": "9bae92e2405beecec84ec286150fa96871efcc5d", @@ -1386,8 +1386,8 @@ "color.main.base-active": "0960e79a0ebfce1a9a672af7cda70f44226990b3", "color.main.text-subtle": "7c4155a9ba2fff44aaa1f38bc024a0320644b849", "color.main.text-default": "5c36cac71fd419cac01079812cdc5a21e671f9d1", - "color.main.contrast-default": "93c3b64301733412617e795dceb3e912b2d91f20", - "color.main.contrast-subtle": "9ff40f41b57e858dda52bd167f0f7a5f3dbf981e" + "color.main.base-contrast-default": "93c3b64301733412617e795dceb3e912b2d91f20", + "color.main.base-contrast-subtle": "9ff40f41b57e858dda52bd167f0f7a5f3dbf981e" }, "group": "Main color" }, @@ -1402,8 +1402,8 @@ "$figmaModeId": "40350:1", "$figmaVariableReferences": { "color.support.background-default": "3de6663f7c078f73a5f0b712ff7da5d32927af20", - "color.support.background-subtle": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", - "color.support.surface-default": "cae32dc4ddd4b08799c28570400c5ff67d612f02", + "color.support.background-tinted": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", + "color.support.surface-tinted": "cae32dc4ddd4b08799c28570400c5ff67d612f02", "color.support.surface-hover": "64b794a11777dcd20e989241cb328510deee796d", "color.support.surface-active": "92b89fa58489c3b5666de70bdccbc527fe1a1b05", "color.support.border-subtle": "b7e94885482f0f56d5b219a447fbd08fa7da50cf", @@ -1414,8 +1414,8 @@ "color.support.base-active": "5cf788e1b97453219736627cc110ecacb1f2eac9", "color.support.text-subtle": "82b874ab403889814c58c83d95b5dca7e0a39301", "color.support.text-default": "67e0c8e254ef6dfdbf6ae96ca8d6393d23122765", - "color.support.contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", - "color.support.contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" + "color.support.base-contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", + "color.support.base-contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" }, "group": "Support color" }, @@ -1430,8 +1430,8 @@ "$figmaModeId": "40350:2", "$figmaVariableReferences": { "color.support.background-default": "3de6663f7c078f73a5f0b712ff7da5d32927af20", - "color.support.background-subtle": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", - "color.support.surface-default": "cae32dc4ddd4b08799c28570400c5ff67d612f02", + "color.support.background-tinted": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", + "color.support.surface-tinted": "cae32dc4ddd4b08799c28570400c5ff67d612f02", "color.support.surface-hover": "64b794a11777dcd20e989241cb328510deee796d", "color.support.surface-active": "92b89fa58489c3b5666de70bdccbc527fe1a1b05", "color.support.border-subtle": "b7e94885482f0f56d5b219a447fbd08fa7da50cf", @@ -1442,8 +1442,8 @@ "color.support.base-active": "5cf788e1b97453219736627cc110ecacb1f2eac9", "color.support.text-subtle": "82b874ab403889814c58c83d95b5dca7e0a39301", "color.support.text-default": "67e0c8e254ef6dfdbf6ae96ca8d6393d23122765", - "color.support.contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", - "color.support.contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" + "color.support.base-contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", + "color.support.base-contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" }, "group": "Support color" }, @@ -1458,8 +1458,8 @@ "$figmaModeId": "40350:3", "$figmaVariableReferences": { "color.support.background-default": "3de6663f7c078f73a5f0b712ff7da5d32927af20", - "color.support.background-subtle": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", - "color.support.surface-default": "cae32dc4ddd4b08799c28570400c5ff67d612f02", + "color.support.background-tinted": "5370d4d84ab5b88b7b9a9dcc59265cdfa982708a", + "color.support.surface-tinted": "cae32dc4ddd4b08799c28570400c5ff67d612f02", "color.support.surface-hover": "64b794a11777dcd20e989241cb328510deee796d", "color.support.surface-active": "92b89fa58489c3b5666de70bdccbc527fe1a1b05", "color.support.border-subtle": "b7e94885482f0f56d5b219a447fbd08fa7da50cf", @@ -1470,8 +1470,8 @@ "color.support.base-active": "5cf788e1b97453219736627cc110ecacb1f2eac9", "color.support.text-subtle": "82b874ab403889814c58c83d95b5dca7e0a39301", "color.support.text-default": "67e0c8e254ef6dfdbf6ae96ca8d6393d23122765", - "color.support.contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", - "color.support.contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" + "color.support.base-contrast-default": "e251a7a2fb54fc06e907c6cfed1426895a437993", + "color.support.base-contrast-subtle": "128d9b8eae01f0cdfe53c87560181ed6a67a8d69" }, "group": "Support color" } diff --git a/packages/cli/src/tokens/design-tokens/template/semantic/color-base-file.json b/packages/cli/src/tokens/design-tokens/template/semantic/color-base-file.json index d21b8b9a26..376fe2dfc1 100644 --- a/packages/cli/src/tokens/design-tokens/template/semantic/color-base-file.json +++ b/packages/cli/src/tokens/design-tokens/template/semantic/color-base-file.json @@ -5,11 +5,11 @@ "$type": "color", "$value": "{global.green.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{global.green.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{global.green.3}" }, @@ -53,11 +53,11 @@ "$type": "color", "$value": "{global.green.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{global.green.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{global.green.contrast-2}" } @@ -67,11 +67,11 @@ "$type": "color", "$value": "{global.red.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{global.red.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{global.red.3}" }, @@ -115,11 +115,11 @@ "$type": "color", "$value": "{global.red.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{global.red.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{global.red.contrast-2}" } @@ -129,11 +129,11 @@ "$type": "color", "$value": "{global.blue.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{global.blue.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{global.blue.3}" }, @@ -177,11 +177,11 @@ "$type": "color", "$value": "{global.blue.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{global.blue.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{global.blue.contrast-2}" } @@ -191,11 +191,11 @@ "$type": "color", "$value": "{global.yellow.1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{global.yellow.2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{global.yellow.3}" }, @@ -239,11 +239,11 @@ "$type": "color", "$value": "{global.orange.13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{global.orange.contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{global.orange.contrast-2}" } diff --git a/packages/cli/src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json b/packages/cli/src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json index 36c025a9f4..dfa11f1a95 100644 --- a/packages/cli/src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json +++ b/packages/cli/src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json @@ -3,13 +3,13 @@ "$type": "color", "$value": "{color..background-default}" }, - "background-subtle": { + "background-tinted": { "$type": "color", - "$value": "{color..background-subtle}" + "$value": "{color..background-tinted}" }, - "surface-default": { + "surface-tinted": { "$type": "color", - "$value": "{color..surface-default}" + "$value": "{color..surface-tinted}" }, "surface-hover": { "$type": "color", @@ -51,12 +51,12 @@ "$type": "color", "$value": "{color..text-default}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", - "$value": "{color..contrast-default}" + "$value": "{color..base-contrast-default}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", - "$value": "{color..contrast-subtle}" + "$value": "{color..base-contrast-subtle}" } } \ No newline at end of file diff --git a/packages/cli/src/tokens/design-tokens/template/semantic/semantic-color-template.json b/packages/cli/src/tokens/design-tokens/template/semantic/semantic-color-template.json index cbda5bccd6..ffd2dae4c0 100644 --- a/packages/cli/src/tokens/design-tokens/template/semantic/semantic-color-template.json +++ b/packages/cli/src/tokens/design-tokens/template/semantic/semantic-color-template.json @@ -3,11 +3,11 @@ "$type": "color", "$value": "{color..1}" }, - "background-subtle": { + "background-tinted": { "$type": "color", "$value": "{color..2}" }, - "surface-default": { + "surface-tinted": { "$type": "color", "$value": "{color..3}" }, @@ -51,11 +51,11 @@ "$type": "color", "$value": "{color..13}" }, - "contrast-default": { + "base-contrast-default": { "$type": "color", "$value": "{color..contrast-1}" }, - "contrast-subtle": { + "base-contrast-subtle": { "$type": "color", "$value": "{color..contrast-2}" } diff --git a/packages/css/src/alert.css b/packages/css/src/alert.css index 71d586d000..782f742df1 100644 --- a/packages/css/src/alert.css +++ b/packages/css/src/alert.css @@ -1,6 +1,6 @@ .ds-alert { /* default color/variant: info */ - --dsc-alert-background: var(--ds-color-info-surface-default); + --dsc-alert-background: var(--ds-color-info-surface-tinted); --dsc-alert-border-color: var(--ds-color-info-border-default); --dsc-alert-icon-color: var(--ds-color-info-text-subtle); --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E"); @@ -42,7 +42,7 @@ * Colors */ &[data-color] { - --dsc-alert-background: var(--ds-color-surface-default); + --dsc-alert-background: var(--ds-color-surface-tinted); --dsc-alert-border-color: var(--ds-color-border-default); --dsc-alert-icon-color: var(--ds-color-text-subtle); --dsc-alert-color: var(--ds-color-text-default); diff --git a/packages/css/src/avatar.css b/packages/css/src/avatar.css index e3767419ec..a4f808b87a 100644 --- a/packages/css/src/avatar.css +++ b/packages/css/src/avatar.css @@ -1,7 +1,7 @@ .ds-avatar { --dsc-avatar-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); --dsc-avatar-background: var(--ds-color-base-default); - --dsc-avatar-color: var(--ds-color-contrast-default); + --dsc-avatar-color: var(--ds-color-base-contrast-default); --dsc-avatar-size: var(--ds-size-12); --dsc-avatar-padding: var(--ds-size-2); --dsc-avatar-border-radius: var(--ds-border-radius-full); diff --git a/packages/css/src/badge.css b/packages/css/src/badge.css index 8fb4abf59e..7eb61c025c 100644 --- a/packages/css/src/badge.css +++ b/packages/css/src/badge.css @@ -1,6 +1,6 @@ .ds-badge { --dsc-badge-background: var(--ds-color-base-default); - --dsc-badge-color: var(--ds-color-contrast-default); + --dsc-badge-color: var(--ds-color-base-contrast-default); --dsc-badge-padding: 0 calc(var(--ds-size-1) + calc(var(--ds-size-1) / 2)); --dsc-badge-size: calc(var(--ds-size-3) + calc(var(--ds-size-1) / 2)); @@ -24,7 +24,7 @@ /* What do we do here? */ &[data-color='neutral'] { - --dsc-badge-background: var(--ds-color-neutral-surface-default); + --dsc-badge-background: var(--ds-color-neutral-surface-tinted); --dsc-badge-color: var(--ds-color-neutral-text-default); } } diff --git a/packages/css/src/button.css b/packages/css/src/button.css index 4e9e41053e..045fb04200 100644 --- a/packages/css/src/button.css +++ b/packages/css/src/button.css @@ -2,8 +2,8 @@ --dsc-button-background--active: var(--ds-color-base-active); --dsc-button-background--hover: var(--ds-color-base-hover); --dsc-button-background: var(--ds-color-base-default); - --dsc-button-color: var(--ds-color-contrast-default); - --dsc-button-color--hover: var(--ds-color-contrast-default); + --dsc-button-color: var(--ds-color-base-contrast-default); + --dsc-button-color--hover: var(--ds-color-base-contrast-default); --dsc-button-border-color: transparent; --dsc-button-gap: var(--ds-size-2); --dsc-button-padding: var(--ds-size-2) var(--ds-size-4); @@ -48,8 +48,8 @@ --dsc-button-background--active: var(--ds-color-base-active); --dsc-button-background--hover: var(--ds-color-base-hover); --dsc-button-background: var(--ds-color-base-default); - --dsc-button-color: var(--ds-color-contrast-default); - --dsc-button-color--hover: var(--ds-color-contrast-default); + --dsc-button-color: var(--ds-color-base-contrast-default); + --dsc-button-color--hover: var(--ds-color-base-contrast-default); &[data-variant='secondary'], &[data-variant='tertiary'] { diff --git a/packages/css/src/card.css b/packages/css/src/card.css index 6b0e744dbb..5d2c024d4c 100644 --- a/packages/css/src/card.css +++ b/packages/css/src/card.css @@ -1,7 +1,7 @@ .ds-card { --dsc-card-background--active: var(--ds-color-surface-active); --dsc-card-background--hover: var(--ds-color-surface-hover); - --dsc-card-background: var(--ds-color-surface-default); + --dsc-card-background: var(--ds-color-surface-tinted); --dsc-card-border: 1px solid; --dsc-card-border-color: var(--ds-color-border-subtle); --dsc-card-color: var(--ds-color-text-default); @@ -25,9 +25,9 @@ --dsc-card-background: var(--ds-color-background-default); } &[data-color='subtle'] { - --dsc-card-background--active: var(--ds-color-neutral-surface-default); - --dsc-card-background--hover: var(--ds-color-neutral-background-subtle); - --dsc-card-background: var(--ds-color-neutral-background-subtle); + --dsc-card-background--active: var(--ds-color-neutral-surface-tinted); + --dsc-card-background--hover: var(--ds-color-neutral-background-tinted); + --dsc-card-background: var(--ds-color-neutral-background-tinted); --dsc-card-border-color: var(--ds-color-neutral-border-subtle); --dsc-card-color: var(--ds-color-neutral-text-default); } diff --git a/packages/css/src/chip.css b/packages/css/src/chip.css index 18b5a5ff39..ad24972349 100644 --- a/packages/css/src/chip.css +++ b/packages/css/src/chip.css @@ -1,5 +1,5 @@ .ds-chip { - --dsc-chip-background: var(--ds-color-surface-default); + --dsc-chip-background: var(--ds-color-surface-tinted); --dsc-chip-background--hover: var(--ds-color-surface-hover); --dsc-chip-background--active: var(--ds-color-surface-active); --dsc-chip-background--checked: var(--ds-color-base-default); @@ -8,7 +8,7 @@ --dsc-chip-border-color: var(--ds-color-border-subtle); --dsc-chip-border-color--checked: transparent; --dsc-chip-color: var(--ds-color-text-default); - --dsc-chip-color--checked: var(--ds-color-contrast-default); + --dsc-chip-color--checked: var(--ds-color-base-contrast-default); --dsc-chip-input-color: var(--ds-color-border-strong); --dsc-chip-input-color--checked: var(--ds-color-base-default); --dsc-chip-border-radius: var(--ds-border-radius-full); diff --git a/packages/css/src/combobox.css b/packages/css/src/combobox.css index b061d6fd3b..2944ed5da6 100644 --- a/packages/css/src/combobox.css +++ b/packages/css/src/combobox.css @@ -6,7 +6,7 @@ .ds-textfield__adornment { color: var(--ds-color-neutral-text-subtle); - background: var(--ds-color-neutral-background-subtle); + background: var(--ds-color-neutral-background-tinted); padding: 9px var(--ds-size-4); border-radius: var(--ds-border-radius-md); border: solid 1px var(--ds-color-neutral-border-default); @@ -33,7 +33,7 @@ } .ds-textfield--readonly .ds-textfield__input { - background: var(--ds-color-neutral-background-subtle); + background: var(--ds-color-neutral-background-tinted); border-color: var(--ds-color-neutral-border-strong); } @@ -297,7 +297,7 @@ } .ds-combobox__clear-button:not(:disabled):hover { - background-color: var(--ds-color-neutral-surface-default); + background-color: var(--ds-color-neutral-surface-tinted); } .ds-combobox__disabled { @@ -371,7 +371,7 @@ } .ds-combobox__option.ds-combobox__option--active { - background: var(--ds-color-background-subtle); + background: var(--ds-color-background-tinted); border-left: 5px solid var(--ds-color-base-default); } diff --git a/packages/css/src/details.css b/packages/css/src/details.css index a0bfb68476..ef0a66df95 100644 --- a/packages/css/src/details.css +++ b/packages/css/src/details.css @@ -6,8 +6,8 @@ --dsc-details-padding: var(--ds-size-2) var(--ds-size-4); --dsc-details-size: var(--ds-size-14); --dsc-details-background: var(--ds-color-background-default); - --dsc-details-heading-background--hover: var(--ds-color-surface-default); - --dsc-details-heading-background--open: var(--ds-color-background-subtle); + --dsc-details-heading-background--hover: var(--ds-color-surface-tinted); + --dsc-details-heading-background--open: var(--ds-color-background-tinted); --dsc-details-heading-background: var(--ds-color-background-default); background: var(--dsc-details-background); @@ -18,20 +18,20 @@ /* with color */ [data-color]:where(:not([data-color='neutral'])) &, &[data-color]:where(:not([data-color='neutral'])) { - --dsc-details-background: var(--ds-color-background-subtle); + --dsc-details-background: var(--ds-color-background-tinted); --dsc-details-heading-background--hover: var(--ds-color-surface-hover); - --dsc-details-heading-background--open: var(--ds-color-surface-default); - --dsc-details-heading-background: var(--ds-color-surface-default); + --dsc-details-heading-background--open: var(--ds-color-surface-tinted); + --dsc-details-heading-background: var(--ds-color-surface-tinted); --dsc-details-border-color: var(--ds-color-border-subtle); } /* with subtle */ [data-color='subtle'] &, &[data-color='subtle'] { - --dsc-details-background: var(--ds-color-neutral-background-subtle); + --dsc-details-background: var(--ds-color-neutral-background-tinted); --dsc-details-heading-background--hover: var(--ds-color-neutral-surface-hover); - --dsc-details-heading-background--open: var(--ds-color-neutral-surface-default); - --dsc-details-heading-background: var(--ds-color-neutral-background-subtle); + --dsc-details-heading-background--open: var(--ds-color-neutral-surface-tinted); + --dsc-details-heading-background: var(--ds-color-neutral-background-tinted); --dsc-details-border-color: var(--ds-color-neutral-border-subtle); } diff --git a/packages/css/src/error-summary.css b/packages/css/src/error-summary.css index 62f70ccb06..fce37ed084 100644 --- a/packages/css/src/error-summary.css +++ b/packages/css/src/error-summary.css @@ -1,5 +1,5 @@ .ds-error-summary { - --dsc-errorsummary-background: var(--ds-color-danger-surface-default); + --dsc-errorsummary-background: var(--ds-color-danger-surface-tinted); --dsc-errorsummary-border-radius: var(--ds-border-radius-lg); --dsc-errorsummary-padding: var(--ds-size-6) var(--ds-size-8); --dsc-errorsummary-link-color: var(--ds-color-neutral-text-default); diff --git a/packages/css/src/field.css b/packages/css/src/field.css index 4018cab4c9..c505f00e70 100644 --- a/packages/css/src/field.css +++ b/packages/css/src/field.css @@ -92,7 +92,7 @@ --dsc-field-affix-border-color: var(--ds-color-neutral-border-default); --dsc-field-affix-padding-inline: var(--ds-size-4); - background: var(--ds-color-neutral-background-subtle); + background: var(--ds-color-neutral-background-tinted); border-radius: var(--ds-border-radius-md); box-sizing: border-box; color: var(--ds-color-neutral-text-subtle); diff --git a/packages/css/src/input.css b/packages/css/src/input.css index f0e000d6b8..e802cd7f9f 100644 --- a/packages/css/src/input.css +++ b/packages/css/src/input.css @@ -4,7 +4,7 @@ .ds-input { --dsc-input-background--checked: var(--dsc-input-border-color--checked); --dsc-input-background--invalid: var(--dsc-input-border-color--invalid); - --dsc-input-background--readonly: var(--ds-color-neutral-background-subtle); + --dsc-input-background--readonly: var(--ds-color-neutral-background-tinted); --dsc-input-background: var(--ds-color-neutral-background-default); --dsc-input-border-color--checked: var(--ds-color-base-default); --dsc-input-border-color--invalid: var(--ds-color-danger-border-strong); @@ -12,8 +12,8 @@ --dsc-input-border-color: var(--ds-color-neutral-border-default); --dsc-input-border-width--toggle: max(1px, calc(var(--ds-size-1) / 2)); /* Allow border-width to grow with font-size */ --dsc-input-border-width: 1px; - --dsc-input-color--checked: var(--ds-color-contrast-default); - --dsc-input-color--invalid: var(--ds-color-danger-contrast-default); + --dsc-input-color--checked: var(--ds-color-base-contrast-default); + --dsc-input-color--invalid: var(--ds-color-danger-base-contrast-default); --dsc-input-color--readonly: var(--ds-color-neutral-text-subtle); --dsc-input-color: var(--ds-color-neutral-text-default); --dsc-input-padding: var(--ds-size-2) var(--ds-size-3); diff --git a/packages/css/src/link.css b/packages/css/src/link.css index 5de55838f4..e8e756f3b5 100644 --- a/packages/css/src/link.css +++ b/packages/css/src/link.css @@ -1,5 +1,5 @@ .ds-link { - --dsc-link-background--active: var(--ds-color-surface-default); + --dsc-link-background--active: var(--ds-color-surface-tinted); --dsc-link-color--active: var(--ds-color-text-default); --dsc-link-color--hover: var(--ds-color-text-default); --dsc-link-color: var(--ds-color-text-subtle); diff --git a/packages/css/src/popover.css b/packages/css/src/popover.css index 0647915e3c..58a5fb000c 100644 --- a/packages/css/src/popover.css +++ b/packages/css/src/popover.css @@ -1,5 +1,5 @@ .ds-popover { - --dsc-popover-background: var(--ds-color-surface-default); + --dsc-popover-background: var(--ds-color-surface-tinted); --dsc-popover-border-color: var(--ds-color-border-default); --dsc-popover-color: var(--ds-color-text-default); --dsc-popover-arrow-size: var(--ds-size-2); diff --git a/packages/css/src/skeleton.css b/packages/css/src/skeleton.css index 35e75c60a5..d7f7dac78a 100644 --- a/packages/css/src/skeleton.css +++ b/packages/css/src/skeleton.css @@ -1,7 +1,7 @@ .ds-skeleton { --dsc-skeleton-animation-duration: 0.8s; --dsc-skeleton-animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate; - --dsc-skeleton-background: var(--ds-color-neutral-surface-default); + --dsc-skeleton-background: var(--ds-color-neutral-surface-tinted); animation: var(--dsc-skeleton-animation); border-radius: var(--ds-border-radius-lg); diff --git a/packages/css/src/spinner.css b/packages/css/src/spinner.css index 31315d3217..481d573202 100644 --- a/packages/css/src/spinner.css +++ b/packages/css/src/spinner.css @@ -1,5 +1,5 @@ .ds-spinner { - --dsc-spinner-background: var(--ds-color-surface-default); + --dsc-spinner-background: var(--ds-color-surface-tinted); --dsc-spinner-stroke: var(--ds-color-border-default); --dsc-spinner-animation-duration: 2s; diff --git a/packages/css/src/table.css b/packages/css/src/table.css index dd0fc7a61b..fbf9508985 100644 --- a/packages/css/src/table.css +++ b/packages/css/src/table.css @@ -1,14 +1,14 @@ .ds-table { - --dsc-table-background--hover: var(--ds-color-neutral-surface-default); - --dsc-table-background--zebra: var(--ds-color-neutral-background-subtle); + --dsc-table-background--hover: var(--ds-color-neutral-surface-tinted); + --dsc-table-background--zebra: var(--ds-color-neutral-background-tinted); --dsc-table-background: var(--ds-color-neutral-background-default); --dsc-table-border-color: var(--ds-color-neutral-border-subtle); --dsc-table-border-divider: 2px solid; --dsc-table-border: 1px solid; --dsc-table-border-radius: var(--ds-border-radius-md); --dsc-table-color: var(--ds-color-neutral-text-default); - --dsc-table-header-background--hover: var(--ds-color-neutral-surface-default); - --dsc-table-header-background--sorted: var(--ds-color-neutral-background-subtle); + --dsc-table-header-background--hover: var(--ds-color-neutral-surface-tinted); + --dsc-table-header-background--sorted: var(--ds-color-neutral-background-tinted); --dsc-table-header-background: var(--ds-color-neutral-background-default); --dsc-table-padding: var(--ds-size-2) var(--ds-size-3); --dsc-table-sort-size: var(--ds-size-6); diff --git a/packages/css/src/tag.css b/packages/css/src/tag.css index e694da0ec6..35b9ff2bed 100644 --- a/packages/css/src/tag.css +++ b/packages/css/src/tag.css @@ -1,5 +1,5 @@ .ds-tag { - --dsc-tag-background: var(--ds-color-surface-default); + --dsc-tag-background: var(--ds-color-surface-tinted); --dsc-tag-color: var(--ds-color-text-default); --dsc-tag-min-height: var(--ds-size-8); --dsc-tag-padding: 0 var(--ds-size-2); diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css index 31bd45d5f2..80911609f9 100644 --- a/packages/theme/brand/altinn.css +++ b/packages/theme/brand/altinn.css @@ -99,8 +99,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d4e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d4e4f3; --ds-color-accent-surface-hover: #bbd5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -111,11 +111,11 @@ --ds-color-accent-base-active: #013d75; --ds-color-accent-text-subtle: #0161b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -126,11 +126,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #eef4fa; - --ds-color-brand1-surface-default: #d4e4f3; + --ds-color-brand1-background-tinted: #eef4fa; + --ds-color-brand1-surface-tinted: #d4e4f3; --ds-color-brand1-surface-hover: #bbd5ec; --ds-color-brand1-surface-active: #a3c6e6; --ds-color-brand1-border-subtle: #99c0e3; @@ -141,11 +141,11 @@ --ds-color-brand1-base-active: #013d75; --ds-color-brand1-text-subtle: #0161b8; --ds-color-brand1-text-default: #002c54; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #dbe9f5; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #dbe9f5; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #f4f3f6; - --ds-color-brand2-surface-default: #e3e1e8; + --ds-color-brand2-background-tinted: #f4f3f6; + --ds-color-brand2-surface-tinted: #e3e1e8; --ds-color-brand2-surface-hover: #d3d0db; --ds-color-brand2-surface-active: #c4c0cf; --ds-color-brand2-border-subtle: #beb9ca; @@ -156,11 +156,11 @@ --ds-color-brand2-base-active: #63587f; --ds-color-brand2-text-subtle: #675b82; --ds-color-brand2-text-default: #30254a; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #d4d1db; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #d4d1db; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #fdf1f3; - --ds-color-brand3-surface-default: #fadbdf; + --ds-color-brand3-background-tinted: #fdf1f3; + --ds-color-brand3-surface-tinted: #fadbdf; --ds-color-brand3-surface-hover: #f6c5cd; --ds-color-brand3-surface-active: #f3b1bb; --ds-color-brand3-border-subtle: #f2a8b3; @@ -171,11 +171,11 @@ --ds-color-brand3-base-active: #ec7f90; --ds-color-brand3-text-subtle: #b8273d; --ds-color-brand3-text-default: #55121c; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #000000; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #000000; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -186,11 +186,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -201,11 +201,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -216,11 +216,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -231,8 +231,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -332,8 +332,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d4e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d4e4f3; --ds-color-accent-surface-hover: #bbd5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -344,11 +344,11 @@ --ds-color-accent-base-active: #013d75; --ds-color-accent-text-subtle: #0161b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -359,11 +359,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #eef4fa; - --ds-color-brand1-surface-default: #d4e4f3; + --ds-color-brand1-background-tinted: #eef4fa; + --ds-color-brand1-surface-tinted: #d4e4f3; --ds-color-brand1-surface-hover: #bbd5ec; --ds-color-brand1-surface-active: #a3c6e6; --ds-color-brand1-border-subtle: #99c0e3; @@ -374,11 +374,11 @@ --ds-color-brand1-base-active: #013d75; --ds-color-brand1-text-subtle: #0161b8; --ds-color-brand1-text-default: #002c54; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #dbe9f5; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #dbe9f5; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #f4f3f6; - --ds-color-brand2-surface-default: #e3e1e8; + --ds-color-brand2-background-tinted: #f4f3f6; + --ds-color-brand2-surface-tinted: #e3e1e8; --ds-color-brand2-surface-hover: #d3d0db; --ds-color-brand2-surface-active: #c4c0cf; --ds-color-brand2-border-subtle: #beb9ca; @@ -389,11 +389,11 @@ --ds-color-brand2-base-active: #63587f; --ds-color-brand2-text-subtle: #675b82; --ds-color-brand2-text-default: #30254a; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #d4d1db; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #d4d1db; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #fdf1f3; - --ds-color-brand3-surface-default: #fadbdf; + --ds-color-brand3-background-tinted: #fdf1f3; + --ds-color-brand3-surface-tinted: #fadbdf; --ds-color-brand3-surface-hover: #f6c5cd; --ds-color-brand3-surface-active: #f3b1bb; --ds-color-brand3-border-subtle: #f2a8b3; @@ -404,11 +404,11 @@ --ds-color-brand3-base-active: #ec7f90; --ds-color-brand3-text-subtle: #b8273d; --ds-color-brand3-text-default: #55121c; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #000000; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #000000; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -419,11 +419,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -434,11 +434,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -449,11 +449,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -464,8 +464,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -768,8 +768,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #013d74; --ds-color-accent-surface-active: #014a8d; --ds-color-accent-border-subtle: #01519a; @@ -780,11 +780,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d8e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -795,11 +795,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #001e38; - --ds-color-brand1-background-subtle: #002547; - --ds-color-brand1-surface-default: #00305c; + --ds-color-brand1-background-tinted: #002547; + --ds-color-brand1-surface-tinted: #00305c; --ds-color-brand1-surface-hover: #013d74; --ds-color-brand1-surface-active: #014a8d; --ds-color-brand1-border-subtle: #01519a; @@ -810,11 +810,11 @@ --ds-color-brand1-base-active: #92bce1; --ds-color-brand1-text-subtle: #70a7d8; --ds-color-brand1-text-default: #d8e7f4; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0d1924; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0d1924; --ds-color-brand2-background-default: #201931; - --ds-color-brand2-background-subtle: #281f3e; - --ds-color-brand2-surface-default: #342951; + --ds-color-brand2-background-tinted: #281f3e; + --ds-color-brand2-surface-tinted: #342951; --ds-color-brand2-surface-hover: #423564; --ds-color-brand2-surface-active: #50436f; --ds-color-brand2-border-subtle: #574a74; @@ -825,11 +825,11 @@ --ds-color-brand2-base-active: #857d9b; --ds-color-brand2-text-subtle: #a59fb5; --ds-color-brand2-text-default: #e6e4ea; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #1c1b1e; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #1c1b1e; --ds-color-brand3-background-default: #3a0c13; - --ds-color-brand3-background-subtle: #480f18; - --ds-color-brand3-surface-default: #5d131f; + --ds-color-brand3-background-tinted: #480f18; + --ds-color-brand3-surface-tinted: #5d131f; --ds-color-brand3-surface-hover: #751927; --ds-color-brand3-surface-active: #8e1e2f; --ds-color-brand3-border-subtle: #9a2033; @@ -840,11 +840,11 @@ --ds-color-brand3-base-active: #ec7f90; --ds-color-brand3-text-subtle: #ec8292; --ds-color-brand3-text-default: #fadee2; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #000000; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #000000; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -855,11 +855,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -870,11 +870,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -885,11 +885,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -900,8 +900,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -1001,8 +1001,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #013d74; --ds-color-accent-surface-active: #014a8d; --ds-color-accent-border-subtle: #01519a; @@ -1013,11 +1013,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d8e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -1028,11 +1028,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #001e38; - --ds-color-brand1-background-subtle: #002547; - --ds-color-brand1-surface-default: #00305c; + --ds-color-brand1-background-tinted: #002547; + --ds-color-brand1-surface-tinted: #00305c; --ds-color-brand1-surface-hover: #013d74; --ds-color-brand1-surface-active: #014a8d; --ds-color-brand1-border-subtle: #01519a; @@ -1043,11 +1043,11 @@ --ds-color-brand1-base-active: #92bce1; --ds-color-brand1-text-subtle: #70a7d8; --ds-color-brand1-text-default: #d8e7f4; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0d1924; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0d1924; --ds-color-brand2-background-default: #201931; - --ds-color-brand2-background-subtle: #281f3e; - --ds-color-brand2-surface-default: #342951; + --ds-color-brand2-background-tinted: #281f3e; + --ds-color-brand2-surface-tinted: #342951; --ds-color-brand2-surface-hover: #423564; --ds-color-brand2-surface-active: #50436f; --ds-color-brand2-border-subtle: #574a74; @@ -1058,11 +1058,11 @@ --ds-color-brand2-base-active: #857d9b; --ds-color-brand2-text-subtle: #a59fb5; --ds-color-brand2-text-default: #e6e4ea; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #1c1b1e; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #1c1b1e; --ds-color-brand3-background-default: #3a0c13; - --ds-color-brand3-background-subtle: #480f18; - --ds-color-brand3-surface-default: #5d131f; + --ds-color-brand3-background-tinted: #480f18; + --ds-color-brand3-surface-tinted: #5d131f; --ds-color-brand3-surface-hover: #751927; --ds-color-brand3-surface-active: #8e1e2f; --ds-color-brand3-border-subtle: #9a2033; @@ -1073,11 +1073,11 @@ --ds-color-brand3-base-active: #ec7f90; --ds-color-brand3-text-subtle: #ec8292; --ds-color-brand3-text-default: #fadee2; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #000000; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #000000; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -1088,11 +1088,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -1103,11 +1103,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -1118,11 +1118,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -1133,8 +1133,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -1275,8 +1275,8 @@ @layer ds.theme.color { :root, [data-color-scheme], [data-color="accent"] { --ds-color-background-default: var(--ds-color-accent-background-default); - --ds-color-background-subtle: var(--ds-color-accent-background-subtle); - --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); --ds-color-surface-hover: var(--ds-color-accent-surface-hover); --ds-color-surface-active: var(--ds-color-accent-surface-active); --ds-color-border-subtle: var(--ds-color-accent-border-subtle); @@ -1287,8 +1287,8 @@ --ds-color-base-active: var(--ds-color-accent-base-active); --ds-color-text-subtle: var(--ds-color-accent-text-subtle); --ds-color-text-default: var(--ds-color-accent-text-default); - --ds-color-contrast-default: var(--ds-color-accent-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-accent-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); } } @@ -1300,8 +1300,8 @@ @layer ds.theme.color { [data-color="brand1"] { --ds-color-background-default: var(--ds-color-brand1-background-default); - --ds-color-background-subtle: var(--ds-color-brand1-background-subtle); - --ds-color-surface-default: var(--ds-color-brand1-surface-default); + --ds-color-background-tinted: var(--ds-color-brand1-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand1-surface-hover); --ds-color-surface-active: var(--ds-color-brand1-surface-active); --ds-color-border-subtle: var(--ds-color-brand1-border-subtle); @@ -1312,8 +1312,8 @@ --ds-color-base-active: var(--ds-color-brand1-base-active); --ds-color-text-subtle: var(--ds-color-brand1-text-subtle); --ds-color-text-default: var(--ds-color-brand1-text-default); - --ds-color-contrast-default: var(--ds-color-brand1-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand1-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); } } @@ -1325,8 +1325,8 @@ @layer ds.theme.color { [data-color="brand2"] { --ds-color-background-default: var(--ds-color-brand2-background-default); - --ds-color-background-subtle: var(--ds-color-brand2-background-subtle); - --ds-color-surface-default: var(--ds-color-brand2-surface-default); + --ds-color-background-tinted: var(--ds-color-brand2-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand2-surface-hover); --ds-color-surface-active: var(--ds-color-brand2-surface-active); --ds-color-border-subtle: var(--ds-color-brand2-border-subtle); @@ -1337,8 +1337,8 @@ --ds-color-base-active: var(--ds-color-brand2-base-active); --ds-color-text-subtle: var(--ds-color-brand2-text-subtle); --ds-color-text-default: var(--ds-color-brand2-text-default); - --ds-color-contrast-default: var(--ds-color-brand2-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand2-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); } } @@ -1350,8 +1350,8 @@ @layer ds.theme.color { [data-color="brand3"] { --ds-color-background-default: var(--ds-color-brand3-background-default); - --ds-color-background-subtle: var(--ds-color-brand3-background-subtle); - --ds-color-surface-default: var(--ds-color-brand3-surface-default); + --ds-color-background-tinted: var(--ds-color-brand3-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand3-surface-hover); --ds-color-surface-active: var(--ds-color-brand3-surface-active); --ds-color-border-subtle: var(--ds-color-brand3-border-subtle); @@ -1362,8 +1362,8 @@ --ds-color-base-active: var(--ds-color-brand3-base-active); --ds-color-text-subtle: var(--ds-color-brand3-text-subtle); --ds-color-text-default: var(--ds-color-brand3-text-default); - --ds-color-contrast-default: var(--ds-color-brand3-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand3-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle); } } @@ -1371,8 +1371,8 @@ @layer ds.theme.color { [data-color='neutral'] { --ds-color-background-default: var(--ds-color-neutral-background-default); - --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); - --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); --ds-color-surface-active: var(--ds-color-neutral-surface-active); --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); @@ -1383,14 +1383,14 @@ --ds-color-base-active: var(--ds-color-neutral-base-active); --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); --ds-color-text-default: var(--ds-color-neutral-text-default); - --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); } [data-color='success'] { --ds-color-background-default: var(--ds-color-success-background-default); - --ds-color-background-subtle: var(--ds-color-success-background-subtle); - --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); --ds-color-surface-hover: var(--ds-color-success-surface-hover); --ds-color-surface-active: var(--ds-color-success-surface-active); --ds-color-border-subtle: var(--ds-color-success-border-subtle); @@ -1401,14 +1401,14 @@ --ds-color-base-active: var(--ds-color-success-base-active); --ds-color-text-subtle: var(--ds-color-success-text-subtle); --ds-color-text-default: var(--ds-color-success-text-default); - --ds-color-contrast-default: var(--ds-color-success-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); } [data-color='warning'] { --ds-color-background-default: var(--ds-color-warning-background-default); - --ds-color-background-subtle: var(--ds-color-warning-background-subtle); - --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); --ds-color-surface-hover: var(--ds-color-warning-surface-hover); --ds-color-surface-active: var(--ds-color-warning-surface-active); --ds-color-border-subtle: var(--ds-color-warning-border-subtle); @@ -1419,14 +1419,14 @@ --ds-color-base-active: var(--ds-color-warning-base-active); --ds-color-text-subtle: var(--ds-color-warning-text-subtle); --ds-color-text-default: var(--ds-color-warning-text-default); - --ds-color-contrast-default: var(--ds-color-warning-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); } [data-color='danger'] { --ds-color-background-default: var(--ds-color-danger-background-default); - --ds-color-background-subtle: var(--ds-color-danger-background-subtle); - --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); --ds-color-surface-hover: var(--ds-color-danger-surface-hover); --ds-color-surface-active: var(--ds-color-danger-surface-active); --ds-color-border-subtle: var(--ds-color-danger-border-subtle); @@ -1437,14 +1437,14 @@ --ds-color-base-active: var(--ds-color-danger-base-active); --ds-color-text-subtle: var(--ds-color-danger-text-subtle); --ds-color-text-default: var(--ds-color-danger-text-default); - --ds-color-contrast-default: var(--ds-color-danger-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); } [data-color='info'] { --ds-color-background-default: var(--ds-color-info-background-default); - --ds-color-background-subtle: var(--ds-color-info-background-subtle); - --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); --ds-color-surface-hover: var(--ds-color-info-surface-hover); --ds-color-surface-active: var(--ds-color-info-surface-active); --ds-color-border-subtle: var(--ds-color-info-border-subtle); @@ -1455,7 +1455,7 @@ --ds-color-base-active: var(--ds-color-info-base-active); --ds-color-text-subtle: var(--ds-color-info-text-subtle); --ds-color-text-default: var(--ds-color-info-text-default); - --ds-color-contrast-default: var(--ds-color-info-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); } } diff --git a/packages/theme/brand/altinn/builtin-colors.css b/packages/theme/brand/altinn/builtin-colors.css index dc0c68db90..d99596f2f4 100644 --- a/packages/theme/brand/altinn/builtin-colors.css +++ b/packages/theme/brand/altinn/builtin-colors.css @@ -1,8 +1,8 @@ @layer ds.theme.color { [data-color='neutral'] { --ds-color-background-default: var(--ds-color-neutral-background-default); - --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); - --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); --ds-color-surface-active: var(--ds-color-neutral-surface-active); --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); @@ -13,14 +13,14 @@ --ds-color-base-active: var(--ds-color-neutral-base-active); --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); --ds-color-text-default: var(--ds-color-neutral-text-default); - --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); } [data-color='success'] { --ds-color-background-default: var(--ds-color-success-background-default); - --ds-color-background-subtle: var(--ds-color-success-background-subtle); - --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); --ds-color-surface-hover: var(--ds-color-success-surface-hover); --ds-color-surface-active: var(--ds-color-success-surface-active); --ds-color-border-subtle: var(--ds-color-success-border-subtle); @@ -31,14 +31,14 @@ --ds-color-base-active: var(--ds-color-success-base-active); --ds-color-text-subtle: var(--ds-color-success-text-subtle); --ds-color-text-default: var(--ds-color-success-text-default); - --ds-color-contrast-default: var(--ds-color-success-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); } [data-color='warning'] { --ds-color-background-default: var(--ds-color-warning-background-default); - --ds-color-background-subtle: var(--ds-color-warning-background-subtle); - --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); --ds-color-surface-hover: var(--ds-color-warning-surface-hover); --ds-color-surface-active: var(--ds-color-warning-surface-active); --ds-color-border-subtle: var(--ds-color-warning-border-subtle); @@ -49,14 +49,14 @@ --ds-color-base-active: var(--ds-color-warning-base-active); --ds-color-text-subtle: var(--ds-color-warning-text-subtle); --ds-color-text-default: var(--ds-color-warning-text-default); - --ds-color-contrast-default: var(--ds-color-warning-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); } [data-color='danger'] { --ds-color-background-default: var(--ds-color-danger-background-default); - --ds-color-background-subtle: var(--ds-color-danger-background-subtle); - --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); --ds-color-surface-hover: var(--ds-color-danger-surface-hover); --ds-color-surface-active: var(--ds-color-danger-surface-active); --ds-color-border-subtle: var(--ds-color-danger-border-subtle); @@ -67,14 +67,14 @@ --ds-color-base-active: var(--ds-color-danger-base-active); --ds-color-text-subtle: var(--ds-color-danger-text-subtle); --ds-color-text-default: var(--ds-color-danger-text-default); - --ds-color-contrast-default: var(--ds-color-danger-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); } [data-color='info'] { --ds-color-background-default: var(--ds-color-info-background-default); - --ds-color-background-subtle: var(--ds-color-info-background-subtle); - --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); --ds-color-surface-hover: var(--ds-color-info-surface-hover); --ds-color-surface-active: var(--ds-color-info-surface-active); --ds-color-border-subtle: var(--ds-color-info-border-subtle); @@ -85,7 +85,7 @@ --ds-color-base-active: var(--ds-color-info-base-active); --ds-color-text-subtle: var(--ds-color-info-text-subtle); --ds-color-text-default: var(--ds-color-info-text-default); - --ds-color-contrast-default: var(--ds-color-info-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); } } diff --git a/packages/theme/brand/altinn/color-scheme/dark.css b/packages/theme/brand/altinn/color-scheme/dark.css index 5e3a387937..5eac5cbefb 100644 --- a/packages/theme/brand/altinn/color-scheme/dark.css +++ b/packages/theme/brand/altinn/color-scheme/dark.css @@ -95,8 +95,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #013d74; --ds-color-accent-surface-active: #014a8d; --ds-color-accent-border-subtle: #01519a; @@ -107,11 +107,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d8e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -122,11 +122,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #001e38; - --ds-color-brand1-background-subtle: #002547; - --ds-color-brand1-surface-default: #00305c; + --ds-color-brand1-background-tinted: #002547; + --ds-color-brand1-surface-tinted: #00305c; --ds-color-brand1-surface-hover: #013d74; --ds-color-brand1-surface-active: #014a8d; --ds-color-brand1-border-subtle: #01519a; @@ -137,11 +137,11 @@ --ds-color-brand1-base-active: #92bce1; --ds-color-brand1-text-subtle: #70a7d8; --ds-color-brand1-text-default: #d8e7f4; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0d1924; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0d1924; --ds-color-brand2-background-default: #201931; - --ds-color-brand2-background-subtle: #281f3e; - --ds-color-brand2-surface-default: #342951; + --ds-color-brand2-background-tinted: #281f3e; + --ds-color-brand2-surface-tinted: #342951; --ds-color-brand2-surface-hover: #423564; --ds-color-brand2-surface-active: #50436f; --ds-color-brand2-border-subtle: #574a74; @@ -152,11 +152,11 @@ --ds-color-brand2-base-active: #857d9b; --ds-color-brand2-text-subtle: #a59fb5; --ds-color-brand2-text-default: #e6e4ea; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #1c1b1e; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #1c1b1e; --ds-color-brand3-background-default: #3a0c13; - --ds-color-brand3-background-subtle: #480f18; - --ds-color-brand3-surface-default: #5d131f; + --ds-color-brand3-background-tinted: #480f18; + --ds-color-brand3-surface-tinted: #5d131f; --ds-color-brand3-surface-hover: #751927; --ds-color-brand3-surface-active: #8e1e2f; --ds-color-brand3-border-subtle: #9a2033; @@ -167,11 +167,11 @@ --ds-color-brand3-base-active: #ec7f90; --ds-color-brand3-text-subtle: #ec8292; --ds-color-brand3-text-default: #fadee2; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #000000; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #000000; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -182,11 +182,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -197,11 +197,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -212,11 +212,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -227,8 +227,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -328,8 +328,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #013d74; --ds-color-accent-surface-active: #014a8d; --ds-color-accent-border-subtle: #01519a; @@ -340,11 +340,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d8e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -355,11 +355,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #001e38; - --ds-color-brand1-background-subtle: #002547; - --ds-color-brand1-surface-default: #00305c; + --ds-color-brand1-background-tinted: #002547; + --ds-color-brand1-surface-tinted: #00305c; --ds-color-brand1-surface-hover: #013d74; --ds-color-brand1-surface-active: #014a8d; --ds-color-brand1-border-subtle: #01519a; @@ -370,11 +370,11 @@ --ds-color-brand1-base-active: #92bce1; --ds-color-brand1-text-subtle: #70a7d8; --ds-color-brand1-text-default: #d8e7f4; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0d1924; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0d1924; --ds-color-brand2-background-default: #201931; - --ds-color-brand2-background-subtle: #281f3e; - --ds-color-brand2-surface-default: #342951; + --ds-color-brand2-background-tinted: #281f3e; + --ds-color-brand2-surface-tinted: #342951; --ds-color-brand2-surface-hover: #423564; --ds-color-brand2-surface-active: #50436f; --ds-color-brand2-border-subtle: #574a74; @@ -385,11 +385,11 @@ --ds-color-brand2-base-active: #857d9b; --ds-color-brand2-text-subtle: #a59fb5; --ds-color-brand2-text-default: #e6e4ea; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #1c1b1e; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #1c1b1e; --ds-color-brand3-background-default: #3a0c13; - --ds-color-brand3-background-subtle: #480f18; - --ds-color-brand3-surface-default: #5d131f; + --ds-color-brand3-background-tinted: #480f18; + --ds-color-brand3-surface-tinted: #5d131f; --ds-color-brand3-surface-hover: #751927; --ds-color-brand3-surface-active: #8e1e2f; --ds-color-brand3-border-subtle: #9a2033; @@ -400,11 +400,11 @@ --ds-color-brand3-base-active: #ec7f90; --ds-color-brand3-text-subtle: #ec8292; --ds-color-brand3-text-default: #fadee2; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #000000; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #000000; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -415,11 +415,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -430,11 +430,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -445,11 +445,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -460,8 +460,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; diff --git a/packages/theme/brand/altinn/color-scheme/light.css b/packages/theme/brand/altinn/color-scheme/light.css index 94a3fe3741..2e7c311d73 100644 --- a/packages/theme/brand/altinn/color-scheme/light.css +++ b/packages/theme/brand/altinn/color-scheme/light.css @@ -95,8 +95,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d4e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d4e4f3; --ds-color-accent-surface-hover: #bbd5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -107,11 +107,11 @@ --ds-color-accent-base-active: #013d75; --ds-color-accent-text-subtle: #0161b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -122,11 +122,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #eef4fa; - --ds-color-brand1-surface-default: #d4e4f3; + --ds-color-brand1-background-tinted: #eef4fa; + --ds-color-brand1-surface-tinted: #d4e4f3; --ds-color-brand1-surface-hover: #bbd5ec; --ds-color-brand1-surface-active: #a3c6e6; --ds-color-brand1-border-subtle: #99c0e3; @@ -137,11 +137,11 @@ --ds-color-brand1-base-active: #013d75; --ds-color-brand1-text-subtle: #0161b8; --ds-color-brand1-text-default: #002c54; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #dbe9f5; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #dbe9f5; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #f4f3f6; - --ds-color-brand2-surface-default: #e3e1e8; + --ds-color-brand2-background-tinted: #f4f3f6; + --ds-color-brand2-surface-tinted: #e3e1e8; --ds-color-brand2-surface-hover: #d3d0db; --ds-color-brand2-surface-active: #c4c0cf; --ds-color-brand2-border-subtle: #beb9ca; @@ -152,11 +152,11 @@ --ds-color-brand2-base-active: #63587f; --ds-color-brand2-text-subtle: #675b82; --ds-color-brand2-text-default: #30254a; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #d4d1db; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #d4d1db; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #fdf1f3; - --ds-color-brand3-surface-default: #fadbdf; + --ds-color-brand3-background-tinted: #fdf1f3; + --ds-color-brand3-surface-tinted: #fadbdf; --ds-color-brand3-surface-hover: #f6c5cd; --ds-color-brand3-surface-active: #f3b1bb; --ds-color-brand3-border-subtle: #f2a8b3; @@ -167,11 +167,11 @@ --ds-color-brand3-base-active: #ec7f90; --ds-color-brand3-text-subtle: #b8273d; --ds-color-brand3-text-default: #55121c; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #000000; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #000000; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -182,11 +182,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -197,11 +197,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -212,11 +212,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -227,8 +227,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -328,8 +328,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d4e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d4e4f3; --ds-color-accent-surface-hover: #bbd5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -340,11 +340,11 @@ --ds-color-accent-base-active: #013d75; --ds-color-accent-text-subtle: #0161b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -355,11 +355,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #eef4fa; - --ds-color-brand1-surface-default: #d4e4f3; + --ds-color-brand1-background-tinted: #eef4fa; + --ds-color-brand1-surface-tinted: #d4e4f3; --ds-color-brand1-surface-hover: #bbd5ec; --ds-color-brand1-surface-active: #a3c6e6; --ds-color-brand1-border-subtle: #99c0e3; @@ -370,11 +370,11 @@ --ds-color-brand1-base-active: #013d75; --ds-color-brand1-text-subtle: #0161b8; --ds-color-brand1-text-default: #002c54; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #dbe9f5; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #dbe9f5; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #f4f3f6; - --ds-color-brand2-surface-default: #e3e1e8; + --ds-color-brand2-background-tinted: #f4f3f6; + --ds-color-brand2-surface-tinted: #e3e1e8; --ds-color-brand2-surface-hover: #d3d0db; --ds-color-brand2-surface-active: #c4c0cf; --ds-color-brand2-border-subtle: #beb9ca; @@ -385,11 +385,11 @@ --ds-color-brand2-base-active: #63587f; --ds-color-brand2-text-subtle: #675b82; --ds-color-brand2-text-default: #30254a; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #d4d1db; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #d4d1db; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #fdf1f3; - --ds-color-brand3-surface-default: #fadbdf; + --ds-color-brand3-background-tinted: #fdf1f3; + --ds-color-brand3-surface-tinted: #fadbdf; --ds-color-brand3-surface-hover: #f6c5cd; --ds-color-brand3-surface-active: #f3b1bb; --ds-color-brand3-border-subtle: #f2a8b3; @@ -400,11 +400,11 @@ --ds-color-brand3-base-active: #ec7f90; --ds-color-brand3-text-subtle: #b8273d; --ds-color-brand3-text-default: #55121c; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #000000; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #000000; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -415,11 +415,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -430,11 +430,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -445,11 +445,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -460,8 +460,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; diff --git a/packages/theme/brand/altinn/color/accent.css b/packages/theme/brand/altinn/color/accent.css index 3a4dbf9728..c6d9e9e334 100644 --- a/packages/theme/brand/altinn/color/accent.css +++ b/packages/theme/brand/altinn/color/accent.css @@ -5,8 +5,8 @@ @layer ds.theme.color { :root, [data-color-scheme], [data-color="accent"] { --ds-color-background-default: var(--ds-color-accent-background-default); - --ds-color-background-subtle: var(--ds-color-accent-background-subtle); - --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); --ds-color-surface-hover: var(--ds-color-accent-surface-hover); --ds-color-surface-active: var(--ds-color-accent-surface-active); --ds-color-border-subtle: var(--ds-color-accent-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-accent-base-active); --ds-color-text-subtle: var(--ds-color-accent-text-subtle); --ds-color-text-default: var(--ds-color-accent-text-default); - --ds-color-contrast-default: var(--ds-color-accent-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-accent-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); } } diff --git a/packages/theme/brand/altinn/color/brand1.css b/packages/theme/brand/altinn/color/brand1.css index 1670bafcc1..409536f757 100644 --- a/packages/theme/brand/altinn/color/brand1.css +++ b/packages/theme/brand/altinn/color/brand1.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand1"] { --ds-color-background-default: var(--ds-color-brand1-background-default); - --ds-color-background-subtle: var(--ds-color-brand1-background-subtle); - --ds-color-surface-default: var(--ds-color-brand1-surface-default); + --ds-color-background-tinted: var(--ds-color-brand1-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand1-surface-hover); --ds-color-surface-active: var(--ds-color-brand1-surface-active); --ds-color-border-subtle: var(--ds-color-brand1-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand1-base-active); --ds-color-text-subtle: var(--ds-color-brand1-text-subtle); --ds-color-text-default: var(--ds-color-brand1-text-default); - --ds-color-contrast-default: var(--ds-color-brand1-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand1-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); } } diff --git a/packages/theme/brand/altinn/color/brand2.css b/packages/theme/brand/altinn/color/brand2.css index d84f4b87e8..55e3e0f8ac 100644 --- a/packages/theme/brand/altinn/color/brand2.css +++ b/packages/theme/brand/altinn/color/brand2.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand2"] { --ds-color-background-default: var(--ds-color-brand2-background-default); - --ds-color-background-subtle: var(--ds-color-brand2-background-subtle); - --ds-color-surface-default: var(--ds-color-brand2-surface-default); + --ds-color-background-tinted: var(--ds-color-brand2-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand2-surface-hover); --ds-color-surface-active: var(--ds-color-brand2-surface-active); --ds-color-border-subtle: var(--ds-color-brand2-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand2-base-active); --ds-color-text-subtle: var(--ds-color-brand2-text-subtle); --ds-color-text-default: var(--ds-color-brand2-text-default); - --ds-color-contrast-default: var(--ds-color-brand2-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand2-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); } } diff --git a/packages/theme/brand/altinn/color/brand3.css b/packages/theme/brand/altinn/color/brand3.css index 2235404855..8631e729de 100644 --- a/packages/theme/brand/altinn/color/brand3.css +++ b/packages/theme/brand/altinn/color/brand3.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand3"] { --ds-color-background-default: var(--ds-color-brand3-background-default); - --ds-color-background-subtle: var(--ds-color-brand3-background-subtle); - --ds-color-surface-default: var(--ds-color-brand3-surface-default); + --ds-color-background-tinted: var(--ds-color-brand3-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand3-surface-hover); --ds-color-surface-active: var(--ds-color-brand3-surface-active); --ds-color-border-subtle: var(--ds-color-brand3-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand3-base-active); --ds-color-text-subtle: var(--ds-color-brand3-text-subtle); --ds-color-text-default: var(--ds-color-brand3-text-default); - --ds-color-contrast-default: var(--ds-color-brand3-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand3-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle); } } diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css index fc3ea40773..bc36ae339e 100644 --- a/packages/theme/brand/digdir.css +++ b/packages/theme/brand/digdir.css @@ -99,8 +99,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d3e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d3e4f3; --ds-color-accent-surface-hover: #bad5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -111,11 +111,11 @@ --ds-color-accent-base-active: #003d75; --ds-color-accent-text-subtle: #0061b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -126,11 +126,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #fef0f1; - --ds-color-brand1-surface-default: #fcdadb; + --ds-color-brand1-background-tinted: #fef0f1; + --ds-color-brand1-surface-tinted: #fcdadb; --ds-color-brand1-surface-hover: #fbc4c5; --ds-color-brand1-surface-active: #f9afb1; --ds-color-brand1-border-subtle: #f9a5a8; @@ -141,11 +141,11 @@ --ds-color-brand1-base-active: #f9a6a8; --ds-color-brand1-text-subtle: #a44043; --ds-color-brand1-text-default: #4b1d1e; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #020101; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #020101; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fbf3df; - --ds-color-brand2-surface-default: #f6e0ae; + --ds-color-brand2-background-tinted: #fbf3df; + --ds-color-brand2-surface-tinted: #f6e0ae; --ds-color-brand2-surface-hover: #f0ce7e; --ds-color-brand2-surface-active: #eabc4f; --ds-color-brand2-border-subtle: #e8b43a; @@ -156,11 +156,11 @@ --ds-color-brand2-base-active: #af8218; --ds-color-brand2-text-subtle: #7c5c11; --ds-color-brand2-text-default: #382908; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #2c2006; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #2c2006; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #eaf5fe; - --ds-color-brand3-surface-default: #c8e6fd; + --ds-color-brand3-background-tinted: #eaf5fe; + --ds-color-brand3-surface-tinted: #c8e6fd; --ds-color-brand3-surface-hover: #a8d7fb; --ds-color-brand3-surface-active: #89c9fa; --ds-color-brand3-border-subtle: #7bc3f9; @@ -171,11 +171,11 @@ --ds-color-brand3-base-active: #81c5f9; --ds-color-brand3-text-subtle: #1465a2; --ds-color-brand3-text-default: #092d49; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #010507; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #010507; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -186,11 +186,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -201,11 +201,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -216,11 +216,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -231,8 +231,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -332,8 +332,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d3e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d3e4f3; --ds-color-accent-surface-hover: #bad5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -344,11 +344,11 @@ --ds-color-accent-base-active: #003d75; --ds-color-accent-text-subtle: #0061b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -359,11 +359,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #fef0f1; - --ds-color-brand1-surface-default: #fcdadb; + --ds-color-brand1-background-tinted: #fef0f1; + --ds-color-brand1-surface-tinted: #fcdadb; --ds-color-brand1-surface-hover: #fbc4c5; --ds-color-brand1-surface-active: #f9afb1; --ds-color-brand1-border-subtle: #f9a5a8; @@ -374,11 +374,11 @@ --ds-color-brand1-base-active: #f9a6a8; --ds-color-brand1-text-subtle: #a44043; --ds-color-brand1-text-default: #4b1d1e; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #020101; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #020101; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fbf3df; - --ds-color-brand2-surface-default: #f6e0ae; + --ds-color-brand2-background-tinted: #fbf3df; + --ds-color-brand2-surface-tinted: #f6e0ae; --ds-color-brand2-surface-hover: #f0ce7e; --ds-color-brand2-surface-active: #eabc4f; --ds-color-brand2-border-subtle: #e8b43a; @@ -389,11 +389,11 @@ --ds-color-brand2-base-active: #af8218; --ds-color-brand2-text-subtle: #7c5c11; --ds-color-brand2-text-default: #382908; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #2c2006; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #2c2006; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #eaf5fe; - --ds-color-brand3-surface-default: #c8e6fd; + --ds-color-brand3-background-tinted: #eaf5fe; + --ds-color-brand3-surface-tinted: #c8e6fd; --ds-color-brand3-surface-hover: #a8d7fb; --ds-color-brand3-surface-active: #89c9fa; --ds-color-brand3-border-subtle: #7bc3f9; @@ -404,11 +404,11 @@ --ds-color-brand3-base-active: #81c5f9; --ds-color-brand3-text-subtle: #1465a2; --ds-color-brand3-text-default: #092d49; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #010507; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #010507; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -419,11 +419,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -434,11 +434,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -449,11 +449,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -464,8 +464,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -768,8 +768,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #003d74; --ds-color-accent-surface-active: #004b8d; --ds-color-accent-border-subtle: #00519a; @@ -780,11 +780,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d7e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -795,11 +795,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #321314; - --ds-color-brand1-background-subtle: #3f181a; - --ds-color-brand1-surface-default: #512021; + --ds-color-brand1-background-tinted: #3f181a; + --ds-color-brand1-surface-tinted: #512021; --ds-color-brand1-surface-hover: #67282a; --ds-color-brand1-surface-active: #7e3133; --ds-color-brand1-border-subtle: #893538; @@ -810,11 +810,11 @@ --ds-color-brand1-base-active: #612628; --ds-color-brand1-text-subtle: #f67e81; --ds-color-brand1-text-default: #fdddde; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #ffffff; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #ffffff; --ds-color-brand2-background-default: #251b05; - --ds-color-brand2-background-subtle: #2f2307; - --ds-color-brand2-surface-default: #3d2d09; + --ds-color-brand2-background-tinted: #2f2307; + --ds-color-brand2-surface-tinted: #3d2d09; --ds-color-brand2-surface-hover: #4d3a0b; --ds-color-brand2-surface-active: #5f460d; --ds-color-brand2-border-subtle: #674d0e; @@ -825,11 +825,11 @@ --ds-color-brand2-base-active: #816012; --ds-color-brand2-text-subtle: #ce991d; --ds-color-brand2-text-default: #f6e3b6; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #ddd9cf; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #ddd9cf; --ds-color-brand3-background-default: #061e31; - --ds-color-brand3-background-subtle: #08263e; - --ds-color-brand3-surface-default: #0a3250; + --ds-color-brand3-background-tinted: #08263e; + --ds-color-brand3-surface-tinted: #0a3250; --ds-color-brand3-surface-hover: #0c3f66; --ds-color-brand3-surface-active: #0f4d7c; --ds-color-brand3-border-subtle: #115487; @@ -840,11 +840,11 @@ --ds-color-brand3-base-active: #0b395d; --ds-color-brand3-text-subtle: #42a8f7; --ds-color-brand3-text-default: #cde8fd; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #fbfcfd; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #fbfcfd; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -855,11 +855,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -870,11 +870,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -885,11 +885,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -900,8 +900,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -1001,8 +1001,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #003d74; --ds-color-accent-surface-active: #004b8d; --ds-color-accent-border-subtle: #00519a; @@ -1013,11 +1013,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d7e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -1028,11 +1028,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #321314; - --ds-color-brand1-background-subtle: #3f181a; - --ds-color-brand1-surface-default: #512021; + --ds-color-brand1-background-tinted: #3f181a; + --ds-color-brand1-surface-tinted: #512021; --ds-color-brand1-surface-hover: #67282a; --ds-color-brand1-surface-active: #7e3133; --ds-color-brand1-border-subtle: #893538; @@ -1043,11 +1043,11 @@ --ds-color-brand1-base-active: #612628; --ds-color-brand1-text-subtle: #f67e81; --ds-color-brand1-text-default: #fdddde; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #ffffff; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #ffffff; --ds-color-brand2-background-default: #251b05; - --ds-color-brand2-background-subtle: #2f2307; - --ds-color-brand2-surface-default: #3d2d09; + --ds-color-brand2-background-tinted: #2f2307; + --ds-color-brand2-surface-tinted: #3d2d09; --ds-color-brand2-surface-hover: #4d3a0b; --ds-color-brand2-surface-active: #5f460d; --ds-color-brand2-border-subtle: #674d0e; @@ -1058,11 +1058,11 @@ --ds-color-brand2-base-active: #816012; --ds-color-brand2-text-subtle: #ce991d; --ds-color-brand2-text-default: #f6e3b6; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #ddd9cf; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #ddd9cf; --ds-color-brand3-background-default: #061e31; - --ds-color-brand3-background-subtle: #08263e; - --ds-color-brand3-surface-default: #0a3250; + --ds-color-brand3-background-tinted: #08263e; + --ds-color-brand3-surface-tinted: #0a3250; --ds-color-brand3-surface-hover: #0c3f66; --ds-color-brand3-surface-active: #0f4d7c; --ds-color-brand3-border-subtle: #115487; @@ -1073,11 +1073,11 @@ --ds-color-brand3-base-active: #0b395d; --ds-color-brand3-text-subtle: #42a8f7; --ds-color-brand3-text-default: #cde8fd; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #fbfcfd; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #fbfcfd; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -1088,11 +1088,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -1103,11 +1103,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -1118,11 +1118,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -1133,8 +1133,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -1275,8 +1275,8 @@ @layer ds.theme.color { :root, [data-color-scheme], [data-color="accent"] { --ds-color-background-default: var(--ds-color-accent-background-default); - --ds-color-background-subtle: var(--ds-color-accent-background-subtle); - --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); --ds-color-surface-hover: var(--ds-color-accent-surface-hover); --ds-color-surface-active: var(--ds-color-accent-surface-active); --ds-color-border-subtle: var(--ds-color-accent-border-subtle); @@ -1287,8 +1287,8 @@ --ds-color-base-active: var(--ds-color-accent-base-active); --ds-color-text-subtle: var(--ds-color-accent-text-subtle); --ds-color-text-default: var(--ds-color-accent-text-default); - --ds-color-contrast-default: var(--ds-color-accent-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-accent-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); } } @@ -1300,8 +1300,8 @@ @layer ds.theme.color { [data-color="brand1"] { --ds-color-background-default: var(--ds-color-brand1-background-default); - --ds-color-background-subtle: var(--ds-color-brand1-background-subtle); - --ds-color-surface-default: var(--ds-color-brand1-surface-default); + --ds-color-background-tinted: var(--ds-color-brand1-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand1-surface-hover); --ds-color-surface-active: var(--ds-color-brand1-surface-active); --ds-color-border-subtle: var(--ds-color-brand1-border-subtle); @@ -1312,8 +1312,8 @@ --ds-color-base-active: var(--ds-color-brand1-base-active); --ds-color-text-subtle: var(--ds-color-brand1-text-subtle); --ds-color-text-default: var(--ds-color-brand1-text-default); - --ds-color-contrast-default: var(--ds-color-brand1-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand1-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); } } @@ -1325,8 +1325,8 @@ @layer ds.theme.color { [data-color="brand2"] { --ds-color-background-default: var(--ds-color-brand2-background-default); - --ds-color-background-subtle: var(--ds-color-brand2-background-subtle); - --ds-color-surface-default: var(--ds-color-brand2-surface-default); + --ds-color-background-tinted: var(--ds-color-brand2-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand2-surface-hover); --ds-color-surface-active: var(--ds-color-brand2-surface-active); --ds-color-border-subtle: var(--ds-color-brand2-border-subtle); @@ -1337,8 +1337,8 @@ --ds-color-base-active: var(--ds-color-brand2-base-active); --ds-color-text-subtle: var(--ds-color-brand2-text-subtle); --ds-color-text-default: var(--ds-color-brand2-text-default); - --ds-color-contrast-default: var(--ds-color-brand2-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand2-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); } } @@ -1350,8 +1350,8 @@ @layer ds.theme.color { [data-color="brand3"] { --ds-color-background-default: var(--ds-color-brand3-background-default); - --ds-color-background-subtle: var(--ds-color-brand3-background-subtle); - --ds-color-surface-default: var(--ds-color-brand3-surface-default); + --ds-color-background-tinted: var(--ds-color-brand3-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand3-surface-hover); --ds-color-surface-active: var(--ds-color-brand3-surface-active); --ds-color-border-subtle: var(--ds-color-brand3-border-subtle); @@ -1362,8 +1362,8 @@ --ds-color-base-active: var(--ds-color-brand3-base-active); --ds-color-text-subtle: var(--ds-color-brand3-text-subtle); --ds-color-text-default: var(--ds-color-brand3-text-default); - --ds-color-contrast-default: var(--ds-color-brand3-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand3-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle); } } @@ -1371,8 +1371,8 @@ @layer ds.theme.color { [data-color='neutral'] { --ds-color-background-default: var(--ds-color-neutral-background-default); - --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); - --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); --ds-color-surface-active: var(--ds-color-neutral-surface-active); --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); @@ -1383,14 +1383,14 @@ --ds-color-base-active: var(--ds-color-neutral-base-active); --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); --ds-color-text-default: var(--ds-color-neutral-text-default); - --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); } [data-color='success'] { --ds-color-background-default: var(--ds-color-success-background-default); - --ds-color-background-subtle: var(--ds-color-success-background-subtle); - --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); --ds-color-surface-hover: var(--ds-color-success-surface-hover); --ds-color-surface-active: var(--ds-color-success-surface-active); --ds-color-border-subtle: var(--ds-color-success-border-subtle); @@ -1401,14 +1401,14 @@ --ds-color-base-active: var(--ds-color-success-base-active); --ds-color-text-subtle: var(--ds-color-success-text-subtle); --ds-color-text-default: var(--ds-color-success-text-default); - --ds-color-contrast-default: var(--ds-color-success-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); } [data-color='warning'] { --ds-color-background-default: var(--ds-color-warning-background-default); - --ds-color-background-subtle: var(--ds-color-warning-background-subtle); - --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); --ds-color-surface-hover: var(--ds-color-warning-surface-hover); --ds-color-surface-active: var(--ds-color-warning-surface-active); --ds-color-border-subtle: var(--ds-color-warning-border-subtle); @@ -1419,14 +1419,14 @@ --ds-color-base-active: var(--ds-color-warning-base-active); --ds-color-text-subtle: var(--ds-color-warning-text-subtle); --ds-color-text-default: var(--ds-color-warning-text-default); - --ds-color-contrast-default: var(--ds-color-warning-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); } [data-color='danger'] { --ds-color-background-default: var(--ds-color-danger-background-default); - --ds-color-background-subtle: var(--ds-color-danger-background-subtle); - --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); --ds-color-surface-hover: var(--ds-color-danger-surface-hover); --ds-color-surface-active: var(--ds-color-danger-surface-active); --ds-color-border-subtle: var(--ds-color-danger-border-subtle); @@ -1437,14 +1437,14 @@ --ds-color-base-active: var(--ds-color-danger-base-active); --ds-color-text-subtle: var(--ds-color-danger-text-subtle); --ds-color-text-default: var(--ds-color-danger-text-default); - --ds-color-contrast-default: var(--ds-color-danger-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); } [data-color='info'] { --ds-color-background-default: var(--ds-color-info-background-default); - --ds-color-background-subtle: var(--ds-color-info-background-subtle); - --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); --ds-color-surface-hover: var(--ds-color-info-surface-hover); --ds-color-surface-active: var(--ds-color-info-surface-active); --ds-color-border-subtle: var(--ds-color-info-border-subtle); @@ -1455,7 +1455,7 @@ --ds-color-base-active: var(--ds-color-info-base-active); --ds-color-text-subtle: var(--ds-color-info-text-subtle); --ds-color-text-default: var(--ds-color-info-text-default); - --ds-color-contrast-default: var(--ds-color-info-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); } } diff --git a/packages/theme/brand/digdir/builtin-colors.css b/packages/theme/brand/digdir/builtin-colors.css index dc0c68db90..d99596f2f4 100644 --- a/packages/theme/brand/digdir/builtin-colors.css +++ b/packages/theme/brand/digdir/builtin-colors.css @@ -1,8 +1,8 @@ @layer ds.theme.color { [data-color='neutral'] { --ds-color-background-default: var(--ds-color-neutral-background-default); - --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); - --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); --ds-color-surface-active: var(--ds-color-neutral-surface-active); --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); @@ -13,14 +13,14 @@ --ds-color-base-active: var(--ds-color-neutral-base-active); --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); --ds-color-text-default: var(--ds-color-neutral-text-default); - --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); } [data-color='success'] { --ds-color-background-default: var(--ds-color-success-background-default); - --ds-color-background-subtle: var(--ds-color-success-background-subtle); - --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); --ds-color-surface-hover: var(--ds-color-success-surface-hover); --ds-color-surface-active: var(--ds-color-success-surface-active); --ds-color-border-subtle: var(--ds-color-success-border-subtle); @@ -31,14 +31,14 @@ --ds-color-base-active: var(--ds-color-success-base-active); --ds-color-text-subtle: var(--ds-color-success-text-subtle); --ds-color-text-default: var(--ds-color-success-text-default); - --ds-color-contrast-default: var(--ds-color-success-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); } [data-color='warning'] { --ds-color-background-default: var(--ds-color-warning-background-default); - --ds-color-background-subtle: var(--ds-color-warning-background-subtle); - --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); --ds-color-surface-hover: var(--ds-color-warning-surface-hover); --ds-color-surface-active: var(--ds-color-warning-surface-active); --ds-color-border-subtle: var(--ds-color-warning-border-subtle); @@ -49,14 +49,14 @@ --ds-color-base-active: var(--ds-color-warning-base-active); --ds-color-text-subtle: var(--ds-color-warning-text-subtle); --ds-color-text-default: var(--ds-color-warning-text-default); - --ds-color-contrast-default: var(--ds-color-warning-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); } [data-color='danger'] { --ds-color-background-default: var(--ds-color-danger-background-default); - --ds-color-background-subtle: var(--ds-color-danger-background-subtle); - --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); --ds-color-surface-hover: var(--ds-color-danger-surface-hover); --ds-color-surface-active: var(--ds-color-danger-surface-active); --ds-color-border-subtle: var(--ds-color-danger-border-subtle); @@ -67,14 +67,14 @@ --ds-color-base-active: var(--ds-color-danger-base-active); --ds-color-text-subtle: var(--ds-color-danger-text-subtle); --ds-color-text-default: var(--ds-color-danger-text-default); - --ds-color-contrast-default: var(--ds-color-danger-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); } [data-color='info'] { --ds-color-background-default: var(--ds-color-info-background-default); - --ds-color-background-subtle: var(--ds-color-info-background-subtle); - --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); --ds-color-surface-hover: var(--ds-color-info-surface-hover); --ds-color-surface-active: var(--ds-color-info-surface-active); --ds-color-border-subtle: var(--ds-color-info-border-subtle); @@ -85,7 +85,7 @@ --ds-color-base-active: var(--ds-color-info-base-active); --ds-color-text-subtle: var(--ds-color-info-text-subtle); --ds-color-text-default: var(--ds-color-info-text-default); - --ds-color-contrast-default: var(--ds-color-info-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); } } diff --git a/packages/theme/brand/digdir/color-scheme/dark.css b/packages/theme/brand/digdir/color-scheme/dark.css index 88d833d2b9..23772e44dd 100644 --- a/packages/theme/brand/digdir/color-scheme/dark.css +++ b/packages/theme/brand/digdir/color-scheme/dark.css @@ -95,8 +95,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #003d74; --ds-color-accent-surface-active: #004b8d; --ds-color-accent-border-subtle: #00519a; @@ -107,11 +107,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d7e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -122,11 +122,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #321314; - --ds-color-brand1-background-subtle: #3f181a; - --ds-color-brand1-surface-default: #512021; + --ds-color-brand1-background-tinted: #3f181a; + --ds-color-brand1-surface-tinted: #512021; --ds-color-brand1-surface-hover: #67282a; --ds-color-brand1-surface-active: #7e3133; --ds-color-brand1-border-subtle: #893538; @@ -137,11 +137,11 @@ --ds-color-brand1-base-active: #612628; --ds-color-brand1-text-subtle: #f67e81; --ds-color-brand1-text-default: #fdddde; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #ffffff; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #ffffff; --ds-color-brand2-background-default: #251b05; - --ds-color-brand2-background-subtle: #2f2307; - --ds-color-brand2-surface-default: #3d2d09; + --ds-color-brand2-background-tinted: #2f2307; + --ds-color-brand2-surface-tinted: #3d2d09; --ds-color-brand2-surface-hover: #4d3a0b; --ds-color-brand2-surface-active: #5f460d; --ds-color-brand2-border-subtle: #674d0e; @@ -152,11 +152,11 @@ --ds-color-brand2-base-active: #816012; --ds-color-brand2-text-subtle: #ce991d; --ds-color-brand2-text-default: #f6e3b6; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #ddd9cf; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #ddd9cf; --ds-color-brand3-background-default: #061e31; - --ds-color-brand3-background-subtle: #08263e; - --ds-color-brand3-surface-default: #0a3250; + --ds-color-brand3-background-tinted: #08263e; + --ds-color-brand3-surface-tinted: #0a3250; --ds-color-brand3-surface-hover: #0c3f66; --ds-color-brand3-surface-active: #0f4d7c; --ds-color-brand3-border-subtle: #115487; @@ -167,11 +167,11 @@ --ds-color-brand3-base-active: #0b395d; --ds-color-brand3-text-subtle: #42a8f7; --ds-color-brand3-text-default: #cde8fd; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #fbfcfd; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #fbfcfd; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -182,11 +182,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -197,11 +197,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -212,11 +212,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -227,8 +227,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -328,8 +328,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #003d74; --ds-color-accent-surface-active: #004b8d; --ds-color-accent-border-subtle: #00519a; @@ -340,11 +340,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d7e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -355,11 +355,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #321314; - --ds-color-brand1-background-subtle: #3f181a; - --ds-color-brand1-surface-default: #512021; + --ds-color-brand1-background-tinted: #3f181a; + --ds-color-brand1-surface-tinted: #512021; --ds-color-brand1-surface-hover: #67282a; --ds-color-brand1-surface-active: #7e3133; --ds-color-brand1-border-subtle: #893538; @@ -370,11 +370,11 @@ --ds-color-brand1-base-active: #612628; --ds-color-brand1-text-subtle: #f67e81; --ds-color-brand1-text-default: #fdddde; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #ffffff; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #ffffff; --ds-color-brand2-background-default: #251b05; - --ds-color-brand2-background-subtle: #2f2307; - --ds-color-brand2-surface-default: #3d2d09; + --ds-color-brand2-background-tinted: #2f2307; + --ds-color-brand2-surface-tinted: #3d2d09; --ds-color-brand2-surface-hover: #4d3a0b; --ds-color-brand2-surface-active: #5f460d; --ds-color-brand2-border-subtle: #674d0e; @@ -385,11 +385,11 @@ --ds-color-brand2-base-active: #816012; --ds-color-brand2-text-subtle: #ce991d; --ds-color-brand2-text-default: #f6e3b6; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #ddd9cf; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #ddd9cf; --ds-color-brand3-background-default: #061e31; - --ds-color-brand3-background-subtle: #08263e; - --ds-color-brand3-surface-default: #0a3250; + --ds-color-brand3-background-tinted: #08263e; + --ds-color-brand3-surface-tinted: #0a3250; --ds-color-brand3-surface-hover: #0c3f66; --ds-color-brand3-surface-active: #0f4d7c; --ds-color-brand3-border-subtle: #115487; @@ -400,11 +400,11 @@ --ds-color-brand3-base-active: #0b395d; --ds-color-brand3-text-subtle: #42a8f7; --ds-color-brand3-text-default: #cde8fd; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #fbfcfd; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #fbfcfd; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -415,11 +415,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -430,11 +430,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -445,11 +445,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -460,8 +460,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; diff --git a/packages/theme/brand/digdir/color-scheme/light.css b/packages/theme/brand/digdir/color-scheme/light.css index eb8b5e86cb..7fede3471e 100644 --- a/packages/theme/brand/digdir/color-scheme/light.css +++ b/packages/theme/brand/digdir/color-scheme/light.css @@ -95,8 +95,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d3e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d3e4f3; --ds-color-accent-surface-hover: #bad5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -107,11 +107,11 @@ --ds-color-accent-base-active: #003d75; --ds-color-accent-text-subtle: #0061b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -122,11 +122,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #fef0f1; - --ds-color-brand1-surface-default: #fcdadb; + --ds-color-brand1-background-tinted: #fef0f1; + --ds-color-brand1-surface-tinted: #fcdadb; --ds-color-brand1-surface-hover: #fbc4c5; --ds-color-brand1-surface-active: #f9afb1; --ds-color-brand1-border-subtle: #f9a5a8; @@ -137,11 +137,11 @@ --ds-color-brand1-base-active: #f9a6a8; --ds-color-brand1-text-subtle: #a44043; --ds-color-brand1-text-default: #4b1d1e; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #020101; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #020101; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fbf3df; - --ds-color-brand2-surface-default: #f6e0ae; + --ds-color-brand2-background-tinted: #fbf3df; + --ds-color-brand2-surface-tinted: #f6e0ae; --ds-color-brand2-surface-hover: #f0ce7e; --ds-color-brand2-surface-active: #eabc4f; --ds-color-brand2-border-subtle: #e8b43a; @@ -152,11 +152,11 @@ --ds-color-brand2-base-active: #af8218; --ds-color-brand2-text-subtle: #7c5c11; --ds-color-brand2-text-default: #382908; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #2c2006; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #2c2006; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #eaf5fe; - --ds-color-brand3-surface-default: #c8e6fd; + --ds-color-brand3-background-tinted: #eaf5fe; + --ds-color-brand3-surface-tinted: #c8e6fd; --ds-color-brand3-surface-hover: #a8d7fb; --ds-color-brand3-surface-active: #89c9fa; --ds-color-brand3-border-subtle: #7bc3f9; @@ -167,11 +167,11 @@ --ds-color-brand3-base-active: #81c5f9; --ds-color-brand3-text-subtle: #1465a2; --ds-color-brand3-text-default: #092d49; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #010507; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #010507; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -182,11 +182,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -197,11 +197,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -212,11 +212,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -227,8 +227,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -328,8 +328,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d3e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d3e4f3; --ds-color-accent-surface-hover: #bad5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -340,11 +340,11 @@ --ds-color-accent-base-active: #003d75; --ds-color-accent-text-subtle: #0061b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -355,11 +355,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #fef0f1; - --ds-color-brand1-surface-default: #fcdadb; + --ds-color-brand1-background-tinted: #fef0f1; + --ds-color-brand1-surface-tinted: #fcdadb; --ds-color-brand1-surface-hover: #fbc4c5; --ds-color-brand1-surface-active: #f9afb1; --ds-color-brand1-border-subtle: #f9a5a8; @@ -370,11 +370,11 @@ --ds-color-brand1-base-active: #f9a6a8; --ds-color-brand1-text-subtle: #a44043; --ds-color-brand1-text-default: #4b1d1e; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #020101; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #020101; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fbf3df; - --ds-color-brand2-surface-default: #f6e0ae; + --ds-color-brand2-background-tinted: #fbf3df; + --ds-color-brand2-surface-tinted: #f6e0ae; --ds-color-brand2-surface-hover: #f0ce7e; --ds-color-brand2-surface-active: #eabc4f; --ds-color-brand2-border-subtle: #e8b43a; @@ -385,11 +385,11 @@ --ds-color-brand2-base-active: #af8218; --ds-color-brand2-text-subtle: #7c5c11; --ds-color-brand2-text-default: #382908; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #2c2006; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #2c2006; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #eaf5fe; - --ds-color-brand3-surface-default: #c8e6fd; + --ds-color-brand3-background-tinted: #eaf5fe; + --ds-color-brand3-surface-tinted: #c8e6fd; --ds-color-brand3-surface-hover: #a8d7fb; --ds-color-brand3-surface-active: #89c9fa; --ds-color-brand3-border-subtle: #7bc3f9; @@ -400,11 +400,11 @@ --ds-color-brand3-base-active: #81c5f9; --ds-color-brand3-text-subtle: #1465a2; --ds-color-brand3-text-default: #092d49; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #010507; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #010507; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -415,11 +415,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -430,11 +430,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -445,11 +445,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -460,8 +460,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; diff --git a/packages/theme/brand/digdir/color/accent.css b/packages/theme/brand/digdir/color/accent.css index 3a4dbf9728..c6d9e9e334 100644 --- a/packages/theme/brand/digdir/color/accent.css +++ b/packages/theme/brand/digdir/color/accent.css @@ -5,8 +5,8 @@ @layer ds.theme.color { :root, [data-color-scheme], [data-color="accent"] { --ds-color-background-default: var(--ds-color-accent-background-default); - --ds-color-background-subtle: var(--ds-color-accent-background-subtle); - --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); --ds-color-surface-hover: var(--ds-color-accent-surface-hover); --ds-color-surface-active: var(--ds-color-accent-surface-active); --ds-color-border-subtle: var(--ds-color-accent-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-accent-base-active); --ds-color-text-subtle: var(--ds-color-accent-text-subtle); --ds-color-text-default: var(--ds-color-accent-text-default); - --ds-color-contrast-default: var(--ds-color-accent-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-accent-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); } } diff --git a/packages/theme/brand/digdir/color/brand1.css b/packages/theme/brand/digdir/color/brand1.css index 1670bafcc1..409536f757 100644 --- a/packages/theme/brand/digdir/color/brand1.css +++ b/packages/theme/brand/digdir/color/brand1.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand1"] { --ds-color-background-default: var(--ds-color-brand1-background-default); - --ds-color-background-subtle: var(--ds-color-brand1-background-subtle); - --ds-color-surface-default: var(--ds-color-brand1-surface-default); + --ds-color-background-tinted: var(--ds-color-brand1-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand1-surface-hover); --ds-color-surface-active: var(--ds-color-brand1-surface-active); --ds-color-border-subtle: var(--ds-color-brand1-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand1-base-active); --ds-color-text-subtle: var(--ds-color-brand1-text-subtle); --ds-color-text-default: var(--ds-color-brand1-text-default); - --ds-color-contrast-default: var(--ds-color-brand1-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand1-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); } } diff --git a/packages/theme/brand/digdir/color/brand2.css b/packages/theme/brand/digdir/color/brand2.css index d84f4b87e8..55e3e0f8ac 100644 --- a/packages/theme/brand/digdir/color/brand2.css +++ b/packages/theme/brand/digdir/color/brand2.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand2"] { --ds-color-background-default: var(--ds-color-brand2-background-default); - --ds-color-background-subtle: var(--ds-color-brand2-background-subtle); - --ds-color-surface-default: var(--ds-color-brand2-surface-default); + --ds-color-background-tinted: var(--ds-color-brand2-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand2-surface-hover); --ds-color-surface-active: var(--ds-color-brand2-surface-active); --ds-color-border-subtle: var(--ds-color-brand2-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand2-base-active); --ds-color-text-subtle: var(--ds-color-brand2-text-subtle); --ds-color-text-default: var(--ds-color-brand2-text-default); - --ds-color-contrast-default: var(--ds-color-brand2-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand2-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); } } diff --git a/packages/theme/brand/digdir/color/brand3.css b/packages/theme/brand/digdir/color/brand3.css index 2235404855..8631e729de 100644 --- a/packages/theme/brand/digdir/color/brand3.css +++ b/packages/theme/brand/digdir/color/brand3.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand3"] { --ds-color-background-default: var(--ds-color-brand3-background-default); - --ds-color-background-subtle: var(--ds-color-brand3-background-subtle); - --ds-color-surface-default: var(--ds-color-brand3-surface-default); + --ds-color-background-tinted: var(--ds-color-brand3-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand3-surface-hover); --ds-color-surface-active: var(--ds-color-brand3-surface-active); --ds-color-border-subtle: var(--ds-color-brand3-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand3-base-active); --ds-color-text-subtle: var(--ds-color-brand3-text-subtle); --ds-color-text-default: var(--ds-color-brand3-text-default); - --ds-color-contrast-default: var(--ds-color-brand3-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand3-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle); } } diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css index 7a2a157159..87251649e4 100644 --- a/packages/theme/brand/portal.css +++ b/packages/theme/brand/portal.css @@ -99,8 +99,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #f6f2f8; - --ds-color-accent-surface-default: #e7dfee; + --ds-color-accent-background-tinted: #f6f2f8; + --ds-color-accent-surface-tinted: #e7dfee; --ds-color-accent-surface-hover: #dacde4; --ds-color-accent-surface-active: #cdbcdb; --ds-color-accent-border-subtle: #c8b5d7; @@ -111,11 +111,11 @@ --ds-color-accent-base-active: #734399; --ds-color-accent-text-subtle: #7b4d9e; --ds-color-accent-text-default: #410d69; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #d4c6e0; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #d4c6e0; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -126,11 +126,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #f7f1fc; - --ds-color-brand1-surface-default: #ecddf8; + --ds-color-brand1-background-tinted: #f7f1fc; + --ds-color-brand1-surface-tinted: #ecddf8; --ds-color-brand1-surface-hover: #e1c9f4; --ds-color-brand1-surface-active: #d6b6f0; --ds-color-brand1-border-subtle: #d2aeee; @@ -141,11 +141,11 @@ --ds-color-brand1-base-active: #c291e8; --ds-color-brand1-text-subtle: #8046ad; --ds-color-brand1-text-default: #3a204e; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0a050d; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0a050d; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fcf0fc; - --ds-color-brand2-surface-default: #f6d9f8; + --ds-color-brand2-background-tinted: #fcf0fc; + --ds-color-brand2-surface-tinted: #f6d9f8; --ds-color-brand2-surface-hover: #f1c2f3; --ds-color-brand2-surface-active: #ecadef; --ds-color-brand2-border-subtle: #eaa3ed; @@ -156,11 +156,11 @@ --ds-color-brand2-base-active: #eeb5f1; --ds-color-brand2-text-subtle: #8b488e; --ds-color-brand2-text-default: #3e2040; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #170c18; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #170c18; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #fdf0f9; - --ds-color-brand3-surface-default: #f9d9ef; + --ds-color-brand3-background-tinted: #fdf0f9; + --ds-color-brand3-surface-tinted: #f9d9ef; --ds-color-brand3-surface-hover: #f6c3e5; --ds-color-brand3-surface-active: #f2addc; --ds-color-brand3-border-subtle: #f1a4d8; @@ -171,11 +171,11 @@ --ds-color-brand3-base-active: #f3aedc; --ds-color-brand3-text-subtle: #95447b; --ds-color-brand3-text-default: #431f37; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #10070d; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #10070d; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -186,11 +186,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -201,11 +201,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -216,11 +216,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -231,8 +231,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -332,8 +332,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #f6f2f8; - --ds-color-accent-surface-default: #e7dfee; + --ds-color-accent-background-tinted: #f6f2f8; + --ds-color-accent-surface-tinted: #e7dfee; --ds-color-accent-surface-hover: #dacde4; --ds-color-accent-surface-active: #cdbcdb; --ds-color-accent-border-subtle: #c8b5d7; @@ -344,11 +344,11 @@ --ds-color-accent-base-active: #734399; --ds-color-accent-text-subtle: #7b4d9e; --ds-color-accent-text-default: #410d69; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #d4c6e0; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #d4c6e0; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -359,11 +359,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #f7f1fc; - --ds-color-brand1-surface-default: #ecddf8; + --ds-color-brand1-background-tinted: #f7f1fc; + --ds-color-brand1-surface-tinted: #ecddf8; --ds-color-brand1-surface-hover: #e1c9f4; --ds-color-brand1-surface-active: #d6b6f0; --ds-color-brand1-border-subtle: #d2aeee; @@ -374,11 +374,11 @@ --ds-color-brand1-base-active: #c291e8; --ds-color-brand1-text-subtle: #8046ad; --ds-color-brand1-text-default: #3a204e; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0a050d; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0a050d; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fcf0fc; - --ds-color-brand2-surface-default: #f6d9f8; + --ds-color-brand2-background-tinted: #fcf0fc; + --ds-color-brand2-surface-tinted: #f6d9f8; --ds-color-brand2-surface-hover: #f1c2f3; --ds-color-brand2-surface-active: #ecadef; --ds-color-brand2-border-subtle: #eaa3ed; @@ -389,11 +389,11 @@ --ds-color-brand2-base-active: #eeb5f1; --ds-color-brand2-text-subtle: #8b488e; --ds-color-brand2-text-default: #3e2040; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #170c18; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #170c18; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #fdf0f9; - --ds-color-brand3-surface-default: #f9d9ef; + --ds-color-brand3-background-tinted: #fdf0f9; + --ds-color-brand3-surface-tinted: #f9d9ef; --ds-color-brand3-surface-hover: #f6c3e5; --ds-color-brand3-surface-active: #f2addc; --ds-color-brand3-border-subtle: #f1a4d8; @@ -404,11 +404,11 @@ --ds-color-brand3-base-active: #f3aedc; --ds-color-brand3-text-subtle: #95447b; --ds-color-brand3-text-default: #431f37; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #10070d; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #10070d; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -419,11 +419,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -434,11 +434,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -449,11 +449,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -464,8 +464,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -768,8 +768,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #2c0948; - --ds-color-accent-background-subtle: #370b5a; - --ds-color-accent-surface-default: #470f73; + --ds-color-accent-background-tinted: #370b5a; + --ds-color-accent-surface-tinted: #470f73; --ds-color-accent-surface-hover: #571d84; --ds-color-accent-surface-active: #65308f; --ds-color-accent-border-subtle: #6c3993; @@ -780,11 +780,11 @@ --ds-color-accent-base-active: #9673b3; --ds-color-accent-text-subtle: #b298c7; --ds-color-accent-text-default: #e9e2ef; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #1d1a20; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #1d1a20; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -795,11 +795,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #261534; - --ds-color-brand1-background-subtle: #301b42; - --ds-color-brand1-surface-default: #3f2356; + --ds-color-brand1-background-tinted: #301b42; + --ds-color-brand1-surface-tinted: #3f2356; --ds-color-brand1-surface-hover: #502c6d; --ds-color-brand1-surface-active: #623685; --ds-color-brand1-border-subtle: #6a3a91; @@ -810,11 +810,11 @@ --ds-color-brand1-base-active: #643788; --ds-color-brand1-text-subtle: #bf8de7; --ds-color-brand1-text-default: #ede0f8; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #fbf8fd; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #fbf8fd; --ds-color-brand2-background-default: #29152a; - --ds-color-brand2-background-subtle: #351b36; - --ds-color-brand2-surface-default: #442346; + --ds-color-brand2-background-tinted: #351b36; + --ds-color-brand2-surface-tinted: #442346; --ds-color-brand2-surface-hover: #572d59; --ds-color-brand2-surface-active: #6a376d; --ds-color-brand2-border-subtle: #743c76; @@ -825,11 +825,11 @@ --ds-color-brand2-base-active: #442345; --ds-color-brand2-text-subtle: #e17ce6; --ds-color-brand2-text-default: #f7dcf8; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #f4f0f4; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #f4f0f4; --ds-color-brand3-background-default: #2d1425; - --ds-color-brand3-background-subtle: #391a2f; - --ds-color-brand3-surface-default: #4a223d; + --ds-color-brand3-background-tinted: #391a2f; + --ds-color-brand3-surface-tinted: #4a223d; --ds-color-brand3-surface-hover: #5e2b4d; --ds-color-brand3-surface-active: #72345e; --ds-color-brand3-border-subtle: #7c3966; @@ -840,11 +840,11 @@ --ds-color-brand3-base-active: #4f2441; --ds-color-brand3-text-subtle: #eb7bc7; --ds-color-brand3-text-default: #fadcf0; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #f9f6f8; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #f9f6f8; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -855,11 +855,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -870,11 +870,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -885,11 +885,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -900,8 +900,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -1001,8 +1001,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #2c0948; - --ds-color-accent-background-subtle: #370b5a; - --ds-color-accent-surface-default: #470f73; + --ds-color-accent-background-tinted: #370b5a; + --ds-color-accent-surface-tinted: #470f73; --ds-color-accent-surface-hover: #571d84; --ds-color-accent-surface-active: #65308f; --ds-color-accent-border-subtle: #6c3993; @@ -1013,11 +1013,11 @@ --ds-color-accent-base-active: #9673b3; --ds-color-accent-text-subtle: #b298c7; --ds-color-accent-text-default: #e9e2ef; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #1d1a20; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #1d1a20; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -1028,11 +1028,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #261534; - --ds-color-brand1-background-subtle: #301b42; - --ds-color-brand1-surface-default: #3f2356; + --ds-color-brand1-background-tinted: #301b42; + --ds-color-brand1-surface-tinted: #3f2356; --ds-color-brand1-surface-hover: #502c6d; --ds-color-brand1-surface-active: #623685; --ds-color-brand1-border-subtle: #6a3a91; @@ -1043,11 +1043,11 @@ --ds-color-brand1-base-active: #643788; --ds-color-brand1-text-subtle: #bf8de7; --ds-color-brand1-text-default: #ede0f8; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #fbf8fd; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #fbf8fd; --ds-color-brand2-background-default: #29152a; - --ds-color-brand2-background-subtle: #351b36; - --ds-color-brand2-surface-default: #442346; + --ds-color-brand2-background-tinted: #351b36; + --ds-color-brand2-surface-tinted: #442346; --ds-color-brand2-surface-hover: #572d59; --ds-color-brand2-surface-active: #6a376d; --ds-color-brand2-border-subtle: #743c76; @@ -1058,11 +1058,11 @@ --ds-color-brand2-base-active: #442345; --ds-color-brand2-text-subtle: #e17ce6; --ds-color-brand2-text-default: #f7dcf8; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #f4f0f4; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #f4f0f4; --ds-color-brand3-background-default: #2d1425; - --ds-color-brand3-background-subtle: #391a2f; - --ds-color-brand3-surface-default: #4a223d; + --ds-color-brand3-background-tinted: #391a2f; + --ds-color-brand3-surface-tinted: #4a223d; --ds-color-brand3-surface-hover: #5e2b4d; --ds-color-brand3-surface-active: #72345e; --ds-color-brand3-border-subtle: #7c3966; @@ -1073,11 +1073,11 @@ --ds-color-brand3-base-active: #4f2441; --ds-color-brand3-text-subtle: #eb7bc7; --ds-color-brand3-text-default: #fadcf0; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #f9f6f8; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #f9f6f8; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -1088,11 +1088,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -1103,11 +1103,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -1118,11 +1118,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -1133,8 +1133,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -1275,8 +1275,8 @@ @layer ds.theme.color { :root, [data-color-scheme], [data-color="accent"] { --ds-color-background-default: var(--ds-color-accent-background-default); - --ds-color-background-subtle: var(--ds-color-accent-background-subtle); - --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); --ds-color-surface-hover: var(--ds-color-accent-surface-hover); --ds-color-surface-active: var(--ds-color-accent-surface-active); --ds-color-border-subtle: var(--ds-color-accent-border-subtle); @@ -1287,8 +1287,8 @@ --ds-color-base-active: var(--ds-color-accent-base-active); --ds-color-text-subtle: var(--ds-color-accent-text-subtle); --ds-color-text-default: var(--ds-color-accent-text-default); - --ds-color-contrast-default: var(--ds-color-accent-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-accent-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); } } @@ -1300,8 +1300,8 @@ @layer ds.theme.color { [data-color="brand1"] { --ds-color-background-default: var(--ds-color-brand1-background-default); - --ds-color-background-subtle: var(--ds-color-brand1-background-subtle); - --ds-color-surface-default: var(--ds-color-brand1-surface-default); + --ds-color-background-tinted: var(--ds-color-brand1-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand1-surface-hover); --ds-color-surface-active: var(--ds-color-brand1-surface-active); --ds-color-border-subtle: var(--ds-color-brand1-border-subtle); @@ -1312,8 +1312,8 @@ --ds-color-base-active: var(--ds-color-brand1-base-active); --ds-color-text-subtle: var(--ds-color-brand1-text-subtle); --ds-color-text-default: var(--ds-color-brand1-text-default); - --ds-color-contrast-default: var(--ds-color-brand1-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand1-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); } } @@ -1325,8 +1325,8 @@ @layer ds.theme.color { [data-color="brand2"] { --ds-color-background-default: var(--ds-color-brand2-background-default); - --ds-color-background-subtle: var(--ds-color-brand2-background-subtle); - --ds-color-surface-default: var(--ds-color-brand2-surface-default); + --ds-color-background-tinted: var(--ds-color-brand2-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand2-surface-hover); --ds-color-surface-active: var(--ds-color-brand2-surface-active); --ds-color-border-subtle: var(--ds-color-brand2-border-subtle); @@ -1337,8 +1337,8 @@ --ds-color-base-active: var(--ds-color-brand2-base-active); --ds-color-text-subtle: var(--ds-color-brand2-text-subtle); --ds-color-text-default: var(--ds-color-brand2-text-default); - --ds-color-contrast-default: var(--ds-color-brand2-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand2-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); } } @@ -1350,8 +1350,8 @@ @layer ds.theme.color { [data-color="brand3"] { --ds-color-background-default: var(--ds-color-brand3-background-default); - --ds-color-background-subtle: var(--ds-color-brand3-background-subtle); - --ds-color-surface-default: var(--ds-color-brand3-surface-default); + --ds-color-background-tinted: var(--ds-color-brand3-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand3-surface-hover); --ds-color-surface-active: var(--ds-color-brand3-surface-active); --ds-color-border-subtle: var(--ds-color-brand3-border-subtle); @@ -1362,8 +1362,8 @@ --ds-color-base-active: var(--ds-color-brand3-base-active); --ds-color-text-subtle: var(--ds-color-brand3-text-subtle); --ds-color-text-default: var(--ds-color-brand3-text-default); - --ds-color-contrast-default: var(--ds-color-brand3-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand3-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle); } } @@ -1371,8 +1371,8 @@ @layer ds.theme.color { [data-color='neutral'] { --ds-color-background-default: var(--ds-color-neutral-background-default); - --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); - --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); --ds-color-surface-active: var(--ds-color-neutral-surface-active); --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); @@ -1383,14 +1383,14 @@ --ds-color-base-active: var(--ds-color-neutral-base-active); --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); --ds-color-text-default: var(--ds-color-neutral-text-default); - --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); } [data-color='success'] { --ds-color-background-default: var(--ds-color-success-background-default); - --ds-color-background-subtle: var(--ds-color-success-background-subtle); - --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); --ds-color-surface-hover: var(--ds-color-success-surface-hover); --ds-color-surface-active: var(--ds-color-success-surface-active); --ds-color-border-subtle: var(--ds-color-success-border-subtle); @@ -1401,14 +1401,14 @@ --ds-color-base-active: var(--ds-color-success-base-active); --ds-color-text-subtle: var(--ds-color-success-text-subtle); --ds-color-text-default: var(--ds-color-success-text-default); - --ds-color-contrast-default: var(--ds-color-success-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); } [data-color='warning'] { --ds-color-background-default: var(--ds-color-warning-background-default); - --ds-color-background-subtle: var(--ds-color-warning-background-subtle); - --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); --ds-color-surface-hover: var(--ds-color-warning-surface-hover); --ds-color-surface-active: var(--ds-color-warning-surface-active); --ds-color-border-subtle: var(--ds-color-warning-border-subtle); @@ -1419,14 +1419,14 @@ --ds-color-base-active: var(--ds-color-warning-base-active); --ds-color-text-subtle: var(--ds-color-warning-text-subtle); --ds-color-text-default: var(--ds-color-warning-text-default); - --ds-color-contrast-default: var(--ds-color-warning-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); } [data-color='danger'] { --ds-color-background-default: var(--ds-color-danger-background-default); - --ds-color-background-subtle: var(--ds-color-danger-background-subtle); - --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); --ds-color-surface-hover: var(--ds-color-danger-surface-hover); --ds-color-surface-active: var(--ds-color-danger-surface-active); --ds-color-border-subtle: var(--ds-color-danger-border-subtle); @@ -1437,14 +1437,14 @@ --ds-color-base-active: var(--ds-color-danger-base-active); --ds-color-text-subtle: var(--ds-color-danger-text-subtle); --ds-color-text-default: var(--ds-color-danger-text-default); - --ds-color-contrast-default: var(--ds-color-danger-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); } [data-color='info'] { --ds-color-background-default: var(--ds-color-info-background-default); - --ds-color-background-subtle: var(--ds-color-info-background-subtle); - --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); --ds-color-surface-hover: var(--ds-color-info-surface-hover); --ds-color-surface-active: var(--ds-color-info-surface-active); --ds-color-border-subtle: var(--ds-color-info-border-subtle); @@ -1455,7 +1455,7 @@ --ds-color-base-active: var(--ds-color-info-base-active); --ds-color-text-subtle: var(--ds-color-info-text-subtle); --ds-color-text-default: var(--ds-color-info-text-default); - --ds-color-contrast-default: var(--ds-color-info-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); } } diff --git a/packages/theme/brand/portal/builtin-colors.css b/packages/theme/brand/portal/builtin-colors.css index dc0c68db90..d99596f2f4 100644 --- a/packages/theme/brand/portal/builtin-colors.css +++ b/packages/theme/brand/portal/builtin-colors.css @@ -1,8 +1,8 @@ @layer ds.theme.color { [data-color='neutral'] { --ds-color-background-default: var(--ds-color-neutral-background-default); - --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); - --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); --ds-color-surface-active: var(--ds-color-neutral-surface-active); --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); @@ -13,14 +13,14 @@ --ds-color-base-active: var(--ds-color-neutral-base-active); --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); --ds-color-text-default: var(--ds-color-neutral-text-default); - --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); } [data-color='success'] { --ds-color-background-default: var(--ds-color-success-background-default); - --ds-color-background-subtle: var(--ds-color-success-background-subtle); - --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); --ds-color-surface-hover: var(--ds-color-success-surface-hover); --ds-color-surface-active: var(--ds-color-success-surface-active); --ds-color-border-subtle: var(--ds-color-success-border-subtle); @@ -31,14 +31,14 @@ --ds-color-base-active: var(--ds-color-success-base-active); --ds-color-text-subtle: var(--ds-color-success-text-subtle); --ds-color-text-default: var(--ds-color-success-text-default); - --ds-color-contrast-default: var(--ds-color-success-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); } [data-color='warning'] { --ds-color-background-default: var(--ds-color-warning-background-default); - --ds-color-background-subtle: var(--ds-color-warning-background-subtle); - --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); --ds-color-surface-hover: var(--ds-color-warning-surface-hover); --ds-color-surface-active: var(--ds-color-warning-surface-active); --ds-color-border-subtle: var(--ds-color-warning-border-subtle); @@ -49,14 +49,14 @@ --ds-color-base-active: var(--ds-color-warning-base-active); --ds-color-text-subtle: var(--ds-color-warning-text-subtle); --ds-color-text-default: var(--ds-color-warning-text-default); - --ds-color-contrast-default: var(--ds-color-warning-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); } [data-color='danger'] { --ds-color-background-default: var(--ds-color-danger-background-default); - --ds-color-background-subtle: var(--ds-color-danger-background-subtle); - --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); --ds-color-surface-hover: var(--ds-color-danger-surface-hover); --ds-color-surface-active: var(--ds-color-danger-surface-active); --ds-color-border-subtle: var(--ds-color-danger-border-subtle); @@ -67,14 +67,14 @@ --ds-color-base-active: var(--ds-color-danger-base-active); --ds-color-text-subtle: var(--ds-color-danger-text-subtle); --ds-color-text-default: var(--ds-color-danger-text-default); - --ds-color-contrast-default: var(--ds-color-danger-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); } [data-color='info'] { --ds-color-background-default: var(--ds-color-info-background-default); - --ds-color-background-subtle: var(--ds-color-info-background-subtle); - --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); --ds-color-surface-hover: var(--ds-color-info-surface-hover); --ds-color-surface-active: var(--ds-color-info-surface-active); --ds-color-border-subtle: var(--ds-color-info-border-subtle); @@ -85,7 +85,7 @@ --ds-color-base-active: var(--ds-color-info-base-active); --ds-color-text-subtle: var(--ds-color-info-text-subtle); --ds-color-text-default: var(--ds-color-info-text-default); - --ds-color-contrast-default: var(--ds-color-info-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); } } diff --git a/packages/theme/brand/portal/color-scheme/dark.css b/packages/theme/brand/portal/color-scheme/dark.css index 582393421e..b5de83416f 100644 --- a/packages/theme/brand/portal/color-scheme/dark.css +++ b/packages/theme/brand/portal/color-scheme/dark.css @@ -95,8 +95,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #2c0948; - --ds-color-accent-background-subtle: #370b5a; - --ds-color-accent-surface-default: #470f73; + --ds-color-accent-background-tinted: #370b5a; + --ds-color-accent-surface-tinted: #470f73; --ds-color-accent-surface-hover: #571d84; --ds-color-accent-surface-active: #65308f; --ds-color-accent-border-subtle: #6c3993; @@ -107,11 +107,11 @@ --ds-color-accent-base-active: #9673b3; --ds-color-accent-text-subtle: #b298c7; --ds-color-accent-text-default: #e9e2ef; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #1d1a20; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #1d1a20; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -122,11 +122,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #261534; - --ds-color-brand1-background-subtle: #301b42; - --ds-color-brand1-surface-default: #3f2356; + --ds-color-brand1-background-tinted: #301b42; + --ds-color-brand1-surface-tinted: #3f2356; --ds-color-brand1-surface-hover: #502c6d; --ds-color-brand1-surface-active: #623685; --ds-color-brand1-border-subtle: #6a3a91; @@ -137,11 +137,11 @@ --ds-color-brand1-base-active: #643788; --ds-color-brand1-text-subtle: #bf8de7; --ds-color-brand1-text-default: #ede0f8; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #fbf8fd; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #fbf8fd; --ds-color-brand2-background-default: #29152a; - --ds-color-brand2-background-subtle: #351b36; - --ds-color-brand2-surface-default: #442346; + --ds-color-brand2-background-tinted: #351b36; + --ds-color-brand2-surface-tinted: #442346; --ds-color-brand2-surface-hover: #572d59; --ds-color-brand2-surface-active: #6a376d; --ds-color-brand2-border-subtle: #743c76; @@ -152,11 +152,11 @@ --ds-color-brand2-base-active: #442345; --ds-color-brand2-text-subtle: #e17ce6; --ds-color-brand2-text-default: #f7dcf8; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #f4f0f4; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #f4f0f4; --ds-color-brand3-background-default: #2d1425; - --ds-color-brand3-background-subtle: #391a2f; - --ds-color-brand3-surface-default: #4a223d; + --ds-color-brand3-background-tinted: #391a2f; + --ds-color-brand3-surface-tinted: #4a223d; --ds-color-brand3-surface-hover: #5e2b4d; --ds-color-brand3-surface-active: #72345e; --ds-color-brand3-border-subtle: #7c3966; @@ -167,11 +167,11 @@ --ds-color-brand3-base-active: #4f2441; --ds-color-brand3-text-subtle: #eb7bc7; --ds-color-brand3-text-default: #fadcf0; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #f9f6f8; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #f9f6f8; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -182,11 +182,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -197,11 +197,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -212,11 +212,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -227,8 +227,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -328,8 +328,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #2c0948; - --ds-color-accent-background-subtle: #370b5a; - --ds-color-accent-surface-default: #470f73; + --ds-color-accent-background-tinted: #370b5a; + --ds-color-accent-surface-tinted: #470f73; --ds-color-accent-surface-hover: #571d84; --ds-color-accent-surface-active: #65308f; --ds-color-accent-border-subtle: #6c3993; @@ -340,11 +340,11 @@ --ds-color-accent-base-active: #9673b3; --ds-color-accent-text-subtle: #b298c7; --ds-color-accent-text-default: #e9e2ef; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #1d1a20; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #1d1a20; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -355,11 +355,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #261534; - --ds-color-brand1-background-subtle: #301b42; - --ds-color-brand1-surface-default: #3f2356; + --ds-color-brand1-background-tinted: #301b42; + --ds-color-brand1-surface-tinted: #3f2356; --ds-color-brand1-surface-hover: #502c6d; --ds-color-brand1-surface-active: #623685; --ds-color-brand1-border-subtle: #6a3a91; @@ -370,11 +370,11 @@ --ds-color-brand1-base-active: #643788; --ds-color-brand1-text-subtle: #bf8de7; --ds-color-brand1-text-default: #ede0f8; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #fbf8fd; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #fbf8fd; --ds-color-brand2-background-default: #29152a; - --ds-color-brand2-background-subtle: #351b36; - --ds-color-brand2-surface-default: #442346; + --ds-color-brand2-background-tinted: #351b36; + --ds-color-brand2-surface-tinted: #442346; --ds-color-brand2-surface-hover: #572d59; --ds-color-brand2-surface-active: #6a376d; --ds-color-brand2-border-subtle: #743c76; @@ -385,11 +385,11 @@ --ds-color-brand2-base-active: #442345; --ds-color-brand2-text-subtle: #e17ce6; --ds-color-brand2-text-default: #f7dcf8; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #f4f0f4; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #f4f0f4; --ds-color-brand3-background-default: #2d1425; - --ds-color-brand3-background-subtle: #391a2f; - --ds-color-brand3-surface-default: #4a223d; + --ds-color-brand3-background-tinted: #391a2f; + --ds-color-brand3-surface-tinted: #4a223d; --ds-color-brand3-surface-hover: #5e2b4d; --ds-color-brand3-surface-active: #72345e; --ds-color-brand3-border-subtle: #7c3966; @@ -400,11 +400,11 @@ --ds-color-brand3-base-active: #4f2441; --ds-color-brand3-text-subtle: #eb7bc7; --ds-color-brand3-text-default: #fadcf0; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #f9f6f8; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #f9f6f8; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -415,11 +415,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -430,11 +430,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -445,11 +445,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -460,8 +460,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; diff --git a/packages/theme/brand/portal/color-scheme/light.css b/packages/theme/brand/portal/color-scheme/light.css index 7cc554b5e9..9b6aab6871 100644 --- a/packages/theme/brand/portal/color-scheme/light.css +++ b/packages/theme/brand/portal/color-scheme/light.css @@ -95,8 +95,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #f6f2f8; - --ds-color-accent-surface-default: #e7dfee; + --ds-color-accent-background-tinted: #f6f2f8; + --ds-color-accent-surface-tinted: #e7dfee; --ds-color-accent-surface-hover: #dacde4; --ds-color-accent-surface-active: #cdbcdb; --ds-color-accent-border-subtle: #c8b5d7; @@ -107,11 +107,11 @@ --ds-color-accent-base-active: #734399; --ds-color-accent-text-subtle: #7b4d9e; --ds-color-accent-text-default: #410d69; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #d4c6e0; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #d4c6e0; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -122,11 +122,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #f7f1fc; - --ds-color-brand1-surface-default: #ecddf8; + --ds-color-brand1-background-tinted: #f7f1fc; + --ds-color-brand1-surface-tinted: #ecddf8; --ds-color-brand1-surface-hover: #e1c9f4; --ds-color-brand1-surface-active: #d6b6f0; --ds-color-brand1-border-subtle: #d2aeee; @@ -137,11 +137,11 @@ --ds-color-brand1-base-active: #c291e8; --ds-color-brand1-text-subtle: #8046ad; --ds-color-brand1-text-default: #3a204e; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0a050d; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0a050d; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fcf0fc; - --ds-color-brand2-surface-default: #f6d9f8; + --ds-color-brand2-background-tinted: #fcf0fc; + --ds-color-brand2-surface-tinted: #f6d9f8; --ds-color-brand2-surface-hover: #f1c2f3; --ds-color-brand2-surface-active: #ecadef; --ds-color-brand2-border-subtle: #eaa3ed; @@ -152,11 +152,11 @@ --ds-color-brand2-base-active: #eeb5f1; --ds-color-brand2-text-subtle: #8b488e; --ds-color-brand2-text-default: #3e2040; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #170c18; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #170c18; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #fdf0f9; - --ds-color-brand3-surface-default: #f9d9ef; + --ds-color-brand3-background-tinted: #fdf0f9; + --ds-color-brand3-surface-tinted: #f9d9ef; --ds-color-brand3-surface-hover: #f6c3e5; --ds-color-brand3-surface-active: #f2addc; --ds-color-brand3-border-subtle: #f1a4d8; @@ -167,11 +167,11 @@ --ds-color-brand3-base-active: #f3aedc; --ds-color-brand3-text-subtle: #95447b; --ds-color-brand3-text-default: #431f37; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #10070d; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #10070d; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -182,11 +182,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -197,11 +197,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -212,11 +212,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -227,8 +227,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -328,8 +328,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #f6f2f8; - --ds-color-accent-surface-default: #e7dfee; + --ds-color-accent-background-tinted: #f6f2f8; + --ds-color-accent-surface-tinted: #e7dfee; --ds-color-accent-surface-hover: #dacde4; --ds-color-accent-surface-active: #cdbcdb; --ds-color-accent-border-subtle: #c8b5d7; @@ -340,11 +340,11 @@ --ds-color-accent-base-active: #734399; --ds-color-accent-text-subtle: #7b4d9e; --ds-color-accent-text-default: #410d69; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #d4c6e0; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #d4c6e0; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -355,11 +355,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #f7f1fc; - --ds-color-brand1-surface-default: #ecddf8; + --ds-color-brand1-background-tinted: #f7f1fc; + --ds-color-brand1-surface-tinted: #ecddf8; --ds-color-brand1-surface-hover: #e1c9f4; --ds-color-brand1-surface-active: #d6b6f0; --ds-color-brand1-border-subtle: #d2aeee; @@ -370,11 +370,11 @@ --ds-color-brand1-base-active: #c291e8; --ds-color-brand1-text-subtle: #8046ad; --ds-color-brand1-text-default: #3a204e; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0a050d; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0a050d; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fcf0fc; - --ds-color-brand2-surface-default: #f6d9f8; + --ds-color-brand2-background-tinted: #fcf0fc; + --ds-color-brand2-surface-tinted: #f6d9f8; --ds-color-brand2-surface-hover: #f1c2f3; --ds-color-brand2-surface-active: #ecadef; --ds-color-brand2-border-subtle: #eaa3ed; @@ -385,11 +385,11 @@ --ds-color-brand2-base-active: #eeb5f1; --ds-color-brand2-text-subtle: #8b488e; --ds-color-brand2-text-default: #3e2040; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #170c18; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #170c18; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #fdf0f9; - --ds-color-brand3-surface-default: #f9d9ef; + --ds-color-brand3-background-tinted: #fdf0f9; + --ds-color-brand3-surface-tinted: #f9d9ef; --ds-color-brand3-surface-hover: #f6c3e5; --ds-color-brand3-surface-active: #f2addc; --ds-color-brand3-border-subtle: #f1a4d8; @@ -400,11 +400,11 @@ --ds-color-brand3-base-active: #f3aedc; --ds-color-brand3-text-subtle: #95447b; --ds-color-brand3-text-default: #431f37; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #10070d; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #10070d; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -415,11 +415,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -430,11 +430,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -445,11 +445,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -460,8 +460,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; diff --git a/packages/theme/brand/portal/color/accent.css b/packages/theme/brand/portal/color/accent.css index 3a4dbf9728..c6d9e9e334 100644 --- a/packages/theme/brand/portal/color/accent.css +++ b/packages/theme/brand/portal/color/accent.css @@ -5,8 +5,8 @@ @layer ds.theme.color { :root, [data-color-scheme], [data-color="accent"] { --ds-color-background-default: var(--ds-color-accent-background-default); - --ds-color-background-subtle: var(--ds-color-accent-background-subtle); - --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); --ds-color-surface-hover: var(--ds-color-accent-surface-hover); --ds-color-surface-active: var(--ds-color-accent-surface-active); --ds-color-border-subtle: var(--ds-color-accent-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-accent-base-active); --ds-color-text-subtle: var(--ds-color-accent-text-subtle); --ds-color-text-default: var(--ds-color-accent-text-default); - --ds-color-contrast-default: var(--ds-color-accent-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-accent-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); } } diff --git a/packages/theme/brand/portal/color/brand1.css b/packages/theme/brand/portal/color/brand1.css index 1670bafcc1..409536f757 100644 --- a/packages/theme/brand/portal/color/brand1.css +++ b/packages/theme/brand/portal/color/brand1.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand1"] { --ds-color-background-default: var(--ds-color-brand1-background-default); - --ds-color-background-subtle: var(--ds-color-brand1-background-subtle); - --ds-color-surface-default: var(--ds-color-brand1-surface-default); + --ds-color-background-tinted: var(--ds-color-brand1-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand1-surface-hover); --ds-color-surface-active: var(--ds-color-brand1-surface-active); --ds-color-border-subtle: var(--ds-color-brand1-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand1-base-active); --ds-color-text-subtle: var(--ds-color-brand1-text-subtle); --ds-color-text-default: var(--ds-color-brand1-text-default); - --ds-color-contrast-default: var(--ds-color-brand1-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand1-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); } } diff --git a/packages/theme/brand/portal/color/brand2.css b/packages/theme/brand/portal/color/brand2.css index d84f4b87e8..55e3e0f8ac 100644 --- a/packages/theme/brand/portal/color/brand2.css +++ b/packages/theme/brand/portal/color/brand2.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand2"] { --ds-color-background-default: var(--ds-color-brand2-background-default); - --ds-color-background-subtle: var(--ds-color-brand2-background-subtle); - --ds-color-surface-default: var(--ds-color-brand2-surface-default); + --ds-color-background-tinted: var(--ds-color-brand2-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand2-surface-hover); --ds-color-surface-active: var(--ds-color-brand2-surface-active); --ds-color-border-subtle: var(--ds-color-brand2-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand2-base-active); --ds-color-text-subtle: var(--ds-color-brand2-text-subtle); --ds-color-text-default: var(--ds-color-brand2-text-default); - --ds-color-contrast-default: var(--ds-color-brand2-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand2-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); } } diff --git a/packages/theme/brand/portal/color/brand3.css b/packages/theme/brand/portal/color/brand3.css index 2235404855..8631e729de 100644 --- a/packages/theme/brand/portal/color/brand3.css +++ b/packages/theme/brand/portal/color/brand3.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand3"] { --ds-color-background-default: var(--ds-color-brand3-background-default); - --ds-color-background-subtle: var(--ds-color-brand3-background-subtle); - --ds-color-surface-default: var(--ds-color-brand3-surface-default); + --ds-color-background-tinted: var(--ds-color-brand3-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand3-surface-hover); --ds-color-surface-active: var(--ds-color-brand3-surface-active); --ds-color-border-subtle: var(--ds-color-brand3-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand3-base-active); --ds-color-text-subtle: var(--ds-color-brand3-text-subtle); --ds-color-text-default: var(--ds-color-brand3-text-default); - --ds-color-contrast-default: var(--ds-color-brand3-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand3-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle); } } diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css index e0c3a963c8..3d7441c265 100644 --- a/packages/theme/brand/uutilsynet.css +++ b/packages/theme/brand/uutilsynet.css @@ -99,8 +99,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d4e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d4e4f3; --ds-color-accent-surface-hover: #bbd5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -111,11 +111,11 @@ --ds-color-accent-base-active: #013d75; --ds-color-accent-text-subtle: #0161b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -126,11 +126,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #f3f3fb; - --ds-color-brand1-surface-default: #e0e0f6; + --ds-color-brand1-background-tinted: #f3f3fb; + --ds-color-brand1-surface-tinted: #e0e0f6; --ds-color-brand1-surface-hover: #cdcff1; --ds-color-brand1-surface-active: #bdbfec; --ds-color-brand1-border-subtle: #b5b8ea; @@ -141,11 +141,11 @@ --ds-color-brand1-base-active: #3b3e87; --ds-color-brand1-text-subtle: #5156bb; --ds-color-brand1-text-default: #252754; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #f2f2fb; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #f2f2fb; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fff1e7; - --ds-color-brand2-surface-default: #ffdbc2; + --ds-color-brand2-background-tinted: #fff1e7; + --ds-color-brand2-surface-tinted: #ffdbc2; --ds-color-brand2-surface-hover: #fec69e; --ds-color-brand2-surface-active: #feb17a; --ds-color-brand2-border-subtle: #fea86a; @@ -156,11 +156,11 @@ --ds-color-brand2-base-active: #c48151; --ds-color-brand2-text-subtle: #845737; --ds-color-brand2-text-default: #3b2718; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #372417; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #372417; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #eef5f3; - --ds-color-brand3-surface-default: #d4e6e1; + --ds-color-brand3-background-tinted: #eef5f3; + --ds-color-brand3-surface-tinted: #d4e6e1; --ds-color-brand3-surface-hover: #bad8d0; --ds-color-brand3-surface-active: #a3cac0; --ds-color-brand3-border-subtle: #99c5b9; @@ -171,11 +171,11 @@ --ds-color-brand3-base-active: #a0c8be; --ds-color-brand3-text-subtle: #3d6a5e; --ds-color-brand3-text-default: #1b2f2a; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #040807; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #040807; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -186,11 +186,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -201,11 +201,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -216,11 +216,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -231,8 +231,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -332,8 +332,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d4e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d4e4f3; --ds-color-accent-surface-hover: #bbd5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -344,11 +344,11 @@ --ds-color-accent-base-active: #013d75; --ds-color-accent-text-subtle: #0161b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -359,11 +359,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #f3f3fb; - --ds-color-brand1-surface-default: #e0e0f6; + --ds-color-brand1-background-tinted: #f3f3fb; + --ds-color-brand1-surface-tinted: #e0e0f6; --ds-color-brand1-surface-hover: #cdcff1; --ds-color-brand1-surface-active: #bdbfec; --ds-color-brand1-border-subtle: #b5b8ea; @@ -374,11 +374,11 @@ --ds-color-brand1-base-active: #3b3e87; --ds-color-brand1-text-subtle: #5156bb; --ds-color-brand1-text-default: #252754; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #f2f2fb; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #f2f2fb; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fff1e7; - --ds-color-brand2-surface-default: #ffdbc2; + --ds-color-brand2-background-tinted: #fff1e7; + --ds-color-brand2-surface-tinted: #ffdbc2; --ds-color-brand2-surface-hover: #fec69e; --ds-color-brand2-surface-active: #feb17a; --ds-color-brand2-border-subtle: #fea86a; @@ -389,11 +389,11 @@ --ds-color-brand2-base-active: #c48151; --ds-color-brand2-text-subtle: #845737; --ds-color-brand2-text-default: #3b2718; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #372417; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #372417; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #eef5f3; - --ds-color-brand3-surface-default: #d4e6e1; + --ds-color-brand3-background-tinted: #eef5f3; + --ds-color-brand3-surface-tinted: #d4e6e1; --ds-color-brand3-surface-hover: #bad8d0; --ds-color-brand3-surface-active: #a3cac0; --ds-color-brand3-border-subtle: #99c5b9; @@ -404,11 +404,11 @@ --ds-color-brand3-base-active: #a0c8be; --ds-color-brand3-text-subtle: #3d6a5e; --ds-color-brand3-text-default: #1b2f2a; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #040807; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #040807; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -419,11 +419,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -434,11 +434,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -449,11 +449,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -464,8 +464,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -768,8 +768,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #013d74; --ds-color-accent-surface-active: #014a8d; --ds-color-accent-border-subtle: #01519a; @@ -780,11 +780,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d8e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -795,11 +795,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #181a38; - --ds-color-brand1-background-subtle: #1f2047; - --ds-color-brand1-surface-default: #282a5c; + --ds-color-brand1-background-tinted: #1f2047; + --ds-color-brand1-surface-tinted: #282a5c; --ds-color-brand1-surface-hover: #333675; --ds-color-brand1-surface-active: #3e428f; --ds-color-brand1-border-subtle: #44489c; @@ -810,11 +810,11 @@ --ds-color-brand1-base-active: #a3a6e5; --ds-color-brand1-text-subtle: #999ce2; --ds-color-brand1-text-default: #e2e3f7; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0d0d18; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0d0d18; --ds-color-brand2-background-default: #271a10; - --ds-color-brand2-background-subtle: #322115; - --ds-color-brand2-surface-default: #412b1b; + --ds-color-brand2-background-tinted: #322115; + --ds-color-brand2-surface-tinted: #412b1b; --ds-color-brand2-surface-hover: #533622; --ds-color-brand2-surface-active: #65432a; --ds-color-brand2-border-subtle: #6e482e; @@ -825,11 +825,11 @@ --ds-color-brand2-base-active: #805435; --ds-color-brand2-text-subtle: #dc905b; --ds-color-brand2-text-default: #ffdfc8; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #d6d0cc; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #d6d0cc; --ds-color-brand3-background-default: #121f1c; - --ds-color-brand3-background-subtle: #172823; - --ds-color-brand3-surface-default: #1e342e; + --ds-color-brand3-background-tinted: #172823; + --ds-color-brand3-surface-tinted: #1e342e; --ds-color-brand3-surface-hover: #26423b; --ds-color-brand3-surface-active: #2e5148; --ds-color-brand3-border-subtle: #32584e; @@ -840,11 +840,11 @@ --ds-color-brand3-base-active: #213a33; --ds-color-brand3-text-subtle: #71ad9e; --ds-color-brand3-text-default: #d7e8e4; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #f9fafa; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #f9fafa; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -855,11 +855,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -870,11 +870,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -885,11 +885,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -900,8 +900,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -1001,8 +1001,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #013d74; --ds-color-accent-surface-active: #014a8d; --ds-color-accent-border-subtle: #01519a; @@ -1013,11 +1013,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d8e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -1028,11 +1028,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #181a38; - --ds-color-brand1-background-subtle: #1f2047; - --ds-color-brand1-surface-default: #282a5c; + --ds-color-brand1-background-tinted: #1f2047; + --ds-color-brand1-surface-tinted: #282a5c; --ds-color-brand1-surface-hover: #333675; --ds-color-brand1-surface-active: #3e428f; --ds-color-brand1-border-subtle: #44489c; @@ -1043,11 +1043,11 @@ --ds-color-brand1-base-active: #a3a6e5; --ds-color-brand1-text-subtle: #999ce2; --ds-color-brand1-text-default: #e2e3f7; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0d0d18; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0d0d18; --ds-color-brand2-background-default: #271a10; - --ds-color-brand2-background-subtle: #322115; - --ds-color-brand2-surface-default: #412b1b; + --ds-color-brand2-background-tinted: #322115; + --ds-color-brand2-surface-tinted: #412b1b; --ds-color-brand2-surface-hover: #533622; --ds-color-brand2-surface-active: #65432a; --ds-color-brand2-border-subtle: #6e482e; @@ -1058,11 +1058,11 @@ --ds-color-brand2-base-active: #805435; --ds-color-brand2-text-subtle: #dc905b; --ds-color-brand2-text-default: #ffdfc8; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #d6d0cc; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #d6d0cc; --ds-color-brand3-background-default: #121f1c; - --ds-color-brand3-background-subtle: #172823; - --ds-color-brand3-surface-default: #1e342e; + --ds-color-brand3-background-tinted: #172823; + --ds-color-brand3-surface-tinted: #1e342e; --ds-color-brand3-surface-hover: #26423b; --ds-color-brand3-surface-active: #2e5148; --ds-color-brand3-border-subtle: #32584e; @@ -1073,11 +1073,11 @@ --ds-color-brand3-base-active: #213a33; --ds-color-brand3-text-subtle: #71ad9e; --ds-color-brand3-text-default: #d7e8e4; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #f9fafa; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #f9fafa; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -1088,11 +1088,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -1103,11 +1103,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -1118,11 +1118,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -1133,8 +1133,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -1275,8 +1275,8 @@ @layer ds.theme.color { :root, [data-color-scheme], [data-color="accent"] { --ds-color-background-default: var(--ds-color-accent-background-default); - --ds-color-background-subtle: var(--ds-color-accent-background-subtle); - --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); --ds-color-surface-hover: var(--ds-color-accent-surface-hover); --ds-color-surface-active: var(--ds-color-accent-surface-active); --ds-color-border-subtle: var(--ds-color-accent-border-subtle); @@ -1287,8 +1287,8 @@ --ds-color-base-active: var(--ds-color-accent-base-active); --ds-color-text-subtle: var(--ds-color-accent-text-subtle); --ds-color-text-default: var(--ds-color-accent-text-default); - --ds-color-contrast-default: var(--ds-color-accent-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-accent-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); } } @@ -1300,8 +1300,8 @@ @layer ds.theme.color { [data-color="brand1"] { --ds-color-background-default: var(--ds-color-brand1-background-default); - --ds-color-background-subtle: var(--ds-color-brand1-background-subtle); - --ds-color-surface-default: var(--ds-color-brand1-surface-default); + --ds-color-background-tinted: var(--ds-color-brand1-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand1-surface-hover); --ds-color-surface-active: var(--ds-color-brand1-surface-active); --ds-color-border-subtle: var(--ds-color-brand1-border-subtle); @@ -1312,8 +1312,8 @@ --ds-color-base-active: var(--ds-color-brand1-base-active); --ds-color-text-subtle: var(--ds-color-brand1-text-subtle); --ds-color-text-default: var(--ds-color-brand1-text-default); - --ds-color-contrast-default: var(--ds-color-brand1-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand1-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); } } @@ -1325,8 +1325,8 @@ @layer ds.theme.color { [data-color="brand2"] { --ds-color-background-default: var(--ds-color-brand2-background-default); - --ds-color-background-subtle: var(--ds-color-brand2-background-subtle); - --ds-color-surface-default: var(--ds-color-brand2-surface-default); + --ds-color-background-tinted: var(--ds-color-brand2-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand2-surface-hover); --ds-color-surface-active: var(--ds-color-brand2-surface-active); --ds-color-border-subtle: var(--ds-color-brand2-border-subtle); @@ -1337,8 +1337,8 @@ --ds-color-base-active: var(--ds-color-brand2-base-active); --ds-color-text-subtle: var(--ds-color-brand2-text-subtle); --ds-color-text-default: var(--ds-color-brand2-text-default); - --ds-color-contrast-default: var(--ds-color-brand2-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand2-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); } } @@ -1350,8 +1350,8 @@ @layer ds.theme.color { [data-color="brand3"] { --ds-color-background-default: var(--ds-color-brand3-background-default); - --ds-color-background-subtle: var(--ds-color-brand3-background-subtle); - --ds-color-surface-default: var(--ds-color-brand3-surface-default); + --ds-color-background-tinted: var(--ds-color-brand3-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand3-surface-hover); --ds-color-surface-active: var(--ds-color-brand3-surface-active); --ds-color-border-subtle: var(--ds-color-brand3-border-subtle); @@ -1362,8 +1362,8 @@ --ds-color-base-active: var(--ds-color-brand3-base-active); --ds-color-text-subtle: var(--ds-color-brand3-text-subtle); --ds-color-text-default: var(--ds-color-brand3-text-default); - --ds-color-contrast-default: var(--ds-color-brand3-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand3-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle); } } @@ -1371,8 +1371,8 @@ @layer ds.theme.color { [data-color='neutral'] { --ds-color-background-default: var(--ds-color-neutral-background-default); - --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); - --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); --ds-color-surface-active: var(--ds-color-neutral-surface-active); --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); @@ -1383,14 +1383,14 @@ --ds-color-base-active: var(--ds-color-neutral-base-active); --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); --ds-color-text-default: var(--ds-color-neutral-text-default); - --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); } [data-color='success'] { --ds-color-background-default: var(--ds-color-success-background-default); - --ds-color-background-subtle: var(--ds-color-success-background-subtle); - --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); --ds-color-surface-hover: var(--ds-color-success-surface-hover); --ds-color-surface-active: var(--ds-color-success-surface-active); --ds-color-border-subtle: var(--ds-color-success-border-subtle); @@ -1401,14 +1401,14 @@ --ds-color-base-active: var(--ds-color-success-base-active); --ds-color-text-subtle: var(--ds-color-success-text-subtle); --ds-color-text-default: var(--ds-color-success-text-default); - --ds-color-contrast-default: var(--ds-color-success-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); } [data-color='warning'] { --ds-color-background-default: var(--ds-color-warning-background-default); - --ds-color-background-subtle: var(--ds-color-warning-background-subtle); - --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); --ds-color-surface-hover: var(--ds-color-warning-surface-hover); --ds-color-surface-active: var(--ds-color-warning-surface-active); --ds-color-border-subtle: var(--ds-color-warning-border-subtle); @@ -1419,14 +1419,14 @@ --ds-color-base-active: var(--ds-color-warning-base-active); --ds-color-text-subtle: var(--ds-color-warning-text-subtle); --ds-color-text-default: var(--ds-color-warning-text-default); - --ds-color-contrast-default: var(--ds-color-warning-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); } [data-color='danger'] { --ds-color-background-default: var(--ds-color-danger-background-default); - --ds-color-background-subtle: var(--ds-color-danger-background-subtle); - --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); --ds-color-surface-hover: var(--ds-color-danger-surface-hover); --ds-color-surface-active: var(--ds-color-danger-surface-active); --ds-color-border-subtle: var(--ds-color-danger-border-subtle); @@ -1437,14 +1437,14 @@ --ds-color-base-active: var(--ds-color-danger-base-active); --ds-color-text-subtle: var(--ds-color-danger-text-subtle); --ds-color-text-default: var(--ds-color-danger-text-default); - --ds-color-contrast-default: var(--ds-color-danger-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); } [data-color='info'] { --ds-color-background-default: var(--ds-color-info-background-default); - --ds-color-background-subtle: var(--ds-color-info-background-subtle); - --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); --ds-color-surface-hover: var(--ds-color-info-surface-hover); --ds-color-surface-active: var(--ds-color-info-surface-active); --ds-color-border-subtle: var(--ds-color-info-border-subtle); @@ -1455,7 +1455,7 @@ --ds-color-base-active: var(--ds-color-info-base-active); --ds-color-text-subtle: var(--ds-color-info-text-subtle); --ds-color-text-default: var(--ds-color-info-text-default); - --ds-color-contrast-default: var(--ds-color-info-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); } } diff --git a/packages/theme/brand/uutilsynet/builtin-colors.css b/packages/theme/brand/uutilsynet/builtin-colors.css index dc0c68db90..d99596f2f4 100644 --- a/packages/theme/brand/uutilsynet/builtin-colors.css +++ b/packages/theme/brand/uutilsynet/builtin-colors.css @@ -1,8 +1,8 @@ @layer ds.theme.color { [data-color='neutral'] { --ds-color-background-default: var(--ds-color-neutral-background-default); - --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); - --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); --ds-color-surface-active: var(--ds-color-neutral-surface-active); --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); @@ -13,14 +13,14 @@ --ds-color-base-active: var(--ds-color-neutral-base-active); --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); --ds-color-text-default: var(--ds-color-neutral-text-default); - --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); } [data-color='success'] { --ds-color-background-default: var(--ds-color-success-background-default); - --ds-color-background-subtle: var(--ds-color-success-background-subtle); - --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); --ds-color-surface-hover: var(--ds-color-success-surface-hover); --ds-color-surface-active: var(--ds-color-success-surface-active); --ds-color-border-subtle: var(--ds-color-success-border-subtle); @@ -31,14 +31,14 @@ --ds-color-base-active: var(--ds-color-success-base-active); --ds-color-text-subtle: var(--ds-color-success-text-subtle); --ds-color-text-default: var(--ds-color-success-text-default); - --ds-color-contrast-default: var(--ds-color-success-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); } [data-color='warning'] { --ds-color-background-default: var(--ds-color-warning-background-default); - --ds-color-background-subtle: var(--ds-color-warning-background-subtle); - --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); --ds-color-surface-hover: var(--ds-color-warning-surface-hover); --ds-color-surface-active: var(--ds-color-warning-surface-active); --ds-color-border-subtle: var(--ds-color-warning-border-subtle); @@ -49,14 +49,14 @@ --ds-color-base-active: var(--ds-color-warning-base-active); --ds-color-text-subtle: var(--ds-color-warning-text-subtle); --ds-color-text-default: var(--ds-color-warning-text-default); - --ds-color-contrast-default: var(--ds-color-warning-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); } [data-color='danger'] { --ds-color-background-default: var(--ds-color-danger-background-default); - --ds-color-background-subtle: var(--ds-color-danger-background-subtle); - --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); --ds-color-surface-hover: var(--ds-color-danger-surface-hover); --ds-color-surface-active: var(--ds-color-danger-surface-active); --ds-color-border-subtle: var(--ds-color-danger-border-subtle); @@ -67,14 +67,14 @@ --ds-color-base-active: var(--ds-color-danger-base-active); --ds-color-text-subtle: var(--ds-color-danger-text-subtle); --ds-color-text-default: var(--ds-color-danger-text-default); - --ds-color-contrast-default: var(--ds-color-danger-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); } [data-color='info'] { --ds-color-background-default: var(--ds-color-info-background-default); - --ds-color-background-subtle: var(--ds-color-info-background-subtle); - --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); --ds-color-surface-hover: var(--ds-color-info-surface-hover); --ds-color-surface-active: var(--ds-color-info-surface-active); --ds-color-border-subtle: var(--ds-color-info-border-subtle); @@ -85,7 +85,7 @@ --ds-color-base-active: var(--ds-color-info-base-active); --ds-color-text-subtle: var(--ds-color-info-text-subtle); --ds-color-text-default: var(--ds-color-info-text-default); - --ds-color-contrast-default: var(--ds-color-info-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); } } diff --git a/packages/theme/brand/uutilsynet/color-scheme/dark.css b/packages/theme/brand/uutilsynet/color-scheme/dark.css index 1d4a6b90e5..b6b0e9785d 100644 --- a/packages/theme/brand/uutilsynet/color-scheme/dark.css +++ b/packages/theme/brand/uutilsynet/color-scheme/dark.css @@ -95,8 +95,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #013d74; --ds-color-accent-surface-active: #014a8d; --ds-color-accent-border-subtle: #01519a; @@ -107,11 +107,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d8e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -122,11 +122,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #181a38; - --ds-color-brand1-background-subtle: #1f2047; - --ds-color-brand1-surface-default: #282a5c; + --ds-color-brand1-background-tinted: #1f2047; + --ds-color-brand1-surface-tinted: #282a5c; --ds-color-brand1-surface-hover: #333675; --ds-color-brand1-surface-active: #3e428f; --ds-color-brand1-border-subtle: #44489c; @@ -137,11 +137,11 @@ --ds-color-brand1-base-active: #a3a6e5; --ds-color-brand1-text-subtle: #999ce2; --ds-color-brand1-text-default: #e2e3f7; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0d0d18; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0d0d18; --ds-color-brand2-background-default: #271a10; - --ds-color-brand2-background-subtle: #322115; - --ds-color-brand2-surface-default: #412b1b; + --ds-color-brand2-background-tinted: #322115; + --ds-color-brand2-surface-tinted: #412b1b; --ds-color-brand2-surface-hover: #533622; --ds-color-brand2-surface-active: #65432a; --ds-color-brand2-border-subtle: #6e482e; @@ -152,11 +152,11 @@ --ds-color-brand2-base-active: #805435; --ds-color-brand2-text-subtle: #dc905b; --ds-color-brand2-text-default: #ffdfc8; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #d6d0cc; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #d6d0cc; --ds-color-brand3-background-default: #121f1c; - --ds-color-brand3-background-subtle: #172823; - --ds-color-brand3-surface-default: #1e342e; + --ds-color-brand3-background-tinted: #172823; + --ds-color-brand3-surface-tinted: #1e342e; --ds-color-brand3-surface-hover: #26423b; --ds-color-brand3-surface-active: #2e5148; --ds-color-brand3-border-subtle: #32584e; @@ -167,11 +167,11 @@ --ds-color-brand3-base-active: #213a33; --ds-color-brand3-text-subtle: #71ad9e; --ds-color-brand3-text-default: #d7e8e4; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #f9fafa; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #f9fafa; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -182,11 +182,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -197,11 +197,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -212,11 +212,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -227,8 +227,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; @@ -328,8 +328,8 @@ --ds-global-yellow-contrast-1: #ffffff; --ds-global-yellow-contrast-2: #dbd9d0; --ds-color-accent-background-default: #001e38; - --ds-color-accent-background-subtle: #002547; - --ds-color-accent-surface-default: #00305c; + --ds-color-accent-background-tinted: #002547; + --ds-color-accent-surface-tinted: #00305c; --ds-color-accent-surface-hover: #013d74; --ds-color-accent-surface-active: #014a8d; --ds-color-accent-border-subtle: #01519a; @@ -340,11 +340,11 @@ --ds-color-accent-base-active: #92bce1; --ds-color-accent-text-subtle: #70a7d8; --ds-color-accent-text-default: #d8e7f4; - --ds-color-accent-contrast-default: #000000; - --ds-color-accent-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-accent-base-contrast-subtle: #0d1924; --ds-color-neutral-background-default: #141d29; - --ds-color-neutral-background-subtle: #1a2534; - --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-background-tinted: #1a2534; + --ds-color-neutral-surface-tinted: #243041; --ds-color-neutral-surface-hover: #323e4d; --ds-color-neutral-surface-active: #404b5a; --ds-color-neutral-border-subtle: #475260; @@ -355,11 +355,11 @@ --ds-color-neutral-base-active: #7a828c; --ds-color-neutral-text-subtle: #9da2aa; --ds-color-neutral-text-default: #e3e5e7; - --ds-color-neutral-contrast-default: #000000; - --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-neutral-base-contrast-subtle: #1b1c1d; --ds-color-brand1-background-default: #181a38; - --ds-color-brand1-background-subtle: #1f2047; - --ds-color-brand1-surface-default: #282a5c; + --ds-color-brand1-background-tinted: #1f2047; + --ds-color-brand1-surface-tinted: #282a5c; --ds-color-brand1-surface-hover: #333675; --ds-color-brand1-surface-active: #3e428f; --ds-color-brand1-border-subtle: #44489c; @@ -370,11 +370,11 @@ --ds-color-brand1-base-active: #a3a6e5; --ds-color-brand1-text-subtle: #999ce2; --ds-color-brand1-text-default: #e2e3f7; - --ds-color-brand1-contrast-default: #000000; - --ds-color-brand1-contrast-subtle: #0d0d18; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand1-base-contrast-subtle: #0d0d18; --ds-color-brand2-background-default: #271a10; - --ds-color-brand2-background-subtle: #322115; - --ds-color-brand2-surface-default: #412b1b; + --ds-color-brand2-background-tinted: #322115; + --ds-color-brand2-surface-tinted: #412b1b; --ds-color-brand2-surface-hover: #533622; --ds-color-brand2-surface-active: #65432a; --ds-color-brand2-border-subtle: #6e482e; @@ -385,11 +385,11 @@ --ds-color-brand2-base-active: #805435; --ds-color-brand2-text-subtle: #dc905b; --ds-color-brand2-text-default: #ffdfc8; - --ds-color-brand2-contrast-default: #ffffff; - --ds-color-brand2-contrast-subtle: #d6d0cc; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-brand2-base-contrast-subtle: #d6d0cc; --ds-color-brand3-background-default: #121f1c; - --ds-color-brand3-background-subtle: #172823; - --ds-color-brand3-surface-default: #1e342e; + --ds-color-brand3-background-tinted: #172823; + --ds-color-brand3-surface-tinted: #1e342e; --ds-color-brand3-surface-hover: #26423b; --ds-color-brand3-surface-active: #2e5148; --ds-color-brand3-border-subtle: #32584e; @@ -400,11 +400,11 @@ --ds-color-brand3-base-active: #213a33; --ds-color-brand3-text-subtle: #71ad9e; --ds-color-brand3-text-default: #d7e8e4; - --ds-color-brand3-contrast-default: #ffffff; - --ds-color-brand3-contrast-subtle: #f9fafa; + --ds-color-brand3-base-contrast-default: #ffffff; + --ds-color-brand3-base-contrast-subtle: #f9fafa; --ds-color-success-background-default: #022306; - --ds-color-success-background-subtle: #022c08; - --ds-color-success-surface-default: #03380a; + --ds-color-success-background-tinted: #022c08; + --ds-color-success-surface-tinted: #03380a; --ds-color-success-surface-hover: #03470d; --ds-color-success-surface-active: #04570f; --ds-color-success-border-subtle: #045f11; @@ -415,11 +415,11 @@ --ds-color-success-base-active: #66b571; --ds-color-success-text-subtle: #62b36d; --ds-color-success-text-default: #d4ead7; - --ds-color-success-contrast-default: #000000; - --ds-color-success-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-success-base-contrast-subtle: #010501; --ds-color-danger-background-default: #3d0909; - --ds-color-danger-background-subtle: #4c0b0b; - --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-background-tinted: #4c0b0b; + --ds-color-danger-surface-tinted: #610e0e; --ds-color-danger-surface-hover: #7a1111; --ds-color-danger-surface-active: #941515; --ds-color-danger-border-subtle: #a11717; @@ -430,11 +430,11 @@ --ds-color-danger-base-active: #e7a8a8; --ds-color-danger-text-subtle: #df8b8b; --ds-color-danger-text-default: #f6dfdf; - --ds-color-danger-contrast-default: #000000; - --ds-color-danger-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-danger-base-contrast-subtle: #271414; --ds-color-info-background-default: #031e33; - --ds-color-info-background-subtle: #032641; - --ds-color-info-surface-default: #043154; + --ds-color-info-background-tinted: #032641; + --ds-color-info-surface-tinted: #043154; --ds-color-info-surface-hover: #063f6a; --ds-color-info-surface-active: #074d82; --ds-color-info-border-subtle: #07538d; @@ -445,11 +445,11 @@ --ds-color-info-base-active: #77b0dc; --ds-color-info-text-subtle: #69a8d8; --ds-color-info-text-default: #d6e7f4; - --ds-color-info-contrast-default: #000000; - --ds-color-info-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-info-base-contrast-subtle: #050e15; --ds-color-warning-background-default: #221c08; - --ds-color-warning-background-subtle: #2b240a; - --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-background-tinted: #2b240a; + --ds-color-warning-surface-tinted: #382f0c; --ds-color-warning-surface-hover: #483c10; --ds-color-warning-surface-active: #584913; --ds-color-warning-border-subtle: #5f5015; @@ -460,8 +460,8 @@ --ds-color-warning-base-active: #d39772; --ds-color-warning-text-subtle: #d2946e; --ds-color-warning-text-default: #f2e2d7; - --ds-color-warning-contrast-default: #000000; - --ds-color-warning-contrast-subtle: #070301; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-warning-base-contrast-subtle: #070301; --ds-color-focus-inner: #141d29; --ds-color-focus-outer: #e3e5e7; diff --git a/packages/theme/brand/uutilsynet/color-scheme/light.css b/packages/theme/brand/uutilsynet/color-scheme/light.css index 84e205b13a..6f6756999d 100644 --- a/packages/theme/brand/uutilsynet/color-scheme/light.css +++ b/packages/theme/brand/uutilsynet/color-scheme/light.css @@ -95,8 +95,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d4e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d4e4f3; --ds-color-accent-surface-hover: #bbd5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -107,11 +107,11 @@ --ds-color-accent-base-active: #013d75; --ds-color-accent-text-subtle: #0161b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -122,11 +122,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #f3f3fb; - --ds-color-brand1-surface-default: #e0e0f6; + --ds-color-brand1-background-tinted: #f3f3fb; + --ds-color-brand1-surface-tinted: #e0e0f6; --ds-color-brand1-surface-hover: #cdcff1; --ds-color-brand1-surface-active: #bdbfec; --ds-color-brand1-border-subtle: #b5b8ea; @@ -137,11 +137,11 @@ --ds-color-brand1-base-active: #3b3e87; --ds-color-brand1-text-subtle: #5156bb; --ds-color-brand1-text-default: #252754; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #f2f2fb; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #f2f2fb; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fff1e7; - --ds-color-brand2-surface-default: #ffdbc2; + --ds-color-brand2-background-tinted: #fff1e7; + --ds-color-brand2-surface-tinted: #ffdbc2; --ds-color-brand2-surface-hover: #fec69e; --ds-color-brand2-surface-active: #feb17a; --ds-color-brand2-border-subtle: #fea86a; @@ -152,11 +152,11 @@ --ds-color-brand2-base-active: #c48151; --ds-color-brand2-text-subtle: #845737; --ds-color-brand2-text-default: #3b2718; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #372417; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #372417; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #eef5f3; - --ds-color-brand3-surface-default: #d4e6e1; + --ds-color-brand3-background-tinted: #eef5f3; + --ds-color-brand3-surface-tinted: #d4e6e1; --ds-color-brand3-surface-hover: #bad8d0; --ds-color-brand3-surface-active: #a3cac0; --ds-color-brand3-border-subtle: #99c5b9; @@ -167,11 +167,11 @@ --ds-color-brand3-base-active: #a0c8be; --ds-color-brand3-text-subtle: #3d6a5e; --ds-color-brand3-text-default: #1b2f2a; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #040807; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #040807; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -182,11 +182,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -197,11 +197,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -212,11 +212,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -227,8 +227,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; @@ -328,8 +328,8 @@ --ds-global-yellow-contrast-1: #000000; --ds-global-yellow-contrast-2: #282209; --ds-color-accent-background-default: #ffffff; - --ds-color-accent-background-subtle: #eef4fa; - --ds-color-accent-surface-default: #d4e4f3; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-tinted: #d4e4f3; --ds-color-accent-surface-hover: #bbd5ec; --ds-color-accent-surface-active: #a3c6e6; --ds-color-accent-border-subtle: #99c0e3; @@ -340,11 +340,11 @@ --ds-color-accent-base-active: #013d75; --ds-color-accent-text-subtle: #0161b8; --ds-color-accent-text-default: #002c54; - --ds-color-accent-contrast-default: #ffffff; - --ds-color-accent-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-accent-base-contrast-subtle: #dbe9f5; --ds-color-neutral-background-default: #ffffff; - --ds-color-neutral-background-subtle: #f3f4f4; - --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-background-tinted: #f3f4f4; + --ds-color-neutral-surface-tinted: #e0e2e4; --ds-color-neutral-surface-hover: #cfd2d5; --ds-color-neutral-surface-active: #bfc3c7; --ds-color-neutral-border-subtle: #b8bcc1; @@ -355,11 +355,11 @@ --ds-color-neutral-base-active: #444f5d; --ds-color-neutral-text-subtle: #59626f; --ds-color-neutral-text-default: #1f2c3d; - --ds-color-neutral-contrast-default: #ffffff; - --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-neutral-base-contrast-subtle: #babec4; --ds-color-brand1-background-default: #ffffff; - --ds-color-brand1-background-subtle: #f3f3fb; - --ds-color-brand1-surface-default: #e0e0f6; + --ds-color-brand1-background-tinted: #f3f3fb; + --ds-color-brand1-surface-tinted: #e0e0f6; --ds-color-brand1-surface-hover: #cdcff1; --ds-color-brand1-surface-active: #bdbfec; --ds-color-brand1-border-subtle: #b5b8ea; @@ -370,11 +370,11 @@ --ds-color-brand1-base-active: #3b3e87; --ds-color-brand1-text-subtle: #5156bb; --ds-color-brand1-text-default: #252754; - --ds-color-brand1-contrast-default: #ffffff; - --ds-color-brand1-contrast-subtle: #f2f2fb; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand1-base-contrast-subtle: #f2f2fb; --ds-color-brand2-background-default: #ffffff; - --ds-color-brand2-background-subtle: #fff1e7; - --ds-color-brand2-surface-default: #ffdbc2; + --ds-color-brand2-background-tinted: #fff1e7; + --ds-color-brand2-surface-tinted: #ffdbc2; --ds-color-brand2-surface-hover: #fec69e; --ds-color-brand2-surface-active: #feb17a; --ds-color-brand2-border-subtle: #fea86a; @@ -385,11 +385,11 @@ --ds-color-brand2-base-active: #c48151; --ds-color-brand2-text-subtle: #845737; --ds-color-brand2-text-default: #3b2718; - --ds-color-brand2-contrast-default: #000000; - --ds-color-brand2-contrast-subtle: #372417; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-brand2-base-contrast-subtle: #372417; --ds-color-brand3-background-default: #ffffff; - --ds-color-brand3-background-subtle: #eef5f3; - --ds-color-brand3-surface-default: #d4e6e1; + --ds-color-brand3-background-tinted: #eef5f3; + --ds-color-brand3-surface-tinted: #d4e6e1; --ds-color-brand3-surface-hover: #bad8d0; --ds-color-brand3-surface-active: #a3cac0; --ds-color-brand3-border-subtle: #99c5b9; @@ -400,11 +400,11 @@ --ds-color-brand3-base-active: #a0c8be; --ds-color-brand3-text-subtle: #3d6a5e; --ds-color-brand3-text-default: #1b2f2a; - --ds-color-brand3-contrast-default: #000000; - --ds-color-brand3-contrast-subtle: #040807; + --ds-color-brand3-base-contrast-default: #000000; + --ds-color-brand3-base-contrast-subtle: #040807; --ds-color-success-background-default: #ffffff; - --ds-color-success-background-subtle: #ecf6ee; - --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-tinted: #d0e8d3; --ds-color-success-surface-hover: #b4dbba; --ds-color-success-surface-active: #9bcfa2; --ds-color-success-border-subtle: #8fc997; @@ -415,11 +415,11 @@ --ds-color-success-base-active: #045a10; --ds-color-success-text-subtle: #057114; --ds-color-success-text-default: #023409; - --ds-color-success-contrast-default: #ffffff; - --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-success-base-contrast-subtle: #fafdfb; --ds-color-danger-background-default: #ffffff; - --ds-color-danger-background-subtle: #fbf1f1; - --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-tinted: #f5dcdc; --ds-color-danger-surface-hover: #f0c8c8; --ds-color-danger-surface-active: #ebb5b5; --ds-color-danger-border-subtle: #e8adad; @@ -430,11 +430,11 @@ --ds-color-danger-base-active: #791111; --ds-color-danger-text-subtle: #bf1b1b; --ds-color-danger-text-default: #590d0d; - --ds-color-danger-contrast-default: #ffffff; - --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-danger-base-contrast-subtle: #f7e1e1; --ds-color-info-background-default: #ffffff; - --ds-color-info-background-subtle: #edf5fa; - --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-tinted: #d2e5f3; --ds-color-info-surface-hover: #b7d5ed; --ds-color-info-surface-active: #9fc7e6; --ds-color-info-border-subtle: #94c1e3; @@ -445,11 +445,11 @@ --ds-color-info-base-active: #074a7e; --ds-color-info-text-subtle: #0964a9; --ds-color-info-text-default: #042d4d; - --ds-color-info-contrast-default: #ffffff; - --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-info-base-contrast-subtle: #eff6fb; --ds-color-warning-background-default: #ffffff; - --ds-color-warning-background-subtle: #f9f4e1; - --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-background-tinted: #f9f4e1; + --ds-color-warning-surface-tinted: #efe2b2; --ds-color-warning-surface-hover: #e6d184; --ds-color-warning-surface-active: #ddc159; --ds-color-warning-border-subtle: #d9b945; @@ -460,8 +460,8 @@ --ds-color-warning-base-active: #7b3b13; --ds-color-warning-text-subtle: #9b4a18; --ds-color-warning-text-default: #46220b; - --ds-color-warning-contrast-default: #ffffff; - --ds-color-warning-contrast-subtle: #fdfbf9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-warning-base-contrast-subtle: #fdfbf9; --ds-color-focus-inner: #ffffff; --ds-color-focus-outer: #1f2c3d; diff --git a/packages/theme/brand/uutilsynet/color/accent.css b/packages/theme/brand/uutilsynet/color/accent.css index 3a4dbf9728..c6d9e9e334 100644 --- a/packages/theme/brand/uutilsynet/color/accent.css +++ b/packages/theme/brand/uutilsynet/color/accent.css @@ -5,8 +5,8 @@ @layer ds.theme.color { :root, [data-color-scheme], [data-color="accent"] { --ds-color-background-default: var(--ds-color-accent-background-default); - --ds-color-background-subtle: var(--ds-color-accent-background-subtle); - --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); --ds-color-surface-hover: var(--ds-color-accent-surface-hover); --ds-color-surface-active: var(--ds-color-accent-surface-active); --ds-color-border-subtle: var(--ds-color-accent-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-accent-base-active); --ds-color-text-subtle: var(--ds-color-accent-text-subtle); --ds-color-text-default: var(--ds-color-accent-text-default); - --ds-color-contrast-default: var(--ds-color-accent-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-accent-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); } } diff --git a/packages/theme/brand/uutilsynet/color/brand1.css b/packages/theme/brand/uutilsynet/color/brand1.css index 1670bafcc1..409536f757 100644 --- a/packages/theme/brand/uutilsynet/color/brand1.css +++ b/packages/theme/brand/uutilsynet/color/brand1.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand1"] { --ds-color-background-default: var(--ds-color-brand1-background-default); - --ds-color-background-subtle: var(--ds-color-brand1-background-subtle); - --ds-color-surface-default: var(--ds-color-brand1-surface-default); + --ds-color-background-tinted: var(--ds-color-brand1-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand1-surface-hover); --ds-color-surface-active: var(--ds-color-brand1-surface-active); --ds-color-border-subtle: var(--ds-color-brand1-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand1-base-active); --ds-color-text-subtle: var(--ds-color-brand1-text-subtle); --ds-color-text-default: var(--ds-color-brand1-text-default); - --ds-color-contrast-default: var(--ds-color-brand1-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand1-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); } } diff --git a/packages/theme/brand/uutilsynet/color/brand2.css b/packages/theme/brand/uutilsynet/color/brand2.css index d84f4b87e8..55e3e0f8ac 100644 --- a/packages/theme/brand/uutilsynet/color/brand2.css +++ b/packages/theme/brand/uutilsynet/color/brand2.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand2"] { --ds-color-background-default: var(--ds-color-brand2-background-default); - --ds-color-background-subtle: var(--ds-color-brand2-background-subtle); - --ds-color-surface-default: var(--ds-color-brand2-surface-default); + --ds-color-background-tinted: var(--ds-color-brand2-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand2-surface-hover); --ds-color-surface-active: var(--ds-color-brand2-surface-active); --ds-color-border-subtle: var(--ds-color-brand2-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand2-base-active); --ds-color-text-subtle: var(--ds-color-brand2-text-subtle); --ds-color-text-default: var(--ds-color-brand2-text-default); - --ds-color-contrast-default: var(--ds-color-brand2-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand2-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); } } diff --git a/packages/theme/brand/uutilsynet/color/brand3.css b/packages/theme/brand/uutilsynet/color/brand3.css index 2235404855..8631e729de 100644 --- a/packages/theme/brand/uutilsynet/color/brand3.css +++ b/packages/theme/brand/uutilsynet/color/brand3.css @@ -5,8 +5,8 @@ @layer ds.theme.color { [data-color="brand3"] { --ds-color-background-default: var(--ds-color-brand3-background-default); - --ds-color-background-subtle: var(--ds-color-brand3-background-subtle); - --ds-color-surface-default: var(--ds-color-brand3-surface-default); + --ds-color-background-tinted: var(--ds-color-brand3-background-tinted); + --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted); --ds-color-surface-hover: var(--ds-color-brand3-surface-hover); --ds-color-surface-active: var(--ds-color-brand3-surface-active); --ds-color-border-subtle: var(--ds-color-brand3-border-subtle); @@ -17,8 +17,8 @@ --ds-color-base-active: var(--ds-color-brand3-base-active); --ds-color-text-subtle: var(--ds-color-brand3-text-subtle); --ds-color-text-default: var(--ds-color-brand3-text-default); - --ds-color-contrast-default: var(--ds-color-brand3-contrast-default); - --ds-color-contrast-subtle: var(--ds-color-brand3-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default); + --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle); } } diff --git a/plugins/figma/src/ui/components/Card/Card.module.css b/plugins/figma/src/ui/components/Card/Card.module.css index 21cb269f56..02c41f5afb 100644 --- a/plugins/figma/src/ui/components/Card/Card.module.css +++ b/plugins/figma/src/ui/components/Card/Card.module.css @@ -1,5 +1,5 @@ .card { - background-color: var(--ds-color-neutral-surface-default); + background-color: var(--ds-color-neutral-surface-tinted); height: 100px; width: 156px; border-radius: 4px; diff --git a/plugins/figma/src/ui/components/Footer/Footer.module.css b/plugins/figma/src/ui/components/Footer/Footer.module.css index 311d6b95f7..73d7383ec0 100644 --- a/plugins/figma/src/ui/components/Footer/Footer.module.css +++ b/plugins/figma/src/ui/components/Footer/Footer.module.css @@ -63,7 +63,7 @@ } .feedback:hover { - background-color: var(--ds-color-neutral-surface-default); + background-color: var(--ds-color-neutral-surface-tinted); color: var(--ds-color-neutral-text-default); }