diff --git a/packages/parser/src/build/index.ts b/packages/parser/src/build/index.ts index 84ed4ec8..e87f5f62 100644 --- a/packages/parser/src/build/index.ts +++ b/packages/parser/src/build/index.ts @@ -122,6 +122,7 @@ export default async function build( }); return; } + const tokens = resolver.apply(params.input ?? {}); const token = tokens[id]!; if (!token) { logger.error({ group: 'plugin', label: plugin.name, message: `No token "${id}"` }); diff --git a/packages/parser/test/plugin.test.ts b/packages/parser/test/plugin.test.ts index 52f40168..ffb095b3 100644 --- a/packages/parser/test/plugin.test.ts +++ b/packages/parser/test/plugin.test.ts @@ -39,6 +39,52 @@ describe('Plugin API', () => { } }); + it('can setTransform for token missing in default input', async () => { + const config = defineConfig( + { + plugins: [ + { + name: 'my-plugin', + async transform({ setTransform }) { + setTransform('token', { format: 'my-format', value: '1', input: { test: 'present' } }); + }, + async build({ getTransforms, outputFile }) { + outputFile( + 'file.txt', + String(getTransforms({ id: 'token', format: 'my-format', input: { test: 'present' } })?.[0]?.value), + ); + }, + }, + ], + }, + { cwd: new URL('file:///') }, + ); + const { sources, tokens, resolver } = await parse( + [ + { + src: JSON.stringify({ + name: 'Resolver', + version: '2025.10', + resolutionOrder: [{ $ref: '#/modifiers/test' }], + modifiers: { + test: { + default: 'empty', + contexts: { empty: [{}], present: [{ token: { $type: 'number', $value: 1 } }] }, + }, + }, + }), + filename: new URL('file:///'), + }, + ], + { config }, + ); + + const { outputFiles } = await build(tokens, { config, resolver, sources }); + expect(outputFiles[0]).toEqual( + expect.objectContaining({ filename: 'file.txt', contents: '1', plugin: 'my-plugin' }), + ); + }); + it('simple transform', async () => { const config = defineConfig( { diff --git a/packages/plugin-css/test/__snapshots__/js.browser.test.ts.snap b/packages/plugin-css/test/__snapshots__/js.browser.test.ts.snap index 2867e715..43898146 100644 --- a/packages/plugin-css/test/__snapshots__/js.browser.test.ts.snap +++ b/packages/plugin-css/test/__snapshots__/js.browser.test.ts.snap @@ -470,67 +470,61 @@ exports[`Browser > generates correct CSS 1`] = ` --color-border-warning-secondary: var(--color-yellow-400); --color-border-warning-tertiary: var(--color-yellow-600); --color-brand-100: rgb(96.078% 96.078% 96.078%); - --color-icon-brand-on-brand: var(--color-brand-900); - --color-text-brand-on-brand: var(--color-brand-900); + --color-icon-brand: var(--color-brand-100); + --color-icon-brand-on-brand-secondary: var(--color-brand-100); + --color-icon-brand-on-brand-tertiary: var(--color-brand-100); + --color-text-brand: var(--color-brand-100); + --color-text-brand-on-brand-secondary: var(--color-brand-100); + --color-text-brand-on-brand-tertiary: var(--color-brand-100); --color-brand-200: rgb(90.196% 90.196% 90.196%); --color-brand-300: rgb(85.098% 85.098% 85.098%); + --color-icon-brand-secondary: var(--color-brand-300); + --color-text-brand-secondary: var(--color-brand-300); --color-brand-400: rgb(70.196% 70.196% 70.196%); - --color-icon-disabled: var(--color-brand-500); + --color-icon-brand-tertiary: var(--color-brand-400); --color-icon-disabled-on-disabled: var(--color-brand-400); - --color-text-disabled: var(--color-brand-500); + --color-text-brand-tertiary: var(--color-brand-400); --color-text-disabled-on-disabled: var(--color-brand-400); --color-brand-500: rgb(45.882% 45.882% 45.882%); - --color-icon-brand-tertiary: var(--color-brand-400); - --color-text-brand-tertiary: var(--color-brand-400); + --color-icon-disabled: var(--color-brand-500); + --color-text-disabled: var(--color-brand-500); --color-brand-600: rgb(26.667% 26.667% 26.667%); - --color-icon-brand-secondary: var(--color-brand-300); - --color-text-brand-secondary: var(--color-brand-300); --color-brand-700: rgb(21.961% 21.961% 21.961%); --color-brand-800: rgb(17.255% 17.255% 17.255%); - --color-icon-brand: var(--color-brand-100); - --color-icon-brand-on-brand-tertiary: var(--color-brand-100); - --color-text-brand: var(--color-brand-100); - --color-text-brand-on-brand-tertiary: var(--color-brand-100); --color-brand-900: rgb(11.765% 11.765% 11.765%); - --color-icon-brand-on-brand-secondary: var(--color-brand-100); - --color-text-brand-on-brand-secondary: var(--color-brand-100); + --color-icon-brand-on-brand: var(--color-brand-900); + --color-text-brand-on-brand: var(--color-brand-900); --color-brand-1000: rgb(6.6667% 6.6667% 6.6667%); --color-gray-100: rgb(96.078% 96.078% 96.078%); --color-gray-200: rgb(90.196% 90.196% 90.196%); --color-gray-300: rgb(85.098% 85.098% 85.098%); --color-gray-400: rgb(70.196% 70.196% 70.196%); - --color-icon-default-tertiary: var(--color-white-400); - --color-text-default-tertiary: var(--color-white-400); --color-gray-500: rgb(45.882% 45.882% 45.882%); - --color-icon-default-secondary: var(--color-white-500); - --color-text-default-secondary: var(--color-white-500); --color-gray-600: rgb(26.667% 26.667% 26.667%); --color-gray-700: rgb(21.961% 21.961% 21.961%); --color-gray-800: rgb(17.255% 17.255% 17.255%); --color-gray-900: rgb(11.765% 11.765% 11.765%); - --color-icon-default: var(--color-white-1000); - --color-text-default: var(--color-white-1000); --color-gray-1000: rgb(6.6667% 6.6667% 6.6667%); --color-green-100: rgb(92.157% 100% 93.333%); --color-icon-positive-on-positive: var(--color-green-100); + --color-icon-positive-on-positive-secondary: var(--color-green-100); + --color-icon-positive-on-positive-tertiary: var(--color-green-100); --color-text-positive-on-positive: var(--color-green-100); + --color-text-positive-on-positive-secondary: var(--color-green-100); + --color-text-positive-on-positive-tertiary: var(--color-green-100); --color-green-200: rgb(81.176% 96.863% 82.745%); + --color-icon-positive: var(--color-green-200); + --color-text-positive: var(--color-green-200); --color-green-300: rgb(68.627% 95.686% 77.647%); --color-green-400: rgb(52.157% 87.843% 63.922%); + --color-icon-positive-secondary: var(--color-green-400); + --color-text-positive-secondary: var(--color-green-400); --color-green-500: rgb(7.8431% 68.235% 36.078%); - --color-icon-positive-on-positive-tertiary: var(--color-green-100); + --color-green-600: rgb(0% 60% 31.765%); --color-icon-positive-tertiary: var(--color-green-600); --color-text-positive-tertiary: var(--color-green-600); - --color-green-600: rgb(0% 60% 31.765%); - --color-icon-positive-secondary: var(--color-green-400); - --color-text-positive-secondary: var(--color-green-400); --color-green-700: rgb(0% 50.196% 26.275%); --color-green-800: rgb(0.78431% 32.941% 17.647%); - --color-icon-positive: var(--color-green-200); - --color-icon-positive-on-positive-secondary: var(--color-green-100); - --color-text-positive: var(--color-green-200); - --color-text-positive-on-positive-secondary: var(--color-green-100); - --color-text-positive-on-positive-tertiary: var(--color-green-100); --color-green-900: rgb(0.78431% 25.098% 13.725%); --color-green-1000: rgb(2.3529% 17.647% 10.588%); --color-icon-danger: var(--color-red-200); @@ -539,6 +533,9 @@ exports[`Browser > generates correct CSS 1`] = ` --color-icon-danger-on-danger-tertiary: var(--color-red-100); --color-icon-danger-secondary: var(--color-red-400); --color-icon-danger-tertiary: var(--color-red-500); + --color-icon-default: var(--color-white-1000); + --color-icon-default-secondary: var(--color-white-500); + --color-icon-default-tertiary: var(--color-white-400); --color-icon-neutral: var(--color-slate-200); --color-icon-neutral-on-neutral: var(--color-slate-1000); --color-icon-neutral-on-neutral-secondary: var(--color-slate-100); @@ -563,36 +560,39 @@ exports[`Browser > generates correct CSS 1`] = ` --color-pink-1000: rgb(24.706% 8.2353% 21.176%); --color-red-100: rgb(99.608% 91.373% 90.588%); --color-text-danger-on-danger: var(--color-red-100); + --color-text-danger-on-danger-secondary: var(--color-red-100); + --color-text-danger-on-danger-tertiary: var(--color-red-100); --color-red-200: rgb(99.216% 82.745% 81.569%); + --color-text-danger: var(--color-red-200); --color-red-300: rgb(98.824% 70.196% 67.843%); --color-red-400: rgb(95.686% 46.667% 41.569%); + --color-text-danger-secondary: var(--color-red-400); --color-red-500: rgb(92.549% 13.333% 12.157%); --color-text-danger-tertiary: var(--color-red-500); --color-red-600: rgb(75.294% 5.8824% 4.7059%); - --color-text-danger-secondary: var(--color-red-400); --color-red-700: rgb(56.471% 4.3137% 3.5294%); - --color-text-danger: var(--color-red-200); - --color-text-danger-on-danger-secondary: var(--color-red-100); - --color-text-danger-on-danger-tertiary: var(--color-red-100); --color-red-800: rgb(41.176% 3.1373% 2.7451%); --color-red-900: rgb(30.196% 4.3137% 3.9216%); --color-red-1000: rgb(18.824% 2.3529% 1.1765%); --color-slate-100: rgb(95.294% 95.294% 95.294%); - --color-text-neutral-on-neutral: var(--color-slate-1000); + --color-text-neutral-on-neutral-secondary: var(--color-slate-100); + --color-text-neutral-on-neutral-tertiary: var(--color-slate-100); --color-slate-200: rgb(89.02% 89.02% 89.02%); + --color-text-neutral: var(--color-slate-200); --color-slate-300: rgb(80.392% 80.392% 80.392%); + --color-text-neutral-secondary: var(--color-slate-300); --color-slate-400: rgb(69.804% 69.804% 69.804%); + --color-text-neutral-tertiary: var(--color-slate-400); --color-slate-500: rgb(58.039% 58.039% 58.039%); --color-slate-600: rgb(46.275% 46.275% 46.275%); - --color-text-neutral-tertiary: var(--color-slate-400); --color-slate-700: rgb(35.294% 35.294% 35.294%); - --color-text-neutral-secondary: var(--color-slate-300); --color-slate-800: rgb(26.275% 26.275% 26.275%); - --color-text-neutral-on-neutral-tertiary: var(--color-slate-100); --color-slate-900: rgb(18.824% 18.824% 18.824%); - --color-text-neutral: var(--color-slate-200); - --color-text-neutral-on-neutral-secondary: var(--color-slate-100); --color-slate-1000: rgb(14.118% 14.118% 14.118%); + --color-text-neutral-on-neutral: var(--color-slate-1000); + --color-text-default: var(--color-white-1000); + --color-text-default-secondary: var(--color-white-500); + --color-text-default-tertiary: var(--color-white-400); --color-text-warning: var(--color-yellow-200); --color-text-warning-on-warning: var(--color-yellow-1000); --color-text-warning-on-warning-secondary: var(--color-yellow-100); @@ -867,67 +867,61 @@ exports[`Browser > generates correct CSS 1`] = ` --color-border-warning-secondary: var(--color-yellow-400); --color-border-warning-tertiary: var(--color-yellow-600); --color-brand-100: rgb(96.078% 96.078% 96.078%); - --color-icon-brand-on-brand: var(--color-brand-900); - --color-text-brand-on-brand: var(--color-brand-900); + --color-icon-brand: var(--color-brand-100); + --color-icon-brand-on-brand-secondary: var(--color-brand-100); + --color-icon-brand-on-brand-tertiary: var(--color-brand-100); + --color-text-brand: var(--color-brand-100); + --color-text-brand-on-brand-secondary: var(--color-brand-100); + --color-text-brand-on-brand-tertiary: var(--color-brand-100); --color-brand-200: rgb(90.196% 90.196% 90.196%); --color-brand-300: rgb(85.098% 85.098% 85.098%); + --color-icon-brand-secondary: var(--color-brand-300); + --color-text-brand-secondary: var(--color-brand-300); --color-brand-400: rgb(70.196% 70.196% 70.196%); - --color-icon-disabled: var(--color-brand-500); + --color-icon-brand-tertiary: var(--color-brand-400); --color-icon-disabled-on-disabled: var(--color-brand-400); - --color-text-disabled: var(--color-brand-500); + --color-text-brand-tertiary: var(--color-brand-400); --color-text-disabled-on-disabled: var(--color-brand-400); --color-brand-500: rgb(45.882% 45.882% 45.882%); - --color-icon-brand-tertiary: var(--color-brand-400); - --color-text-brand-tertiary: var(--color-brand-400); + --color-icon-disabled: var(--color-brand-500); + --color-text-disabled: var(--color-brand-500); --color-brand-600: rgb(26.667% 26.667% 26.667%); - --color-icon-brand-secondary: var(--color-brand-300); - --color-text-brand-secondary: var(--color-brand-300); --color-brand-700: rgb(21.961% 21.961% 21.961%); --color-brand-800: rgb(17.255% 17.255% 17.255%); - --color-icon-brand: var(--color-brand-100); - --color-icon-brand-on-brand-tertiary: var(--color-brand-100); - --color-text-brand: var(--color-brand-100); - --color-text-brand-on-brand-tertiary: var(--color-brand-100); --color-brand-900: rgb(11.765% 11.765% 11.765%); - --color-icon-brand-on-brand-secondary: var(--color-brand-100); - --color-text-brand-on-brand-secondary: var(--color-brand-100); + --color-icon-brand-on-brand: var(--color-brand-900); + --color-text-brand-on-brand: var(--color-brand-900); --color-brand-1000: rgb(6.6667% 6.6667% 6.6667%); --color-gray-100: rgb(96.078% 96.078% 96.078%); --color-gray-200: rgb(90.196% 90.196% 90.196%); --color-gray-300: rgb(85.098% 85.098% 85.098%); --color-gray-400: rgb(70.196% 70.196% 70.196%); - --color-icon-default-tertiary: var(--color-white-400); - --color-text-default-tertiary: var(--color-white-400); --color-gray-500: rgb(45.882% 45.882% 45.882%); - --color-icon-default-secondary: var(--color-white-500); - --color-text-default-secondary: var(--color-white-500); --color-gray-600: rgb(26.667% 26.667% 26.667%); --color-gray-700: rgb(21.961% 21.961% 21.961%); --color-gray-800: rgb(17.255% 17.255% 17.255%); --color-gray-900: rgb(11.765% 11.765% 11.765%); - --color-icon-default: var(--color-white-1000); - --color-text-default: var(--color-white-1000); --color-gray-1000: rgb(6.6667% 6.6667% 6.6667%); --color-green-100: rgb(92.157% 100% 93.333%); --color-icon-positive-on-positive: var(--color-green-100); + --color-icon-positive-on-positive-secondary: var(--color-green-100); + --color-icon-positive-on-positive-tertiary: var(--color-green-100); --color-text-positive-on-positive: var(--color-green-100); + --color-text-positive-on-positive-secondary: var(--color-green-100); + --color-text-positive-on-positive-tertiary: var(--color-green-100); --color-green-200: rgb(81.176% 96.863% 82.745%); + --color-icon-positive: var(--color-green-200); + --color-text-positive: var(--color-green-200); --color-green-300: rgb(68.627% 95.686% 77.647%); --color-green-400: rgb(52.157% 87.843% 63.922%); + --color-icon-positive-secondary: var(--color-green-400); + --color-text-positive-secondary: var(--color-green-400); --color-green-500: rgb(7.8431% 68.235% 36.078%); - --color-icon-positive-on-positive-tertiary: var(--color-green-100); + --color-green-600: rgb(0% 60% 31.765%); --color-icon-positive-tertiary: var(--color-green-600); --color-text-positive-tertiary: var(--color-green-600); - --color-green-600: rgb(0% 60% 31.765%); - --color-icon-positive-secondary: var(--color-green-400); - --color-text-positive-secondary: var(--color-green-400); --color-green-700: rgb(0% 50.196% 26.275%); --color-green-800: rgb(0.78431% 32.941% 17.647%); - --color-icon-positive: var(--color-green-200); - --color-icon-positive-on-positive-secondary: var(--color-green-100); - --color-text-positive: var(--color-green-200); - --color-text-positive-on-positive-secondary: var(--color-green-100); - --color-text-positive-on-positive-tertiary: var(--color-green-100); --color-green-900: rgb(0.78431% 25.098% 13.725%); --color-green-1000: rgb(2.3529% 17.647% 10.588%); --color-icon-danger: var(--color-red-200); @@ -936,6 +930,9 @@ exports[`Browser > generates correct CSS 1`] = ` --color-icon-danger-on-danger-tertiary: var(--color-red-100); --color-icon-danger-secondary: var(--color-red-400); --color-icon-danger-tertiary: var(--color-red-500); + --color-icon-default: var(--color-white-1000); + --color-icon-default-secondary: var(--color-white-500); + --color-icon-default-tertiary: var(--color-white-400); --color-icon-neutral: var(--color-slate-200); --color-icon-neutral-on-neutral: var(--color-slate-1000); --color-icon-neutral-on-neutral-secondary: var(--color-slate-100); @@ -960,36 +957,39 @@ exports[`Browser > generates correct CSS 1`] = ` --color-pink-1000: rgb(24.706% 8.2353% 21.176%); --color-red-100: rgb(99.608% 91.373% 90.588%); --color-text-danger-on-danger: var(--color-red-100); + --color-text-danger-on-danger-secondary: var(--color-red-100); + --color-text-danger-on-danger-tertiary: var(--color-red-100); --color-red-200: rgb(99.216% 82.745% 81.569%); + --color-text-danger: var(--color-red-200); --color-red-300: rgb(98.824% 70.196% 67.843%); --color-red-400: rgb(95.686% 46.667% 41.569%); + --color-text-danger-secondary: var(--color-red-400); --color-red-500: rgb(92.549% 13.333% 12.157%); --color-text-danger-tertiary: var(--color-red-500); --color-red-600: rgb(75.294% 5.8824% 4.7059%); - --color-text-danger-secondary: var(--color-red-400); --color-red-700: rgb(56.471% 4.3137% 3.5294%); - --color-text-danger: var(--color-red-200); - --color-text-danger-on-danger-secondary: var(--color-red-100); - --color-text-danger-on-danger-tertiary: var(--color-red-100); --color-red-800: rgb(41.176% 3.1373% 2.7451%); --color-red-900: rgb(30.196% 4.3137% 3.9216%); --color-red-1000: rgb(18.824% 2.3529% 1.1765%); --color-slate-100: rgb(95.294% 95.294% 95.294%); - --color-text-neutral-on-neutral: var(--color-slate-1000); + --color-text-neutral-on-neutral-secondary: var(--color-slate-100); + --color-text-neutral-on-neutral-tertiary: var(--color-slate-100); --color-slate-200: rgb(89.02% 89.02% 89.02%); + --color-text-neutral: var(--color-slate-200); --color-slate-300: rgb(80.392% 80.392% 80.392%); + --color-text-neutral-secondary: var(--color-slate-300); --color-slate-400: rgb(69.804% 69.804% 69.804%); + --color-text-neutral-tertiary: var(--color-slate-400); --color-slate-500: rgb(58.039% 58.039% 58.039%); --color-slate-600: rgb(46.275% 46.275% 46.275%); - --color-text-neutral-tertiary: var(--color-slate-400); --color-slate-700: rgb(35.294% 35.294% 35.294%); - --color-text-neutral-secondary: var(--color-slate-300); --color-slate-800: rgb(26.275% 26.275% 26.275%); - --color-text-neutral-on-neutral-tertiary: var(--color-slate-100); --color-slate-900: rgb(18.824% 18.824% 18.824%); - --color-text-neutral: var(--color-slate-200); - --color-text-neutral-on-neutral-secondary: var(--color-slate-100); --color-slate-1000: rgb(14.118% 14.118% 14.118%); + --color-text-neutral-on-neutral: var(--color-slate-1000); + --color-text-default: var(--color-white-1000); + --color-text-default-secondary: var(--color-white-500); + --color-text-default-tertiary: var(--color-white-400); --color-text-warning: var(--color-yellow-200); --color-text-warning-on-warning: var(--color-yellow-1000); --color-text-warning-on-warning-secondary: var(--color-yellow-100); diff --git a/packages/plugin-css/test/fixtures/ds-figma-sds/sds.want.css b/packages/plugin-css/test/fixtures/ds-figma-sds/sds.want.css index cd997323..20beaab4 100644 --- a/packages/plugin-css/test/fixtures/ds-figma-sds/sds.want.css +++ b/packages/plugin-css/test/fixtures/ds-figma-sds/sds.want.css @@ -466,67 +466,61 @@ --color-border-warning-secondary: var(--color-yellow-400); --color-border-warning-tertiary: var(--color-yellow-600); --color-brand-100: rgb(96.078% 96.078% 96.078%); - --color-icon-brand-on-brand: var(--color-brand-900); - --color-text-brand-on-brand: var(--color-brand-900); + --color-icon-brand: var(--color-brand-100); + --color-icon-brand-on-brand-secondary: var(--color-brand-100); + --color-icon-brand-on-brand-tertiary: var(--color-brand-100); + --color-text-brand: var(--color-brand-100); + --color-text-brand-on-brand-secondary: var(--color-brand-100); + --color-text-brand-on-brand-tertiary: var(--color-brand-100); --color-brand-200: rgb(90.196% 90.196% 90.196%); --color-brand-300: rgb(85.098% 85.098% 85.098%); + --color-icon-brand-secondary: var(--color-brand-300); + --color-text-brand-secondary: var(--color-brand-300); --color-brand-400: rgb(70.196% 70.196% 70.196%); - --color-icon-disabled: var(--color-brand-500); + --color-icon-brand-tertiary: var(--color-brand-400); --color-icon-disabled-on-disabled: var(--color-brand-400); - --color-text-disabled: var(--color-brand-500); + --color-text-brand-tertiary: var(--color-brand-400); --color-text-disabled-on-disabled: var(--color-brand-400); --color-brand-500: rgb(45.882% 45.882% 45.882%); - --color-icon-brand-tertiary: var(--color-brand-400); - --color-text-brand-tertiary: var(--color-brand-400); + --color-icon-disabled: var(--color-brand-500); + --color-text-disabled: var(--color-brand-500); --color-brand-600: rgb(26.667% 26.667% 26.667%); - --color-icon-brand-secondary: var(--color-brand-300); - --color-text-brand-secondary: var(--color-brand-300); --color-brand-700: rgb(21.961% 21.961% 21.961%); --color-brand-800: rgb(17.255% 17.255% 17.255%); - --color-icon-brand: var(--color-brand-100); - --color-icon-brand-on-brand-tertiary: var(--color-brand-100); - --color-text-brand: var(--color-brand-100); - --color-text-brand-on-brand-tertiary: var(--color-brand-100); --color-brand-900: rgb(11.765% 11.765% 11.765%); - --color-icon-brand-on-brand-secondary: var(--color-brand-100); - --color-text-brand-on-brand-secondary: var(--color-brand-100); + --color-icon-brand-on-brand: var(--color-brand-900); + --color-text-brand-on-brand: var(--color-brand-900); --color-brand-1000: rgb(6.6667% 6.6667% 6.6667%); --color-gray-100: rgb(96.078% 96.078% 96.078%); --color-gray-200: rgb(90.196% 90.196% 90.196%); --color-gray-300: rgb(85.098% 85.098% 85.098%); --color-gray-400: rgb(70.196% 70.196% 70.196%); - --color-icon-default-tertiary: var(--color-white-400); - --color-text-default-tertiary: var(--color-white-400); --color-gray-500: rgb(45.882% 45.882% 45.882%); - --color-icon-default-secondary: var(--color-white-500); - --color-text-default-secondary: var(--color-white-500); --color-gray-600: rgb(26.667% 26.667% 26.667%); --color-gray-700: rgb(21.961% 21.961% 21.961%); --color-gray-800: rgb(17.255% 17.255% 17.255%); --color-gray-900: rgb(11.765% 11.765% 11.765%); - --color-icon-default: var(--color-white-1000); - --color-text-default: var(--color-white-1000); --color-gray-1000: rgb(6.6667% 6.6667% 6.6667%); --color-green-100: rgb(92.157% 100% 93.333%); --color-icon-positive-on-positive: var(--color-green-100); + --color-icon-positive-on-positive-secondary: var(--color-green-100); + --color-icon-positive-on-positive-tertiary: var(--color-green-100); --color-text-positive-on-positive: var(--color-green-100); + --color-text-positive-on-positive-secondary: var(--color-green-100); + --color-text-positive-on-positive-tertiary: var(--color-green-100); --color-green-200: rgb(81.176% 96.863% 82.745%); + --color-icon-positive: var(--color-green-200); + --color-text-positive: var(--color-green-200); --color-green-300: rgb(68.627% 95.686% 77.647%); --color-green-400: rgb(52.157% 87.843% 63.922%); + --color-icon-positive-secondary: var(--color-green-400); + --color-text-positive-secondary: var(--color-green-400); --color-green-500: rgb(7.8431% 68.235% 36.078%); - --color-icon-positive-on-positive-tertiary: var(--color-green-100); + --color-green-600: rgb(0% 60% 31.765%); --color-icon-positive-tertiary: var(--color-green-600); --color-text-positive-tertiary: var(--color-green-600); - --color-green-600: rgb(0% 60% 31.765%); - --color-icon-positive-secondary: var(--color-green-400); - --color-text-positive-secondary: var(--color-green-400); --color-green-700: rgb(0% 50.196% 26.275%); --color-green-800: rgb(0.78431% 32.941% 17.647%); - --color-icon-positive: var(--color-green-200); - --color-icon-positive-on-positive-secondary: var(--color-green-100); - --color-text-positive: var(--color-green-200); - --color-text-positive-on-positive-secondary: var(--color-green-100); - --color-text-positive-on-positive-tertiary: var(--color-green-100); --color-green-900: rgb(0.78431% 25.098% 13.725%); --color-green-1000: rgb(2.3529% 17.647% 10.588%); --color-icon-danger: var(--color-red-200); @@ -535,6 +529,9 @@ --color-icon-danger-on-danger-tertiary: var(--color-red-100); --color-icon-danger-secondary: var(--color-red-400); --color-icon-danger-tertiary: var(--color-red-500); + --color-icon-default: var(--color-white-1000); + --color-icon-default-secondary: var(--color-white-500); + --color-icon-default-tertiary: var(--color-white-400); --color-icon-neutral: var(--color-slate-200); --color-icon-neutral-on-neutral: var(--color-slate-1000); --color-icon-neutral-on-neutral-secondary: var(--color-slate-100); @@ -559,36 +556,39 @@ --color-pink-1000: rgb(24.706% 8.2353% 21.176%); --color-red-100: rgb(99.608% 91.373% 90.588%); --color-text-danger-on-danger: var(--color-red-100); + --color-text-danger-on-danger-secondary: var(--color-red-100); + --color-text-danger-on-danger-tertiary: var(--color-red-100); --color-red-200: rgb(99.216% 82.745% 81.569%); + --color-text-danger: var(--color-red-200); --color-red-300: rgb(98.824% 70.196% 67.843%); --color-red-400: rgb(95.686% 46.667% 41.569%); + --color-text-danger-secondary: var(--color-red-400); --color-red-500: rgb(92.549% 13.333% 12.157%); --color-text-danger-tertiary: var(--color-red-500); --color-red-600: rgb(75.294% 5.8824% 4.7059%); - --color-text-danger-secondary: var(--color-red-400); --color-red-700: rgb(56.471% 4.3137% 3.5294%); - --color-text-danger: var(--color-red-200); - --color-text-danger-on-danger-secondary: var(--color-red-100); - --color-text-danger-on-danger-tertiary: var(--color-red-100); --color-red-800: rgb(41.176% 3.1373% 2.7451%); --color-red-900: rgb(30.196% 4.3137% 3.9216%); --color-red-1000: rgb(18.824% 2.3529% 1.1765%); --color-slate-100: rgb(95.294% 95.294% 95.294%); - --color-text-neutral-on-neutral: var(--color-slate-1000); + --color-text-neutral-on-neutral-secondary: var(--color-slate-100); + --color-text-neutral-on-neutral-tertiary: var(--color-slate-100); --color-slate-200: rgb(89.02% 89.02% 89.02%); + --color-text-neutral: var(--color-slate-200); --color-slate-300: rgb(80.392% 80.392% 80.392%); + --color-text-neutral-secondary: var(--color-slate-300); --color-slate-400: rgb(69.804% 69.804% 69.804%); + --color-text-neutral-tertiary: var(--color-slate-400); --color-slate-500: rgb(58.039% 58.039% 58.039%); --color-slate-600: rgb(46.275% 46.275% 46.275%); - --color-text-neutral-tertiary: var(--color-slate-400); --color-slate-700: rgb(35.294% 35.294% 35.294%); - --color-text-neutral-secondary: var(--color-slate-300); --color-slate-800: rgb(26.275% 26.275% 26.275%); - --color-text-neutral-on-neutral-tertiary: var(--color-slate-100); --color-slate-900: rgb(18.824% 18.824% 18.824%); - --color-text-neutral: var(--color-slate-200); - --color-text-neutral-on-neutral-secondary: var(--color-slate-100); --color-slate-1000: rgb(14.118% 14.118% 14.118%); + --color-text-neutral-on-neutral: var(--color-slate-1000); + --color-text-default: var(--color-white-1000); + --color-text-default-secondary: var(--color-white-500); + --color-text-default-tertiary: var(--color-white-400); --color-text-warning: var(--color-yellow-200); --color-text-warning-on-warning: var(--color-yellow-1000); --color-text-warning-on-warning-secondary: var(--color-yellow-100); diff --git a/packages/plugin-css/test/fixtures/ds-github-primer/primer.want.css b/packages/plugin-css/test/fixtures/ds-github-primer/primer.want.css index 6cce8aa8..3edc2c1c 100644 --- a/packages/plugin-css/test/fixtures/ds-github-primer/primer.want.css +++ b/packages/plugin-css/test/fixtures/ds-github-primer/primer.want.css @@ -4384,48 +4384,54 @@ --avatar-border-color: var(--border-color-translucent); --avatar-shadow: 0 0 0 2px var(--base-color-neutral-0); --base-color-black: rgb(0.39216% 1.5686% 3.5294%); - --base-color-neutral-13: var(--base-color-white); - --bg-color-black: var(--base-color-neutral-13); - --border-color-translucent: var(--base-color-neutral-13); - --button-danger-border-color-active: var(--button-danger-border-color-hover); - --button-danger-border-color-hover: var(--button-primary-border-color-rest); - --button-default-shadow-resting: 0 1px 0 0 var(--base-color-neutral-13); - --button-outline-border-color-active: var(--button-outline-border-color-hover); - --button-outline-border-color-hover: var(--button-primary-border-color-hover); - --button-primary-border-color-active: var(--button-primary-border-color-rest); - --button-primary-border-color-hover: var(--button-primary-border-color-rest); - --button-primary-border-color-rest: var(--border-color-translucent); + --base-color-inset: var(--base-color-black); + --base-color-neutral-0: var(--base-color-black); + --bg-color-default: var(--base-color-neutral-0); + --bg-color-white: var(--base-color-neutral-0); + --button-danger-fg-color-active: var(--base-color-neutral-0); + --button-danger-fg-color-hover: var(--base-color-neutral-0); + --button-danger-icon-color-hover: var(--base-color-neutral-0); + --button-outline-fg-color-active: var(--base-color-neutral-0); + --button-outline-fg-color-hover: var(--base-color-neutral-0); + --button-primary-fg-color-disabled: var(--base-color-neutral-0); + --button-primary-fg-color-rest: var(--fg-color-white); + --button-primary-icon-color-rest: var(--fg-color-white); + --button-counter-danger-bg-color-hover: var(--base-color-neutral-0); + --button-counter-danger-fg-color-hover: var(--base-color-neutral-0); + --button-counter-outline-bg-color-hover: var(--base-color-neutral-0); + --button-counter-outline-fg-color-hover: var(--base-color-neutral-0); --button-keybinding-hint-danger-bg-color-active: var(--base-color-black); --button-keybinding-hint-danger-bg-color-hover: var(--base-color-black); - --button-keybinding-hint-danger-border-color-active: var(--button-keybinding-hint-danger-border-color-hover); - --button-keybinding-hint-danger-border-color-hover: var(--border-color-translucent); - --button-keybinding-hint-primary-border-color-rest: var(--border-color-translucent); - --code-mirror-cursor-fg-color: var(--fg-color-default); - --code-mirror-fg-color: var(--fg-color-default); - --code-mirror-matching-bracket-fg-color: var(--fg-color-default); - --code-mirror-syntax-fg-color-comment: var(--base-color-neutral-13); - --color-ansi-black: var(--base-color-neutral-13); - --color-prettylights-syntax-markup-bold: var(--base-color-neutral-13); - --color-prettylights-syntax-markup-italic: var(--base-color-neutral-13); - --color-prettylights-syntax-storage-modifier-import: var(--base-color-neutral-13); + --button-keybinding-hint-danger-fg-color-active: var(--fg-color-on-emphasis); + --button-keybinding-hint-danger-fg-color-hover: var(--fg-color-on-emphasis); + --button-keybinding-hint-primary-fg-color-disabled: var(--button-primary-fg-color-disabled); + --button-keybinding-hint-primary-fg-color-rest: var(--fg-color-on-emphasis); + --card-bg-color: var(--bg-color-default); + --code-mirror-bg-color: var(--bg-color-default); + --code-mirror-gutter-marker-fg-color-default: var(--bg-color-default); + --code-mirror-gutters-bg-color: var(--bg-color-default); + --code-mirror-lines-bg-color: var(--bg-color-default); --contribution-default-border-color-0: var(--base-color-black); --contribution-default-border-color-1: var(--contribution-default-border-color-0); --contribution-default-border-color-2: var(--contribution-default-border-color-0); --contribution-default-border-color-3: var(--contribution-default-border-color-0); --contribution-default-border-color-4: var(--contribution-default-border-color-0); --contribution-halloween-bg-color-4: var(--base-color-black); - --diff-blob-addition-line-fg-color: var(--fg-color-default); - --diff-blob-addition-num-fg-color: var(--fg-color-default); - --diff-blob-addition-word-fg-color: var(--fg-color-default); - --diff-blob-deletion-line-fg-color: var(--fg-color-default); - --diff-blob-deletion-num-fg-color: var(--fg-color-default); - --diff-blob-deletion-word-fg-color: var(--fg-color-default); - --diff-blob-hunk-num-fg-color-rest: var(--fg-color-default); - --fg-color-black: var(--base-color-neutral-13); - --fg-color-default: var(--base-color-neutral-13); - --shadow-inset: inset 0 1px 0 0 var(--base-color-neutral-13); - --shadow-resting-small: 0 1px 1px 0 var(--base-color-neutral-13), 0 1px 3px 0 var(--base-color-neutral-13); - --shadow-resting-xsmall: 0 1px 1px 0 var(--base-color-neutral-13); + --control-checked-fg-color-disabled: var(--fg-color-on-emphasis); + --control-checked-fg-color-rest: var(--fg-color-on-emphasis); + --control-knob-bg-color-checked: var(--base-color-neutral-0); + --control-knob-bg-color-rest: var(--base-color-neutral-0); + --control-track-fg-color-disabled: var(--fg-color-on-emphasis); + --dashboard-bg-color: var(--bg-color-default); + --diff-blob-hunk-num-fg-color-hover: var(--fg-color-on-emphasis); + --fg-color-on-emphasis: var(--base-color-neutral-0); + --fg-color-on-inverse: var(--base-color-neutral-0); + --fg-color-white: var(--base-color-neutral-0); + --header-fg-color-default: var(--base-color-neutral-0); + --header-fg-color-logo: var(--base-color-neutral-0); + --overlay-bg-color: var(--base-color-neutral-0); + --side-nav-bg-color-selected: var(--base-color-neutral-0); + --tooltip-fg-color: var(--fg-color-on-emphasis); --base-color-blue-0: rgb(79.216% 90.98% 100%); --bg-color-accent-muted: var(--base-color-blue-0); --diff-blob-hunk-line-bg-color: var(--bg-color-accent-muted); @@ -4531,46 +4537,6 @@ --button-counter-primary-bg-color-rest: var(--base-color-green-9); --button-keybinding-hint-primary-bg-color-disabled: var(--button-counter-primary-bg-color-rest); --button-keybinding-hint-primary-bg-color-rest: var(--button-counter-primary-bg-color-rest); - --base-color-inset: var(--base-color-black); - --base-color-neutral-0: var(--base-color-black); - --bg-color-default: var(--base-color-neutral-0); - --bg-color-white: var(--base-color-neutral-0); - --button-danger-fg-color-active: var(--base-color-neutral-0); - --button-danger-fg-color-hover: var(--base-color-neutral-0); - --button-danger-icon-color-hover: var(--base-color-neutral-0); - --button-outline-fg-color-active: var(--base-color-neutral-0); - --button-outline-fg-color-hover: var(--base-color-neutral-0); - --button-primary-fg-color-disabled: var(--base-color-neutral-0); - --button-primary-fg-color-rest: var(--fg-color-white); - --button-primary-icon-color-rest: var(--fg-color-white); - --button-counter-danger-bg-color-hover: var(--base-color-neutral-0); - --button-counter-danger-fg-color-hover: var(--base-color-neutral-0); - --button-counter-outline-bg-color-hover: var(--base-color-neutral-0); - --button-counter-outline-fg-color-hover: var(--base-color-neutral-0); - --button-keybinding-hint-danger-fg-color-active: var(--fg-color-on-emphasis); - --button-keybinding-hint-danger-fg-color-hover: var(--fg-color-on-emphasis); - --button-keybinding-hint-primary-fg-color-disabled: var(--button-primary-fg-color-disabled); - --button-keybinding-hint-primary-fg-color-rest: var(--fg-color-on-emphasis); - --card-bg-color: var(--bg-color-default); - --code-mirror-bg-color: var(--bg-color-default); - --code-mirror-gutter-marker-fg-color-default: var(--bg-color-default); - --code-mirror-gutters-bg-color: var(--bg-color-default); - --code-mirror-lines-bg-color: var(--bg-color-default); - --control-checked-fg-color-disabled: var(--fg-color-on-emphasis); - --control-checked-fg-color-rest: var(--fg-color-on-emphasis); - --control-knob-bg-color-checked: var(--base-color-neutral-0); - --control-knob-bg-color-rest: var(--base-color-neutral-0); - --control-track-fg-color-disabled: var(--fg-color-on-emphasis); - --dashboard-bg-color: var(--bg-color-default); - --diff-blob-hunk-num-fg-color-hover: var(--fg-color-on-emphasis); - --fg-color-on-emphasis: var(--base-color-neutral-0); - --fg-color-on-inverse: var(--base-color-neutral-0); - --fg-color-white: var(--base-color-neutral-0); - --header-fg-color-default: var(--base-color-neutral-0); - --header-fg-color-logo: var(--base-color-neutral-0); - --overlay-bg-color: var(--base-color-neutral-0); - --side-nav-bg-color-selected: var(--base-color-neutral-0); - --tooltip-fg-color: var(--fg-color-on-emphasis); --base-color-neutral-1: rgb(5.098% 6.6667% 9.0196%); --bg-color-inset: var(--bg-color-muted); --bg-color-muted: var(--base-color-neutral-1); @@ -4728,6 +4694,40 @@ --shadow-floating-legacy: 0 6px 12px -3px var(--base-color-neutral-12), 0 6px 18px 0 var(--base-color-neutral-12); --shadow-resting-medium: 0 1px 1px 0 var(--base-color-neutral-12), 0 3px 6px 0 var(--base-color-neutral-12); --tooltip-bg-color: var(--bg-color-emphasis); + --base-color-neutral-13: var(--base-color-white); + --bg-color-black: var(--base-color-neutral-13); + --border-color-translucent: var(--base-color-neutral-13); + --button-danger-border-color-active: var(--button-danger-border-color-hover); + --button-danger-border-color-hover: var(--button-primary-border-color-rest); + --button-default-shadow-resting: 0 1px 0 0 var(--base-color-neutral-13); + --button-outline-border-color-active: var(--button-outline-border-color-hover); + --button-outline-border-color-hover: var(--button-primary-border-color-hover); + --button-primary-border-color-active: var(--button-primary-border-color-rest); + --button-primary-border-color-hover: var(--button-primary-border-color-rest); + --button-primary-border-color-rest: var(--border-color-translucent); + --button-keybinding-hint-danger-border-color-active: var(--button-keybinding-hint-danger-border-color-hover); + --button-keybinding-hint-danger-border-color-hover: var(--border-color-translucent); + --button-keybinding-hint-primary-border-color-rest: var(--border-color-translucent); + --code-mirror-cursor-fg-color: var(--fg-color-default); + --code-mirror-fg-color: var(--fg-color-default); + --code-mirror-matching-bracket-fg-color: var(--fg-color-default); + --code-mirror-syntax-fg-color-comment: var(--base-color-neutral-13); + --color-ansi-black: var(--base-color-neutral-13); + --color-prettylights-syntax-markup-bold: var(--base-color-neutral-13); + --color-prettylights-syntax-markup-italic: var(--base-color-neutral-13); + --color-prettylights-syntax-storage-modifier-import: var(--base-color-neutral-13); + --diff-blob-addition-line-fg-color: var(--fg-color-default); + --diff-blob-addition-num-fg-color: var(--fg-color-default); + --diff-blob-addition-word-fg-color: var(--fg-color-default); + --diff-blob-deletion-line-fg-color: var(--fg-color-default); + --diff-blob-deletion-num-fg-color: var(--fg-color-default); + --diff-blob-deletion-word-fg-color: var(--fg-color-default); + --diff-blob-hunk-num-fg-color-rest: var(--fg-color-default); + --fg-color-black: var(--base-color-neutral-13); + --fg-color-default: var(--base-color-neutral-13); + --shadow-inset: inset 0 1px 0 0 var(--base-color-neutral-13); + --shadow-resting-small: 0 1px 1px 0 var(--base-color-neutral-13), 0 1px 3px 0 var(--base-color-neutral-13); + --shadow-resting-xsmall: 0 1px 1px 0 var(--base-color-neutral-13); --base-color-orange-0: rgb(100% 87.451% 71.373%); --bg-color-severe-muted: var(--base-color-orange-0); --base-color-orange-1: rgb(100% 77.647% 50.196%); @@ -5843,48 +5843,54 @@ --avatar-border-color: var(--border-color-translucent); --avatar-shadow: 0 0 0 2px var(--base-color-neutral-0); --base-color-black: rgb(0.39216% 1.5686% 3.5294%); - --base-color-neutral-13: var(--base-color-white); - --bg-color-black: var(--base-color-neutral-13); - --border-color-translucent: var(--base-color-neutral-13); - --button-danger-border-color-active: var(--button-danger-border-color-hover); - --button-danger-border-color-hover: var(--button-primary-border-color-rest); - --button-default-shadow-resting: 0 1px 0 0 var(--base-color-neutral-13); - --button-outline-border-color-active: var(--button-outline-border-color-hover); - --button-outline-border-color-hover: var(--button-primary-border-color-hover); - --button-primary-border-color-active: var(--button-primary-border-color-rest); - --button-primary-border-color-hover: var(--button-primary-border-color-rest); - --button-primary-border-color-rest: var(--border-color-translucent); + --base-color-inset: var(--base-color-black); + --base-color-neutral-0: var(--base-color-black); + --bg-color-default: var(--base-color-neutral-0); + --bg-color-white: var(--base-color-neutral-0); + --button-danger-fg-color-active: var(--base-color-neutral-0); + --button-danger-fg-color-hover: var(--base-color-neutral-0); + --button-danger-icon-color-hover: var(--base-color-neutral-0); + --button-outline-fg-color-active: var(--base-color-neutral-0); + --button-outline-fg-color-hover: var(--base-color-neutral-0); + --button-primary-fg-color-disabled: var(--base-color-neutral-0); + --button-primary-fg-color-rest: var(--fg-color-white); + --button-primary-icon-color-rest: var(--fg-color-white); + --button-counter-danger-bg-color-hover: var(--base-color-neutral-0); + --button-counter-danger-fg-color-hover: var(--base-color-neutral-0); + --button-counter-outline-bg-color-hover: var(--base-color-neutral-0); + --button-counter-outline-fg-color-hover: var(--base-color-neutral-0); --button-keybinding-hint-danger-bg-color-active: var(--base-color-black); --button-keybinding-hint-danger-bg-color-hover: var(--base-color-black); - --button-keybinding-hint-danger-border-color-active: var(--button-keybinding-hint-danger-border-color-hover); - --button-keybinding-hint-danger-border-color-hover: var(--border-color-translucent); - --button-keybinding-hint-primary-border-color-rest: var(--border-color-translucent); - --code-mirror-cursor-fg-color: var(--fg-color-default); - --code-mirror-fg-color: var(--fg-color-default); - --code-mirror-matching-bracket-fg-color: var(--fg-color-default); - --code-mirror-syntax-fg-color-comment: var(--base-color-neutral-13); - --color-ansi-black: var(--base-color-neutral-13); - --color-prettylights-syntax-markup-bold: var(--base-color-neutral-13); - --color-prettylights-syntax-markup-italic: var(--base-color-neutral-13); - --color-prettylights-syntax-storage-modifier-import: var(--base-color-neutral-13); + --button-keybinding-hint-danger-fg-color-active: var(--fg-color-on-emphasis); + --button-keybinding-hint-danger-fg-color-hover: var(--fg-color-on-emphasis); + --button-keybinding-hint-primary-fg-color-disabled: var(--button-primary-fg-color-disabled); + --button-keybinding-hint-primary-fg-color-rest: var(--fg-color-on-emphasis); + --card-bg-color: var(--bg-color-default); + --code-mirror-bg-color: var(--bg-color-default); + --code-mirror-gutter-marker-fg-color-default: var(--bg-color-default); + --code-mirror-gutters-bg-color: var(--bg-color-default); + --code-mirror-lines-bg-color: var(--bg-color-default); --contribution-default-border-color-0: var(--base-color-black); --contribution-default-border-color-1: var(--contribution-default-border-color-0); --contribution-default-border-color-2: var(--contribution-default-border-color-0); --contribution-default-border-color-3: var(--contribution-default-border-color-0); --contribution-default-border-color-4: var(--contribution-default-border-color-0); --contribution-halloween-bg-color-4: var(--base-color-black); - --diff-blob-addition-line-fg-color: var(--fg-color-default); - --diff-blob-addition-num-fg-color: var(--fg-color-default); - --diff-blob-addition-word-fg-color: var(--fg-color-default); - --diff-blob-deletion-line-fg-color: var(--fg-color-default); - --diff-blob-deletion-num-fg-color: var(--fg-color-default); - --diff-blob-deletion-word-fg-color: var(--fg-color-default); - --diff-blob-hunk-num-fg-color-rest: var(--fg-color-default); - --fg-color-black: var(--base-color-neutral-13); - --fg-color-default: var(--base-color-neutral-13); - --shadow-inset: inset 0 1px 0 0 var(--base-color-neutral-13); - --shadow-resting-small: 0 1px 1px 0 var(--base-color-neutral-13), 0 1px 3px 0 var(--base-color-neutral-13); - --shadow-resting-xsmall: 0 1px 1px 0 var(--base-color-neutral-13); + --control-checked-fg-color-disabled: var(--fg-color-on-emphasis); + --control-checked-fg-color-rest: var(--fg-color-on-emphasis); + --control-knob-bg-color-checked: var(--base-color-neutral-0); + --control-knob-bg-color-rest: var(--base-color-neutral-0); + --control-track-fg-color-disabled: var(--fg-color-on-emphasis); + --dashboard-bg-color: var(--bg-color-default); + --diff-blob-hunk-num-fg-color-hover: var(--fg-color-on-emphasis); + --fg-color-on-emphasis: var(--base-color-neutral-0); + --fg-color-on-inverse: var(--base-color-neutral-0); + --fg-color-white: var(--base-color-neutral-0); + --header-fg-color-default: var(--base-color-neutral-0); + --header-fg-color-logo: var(--base-color-neutral-0); + --overlay-bg-color: var(--base-color-neutral-0); + --side-nav-bg-color-selected: var(--base-color-neutral-0); + --tooltip-fg-color: var(--fg-color-on-emphasis); --base-color-blue-0: rgb(79.216% 91.765% 100%); --bg-color-accent-muted: var(--base-color-blue-0); --diff-blob-hunk-line-bg-color: var(--bg-color-accent-muted); @@ -5990,46 +5996,6 @@ --button-counter-primary-bg-color-rest: var(--base-color-green-9); --button-keybinding-hint-primary-bg-color-disabled: var(--button-counter-primary-bg-color-rest); --button-keybinding-hint-primary-bg-color-rest: var(--button-counter-primary-bg-color-rest); - --base-color-inset: var(--base-color-black); - --base-color-neutral-0: var(--base-color-black); - --bg-color-default: var(--base-color-neutral-0); - --bg-color-white: var(--base-color-neutral-0); - --button-danger-fg-color-active: var(--base-color-neutral-0); - --button-danger-fg-color-hover: var(--base-color-neutral-0); - --button-danger-icon-color-hover: var(--base-color-neutral-0); - --button-outline-fg-color-active: var(--base-color-neutral-0); - --button-outline-fg-color-hover: var(--base-color-neutral-0); - --button-primary-fg-color-disabled: var(--base-color-neutral-0); - --button-primary-fg-color-rest: var(--fg-color-white); - --button-primary-icon-color-rest: var(--fg-color-white); - --button-counter-danger-bg-color-hover: var(--base-color-neutral-0); - --button-counter-danger-fg-color-hover: var(--base-color-neutral-0); - --button-counter-outline-bg-color-hover: var(--base-color-neutral-0); - --button-counter-outline-fg-color-hover: var(--base-color-neutral-0); - --button-keybinding-hint-danger-fg-color-active: var(--fg-color-on-emphasis); - --button-keybinding-hint-danger-fg-color-hover: var(--fg-color-on-emphasis); - --button-keybinding-hint-primary-fg-color-disabled: var(--button-primary-fg-color-disabled); - --button-keybinding-hint-primary-fg-color-rest: var(--fg-color-on-emphasis); - --card-bg-color: var(--bg-color-default); - --code-mirror-bg-color: var(--bg-color-default); - --code-mirror-gutter-marker-fg-color-default: var(--bg-color-default); - --code-mirror-gutters-bg-color: var(--bg-color-default); - --code-mirror-lines-bg-color: var(--bg-color-default); - --control-checked-fg-color-disabled: var(--fg-color-on-emphasis); - --control-checked-fg-color-rest: var(--fg-color-on-emphasis); - --control-knob-bg-color-checked: var(--base-color-neutral-0); - --control-knob-bg-color-rest: var(--base-color-neutral-0); - --control-track-fg-color-disabled: var(--fg-color-on-emphasis); - --dashboard-bg-color: var(--bg-color-default); - --diff-blob-hunk-num-fg-color-hover: var(--fg-color-on-emphasis); - --fg-color-on-emphasis: var(--base-color-neutral-0); - --fg-color-on-inverse: var(--base-color-neutral-0); - --fg-color-white: var(--base-color-neutral-0); - --header-fg-color-default: var(--base-color-neutral-0); - --header-fg-color-logo: var(--base-color-neutral-0); - --overlay-bg-color: var(--base-color-neutral-0); - --side-nav-bg-color-selected: var(--base-color-neutral-0); - --tooltip-fg-color: var(--fg-color-on-emphasis); --base-color-neutral-1: rgb(5.098% 6.6667% 9.0196%); --bg-color-inset: var(--bg-color-muted); --bg-color-muted: var(--base-color-neutral-1); @@ -6187,6 +6153,40 @@ --shadow-floating-legacy: 0 6px 12px -3px var(--base-color-neutral-12), 0 6px 18px 0 var(--base-color-neutral-12); --shadow-resting-medium: 0 1px 1px 0 var(--base-color-neutral-12), 0 3px 6px 0 var(--base-color-neutral-12); --tooltip-bg-color: var(--bg-color-emphasis); + --base-color-neutral-13: var(--base-color-white); + --bg-color-black: var(--base-color-neutral-13); + --border-color-translucent: var(--base-color-neutral-13); + --button-danger-border-color-active: var(--button-danger-border-color-hover); + --button-danger-border-color-hover: var(--button-primary-border-color-rest); + --button-default-shadow-resting: 0 1px 0 0 var(--base-color-neutral-13); + --button-outline-border-color-active: var(--button-outline-border-color-hover); + --button-outline-border-color-hover: var(--button-primary-border-color-hover); + --button-primary-border-color-active: var(--button-primary-border-color-rest); + --button-primary-border-color-hover: var(--button-primary-border-color-rest); + --button-primary-border-color-rest: var(--border-color-translucent); + --button-keybinding-hint-danger-border-color-active: var(--button-keybinding-hint-danger-border-color-hover); + --button-keybinding-hint-danger-border-color-hover: var(--border-color-translucent); + --button-keybinding-hint-primary-border-color-rest: var(--border-color-translucent); + --code-mirror-cursor-fg-color: var(--fg-color-default); + --code-mirror-fg-color: var(--fg-color-default); + --code-mirror-matching-bracket-fg-color: var(--fg-color-default); + --code-mirror-syntax-fg-color-comment: var(--base-color-neutral-13); + --color-ansi-black: var(--base-color-neutral-13); + --color-prettylights-syntax-markup-bold: var(--base-color-neutral-13); + --color-prettylights-syntax-markup-italic: var(--base-color-neutral-13); + --color-prettylights-syntax-storage-modifier-import: var(--base-color-neutral-13); + --diff-blob-addition-line-fg-color: var(--fg-color-default); + --diff-blob-addition-num-fg-color: var(--fg-color-default); + --diff-blob-addition-word-fg-color: var(--fg-color-default); + --diff-blob-deletion-line-fg-color: var(--fg-color-default); + --diff-blob-deletion-num-fg-color: var(--fg-color-default); + --diff-blob-deletion-word-fg-color: var(--fg-color-default); + --diff-blob-hunk-num-fg-color-rest: var(--fg-color-default); + --fg-color-black: var(--base-color-neutral-13); + --fg-color-default: var(--base-color-neutral-13); + --shadow-inset: inset 0 1px 0 0 var(--base-color-neutral-13); + --shadow-resting-small: 0 1px 1px 0 var(--base-color-neutral-13), 0 1px 3px 0 var(--base-color-neutral-13); + --shadow-resting-xsmall: 0 1px 1px 0 var(--base-color-neutral-13); --base-color-orange-0: rgb(100% 88.235% 70.588%); --bg-color-severe-muted: var(--base-color-orange-0); --base-color-orange-1: rgb(100% 81.176% 52.549%); diff --git a/packages/plugin-css/test/fixtures/mode-type-border/index.want.css b/packages/plugin-css/test/fixtures/mode-type-border/index.want.css index 0f6242e6..18e98474 100644 --- a/packages/plugin-css/test/fixtures/mode-type-border/index.want.css +++ b/packages/plugin-css/test/fixtures/mode-type-border/index.want.css @@ -31,44 +31,36 @@ @media (color-gamut: p3) { :root { --ds-color-red: oklch(64% 0.2889 16.57); - --ds-border-red: 1px solid var(--ds-color-red); } } @media (color-gamut: rec2020) { :root { --ds-color-red: oklch(63.87% 0.3367 16.29); - --ds-border-red: 1px solid var(--ds-color-red); } } @media (prefers-color-scheme: light) { :root { --ds-color-border: var(--ds-color-base-gray-20); - --ds-border-thick: 2.5px solid var(--ds-color-border); --ds-color-red: oklch(63.47% 0.254 16.44); - --ds-border-red: 1px solid var(--ds-color-red); } } [data-color-theme="light"] { --ds-color-border: var(--ds-color-base-gray-20); - --ds-border-thick: 2.5px solid var(--ds-color-border); --ds-color-red: oklch(63.47% 0.254 16.44); - --ds-border-red: 1px solid var(--ds-color-red); } @media (color-gamut: p3) { @media (prefers-color-scheme: light) { :root { --ds-color-red: oklch(64% 0.2889 16.57); - --ds-border-red: 1px solid var(--ds-color-red); } } [data-color-theme="light"] { --ds-color-red: oklch(64% 0.2889 16.57); - --ds-border-red: 1px solid var(--ds-color-red); } } @@ -76,43 +68,35 @@ @media (prefers-color-scheme: light) { :root { --ds-color-red: oklch(63.87% 0.3367 16.29); - --ds-border-red: 1px solid var(--ds-color-red); } } [data-color-theme="light"] { --ds-color-red: oklch(63.87% 0.3367 16.29); - --ds-border-red: 1px solid var(--ds-color-red); } } @media (prefers-color-scheme: dark) { :root { --ds-color-border: var(--ds-color-base-gray-80); - --ds-border-thick: 2.5px solid var(--ds-color-border); --ds-color-red: oklch(35.3% 0.1414 18.14); - --ds-border-red: 1px solid var(--ds-color-red); } } [data-color-theme="dark"] { --ds-color-border: var(--ds-color-base-gray-80); - --ds-border-thick: 2.5px solid var(--ds-color-border); --ds-color-red: oklch(35.3% 0.1414 18.14); - --ds-border-red: 1px solid var(--ds-color-red); } @media (color-gamut: p3) { @media (prefers-color-scheme: dark) { :root { --ds-color-red: oklch(35.18% 0.159 17.96); - --ds-border-red: 1px solid var(--ds-color-red); } } [data-color-theme="dark"] { --ds-color-red: oklch(35.18% 0.159 17.96); - --ds-border-red: 1px solid var(--ds-color-red); } } @@ -120,12 +104,10 @@ @media (prefers-color-scheme: dark) { :root { --ds-color-red: oklch(35.05% 0.1849 17.45); - --ds-border-red: 1px solid var(--ds-color-red); } } [data-color-theme="dark"] { --ds-color-red: oklch(35.05% 0.1849 17.45); - --ds-border-red: 1px solid var(--ds-color-red); } } diff --git a/packages/plugin-css/test/fixtures/mode-type-color/index.want.css b/packages/plugin-css/test/fixtures/mode-type-color/index.want.css index b2bb12aa..c8fc2494 100644 --- a/packages/plugin-css/test/fixtures/mode-type-color/index.want.css +++ b/packages/plugin-css/test/fixtures/mode-type-color/index.want.css @@ -29,14 +29,12 @@ @media (color-gamut: p3) { :root { --ds-color-hdr-blue: oklch(63.13% 0.2184 253.3); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @media (color-gamut: rec2020) { :root { --ds-color-hdr-blue: oklch(63.37% 0.2187 254.2); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @@ -49,18 +47,12 @@ --ds-color-blue-4: rgb(12.941% 54.51% 100%); --ds-color-blue-5: rgb(3.5294% 41.176% 85.49%); --ds-color-blue-6: rgb(1.9608% 31.373% 68.235%); - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); - --ds-color-text-action: var(--ds-color-blue-6); --ds-color-blue-7: rgb(1.1765% 23.922% 54.51%); - --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-blue-8: rgb(3.9216% 18.824% 41.176%); --ds-color-blue-9: rgb(0% 12.941% 33.333%); + --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-hdr-blue: oklch(63.34% 0.2011 253.9); - --ds-color-text-hdr: var(--ds-color-hdr-blue); + --ds-color-text-action: var(--ds-color-blue-6); } } @@ -72,31 +64,23 @@ --ds-color-blue-4: rgb(12.941% 54.51% 100%); --ds-color-blue-5: rgb(3.5294% 41.176% 85.49%); --ds-color-blue-6: rgb(1.9608% 31.373% 68.235%); - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); - --ds-color-text-action: var(--ds-color-blue-6); --ds-color-blue-7: rgb(1.1765% 23.922% 54.51%); - --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-blue-8: rgb(3.9216% 18.824% 41.176%); --ds-color-blue-9: rgb(0% 12.941% 33.333%); + --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-hdr-blue: oklch(63.34% 0.2011 253.9); - --ds-color-text-hdr: var(--ds-color-hdr-blue); + --ds-color-text-action: var(--ds-color-blue-6); } @media (color-gamut: p3) { @media (prefers-color-scheme: light) { :root { --ds-color-hdr-blue: oklch(63.13% 0.2184 253.3); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } [data-color-theme="light"] { --ds-color-hdr-blue: oklch(63.13% 0.2184 253.3); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @@ -104,13 +88,11 @@ @media (prefers-color-scheme: light) { :root { --ds-color-hdr-blue: oklch(63.37% 0.2187 254.2); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } [data-color-theme="light"] { --ds-color-hdr-blue: oklch(63.37% 0.2187 254.2); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @@ -123,18 +105,12 @@ --ds-color-blue-4: rgb(21.961% 54.51% 99.216%); --ds-color-blue-5: rgb(12.157% 43.529% 92.157%); --ds-color-blue-6: rgb(6.6667% 34.51% 78.039%); - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); - --ds-color-text-action: var(--ds-color-blue-6); --ds-color-blue-7: rgb(5.098% 25.49% 61.569%); - --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-blue-8: rgb(4.7059% 17.647% 41.961%); --ds-color-blue-9: rgb(1.9608% 11.373% 30.196%); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(63.79% 0.1969 255.8); - --ds-color-text-hdr: var(--ds-color-hdr-blue); + --ds-color-text-action: var(--ds-color-blue-5); } } @@ -146,31 +122,23 @@ --ds-color-blue-4: rgb(21.961% 54.51% 99.216%); --ds-color-blue-5: rgb(12.157% 43.529% 92.157%); --ds-color-blue-6: rgb(6.6667% 34.51% 78.039%); - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); - --ds-color-text-action: var(--ds-color-blue-6); --ds-color-blue-7: rgb(5.098% 25.49% 61.569%); - --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-blue-8: rgb(4.7059% 17.647% 41.961%); --ds-color-blue-9: rgb(1.9608% 11.373% 30.196%); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(63.79% 0.1969 255.8); - --ds-color-text-hdr: var(--ds-color-hdr-blue); + --ds-color-text-action: var(--ds-color-blue-5); } @media (color-gamut: p3) { @media (prefers-color-scheme: dark) { :root { --ds-color-hdr-blue: oklch(63.74% 0.2123 255.9); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } [data-color-theme="dark"] { --ds-color-hdr-blue: oklch(63.74% 0.2123 255.9); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @@ -178,13 +146,11 @@ @media (prefers-color-scheme: dark) { :root { --ds-color-hdr-blue: oklch(63.97% 0.2128 256.8); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } [data-color-theme="dark"] { --ds-color-hdr-blue: oklch(63.97% 0.2128 256.8); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @@ -196,31 +162,21 @@ --ds-color-blue-4: rgb(12.941% 54.51% 100%); --ds-color-blue-5: rgb(3.5294% 41.176% 85.49%); --ds-color-blue-6: rgb(1.9608% 31.373% 68.235%); - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); - --ds-color-text-action: var(--ds-color-blue-6); --ds-color-blue-7: rgb(1.1765% 23.922% 54.51%); - --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-blue-8: rgb(3.9216% 18.824% 41.176%); --ds-color-blue-9: rgb(0% 12.941% 33.333%); --ds-color-hdr-blue: oklch(63.34% 0.2011 253.9); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } @media (color-gamut: p3) { [data-color-theme="light-colorblind"] { --ds-color-hdr-blue: oklch(63.13% 0.2184 253.3); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @media (color-gamut: rec2020) { [data-color-theme="light-colorblind"] { --ds-color-hdr-blue: oklch(63.37% 0.2187 254.2); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @@ -232,31 +188,21 @@ --ds-color-blue-4: rgb(6.6667% 40.784% 89.02%); --ds-color-blue-5: rgb(1.1765% 28.627% 70.588%); --ds-color-blue-6: rgb(0.78431% 23.137% 58.431%); - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); - --ds-color-text-action: var(--ds-color-blue-6); --ds-color-blue-7: rgb(0.78431% 18.431% 47.843%); - --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-blue-8: rgb(1.1765% 14.51% 38.824%); --ds-color-blue-9: rgb(0.78431% 10.196% 29.02%); --ds-color-hdr-blue: oklch(54.35% 0.2531 262.1); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } @media (color-gamut: p3) { [data-color-theme="light-high-contrast"] { --ds-color-hdr-blue: oklch(54.36% 0.2721 259.5); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @media (color-gamut: rec2020) { [data-color-theme="light-high-contrast"] { --ds-color-hdr-blue: oklch(54.41% 0.274 259.2); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @@ -268,18 +214,10 @@ --ds-color-blue-4: rgb(25.49% 51.765% 89.412%); --ds-color-blue-5: rgb(19.216% 42.745% 79.216%); --ds-color-blue-6: rgb(14.51% 35.294% 69.804%); - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); - --ds-color-text-action: var(--ds-color-blue-6); --ds-color-blue-7: rgb(10.588% 29.412% 56.863%); - --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-blue-8: rgb(7.8431% 23.922% 47.451%); --ds-color-blue-9: rgb(5.8824% 17.647% 36.078%); --ds-color-hdr-blue: oklch(61.77% 0.161 257.75); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } [data-color-theme="dark-high-contrast"] { @@ -290,31 +228,21 @@ --ds-color-blue-4: rgb(25.098% 61.961% 100%); --ds-color-blue-5: rgb(25.098% 61.961% 100%); --ds-color-blue-6: rgb(19.216% 54.51% 97.255%); - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); - --ds-color-text-action: var(--ds-color-blue-6); --ds-color-blue-7: rgb(14.902% 44.706% 95.294%); - --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-blue-8: rgb(11.765% 37.647% 83.529%); --ds-color-blue-9: rgb(9.8039% 30.98% 69.412%); --ds-color-hdr-blue: oklch(69.05% 0.1695 249.8); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } @media (color-gamut: p3) { [data-color-theme="dark-high-contrast"] { --ds-color-hdr-blue: oklch(69.49% 0.1787 251.5); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @media (color-gamut: rec2020) { [data-color-theme="dark-high-contrast"] { --ds-color-hdr-blue: oklch(69.6% 0.1799 251.8); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @@ -326,30 +254,20 @@ --ds-color-blue-4: rgb(21.961% 54.51% 99.216%); --ds-color-blue-5: rgb(12.157% 43.529% 92.157%); --ds-color-blue-6: rgb(6.6667% 34.51% 78.039%); - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); - --ds-color-text-action: var(--ds-color-blue-6); --ds-color-blue-7: rgb(5.098% 25.49% 61.569%); - --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-blue-8: rgb(4.7059% 17.647% 41.961%); --ds-color-blue-9: rgb(1.9608% 11.373% 30.196%); --ds-color-hdr-blue: oklch(63.79% 0.1969 255.8); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } @media (color-gamut: p3) { [data-color-theme="dark-colorblind"] { --ds-color-hdr-blue: oklch(63.74% 0.2123 255.9); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } @media (color-gamut: rec2020) { [data-color-theme="dark-colorblind"] { --ds-color-hdr-blue: oklch(63.97% 0.2128 256.8); - --ds-color-text-hdr: var(--ds-color-hdr-blue); } } diff --git a/packages/plugin-css/test/fixtures/mode-type-dimension/index.want.css b/packages/plugin-css/test/fixtures/mode-type-dimension/index.want.css index 3e176353..fa1dc9ac 100644 --- a/packages/plugin-css/test/fixtures/mode-type-dimension/index.want.css +++ b/packages/plugin-css/test/fixtures/mode-type-dimension/index.want.css @@ -29,9 +29,7 @@ --ds-space-300: 1rem; --ds-space-400: 1.25rem; --ds-space-500: 1.75rem; - --ds-control-small-size: var(--ds-space-500); --ds-space-600: 2.5rem; - --ds-control-default-size: var(--ds-space-600); --ds-space-700: 3.5rem; --ds-space-800: 4rem; --ds-space-900: 6rem; diff --git a/packages/plugin-css/test/fixtures/option-legacy-hex/index.want.css b/packages/plugin-css/test/fixtures/option-legacy-hex/index.want.css index 0282186f..1d60251f 100644 --- a/packages/plugin-css/test/fixtures/option-legacy-hex/index.want.css +++ b/packages/plugin-css/test/fixtures/option-legacy-hex/index.want.css @@ -85,10 +85,10 @@ --ds-color-blue-3: #58a6ff; --ds-color-blue-4: #388bfd; --ds-color-blue-5: #1f6feb; - --ds-color-blue-6: #1158c7; --ds-color-text-action: var(--ds-color-blue-5); - --ds-color-blue-7: #0d419d; + --ds-color-blue-6: #1158c7; --ds-color-control-border-focus: var(--ds-color-blue-6); + --ds-color-blue-7: #0d419d; --ds-color-blue-8: #0c2d6b; --ds-color-blue-9: #051d4d; --ds-color-hdr-blue: oklch(63.79% 0.1969 255.8); @@ -127,10 +127,10 @@ --ds-color-blue-3: #58a6ff; --ds-color-blue-4: #388bfd; --ds-color-blue-5: #1f6feb; - --ds-color-blue-6: #1158c7; --ds-color-text-action: var(--ds-color-blue-5); - --ds-color-blue-7: #0d419d; + --ds-color-blue-6: #1158c7; --ds-color-control-border-focus: var(--ds-color-blue-6); + --ds-color-blue-7: #0d419d; --ds-color-blue-8: #0c2d6b; --ds-color-blue-9: #051d4d; --ds-color-hdr-blue: oklch(63.79% 0.1969 255.8); @@ -232,10 +232,10 @@ --ds-color-blue-3: #539bf5; --ds-color-blue-4: #4184e4; --ds-color-blue-5: #316dca; - --ds-color-blue-6: #255ab2; --ds-color-text-action: var(--ds-color-blue-5); - --ds-color-blue-7: #1b4b91; + --ds-color-blue-6: #255ab2; --ds-color-control-border-focus: var(--ds-color-blue-6); + --ds-color-blue-7: #1b4b91; --ds-color-blue-8: #143d79; --ds-color-blue-9: #0f2d5c; --ds-color-hdr-blue: #4184e4; @@ -253,10 +253,10 @@ --ds-color-blue-3: #71b7ff; --ds-color-blue-4: #409eff; --ds-color-blue-5: #409eff; - --ds-color-blue-6: #318bf8; --ds-color-text-action: var(--ds-color-blue-5); - --ds-color-blue-7: #2672f3; + --ds-color-blue-6: #318bf8; --ds-color-control-border-focus: var(--ds-color-blue-6); + --ds-color-blue-7: #2672f3; --ds-color-blue-8: #1e60d5; --ds-color-blue-9: #194fb1; --ds-color-hdr-blue: oklch(69.05% 0.1695 249.8); @@ -290,10 +290,10 @@ --ds-color-blue-3: #58a6ff; --ds-color-blue-4: #388bfd; --ds-color-blue-5: #1f6feb; - --ds-color-blue-6: #1158c7; --ds-color-text-action: var(--ds-color-blue-5); - --ds-color-blue-7: #0d419d; + --ds-color-blue-6: #1158c7; --ds-color-control-border-focus: var(--ds-color-blue-6); + --ds-color-blue-7: #0d419d; --ds-color-blue-8: #0c2d6b; --ds-color-blue-9: #051d4d; --ds-color-hdr-blue: oklch(63.79% 0.1969 255.8);