diff --git a/package-lock.json b/package-lock.json index 2f15e76d1c..28cd5f0ff7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -481,8 +481,8 @@ }, "node_modules/@duckduckgo/design-tokens": { "name": "design-tokens", - "version": "0.1.0", - "resolved": "git+ssh://git@github.com/duckduckgo/design-tokens.git#b05858e01ad849592fc08ee7de8988bc5c61b671", + "version": "0.2.0", + "resolved": "git+ssh://git@github.com/duckduckgo/design-tokens.git#5876916740931b3082582c9d338a8193e25f68da", "dev": true, "license": "ISC" }, @@ -9100,7 +9100,7 @@ "preact": "^10.28.0" }, "devDependencies": { - "@duckduckgo/design-tokens": "github:duckduckgo/design-tokens#v0.1.0", + "@duckduckgo/design-tokens": "github:duckduckgo/design-tokens#v0.2.0", "@duckduckgo/messaging": "*", "chokidar": "^5.0.0", "fast-check": "^4.4.0", diff --git a/special-pages/package.json b/special-pages/package.json index 5c91538300..6dbea2d12a 100644 --- a/special-pages/package.json +++ b/special-pages/package.json @@ -28,7 +28,7 @@ }, "license": "ISC", "devDependencies": { - "@duckduckgo/design-tokens": "github:duckduckgo/design-tokens#v0.1.0", + "@duckduckgo/design-tokens": "github:duckduckgo/design-tokens#v0.2.0", "@duckduckgo/messaging": "*", "chokidar": "^5.0.0", "fast-check": "^4.4.0", diff --git a/special-pages/pages/errorpage/src/index.css b/special-pages/pages/errorpage/src/index.css index 396b292158..4b08608dff 100644 --- a/special-pages/pages/errorpage/src/index.css +++ b/special-pages/pages/errorpage/src/index.css @@ -70,21 +70,21 @@ body { } /* Theme variants - light mode */ -[data-theme-variant="coolGray"] { background: var(--ds-color-cool-gray-light-surface-primary); } -[data-theme-variant="slateBlue"] { background: var(--ds-color-slate-blue-light-surface-primary); } -[data-theme-variant="green"] { background: var(--ds-color-green-light-surface-primary); } -[data-theme-variant="violet"] { background: var(--ds-color-violet-light-surface-primary); } -[data-theme-variant="rose"] { background: var(--ds-color-rose-light-surface-primary); } -[data-theme-variant="orange"] { background: var(--ds-color-orange-light-surface-primary); } -[data-theme-variant="desert"] { background: var(--ds-color-desert-light-surface-primary); } +[data-theme-variant="coolGray"] { background: var(--ds-color-theme-cool-gray-light-surface-primary); } +[data-theme-variant="slateBlue"] { background: var(--ds-color-theme-slate-blue-light-surface-primary); } +[data-theme-variant="green"] { background: var(--ds-color-theme-green-light-surface-primary); } +[data-theme-variant="violet"] { background: var(--ds-color-theme-violet-light-surface-primary); } +[data-theme-variant="rose"] { background: var(--ds-color-theme-rose-light-surface-primary); } +[data-theme-variant="orange"] { background: var(--ds-color-theme-orange-light-surface-primary); } +[data-theme-variant="desert"] { background: var(--ds-color-theme-desert-light-surface-primary); } /* Theme variants - dark mode */ @media (prefers-color-scheme: dark) { - [data-theme-variant="coolGray"] { background: var(--ds-color-cool-gray-dark-surface-primary); } - [data-theme-variant="slateBlue"] { background: var(--ds-color-slate-blue-dark-surface-primary); } - [data-theme-variant="green"] { background: var(--ds-color-green-dark-surface-primary); } - [data-theme-variant="violet"] { background: var(--ds-color-violet-dark-surface-primary); } - [data-theme-variant="rose"] { background: var(--ds-color-rose-dark-surface-primary); } - [data-theme-variant="orange"] { background: var(--ds-color-orange-dark-surface-primary); } - [data-theme-variant="desert"] { background: var(--ds-color-desert-dark-surface-primary); } + [data-theme-variant="coolGray"] { background: var(--ds-color-theme-cool-gray-dark-surface-primary); } + [data-theme-variant="slateBlue"] { background: var(--ds-color-theme-slate-blue-dark-surface-primary); } + [data-theme-variant="green"] { background: var(--ds-color-theme-green-dark-surface-primary); } + [data-theme-variant="violet"] { background: var(--ds-color-theme-violet-dark-surface-primary); } + [data-theme-variant="rose"] { background: var(--ds-color-theme-rose-dark-surface-primary); } + [data-theme-variant="orange"] { background: var(--ds-color-theme-orange-dark-surface-primary); } + [data-theme-variant="desert"] { background: var(--ds-color-theme-desert-dark-surface-primary); } } diff --git a/special-pages/pages/history/styles/history-theme.css b/special-pages/pages/history/styles/history-theme.css index d52affd3eb..55427449b8 100644 --- a/special-pages/pages/history/styles/history-theme.css +++ b/special-pages/pages/history/styles/history-theme.css @@ -70,36 +70,36 @@ body { } [data-theme-variant="coolGray"] { - --default-light-background-color: var(--ds-color-cool-gray-light-surface-primary); - --default-dark-background-color: var(--ds-color-cool-gray-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-cool-gray-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-cool-gray-dark-surface-primary); } [data-theme-variant="slateBlue"] { - --default-light-background-color: var(--ds-color-slate-blue-light-surface-primary); - --default-dark-background-color: var(--ds-color-slate-blue-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-slate-blue-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-slate-blue-dark-surface-primary); } [data-theme-variant="green"] { - --default-light-background-color: var(--ds-color-green-light-surface-primary); - --default-dark-background-color: var(--ds-color-green-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-green-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-green-dark-surface-primary); } [data-theme-variant="violet"] { - --default-light-background-color: var(--ds-color-violet-light-surface-primary); - --default-dark-background-color: var(--ds-color-violet-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-violet-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-violet-dark-surface-primary); } [data-theme-variant="rose"] { - --default-light-background-color: var(--ds-color-rose-light-surface-primary); - --default-dark-background-color: var(--ds-color-rose-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-rose-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-rose-dark-surface-primary); } [data-theme-variant="orange"] { - --default-light-background-color: var(--ds-color-orange-light-surface-primary); - --default-dark-background-color: var(--ds-color-orange-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-orange-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-orange-dark-surface-primary); } [data-theme-variant="desert"] { - --default-light-background-color: var(--ds-color-desert-light-surface-primary); - --default-dark-background-color: var(--ds-color-desert-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-desert-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-desert-dark-surface-primary); } diff --git a/special-pages/pages/new-tab/app/activity/components/Activity.module.css b/special-pages/pages/new-tab/app/activity/components/Activity.module.css index ea2336cc26..d3b2b896f5 100644 --- a/special-pages/pages/new-tab/app/activity/components/Activity.module.css +++ b/special-pages/pages/new-tab/app/activity/components/Activity.module.css @@ -98,7 +98,7 @@ font-size: var(--title-3-em-font-size); font-weight: var(--title-3-em-font-weight); text-decoration: none; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); height: 35px; display: flex; align-items: center; @@ -109,7 +109,7 @@ min-width: 0; &:hover, &:focus-visible { - color: var(--ntp-color-primary); + color: var(--ds-color-theme-accent-primary); .favicon { transform: scale(1.08) } @@ -133,7 +133,7 @@ background: transparent; padding: 0; margin: 0; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); svg { position: absolute; top: 50%; @@ -218,7 +218,7 @@ font-size: var(--small-label-font-size); font-weight: var(--small-label-font-weight); line-height: var(--small-label-line-height); - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); text-decoration: none; min-width: 0; white-space: nowrap; @@ -226,7 +226,7 @@ text-overflow: ellipsis; &:hover, &:focus-visible { - color: var(--ntp-color-primary) + color: var(--ds-color-theme-accent-primary) } &:hover .time { @@ -238,7 +238,7 @@ .time { flex-shrink: 0; margin-left: 8px; - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); opacity: 0.6; font-size: var(--small-label-font-size); font-weight: var(--small-label-font-weight); diff --git a/special-pages/pages/new-tab/app/activity/components/ActivityLegacy.module.css b/special-pages/pages/new-tab/app/activity/components/ActivityLegacy.module.css index efe08990e0..35da08eb91 100644 --- a/special-pages/pages/new-tab/app/activity/components/ActivityLegacy.module.css +++ b/special-pages/pages/new-tab/app/activity/components/ActivityLegacy.module.css @@ -100,7 +100,7 @@ font-size: var(--title-3-em-font-size); font-weight: var(--title-3-em-font-weight); text-decoration: none; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); height: 35px; display: flex; align-items: center; @@ -111,7 +111,7 @@ min-width: 0; &:hover, &:focus-visible { - color: var(--ntp-color-primary); + color: var(--ds-color-theme-accent-primary); .favicon { transform: scale(1.08) } @@ -135,7 +135,7 @@ background: transparent; padding: 0; margin: 0; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); svg { position: absolute; top: 50%; @@ -224,7 +224,7 @@ font-size: var(--small-label-font-size); font-weight: var(--small-label-font-weight); line-height: var(--small-label-line-height); - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); text-decoration: none; min-width: 0; white-space: nowrap; @@ -232,7 +232,7 @@ text-overflow: ellipsis; &:hover, &:focus-visible { - color: var(--ntp-color-primary) + color: var(--ds-color-theme-accent-primary) } &:hover .time { @@ -244,7 +244,7 @@ .time { flex-shrink: 0; margin-left: 8px; - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); opacity: 0.6; font-size: var(--small-label-font-size); font-weight: var(--small-label-font-weight); @@ -293,4 +293,4 @@ transform: rotate(180deg) } } -} \ No newline at end of file +} diff --git a/special-pages/pages/new-tab/app/components/App.module.css b/special-pages/pages/new-tab/app/components/App.module.css index 0d0217314b..f94bd382b1 100644 --- a/special-pages/pages/new-tab/app/components/App.module.css +++ b/special-pages/pages/new-tab/app/components/App.module.css @@ -55,7 +55,7 @@ body[data-animate-background="true"] { height: 100vh; overflow: auto; grid-area: main; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); } /* WebKit-only fix for layout shift when scrollbar appears */ @@ -66,7 +66,7 @@ body[data-animate-background="true"] { } .themeContext { - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); } .mainLayout { @@ -98,8 +98,8 @@ body[data-animate-background="true"] { } .aside { - color: var(--ntp-text-normal); - background: var(--ntp-surfaces-panel-background-color); + color: var(--ds-color-theme-text-primary); + background: var(--ds-color-theme-surface-tertiary); grid-area: aside; height: 100vh; z-index: 1; @@ -153,7 +153,7 @@ body[data-animate-background="true"] { &::-webkit-scrollbar-thumb { background: rgb(108, 108, 108); - border: 4px solid var(--ntp-surfaces-panel-background-color); + border: 4px solid var(--ds-color-theme-surface-tertiary); border-radius: 6px; } } @@ -164,4 +164,4 @@ body[data-animate-background="true"] { .paddedErrorRecovery { margin-top: 1rem; -} \ No newline at end of file +} diff --git a/special-pages/pages/new-tab/app/components/CompanyIcon.module.css b/special-pages/pages/new-tab/app/components/CompanyIcon.module.css index fe54c8cdea..5a13c9f837 100644 --- a/special-pages/pages/new-tab/app/components/CompanyIcon.module.css +++ b/special-pages/pages/new-tab/app/components/CompanyIcon.module.css @@ -13,7 +13,7 @@ } &:has([data-errored=true]) { - outline: 1px solid var(--ntp-surface-border-color); + outline: 1px solid var(--ds-color-theme-container-border-primary); [data-theme=dark] & { outline-color: var(--color-white-at-9); } @@ -26,4 +26,4 @@ .companyImgIcon[data-loaded=true] { opacity: 1; -} \ No newline at end of file +} diff --git a/special-pages/pages/new-tab/app/components/Components.jsx b/special-pages/pages/new-tab/app/components/Components.jsx index f5dfc95e79..3a95fa3429 100644 --- a/special-pages/pages/new-tab/app/components/Components.jsx +++ b/special-pages/pages/new-tab/app/components/Components.jsx @@ -5,6 +5,8 @@ import { useThemes } from '../customizer/themes.js'; import { useSignal } from '@preact/signals'; import { BackgroundConsumer } from './BackgroundProvider.js'; import { CustomizerThemesContext } from '../customizer/CustomizerProvider.js'; +import { customizerData } from '../customizer/mocks.js'; + const url = new URL(window.location.href); const list = { @@ -22,14 +24,7 @@ export function Components() { const validIds = ids.filter((id) => entryIds.includes(id)); const filtered = validIds.length ? validIds.map((id) => /** @type {const} */ ([id, list[id]])) : entries; - /** @type {import('../../types/new-tab').CustomizerData} */ - const data = { - background: { kind: 'default' }, - userImages: [], - theme: 'system', - userColor: null, - }; - const dataSignal = useSignal(data); + const dataSignal = useSignal(customizerData()); const { main, browser, variant } = useThemes(dataSignal); return ( diff --git a/special-pages/pages/new-tab/app/components/Components.module.css b/special-pages/pages/new-tab/app/components/Components.module.css index e83e96b63b..ee510a0a65 100644 --- a/special-pages/pages/new-tab/app/components/Components.module.css +++ b/special-pages/pages/new-tab/app/components/Components.module.css @@ -5,14 +5,14 @@ body[data-display="components"] { padding-right: 0; a { - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); } } .main { height: 100vh; overflow: auto; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); } @@ -65,7 +65,7 @@ body:has(.tubeGrid):has([data-isolated=true]) { } .itemLink { - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); padding: 0.2em 0.3em; border: 1px solid var(--color-gray-60); border-radius: var(--border-radius-xs); diff --git a/special-pages/pages/new-tab/app/components/DismissButton.module.css b/special-pages/pages/new-tab/app/components/DismissButton.module.css index dcadd9078d..e9f8d76a1d 100644 --- a/special-pages/pages/new-tab/app/components/DismissButton.module.css +++ b/special-pages/pages/new-tab/app/components/DismissButton.module.css @@ -7,7 +7,7 @@ padding: 0; line-height: 1; background-color: transparent; - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); border: none; border-radius: 50%; transition: all .3s; @@ -26,7 +26,7 @@ &:active { background-color: var(--color-black-at-18); - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); } &:disabled { diff --git a/special-pages/pages/new-tab/app/components/Popover.module.css b/special-pages/pages/new-tab/app/components/Popover.module.css index 4227427006..22dcff8331 100644 --- a/special-pages/pages/new-tab/app/components/Popover.module.css +++ b/special-pages/pages/new-tab/app/components/Popover.module.css @@ -15,7 +15,7 @@ } .content { - background: var(--ntp-surface-tertiary); + background: var(--ds-color-theme-surface-tertiary); border-radius: 16px; flex: auto; padding: var(--sp-4) var(--sp-11) var(--sp-4) var(--sp-5); @@ -26,7 +26,7 @@ background: none; border-radius: 100%; border: none; - color: var(--ntp-icons-primary); + color: var(--ds-color-theme-icons-primary); cursor: pointer; padding: 0; position: absolute; @@ -74,22 +74,22 @@ button { background: none; border: none; - color: var(--ntp-accent-primary); + color: var(--ds-color-theme-accent-primary); cursor: pointer; padding: 0; transform: translateZ(0); /* Fix shadow rendering issue on .popover in WebKit */ &:hover { - color: var(--ntp-accent-secondary); + color: var(--ds-color-theme-accent-secondary); } &:active { - color: var(--ntp-accent-tertiary); + color: var(--ds-color-theme-accent-tertiary); } } } .arrow { - color: var(--ntp-surface-tertiary); + color: var(--ds-color-theme-surface-tertiary); margin-right: -1px; } diff --git a/special-pages/pages/new-tab/app/components/ShowHide.module.css b/special-pages/pages/new-tab/app/components/ShowHide.module.css index ba818a9033..2efcf2163f 100644 --- a/special-pages/pages/new-tab/app/components/ShowHide.module.css +++ b/special-pages/pages/new-tab/app/components/ShowHide.module.css @@ -6,7 +6,7 @@ display: flex; justify-content: center; align-items: center; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); > * { pointer-events: none; @@ -35,7 +35,7 @@ align-items: center; justify-content: center; box-shadow: 0px 2px 4px 0px var(--color-black-at-12), 0px 0px 3px 0px var(--color-black-at-18); - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); [data-theme="dark"] & { box-shadow: 0px 2px 4px 0px var(--color-white-at-6), 0px 0px 3px 0px var(--color-white-at-9); @@ -48,7 +48,7 @@ border-radius: 50%; padding-inline: 0; background-color: transparent; - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); .iconBlock { backdrop-filter: unset; @@ -64,11 +64,13 @@ &:hover { .iconBlock { - background-color: var(--color-black-at-6); + background-color: var(--ds-color-theme-control-fill-secondary); + } + } - [data-theme=dark] & { - background-color: var(--color-white-at-12); - } + &:active { + .iconBlock { + background-color: var(--ds-color-theme-control-fill-tertiary); } } @@ -85,8 +87,8 @@ font-size: var(--callout-font-size); font-weight: var(--callout-font-weight); line-height: var(--callout-line-height); - border: 1px solid var(--ntp-surface-border-color); - color: var(--ntp-text-muted); + border: 1px solid var(--ds-color-theme-container-border-primary); + color: var(--ds-color-theme-text-secondary); } .fill { @@ -129,4 +131,4 @@ display: flex; justify-content: center; font-size: 12px; -} \ No newline at end of file +} diff --git a/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css b/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css index eb45e1ce03..676c910fed 100644 --- a/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css +++ b/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css @@ -8,14 +8,14 @@ .customizeButton { backdrop-filter: blur(48px); background-color: var(--ntp-surface-background-color); - border: 1px solid var(--ntp-surface-border-color); + border: 1px solid var(--ds-color-theme-container-border-primary); border-radius: var(--border-radius-sm); padding: var(--sp-2) var(--sp-3); cursor: pointer; display: flex; align-items: center; gap: calc(6 * var(--px-in-rem)); - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); [data-theme=dark] & { border-color: var(--color-white-at-9); @@ -53,7 +53,3 @@ } } } - - - - diff --git a/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css b/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css index 1467f541b8..3eccb99b85 100644 --- a/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css +++ b/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css @@ -76,7 +76,7 @@ width: 100%; } .borderedSection { - border-top: 1px solid var(--ntp-surface-border-color); + border-top: 1px solid var(--ds-color-theme-container-border-primary); padding-top: calc(18 * var(--px-in-rem)) } .sectionBody { @@ -114,7 +114,7 @@ justify-content: center; border: none; outline: none; - box-shadow: 0 0 0 1px var(--ntp-surface-border-color) inset; + box-shadow: 0 0 0 1px var(--ds-color-theme-container-border-primary) inset; &[aria-checked="true"] { box-shadow: var(--focus-ring-primary); @@ -254,7 +254,7 @@ justify-content: space-between; align-items: center; text-decoration: none; - color: var(--ntp-color-primary); + color: var(--ds-color-theme-accent-primary); margin-bottom: var(--sp-3); &:focus { diff --git a/special-pages/pages/new-tab/app/customizer/components/VisibilityMenu.module.css b/special-pages/pages/new-tab/app/customizer/components/VisibilityMenu.module.css index 5427b6e914..80ed0bc959 100644 --- a/special-pages/pages/new-tab/app/customizer/components/VisibilityMenu.module.css +++ b/special-pages/pages/new-tab/app/customizer/components/VisibilityMenu.module.css @@ -21,7 +21,7 @@ height: calc(28 * var(--px-in-rem)); &:has(input[disabled]) .title { - color: var(--ntp-text-tertiary) + color: var(--ds-color-theme-text-tertiary) } } @@ -46,4 +46,4 @@ width: 1rem; height: 1rem; display: flex; -} \ No newline at end of file +} diff --git a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js index 0c4187cd96..e5892a4eaf 100644 --- a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js +++ b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js @@ -136,7 +136,7 @@ export class CustomizerPage { async hasDefaultDarkBackground() { const { page } = this.ntp; - await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(51, 51, 51)'); + await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(28, 28, 28)'); } /** diff --git a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js index 2401a7362b..2f83bee7b7 100644 --- a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js +++ b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js @@ -288,7 +288,7 @@ test.describe('newtab customizer', () => { const ntp = NewtabPage.create(page, workerInfo); await ntp.reducedMotion(); await ntp.openPage({ additional: { themeVariant: 'violet', theme: 'light' } }); - await ntp.hasBackgroundColor({ hex: '#e7e4f5' }); // violet light color + await ntp.hasBackgroundColor({ hex: '#efeffa' }); // violet light surface-canvas }); test('accepts theme variant update via subscription message', async ({ page }, workerInfo) => { const ntp = NewtabPage.create(page, workerInfo); @@ -296,7 +296,7 @@ test.describe('newtab customizer', () => { await ntp.reducedMotion(); await ntp.openPage(); await cp.acceptsThemeVariantUpdate('light', 'coolGray'); - await ntp.hasBackgroundColor({ hex: '#d2d5e3' }); // coolGray light color + await ntp.hasBackgroundColor({ hex: '#e3e5ec' }); // coolGray light surface-canvas }); test('accepts theme variant update (dark mode)', async ({ page }, workerInfo) => { const ntp = NewtabPage.create(page, workerInfo); @@ -305,14 +305,14 @@ test.describe('newtab customizer', () => { await ntp.darkMode(); await ntp.openPage(); await cp.acceptsThemeVariantUpdate('dark', 'slateBlue'); - await ntp.hasBackgroundColor({ hex: '#1e3347' }); // slateBlue dark color + await ntp.hasBackgroundColor({ hex: '#243a50' }); // slateBlue dark surface-canvas }); test('custom background color overrides theme variant background', async ({ page }, workerInfo) => { const ntp = NewtabPage.create(page, workerInfo); const cp = new CustomizerPage(ntp); await ntp.reducedMotion(); await ntp.openPage({ additional: { themeVariant: 'rose', theme: 'dark' } }); - await ntp.hasBackgroundColor({ hex: '#5b194b' }); // rose dark color + await ntp.hasBackgroundColor({ hex: '#511442' }); // rose dark surface-canvas await cp.acceptsBackgroundUpdate({ kind: 'color', value: 'color01', @@ -324,7 +324,7 @@ test.describe('newtab customizer', () => { const cp = new CustomizerPage(ntp); await ntp.reducedMotion(); await ntp.openPage({ additional: { themeVariant: 'orange', theme: 'light' } }); - await ntp.hasBackgroundColor({ hex: '#fcedd8' }); // orange light color + await ntp.hasBackgroundColor({ hex: '#fdf4e6' }); // orange light surface-canvas await cp.acceptsBackgroundUpdate({ kind: 'hex', value: '#ff5733', @@ -336,8 +336,8 @@ test.describe('newtab customizer', () => { const cp = new CustomizerPage(ntp); await ntp.reducedMotion(); await ntp.openPage({ additional: { themeVariant: 'desert', theme: 'light' } }); - await ntp.hasBackgroundColor({ hex: '#eee9e1' }); // desert light color + await ntp.hasBackgroundColor({ hex: '#f5f4ef' }); // desert light surface-canvas await cp.acceptsThemeUpdate('dark'); - await ntp.hasBackgroundColor({ hex: '#3c3833' }); // desert dark color, NOT default dark + await ntp.hasBackgroundColor({ hex: '#312e2a' }); // desert dark surface-canvas, NOT default dark }); }); diff --git a/special-pages/pages/new-tab/app/favorites/components/Tile.module.css b/special-pages/pages/new-tab/app/favorites/components/Tile.module.css index 79c5df3bc5..998e668193 100644 --- a/special-pages/pages/new-tab/app/favorites/components/Tile.module.css +++ b/special-pages/pages/new-tab/app/favorites/components/Tile.module.css @@ -32,7 +32,7 @@ } .preview { - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); transform: scale(0.8); img { opacity: 0.8; diff --git a/special-pages/pages/new-tab/app/freemium-pir-banner/components/FreemiumPIRBanner.module.css b/special-pages/pages/new-tab/app/freemium-pir-banner/components/FreemiumPIRBanner.module.css index 1e39b0ec19..b94b77820c 100644 --- a/special-pages/pages/new-tab/app/freemium-pir-banner/components/FreemiumPIRBanner.module.css +++ b/special-pages/pages/new-tab/app/freemium-pir-banner/components/FreemiumPIRBanner.module.css @@ -1,7 +1,7 @@ .root { background-color: var(--ntp-surface-background-color); backdrop-filter: blur(48px); - border: 1px solid var(--ntp-surface-border-color); + border: 1px solid var(--ds-color-theme-container-border-primary); padding: calc(14 * var(--px-in-rem)) var(--sp-8) calc(14 * var(--px-in-rem)) var(--sp-4); border-radius: var(--border-radius-lg); position: relative; @@ -9,7 +9,7 @@ justify-content: flex-start; align-items: flex-start; font-family: system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); width: 100%; animation: animate-fade .2s cubic-bezier(0.55, 0.055, 0.666, 0.19); margin-bottom: var(--ntp-gap); diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css index 90572885db..dcb0d7a3cf 100644 --- a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css +++ b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css @@ -1,7 +1,7 @@ .card { background-color: var(--ntp-surface-background-color); backdrop-filter: blur(48px); - border: 1px solid var(--ntp-surface-border-color); + border: 1px solid var(--ds-color-theme-container-border-primary); padding: var(--sp-2) var(--sp-4); border-radius: var(--border-radius-lg); position: relative; @@ -26,7 +26,7 @@ font-weight: 590; line-height: var(--body-line-height); letter-spacing: -0.08px; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); margin-bottom: var(--sp-1); } @@ -35,7 +35,7 @@ line-height: calc(14 * var(--px-in-rem)); letter-spacing: 0.06px; flex-grow: 1; - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); margin-bottom: var(--sp-1); } @@ -47,7 +47,7 @@ font-weight: 600; font-size: calc(11 * var(--px-in-rem)); line-height: calc(14 * var(--px-in-rem)); - color: var(--ntp-color-primary); + color: var(--ds-color-theme-accent-primary); /* needed for some languages */ text-wrap: wrap; @@ -68,8 +68,8 @@ } &:active { - background-color: var(--ntp-color-primary); - color: var(--ntp-text-on-primary); + background-color: var(--ds-color-theme-accent-primary); + color: var(--ds-color-theme-accent-content-primary); } &:disabled { @@ -177,11 +177,11 @@ left: 0; svg path { - fill: var(--ntp-color-primary); + fill: var(--ds-color-theme-accent-primary); } div { - background-color: var(--ntp-color-primary); + background-color: var(--ds-color-theme-accent-primary); height: calc(20 * var(--px-in-rem)); display: flex; align-items: center; @@ -190,7 +190,7 @@ margin: 0 -1px; h2 { - color: var(--ntp-text-on-primary); + color: var(--ds-color-theme-accent-content-primary); letter-spacing: 0.06px; font-weight: 600; line-height: normal; diff --git a/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css b/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css index ca4f945c0a..76a729c814 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css +++ b/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css @@ -10,7 +10,7 @@ background: none; border: none; box-sizing: content-box; - color: var(--ntp-text-primary); + color: var(--ds-color-theme-text-primary); line-height: 16px; max-height: 10lh; padding: var(--sp-3) var(--sp-3) 0; @@ -21,7 +21,7 @@ } &::placeholder { - color: var(--ntp-text-tertiary); + color: var(--ds-color-theme-text-tertiary); } [data-platform="windows"] &::selection { @@ -34,7 +34,7 @@ } .hasScroll & { - border-bottom: 1px solid var(--ntp-decoration-tertiary); + border-bottom: 1px solid var(--ds-color-theme-surface-decoration-tertiary); padding-bottom: var(--sp-3); } } @@ -52,10 +52,10 @@ .submitButton { align-items: center; animation: fadeIn 0.3s ease-in-out; - background: var(--ntp-accent-primary); + background: var(--ds-color-theme-accent-primary); border-radius: 100%; border: none; - color: var(--ntp-accent-content-primary); + color: var(--ds-color-theme-accent-content-primary); cursor: pointer; display: flex; height: var(--sp-7); @@ -66,16 +66,16 @@ &[disabled] { background: none; - color: color-mix(in srgb, var(--ntp-icons-primary) 30%, transparent); + color: color-mix(in srgb, var(--ds-color-theme-icons-primary) 30%, transparent); cursor: default; } &:hover:not([disabled]) { - background: var(--ntp-accent-secondary); + background: var(--ds-color-theme-accent-secondary); } &:active:not([disabled]) { - background: var(--ntp-accent-tertiary); + background: var(--ds-color-theme-accent-tertiary); } &:focus-visible { diff --git a/special-pages/pages/new-tab/app/omnibar/components/Omnibar.module.css b/special-pages/pages/new-tab/app/omnibar/components/Omnibar.module.css index 3f03bc95c8..3948119512 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/Omnibar.module.css +++ b/special-pages/pages/new-tab/app/omnibar/components/Omnibar.module.css @@ -39,12 +39,12 @@ /* Rest */ .popup { - background: var(--ntp-surface-tertiary); + background: var(--ds-color-theme-surface-tertiary); border-radius: 12px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08); /* Elevation 30 */ display: flow-root; /* Prevent margin collapse on .field */ margin: 3px; - outline: 1px solid var(--ntp-controls-raised-backdrop); + outline: 1px solid var(--ds-color-theme-control-raised-backdrop); [data-background-kind="color"] [data-theme="light"] &, [data-background-kind="gradient"] [data-theme="light"] &, @@ -74,10 +74,10 @@ /* Focused */ .root:has(input:focus:placeholder-shown, textarea:focus:placeholder-shown) .popup { border-radius: 15px; - border: 2px solid var(--ntp-accent-primary); + border: 2px solid var(--ds-color-theme-accent-primary); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.08); /* Elevation 90 */ margin: 0; - outline: 2px solid var(--ntp-accent-glow); + outline: 2px solid var(--ds-color-theme-accent-glow-primary); .field { margin: 1px; /* Use margin on .field instead of padding on .popup so that position: absolute respects the spacing */ diff --git a/special-pages/pages/new-tab/app/omnibar/components/OmnibarConsumer.js b/special-pages/pages/new-tab/app/omnibar/components/OmnibarConsumer.js index 6c88056cba..743ee56bd0 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/OmnibarConsumer.js +++ b/special-pages/pages/new-tab/app/omnibar/components/OmnibarConsumer.js @@ -77,7 +77,7 @@ export function AiSetting({ enableAi, setEnableAi, omnibarVisible }) { useCustomizer({ title: t('omnibar_toggleDuckAi'), id: `_${id}-toggleAi`, - icon: , + icon: , toggle: () => setEnableAi(!enableAi), /** * Duck.ai is only ever shown as 'visible' (eg: switch is checked) if the omnibar is also visible. diff --git a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css index 25732bb4c8..64268f06de 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css +++ b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css @@ -9,7 +9,7 @@ .input { background: none; border: none; - color: var(--ntp-text-primary); + color: var(--ds-color-theme-text-primary); font: var(--input-font); left: 0; padding: var(--sp-3); @@ -18,7 +18,7 @@ right: 0; &::placeholder { - color: var(--ntp-text-tertiary); + color: var(--ds-color-theme-text-tertiary); } [data-platform='windows'] &::selection { @@ -39,7 +39,7 @@ } .suffix { - color: var(--ntp-accent-primary); + color: var(--ds-color-theme-accent-primary); flex: none; font: var(--input-font); } @@ -49,7 +49,7 @@ background: none; border-radius: 9px; border: none; - color: var(--ntp-text-primary); + color: var(--ds-color-theme-text-primary); cursor: pointer; display: flex; flex: none; @@ -63,11 +63,11 @@ visibility: hidden; &:hover { - background: var(--ntp-controls-fill-primary); + background: var(--ds-color-theme-control-fill-primary); } &:active { - background: var(--ntp-controls-fill-secondary); + background: var(--ds-color-theme-control-fill-secondary); } &:focus-visible { @@ -87,4 +87,4 @@ .input { line-height: normal; } -} \ No newline at end of file +} diff --git a/special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css b/special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css index c2e890f07c..0c526f16e8 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css +++ b/special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css @@ -1,5 +1,5 @@ .list { - border-top: 1px solid var(--ntp-surface-border-color); + border-top: 1px solid var(--ds-color-theme-container-border-primary); display: flex; flex-direction: column; margin-top: -1px; /* - 1px to account for the border-top */ @@ -13,7 +13,7 @@ } .main + .footer { - border-top: 1px solid var(--ntp-surface-border-color); + border-top: 1px solid var(--ds-color-theme-container-border-primary); } .item { @@ -21,7 +21,7 @@ background: none; border-radius: 4px; border: none; - color: var(--ntp-text-primary); + color: var(--ds-color-theme-text-primary); cursor: pointer; display: flex; height: var(--sp-8); @@ -35,10 +35,10 @@ &[aria-selected="true"], &:active { - color: var(--ntp-accent-content-primary); + color: var(--ds-color-theme-accent-content-primary); .suffix { - color: var(--ntp-accent-content-primary); + color: var(--ds-color-theme-accent-content-primary); } .badge { @@ -47,11 +47,11 @@ } &[aria-selected="true"] { - background: var(--ntp-accent-primary); + background: var(--ds-color-theme-accent-primary); } &:active { - background: var(--ntp-accent-secondary); + background: var(--ds-color-theme-accent-secondary); } } @@ -64,7 +64,7 @@ } .suffix { - color: var(--ntp-text-tertiary); + color: var(--ds-color-theme-text-tertiary); flex: initial; font-size: 12px; overflow: hidden; @@ -74,7 +74,7 @@ .badge { align-items: center; - background: var(--ntp-controls-raised-backdrop); + background: var(--ds-color-theme-control-raised-backdrop); border-radius: var(--border-radius-sm); display: flex; flex: none; diff --git a/special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css b/special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css index 0b5699462e..6026cf0907 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css +++ b/special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css @@ -1,5 +1,5 @@ .tabSwitcher { - background: var(--ntp-controls-raised-backdrop); + background: var(--ds-color-theme-control-raised-backdrop); border-radius: 99px; display: grid; gap: var(--sp-0_5); @@ -17,7 +17,7 @@ align-items: center; background: none; border: none; - color: var(--ntp-text-primary); + color: var(--ds-color-theme-text-primary); cursor: pointer; display: flex; gap: 6px; @@ -29,7 +29,7 @@ z-index: 1; &:hover:not([aria-selected="true"])::before { - background: var(--ntp-controls-fill-primary); + background: var(--ds-color-theme-control-fill-primary); border-radius: 99px; content: ''; inset: 0; @@ -42,9 +42,9 @@ } .blob { - background-color: var(--ntp-controls-raised-fill-primary); + background-color: var(--ds-color-theme-control-raised-fill-primary); border-radius: 18px; - box-shadow: 0 1px 0 0 var(--ntp-tone-tint) inset, 0 1px 4px 0 var(--ntp-shadow-secondary), 0 4px 8px 0 var(--ntp-shadow-secondary); + box-shadow: 0 1px 0 0 var(--ds-color-theme-tone-tint-primary) inset, 0 1px 4px 0 var(--ds-color-theme-shadow-secondary), 0 4px 8px 0 var(--ds-color-theme-shadow-secondary); height: var(--sp-8); left: 0; position: absolute; @@ -56,7 +56,7 @@ z-index: 0; [data-theme="dark"] & { - box-shadow: 0 4px 4px var(--ntp-shadow-secondary), 0 1px 2px var(--ntp-shadow-secondary), inset 0 1px 0 rgba(255, 255, 255, 0.06); + box-shadow: 0 4px 4px var(--ds-color-theme-shadow-secondary), 0 1px 2px var(--ds-color-theme-shadow-secondary), inset 0 1px 0 rgba(255, 255, 255, 0.06); } @media (prefers-reduced-motion: reduce) { diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css index 2e0c3bbac4..86b506f26c 100644 --- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css +++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css @@ -47,7 +47,7 @@ flex: 1; & [aria-controls] { - background-color: var(--ntp-widget-expander-bg); + background-color: var(--ds-color-theme-control-fill-primary); width: 24px; height: 24px; position: absolute; @@ -75,7 +75,7 @@ width: 196px; padding-right: 18px; box-sizing: content-box; - + &:last-child { padding-right: 0; } @@ -86,14 +86,14 @@ } .title { - color: var(--ntp-text-primary); + color: var(--ds-color-theme-text-primary); font-size: 40px; font-weight: 400; grid-area: title; line-height: 28px; & span { - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); display: block; font-size: var(--title-3-em-font-size); line-height: 20px; @@ -105,7 +105,7 @@ } .noRecentTitle { - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); grid-area: title; font-size: var(--title-3-em-font-size); font-weight: 400; @@ -114,7 +114,7 @@ .subtitle { grid-area: label; - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); line-height: var(--body-line-height); text-transform: uppercase; @@ -162,7 +162,7 @@ .otherTrackersRow { padding-left: var(--sp-1); - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); display: flex; align-items: center; @@ -192,7 +192,7 @@ .count { grid-area: count; text-align: right; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); line-height: 1; } diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStatsLegacy.module.css b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStatsLegacy.module.css index de482e1342..8aa7e85931 100644 --- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStatsLegacy.module.css +++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStatsLegacy.module.css @@ -61,7 +61,7 @@ .subtitle { grid-area: label; - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); line-height: var(--body-line-height); text-transform: uppercase; @@ -109,7 +109,7 @@ .otherTrackersRow { padding-left: var(--sp-1); - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); display: flex; align-items: center; @@ -139,7 +139,7 @@ .count { grid-area: count; text-align: right; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); line-height: 1; } diff --git a/special-pages/pages/new-tab/app/protections/components/Protections.module.css b/special-pages/pages/new-tab/app/protections/components/Protections.module.css index bdb30bf4f6..3beb06ab87 100644 --- a/special-pages/pages/new-tab/app/protections/components/Protections.module.css +++ b/special-pages/pages/new-tab/app/protections/components/Protections.module.css @@ -1,7 +1,7 @@ .root { background: var(--ntp-surface-background-color); backdrop-filter: blur(48px); - border: 1px solid var(--ntp-surface-border-color); + border: 1px solid var(--ds-color-theme-container-border-primary); padding: var(--sp-6); border-radius: var(--border-radius-lg); display: grid; @@ -53,13 +53,13 @@ } .empty { - color: var(--ntp-text-muted); + color: var(--ds-color-theme-text-secondary); } .feed {} .button { - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); border-radius: 5px; background: transparent; } @@ -88,7 +88,7 @@ transform: translateX(-50%); left: 50%; border-radius: 16px; - background: var(--ntp-color-primary); + background: var(--ds-color-theme-accent-primary); } } } @@ -112,4 +112,3 @@ } } } - diff --git a/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css b/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css index b0d8a1af04..50a4858e9e 100644 --- a/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css +++ b/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css @@ -1,7 +1,7 @@ .root { background-color: var(--ntp-surface-background-color); backdrop-filter: blur(48px); - border: 1px solid var(--ntp-surface-border-color); + border: 1px solid var(--ds-color-theme-container-border-primary); padding: calc(14 * var(--px-in-rem)) var(--sp-8) calc(14 * var(--px-in-rem)) var(--sp-4); border-radius: var(--border-radius-lg); position: relative; @@ -9,7 +9,7 @@ justify-content: flex-start; align-items: flex-start; font-family: system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto; - color: var(--ntp-text-normal); + color: var(--ds-color-theme-text-primary); width: 100%; animation: animate-fade .2s cubic-bezier(0.55, 0.055, 0.666, 0.19); margin-bottom: var(--ntp-gap); diff --git a/special-pages/pages/new-tab/app/styles/ntp-theme.css b/special-pages/pages/new-tab/app/styles/ntp-theme.css index aaaa12c485..1c7292821e 100644 --- a/special-pages/pages/new-tab/app/styles/ntp-theme.css +++ b/special-pages/pages/new-tab/app/styles/ntp-theme.css @@ -33,126 +33,781 @@ --border-radius-md: 8px; --border-radius-sm: 6px; --border-radius-xs: 4px; - --focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-focus-outline-color); - --focus-ring-thin: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 1px var(--color-white); +} + +[data-theme="light"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-default-light-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-default-light-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-default-light-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-default-light-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-default-light-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-default-light-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-default-light-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-default-light-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-default-light-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-default-light-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-default-light-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-default-light-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-default-light-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-default-light-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-default-light-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-default-light-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-default-light-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-default-light-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-default-light-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-default-light-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-default-light-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-default-light-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-default-light-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-default-light-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-default-light-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-default-light-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-default-light-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-default-light-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-default-light-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-default-light-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-default-light-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-default-light-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-default-light-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-default-light-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-default-light-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-default-light-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-default-light-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-default-light-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-default-light-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-default-light-highlight-primary); + + /* Only exist in default variant: */ + --ds-color-theme-tone-tint-primary: var(--ds-color-theme-default-light-tone-tint-primary); + --ds-color-theme-control-raised-backdrop: var(--ds-color-theme-default-light-control-raised-backdrop); + --ds-color-theme-control-raised-fill-primary: var(--ds-color-theme-default-light-control-raised-fill-primary); + --ds-color-theme-shadow-primary: var(--ds-color-theme-default-light-shadow-primary); + --ds-color-theme-shadow-secondary: var(--ds-color-theme-default-light-shadow-secondary); +} + +[data-theme="dark"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-default-dark-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-default-dark-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-default-dark-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-default-dark-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-default-dark-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-default-dark-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-default-dark-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-default-dark-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-default-dark-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-default-dark-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-default-dark-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-default-dark-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-default-dark-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-default-dark-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-default-dark-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-default-dark-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-default-dark-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-default-dark-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-default-dark-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-default-dark-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-default-dark-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-default-dark-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-default-dark-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-default-dark-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-default-dark-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-default-dark-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-default-dark-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-default-dark-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-default-dark-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-default-dark-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-default-dark-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-default-dark-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-default-dark-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-default-dark-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-default-dark-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-default-dark-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-default-dark-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-default-dark-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-default-dark-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-default-dark-highlight-primary); + + /* Only exist in default variant: */ + --ds-color-theme-tone-tint-primary: var(--ds-color-theme-default-dark-tone-tint-primary); + --ds-color-theme-control-raised-backdrop: var(--ds-color-theme-default-dark-control-raised-backdrop); + --ds-color-theme-control-raised-fill-primary: var(--ds-color-theme-default-dark-control-raised-fill-primary); + --ds-color-theme-shadow-primary: var(--ds-color-theme-default-dark-shadow-primary); + --ds-color-theme-shadow-secondary: var(--ds-color-theme-default-dark-shadow-secondary); +} + +[data-theme-variant="coolGray"] [data-theme="light"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-cool-gray-light-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-cool-gray-light-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-cool-gray-light-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-cool-gray-light-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-cool-gray-light-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-cool-gray-light-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-cool-gray-light-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-cool-gray-light-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-cool-gray-light-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-cool-gray-light-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-cool-gray-light-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-cool-gray-light-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-cool-gray-light-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-cool-gray-light-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-cool-gray-light-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-cool-gray-light-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-cool-gray-light-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-cool-gray-light-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-cool-gray-light-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-cool-gray-light-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-cool-gray-light-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-cool-gray-light-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-cool-gray-light-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-cool-gray-light-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-cool-gray-light-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-cool-gray-light-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-cool-gray-light-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-cool-gray-light-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-cool-gray-light-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-cool-gray-light-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-cool-gray-light-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-cool-gray-light-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-cool-gray-light-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-cool-gray-light-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-cool-gray-light-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-cool-gray-light-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-cool-gray-light-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-cool-gray-light-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-cool-gray-light-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-cool-gray-light-highlight-primary); +} + +[data-theme-variant="coolGray"] [data-theme="dark"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-cool-gray-dark-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-cool-gray-dark-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-cool-gray-dark-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-cool-gray-dark-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-cool-gray-dark-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-cool-gray-dark-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-cool-gray-dark-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-cool-gray-dark-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-cool-gray-dark-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-cool-gray-dark-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-cool-gray-dark-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-cool-gray-dark-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-cool-gray-dark-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-cool-gray-dark-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-cool-gray-dark-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-cool-gray-dark-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-cool-gray-dark-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-cool-gray-dark-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-cool-gray-dark-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-cool-gray-dark-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-cool-gray-dark-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-cool-gray-dark-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-cool-gray-dark-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-cool-gray-dark-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-cool-gray-dark-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-cool-gray-dark-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-cool-gray-dark-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-cool-gray-dark-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-cool-gray-dark-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-cool-gray-dark-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-cool-gray-dark-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-cool-gray-dark-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-cool-gray-dark-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-cool-gray-dark-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-cool-gray-dark-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-cool-gray-dark-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-cool-gray-dark-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-cool-gray-dark-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-cool-gray-dark-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-cool-gray-dark-highlight-primary); +} + +[data-theme-variant="slateBlue"] [data-theme="light"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-slate-blue-light-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-slate-blue-light-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-slate-blue-light-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-slate-blue-light-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-slate-blue-light-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-slate-blue-light-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-slate-blue-light-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-slate-blue-light-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-slate-blue-light-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-slate-blue-light-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-slate-blue-light-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-slate-blue-light-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-slate-blue-light-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-slate-blue-light-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-slate-blue-light-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-slate-blue-light-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-slate-blue-light-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-slate-blue-light-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-slate-blue-light-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-slate-blue-light-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-slate-blue-light-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-slate-blue-light-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-slate-blue-light-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-slate-blue-light-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-slate-blue-light-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-slate-blue-light-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-slate-blue-light-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-slate-blue-light-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-slate-blue-light-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-slate-blue-light-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-slate-blue-light-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-slate-blue-light-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-slate-blue-light-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-slate-blue-light-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-slate-blue-light-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-slate-blue-light-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-slate-blue-light-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-slate-blue-light-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-slate-blue-light-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-slate-blue-light-highlight-primary); +} + +[data-theme-variant="slateBlue"] [data-theme="dark"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-slate-blue-dark-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-slate-blue-dark-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-slate-blue-dark-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-slate-blue-dark-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-slate-blue-dark-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-slate-blue-dark-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-slate-blue-dark-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-slate-blue-dark-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-slate-blue-dark-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-slate-blue-dark-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-slate-blue-dark-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-slate-blue-dark-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-slate-blue-dark-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-slate-blue-dark-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-slate-blue-dark-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-slate-blue-dark-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-slate-blue-dark-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-slate-blue-dark-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-slate-blue-dark-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-slate-blue-dark-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-slate-blue-dark-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-slate-blue-dark-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-slate-blue-dark-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-slate-blue-dark-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-slate-blue-dark-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-slate-blue-dark-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-slate-blue-dark-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-slate-blue-dark-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-slate-blue-dark-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-slate-blue-dark-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-slate-blue-dark-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-slate-blue-dark-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-slate-blue-dark-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-slate-blue-dark-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-slate-blue-dark-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-slate-blue-dark-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-slate-blue-dark-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-slate-blue-dark-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-slate-blue-dark-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-slate-blue-dark-highlight-primary); +} + +[data-theme-variant="green"] [data-theme="light"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-green-light-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-green-light-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-green-light-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-green-light-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-green-light-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-green-light-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-green-light-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-green-light-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-green-light-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-green-light-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-green-light-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-green-light-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-green-light-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-green-light-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-green-light-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-green-light-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-green-light-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-green-light-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-green-light-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-green-light-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-green-light-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-green-light-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-green-light-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-green-light-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-green-light-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-green-light-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-green-light-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-green-light-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-green-light-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-green-light-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-green-light-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-green-light-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-green-light-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-green-light-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-green-light-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-green-light-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-green-light-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-green-light-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-green-light-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-green-light-highlight-primary); +} + +[data-theme-variant="green"] [data-theme="dark"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-green-dark-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-green-dark-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-green-dark-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-green-dark-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-green-dark-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-green-dark-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-green-dark-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-green-dark-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-green-dark-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-green-dark-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-green-dark-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-green-dark-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-green-dark-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-green-dark-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-green-dark-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-green-dark-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-green-dark-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-green-dark-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-green-dark-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-green-dark-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-green-dark-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-green-dark-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-green-dark-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-green-dark-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-green-dark-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-green-dark-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-green-dark-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-green-dark-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-green-dark-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-green-dark-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-green-dark-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-green-dark-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-green-dark-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-green-dark-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-green-dark-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-green-dark-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-green-dark-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-green-dark-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-green-dark-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-green-dark-highlight-primary); +} + +[data-theme-variant="violet"] [data-theme="light"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-violet-light-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-violet-light-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-violet-light-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-violet-light-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-violet-light-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-violet-light-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-violet-light-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-violet-light-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-violet-light-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-violet-light-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-violet-light-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-violet-light-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-violet-light-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-violet-light-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-violet-light-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-violet-light-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-violet-light-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-violet-light-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-violet-light-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-violet-light-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-violet-light-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-violet-light-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-violet-light-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-violet-light-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-violet-light-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-violet-light-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-violet-light-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-violet-light-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-violet-light-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-violet-light-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-violet-light-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-violet-light-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-violet-light-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-violet-light-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-violet-light-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-violet-light-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-violet-light-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-violet-light-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-violet-light-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-violet-light-highlight-primary); +} + +[data-theme-variant="violet"] [data-theme="dark"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-violet-dark-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-violet-dark-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-violet-dark-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-violet-dark-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-violet-dark-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-violet-dark-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-violet-dark-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-violet-dark-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-violet-dark-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-violet-dark-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-violet-dark-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-violet-dark-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-violet-dark-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-violet-dark-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-violet-dark-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-violet-dark-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-violet-dark-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-violet-dark-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-violet-dark-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-violet-dark-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-violet-dark-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-violet-dark-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-violet-dark-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-violet-dark-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-violet-dark-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-violet-dark-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-violet-dark-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-violet-dark-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-violet-dark-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-violet-dark-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-violet-dark-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-violet-dark-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-violet-dark-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-violet-dark-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-violet-dark-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-violet-dark-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-violet-dark-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-violet-dark-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-violet-dark-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-violet-dark-highlight-primary); +} + +[data-theme-variant="rose"] [data-theme="light"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-rose-light-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-rose-light-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-rose-light-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-rose-light-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-rose-light-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-rose-light-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-rose-light-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-rose-light-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-rose-light-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-rose-light-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-rose-light-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-rose-light-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-rose-light-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-rose-light-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-rose-light-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-rose-light-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-rose-light-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-rose-light-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-rose-light-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-rose-light-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-rose-light-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-rose-light-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-rose-light-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-rose-light-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-rose-light-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-rose-light-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-rose-light-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-rose-light-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-rose-light-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-rose-light-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-rose-light-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-rose-light-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-rose-light-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-rose-light-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-rose-light-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-rose-light-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-rose-light-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-rose-light-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-rose-light-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-rose-light-highlight-primary); +} + +[data-theme-variant="rose"] [data-theme="dark"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-rose-dark-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-rose-dark-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-rose-dark-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-rose-dark-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-rose-dark-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-rose-dark-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-rose-dark-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-rose-dark-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-rose-dark-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-rose-dark-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-rose-dark-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-rose-dark-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-rose-dark-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-rose-dark-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-rose-dark-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-rose-dark-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-rose-dark-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-rose-dark-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-rose-dark-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-rose-dark-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-rose-dark-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-rose-dark-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-rose-dark-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-rose-dark-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-rose-dark-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-rose-dark-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-rose-dark-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-rose-dark-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-rose-dark-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-rose-dark-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-rose-dark-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-rose-dark-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-rose-dark-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-rose-dark-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-rose-dark-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-rose-dark-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-rose-dark-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-rose-dark-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-rose-dark-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-rose-dark-highlight-primary); +} + +[data-theme-variant="orange"] [data-theme="light"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-orange-light-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-orange-light-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-orange-light-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-orange-light-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-orange-light-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-orange-light-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-orange-light-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-orange-light-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-orange-light-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-orange-light-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-orange-light-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-orange-light-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-orange-light-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-orange-light-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-orange-light-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-orange-light-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-orange-light-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-orange-light-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-orange-light-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-orange-light-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-orange-light-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-orange-light-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-orange-light-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-orange-light-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-orange-light-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-orange-light-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-orange-light-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-orange-light-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-orange-light-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-orange-light-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-orange-light-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-orange-light-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-orange-light-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-orange-light-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-orange-light-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-orange-light-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-orange-light-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-orange-light-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-orange-light-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-orange-light-highlight-primary); +} + +[data-theme-variant="orange"] [data-theme="dark"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-orange-dark-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-orange-dark-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-orange-dark-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-orange-dark-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-orange-dark-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-orange-dark-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-orange-dark-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-orange-dark-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-orange-dark-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-orange-dark-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-orange-dark-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-orange-dark-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-orange-dark-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-orange-dark-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-orange-dark-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-orange-dark-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-orange-dark-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-orange-dark-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-orange-dark-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-orange-dark-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-orange-dark-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-orange-dark-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-orange-dark-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-orange-dark-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-orange-dark-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-orange-dark-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-orange-dark-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-orange-dark-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-orange-dark-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-orange-dark-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-orange-dark-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-orange-dark-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-orange-dark-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-orange-dark-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-orange-dark-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-orange-dark-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-orange-dark-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-orange-dark-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-orange-dark-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-orange-dark-highlight-primary); +} + +[data-theme-variant="desert"] [data-theme="light"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-desert-light-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-desert-light-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-desert-light-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-desert-light-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-desert-light-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-desert-light-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-desert-light-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-desert-light-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-desert-light-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-desert-light-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-desert-light-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-desert-light-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-desert-light-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-desert-light-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-desert-light-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-desert-light-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-desert-light-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-desert-light-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-desert-light-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-desert-light-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-desert-light-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-desert-light-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-desert-light-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-desert-light-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-desert-light-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-desert-light-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-desert-light-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-desert-light-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-desert-light-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-desert-light-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-desert-light-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-desert-light-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-desert-light-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-desert-light-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-desert-light-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-desert-light-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-desert-light-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-desert-light-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-desert-light-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-desert-light-highlight-primary); +} + +[data-theme-variant="desert"] [data-theme="dark"] { + --ds-color-theme-surface-primary: var(--ds-color-theme-desert-dark-surface-primary); + --ds-color-theme-surface-secondary: var(--ds-color-theme-desert-dark-surface-secondary); + --ds-color-theme-surface-tertiary: var(--ds-color-theme-desert-dark-surface-tertiary); + --ds-color-theme-surface-backdrop: var(--ds-color-theme-desert-dark-surface-backdrop); + --ds-color-theme-surface-canvas: var(--ds-color-theme-desert-dark-surface-canvas); + --ds-color-theme-surface-decoration-primary: var(--ds-color-theme-desert-dark-surface-decoration-primary); + --ds-color-theme-surface-decoration-secondary: var(--ds-color-theme-desert-dark-surface-decoration-secondary); + --ds-color-theme-surface-decoration-tertiary: var(--ds-color-theme-desert-dark-surface-decoration-tertiary); + --ds-color-theme-text-primary: var(--ds-color-theme-desert-dark-text-primary); + --ds-color-theme-text-secondary: var(--ds-color-theme-desert-dark-text-secondary); + --ds-color-theme-text-tertiary: var(--ds-color-theme-desert-dark-text-tertiary); + --ds-color-theme-icons-primary: var(--ds-color-theme-desert-dark-icons-primary); + --ds-color-theme-icons-secondary: var(--ds-color-theme-desert-dark-icons-secondary); + --ds-color-theme-icons-tertiary: var(--ds-color-theme-desert-dark-icons-tertiary); + --ds-color-theme-control-fill-primary: var(--ds-color-theme-desert-dark-control-fill-primary); + --ds-color-theme-control-fill-secondary: var(--ds-color-theme-desert-dark-control-fill-secondary); + --ds-color-theme-control-fill-tertiary: var(--ds-color-theme-desert-dark-control-fill-tertiary); + --ds-color-theme-control-border-primary: var(--ds-color-theme-desert-dark-control-border-primary); + --ds-color-theme-control-border-secondary: var(--ds-color-theme-desert-dark-control-border-secondary); + --ds-color-theme-control-border-tertiary: var(--ds-color-theme-desert-dark-control-border-tertiary); + --ds-color-theme-control-border-quaternary: var(--ds-color-theme-desert-dark-control-border-quaternary); + --ds-color-theme-container-fill-primary: var(--ds-color-theme-desert-dark-container-fill-primary); + --ds-color-theme-container-fill-secondary: var(--ds-color-theme-desert-dark-container-fill-secondary); + --ds-color-theme-container-fill-tertiary: var(--ds-color-theme-desert-dark-container-fill-tertiary); + --ds-color-theme-container-border-primary: var(--ds-color-theme-desert-dark-container-border-primary); + --ds-color-theme-container-border-secondary: var(--ds-color-theme-desert-dark-container-border-secondary); + --ds-color-theme-container-border-tertiary: var(--ds-color-theme-desert-dark-container-border-tertiary); + --ds-color-theme-accent-primary: var(--ds-color-theme-desert-dark-accent-primary); + --ds-color-theme-accent-secondary: var(--ds-color-theme-desert-dark-accent-secondary); + --ds-color-theme-accent-tertiary: var(--ds-color-theme-desert-dark-accent-tertiary); + --ds-color-theme-accent-quaternary: var(--ds-color-theme-desert-dark-accent-quaternary); + --ds-color-theme-accent-text-primary: var(--ds-color-theme-desert-dark-accent-text-primary); + --ds-color-theme-accent-text-secondary: var(--ds-color-theme-desert-dark-accent-text-secondary); + --ds-color-theme-accent-text-tertiary: var(--ds-color-theme-desert-dark-accent-text-tertiary); + --ds-color-theme-accent-content-primary: var(--ds-color-theme-desert-dark-accent-content-primary); + --ds-color-theme-accent-content-secondary: var(--ds-color-theme-desert-dark-accent-content-secondary); + --ds-color-theme-accent-content-tertiary: var(--ds-color-theme-desert-dark-accent-content-tertiary); + --ds-color-theme-accent-glow-primary: var(--ds-color-theme-desert-dark-accent-glow-primary); + --ds-color-theme-accent-glow-secondary: var(--ds-color-theme-desert-dark-accent-glow-secondary); + --ds-color-theme-highlight-primary: var(--ds-color-theme-desert-dark-highlight-primary); } body { - --default-light-background-color: var(--color-gray-0); - --default-dark-background-color: var(--color-gray-85); + --default-light-background-color: var(--ds-color-theme-default-light-surface-canvas); + --default-dark-background-color: var(--ds-color-theme-default-dark-surface-canvas); } body[data-theme-variant="coolGray"] { - --default-light-background-color: var(--ds-color-cool-gray-light-surface-primary); - --default-dark-background-color: var(--ds-color-cool-gray-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-cool-gray-light-surface-canvas); + --default-dark-background-color: var(--ds-color-theme-cool-gray-dark-surface-canvas); } body[data-theme-variant="slateBlue"] { - --default-light-background-color: var(--ds-color-slate-blue-light-surface-primary); - --default-dark-background-color: var(--ds-color-slate-blue-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-slate-blue-light-surface-canvas); + --default-dark-background-color: var(--ds-color-theme-slate-blue-dark-surface-canvas); } body[data-theme-variant="green"] { - --default-light-background-color: var(--ds-color-green-light-surface-primary); - --default-dark-background-color: var(--ds-color-green-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-green-light-surface-canvas); + --default-dark-background-color: var(--ds-color-theme-green-dark-surface-canvas); } body[data-theme-variant="violet"] { - --default-light-background-color: var(--ds-color-violet-light-surface-primary); - --default-dark-background-color: var(--ds-color-violet-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-violet-light-surface-canvas); + --default-dark-background-color: var(--ds-color-theme-violet-dark-surface-canvas); } body[data-theme-variant="rose"] { - --default-light-background-color: var(--ds-color-rose-light-surface-primary); - --default-dark-background-color: var(--ds-color-rose-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-rose-light-surface-canvas); + --default-dark-background-color: var(--ds-color-theme-rose-dark-surface-canvas); } body[data-theme-variant="orange"] { - --default-light-background-color: var(--ds-color-orange-light-surface-primary); - --default-dark-background-color: var(--ds-color-orange-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-orange-light-surface-canvas); + --default-dark-background-color: var(--ds-color-theme-orange-dark-surface-canvas); } body[data-theme-variant="desert"] { - --default-light-background-color: var(--ds-color-desert-light-surface-primary); - --default-dark-background-color: var(--ds-color-desert-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-desert-light-surface-canvas); + --default-dark-background-color: var(--ds-color-theme-desert-dark-surface-canvas); +} + +[data-theme="light"], +[data-theme="dark"] { + --ntp-surface-background-color: var(--ds-color-theme-tone-tint-primary); +} + +[data-background-kind="color"], +[data-background-kind="gradient"], +[data-background-kind="userImage"] { + [data-theme="light"] { + --ntp-surface-background-color: var(--color-white-at-30); + } + + [data-theme="dark"] { + --ntp-surface-background-color: var(--color-black-at-18); + } } [data-theme=light] { - --ntp-surface-background-color: var(--color-white-at-30); - --ntp-surfaces-panel-background-color: white; - --ntp-surface-border-color: var(--color-black-at-9); - --ntp-text-normal: var(--color-black-at-84); - --ntp-text-muted: var(--color-black-at-60); - --ntp-protections-text-muted: var(--color-black-at-66); - --ntp-text-on-primary: var(--color-white-at-84); - --ntp-color-primary: var(--ddg-color-primary); - --ntp-widget-expander-bg: rgba(31, 31, 31, 0.09); - --ntp-focus-outline-color: black; - --focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-focus-outline-color); - --focus-ring-thin: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 1px var(--color-white); - --focus-ring-primary: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-color-primary); + --focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ds-color-theme-accent-primary); + --focus-ring-thin: 0px 0px 0px 1px var(--ds-color-theme-accent-primary), 0px 0px 0px 1px var(--color-white); + --focus-ring-primary: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ds-color-theme-accent-primary); --ntp-selection-color: var(--color-white); --ntp-selection-background-color: #3A69EF; - - /* Global Colors & Styles - https://www.figma.com/design/3W4vi0zX8hrpQc7zInQQB6/%F0%9F%8E%A8-Global-Colors---Styles?node-id=11-1&p=f&vars=1&m=dev */ - /* @todo: This palette is what the native apps use, we should gradually move over to it */ - --ntp-surface-tertiary: #FFFFFF; - --ntp-text-primary: rgba(0, 0, 0, 0.96); - --ntp-text-tertiary: rgba(0, 0, 0, 0.42); - --ntp-icons-primary: rgba(0, 0, 0, 0.84); - --ntp-icons-tertiary: rgba(0, 0, 0, 0.36); - --ntp-tone-tint: rgba(255, 255, 255, 0.48); - --ntp-accent-primary: var(--color-blue-50); - --ntp-accent-secondary: var(--color-blue-60); - --ntp-accent-tertiary: var(--color-blue-70); - --ntp-accent-glow: rgba(57, 105, 239, 0.2); - --ntp-accent-content-primary: #FFFFFF; - --ntp-controls-fill-primary: rgba(31, 31, 31, 0.09); - --ntp-controls-fill-secondary: rgba(31, 31, 31, 0.12); - --ntp-controls-raised-fill-primary: #FFFFFF; - --ntp-controls-raised-backdrop: rgba(0, 0, 0, 0.09); - --ntp-decoration-tertiary: rgba(0, 0, 0, 0.09); - --ntp-shadow-primary: rgba(0, 0, 0, 0.05); - --ntp-shadow-secondary: rgba(0, 0, 0, 0.08); } [data-theme=dark] { - --ntp-surface-background-color: var(--color-black-at-18); - --ntp-surfaces-panel-background-color: #222222; - --ntp-surface-border-color: var(--color-white-at-12); - --ntp-text-normal: var(--color-white-at-84); - --ntp-text-muted: var(--color-white-at-60); - --ntp-protections-text-muted: var(--color-white-at-66); - --ntp-color-primary: var(--color-blue-30); - --ntp-text-on-primary: var(--color-black-at-84); - --ntp-widget-expander-bg: rgba(249, 249, 249, 0.12); - --ntp-focus-outline-color: white; - --focus-ring: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 3px var(--color-white); - --focus-ring-thin: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 1px var(--ntp-focus-outline-color); - --focus-ring-primary: 0px 0px 0px 1px var(--default-dark-background-color), 0px 0px 0px 3px var(--ntp-color-primary); + --focus-ring: 0px 0px 0px 1px var(--ds-color-theme-accent-primary), 0px 0px 0px 3px var(--color-white); + --focus-ring-thin: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 1px var(--ds-color-theme-accent-primary); + --focus-ring-primary: 0px 0px 0px 1px var(--default-dark-background-color), 0px 0px 0px 3px var(--ds-color-theme-accent-primary); --ntp-selection-color: var(--color-white); --ntp-selection-background-color: var(--color-blue-30); - - /* Global Colors & Styles - https://www.figma.com/design/3W4vi0zX8hrpQc7zInQQB6/%F0%9F%8E%A8-Global-Colors---Styles?node-id=11-1&p=f&vars=1&m=dev */ - /* @todo: This palette is what the native apps use, we should gradually move over to it */ - --ntp-surface-tertiary: #474747; - --ntp-text-primary: rgba(255, 255, 255, 0.96); - --ntp-text-tertiary: rgba(255, 255, 255, 0.36); - --ntp-icons-primary: rgba(255, 255, 255, 0.78); - --ntp-icons-tertiary: rgba(255, 255, 255, 0.24); - --ntp-tone-tint: rgba(249, 249, 249, 0.12); - --ntp-accent-primary: var(--color-blue-30); - --ntp-accent-secondary: var(--color-blue-40); - --ntp-accent-tertiary: var(--color-blue-50); - --ntp-accent-glow: rgba(114, 149, 246, 0.2); - --ntp-accent-content-primary: var(--color-blue-80); - --ntp-controls-fill-primary: rgba(249, 249, 249, 0.12); - --ntp-controls-fill-secondary: rgba(249, 249, 249, 0.18); - --ntp-controls-raised-fill-primary: rgba(255, 255, 255, 0.18); - --ntp-controls-raised-backdrop: rgba(255, 255, 255, 0.12); - --ntp-decoration-tertiary: rgba(255, 255, 255, 0.12); - --ntp-shadow-primary: rgba(0, 0, 0, 0.16); - --ntp-shadow-secondary: rgba(0, 0, 0, 0.24); } /* This comes from the application settings */ diff --git a/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.module.css b/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.module.css index b1b1b254ef..1b8024a15a 100644 --- a/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.module.css +++ b/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.module.css @@ -2,7 +2,7 @@ margin-top: calc(-40 * var(--px-in-rem)); } .root { - border-bottom: 1px solid var(--ntp-surface-border-color); + border-bottom: 1px solid var(--ds-color-theme-container-border-primary); position: relative; display: flex; flex-direction: column; @@ -77,4 +77,3 @@ top: calc(var(--sp-6) - var(--sp-1)); right: var(--sp-2); } - diff --git a/special-pages/pages/new-tab/integration-tests/new-tab.spec.js b/special-pages/pages/new-tab/integration-tests/new-tab.spec.js index e9f93481cf..dc5dd58e8d 100644 --- a/special-pages/pages/new-tab/integration-tests/new-tab.spec.js +++ b/special-pages/pages/new-tab/integration-tests/new-tab.spec.js @@ -111,7 +111,7 @@ test.describe('newtab widgets', () => { await ntp.darkMode(); await ntp.openPage(); await ntp.waitForCustomizer(); - await ntp.hasBackgroundColor({ hex: '#333333' }); + await ntp.hasBackgroundColor({ hex: '#1c1c1c' }); }); test('with overrides from initial setup (light)', async ({ page }, workerInfo) => { const ntp = NewtabPage.create(page, workerInfo); diff --git a/special-pages/pages/special-error/app/styles/variables.css b/special-pages/pages/special-error/app/styles/variables.css index 8706debe01..ba421db9ca 100644 --- a/special-pages/pages/special-error/app/styles/variables.css +++ b/special-pages/pages/special-error/app/styles/variables.css @@ -32,36 +32,36 @@ body[data-theme='dark'][data-platform-name='ios'][data-theme-variant='default'] } body[data-theme-variant='coolGray'] { - --default-light-background-color: var(--ds-color-cool-gray-light-surface-primary); - --default-dark-background-color: var(--ds-color-cool-gray-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-cool-gray-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-cool-gray-dark-surface-primary); } body[data-theme-variant='slateBlue'] { - --default-light-background-color: var(--ds-color-slate-blue-light-surface-primary); - --default-dark-background-color: var(--ds-color-slate-blue-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-slate-blue-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-slate-blue-dark-surface-primary); } body[data-theme-variant='green'] { - --default-light-background-color: var(--ds-color-green-light-surface-primary); - --default-dark-background-color: var(--ds-color-green-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-green-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-green-dark-surface-primary); } body[data-theme-variant='violet'] { - --default-light-background-color: var(--ds-color-violet-light-surface-primary); - --default-dark-background-color: var(--ds-color-violet-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-violet-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-violet-dark-surface-primary); } body[data-theme-variant='rose'] { - --default-light-background-color: var(--ds-color-rose-light-surface-primary); - --default-dark-background-color: var(--ds-color-rose-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-rose-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-rose-dark-surface-primary); } body[data-theme-variant='orange'] { - --default-light-background-color: var(--ds-color-orange-light-surface-primary); - --default-dark-background-color: var(--ds-color-orange-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-orange-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-orange-dark-surface-primary); } body[data-theme-variant='desert'] { - --default-light-background-color: var(--ds-color-desert-light-surface-primary); - --default-dark-background-color: var(--ds-color-desert-dark-surface-primary); + --default-light-background-color: var(--ds-color-theme-desert-light-surface-primary); + --default-dark-background-color: var(--ds-color-theme-desert-dark-surface-primary); }