WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

feat: Add property for preserving css variables in token resolution #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jkuelz wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: Add property for preserving css variables in token resolution #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7890c73
feat: Add property for preserving css variables in token resolution
jkuelz Nov 4, 2025
1b58dae
chore: Enable useCssVars for testing
jkuelz Nov 5, 2025
938f38a
chore: Add useCssVars support to runtime theming
jkuelz Nov 7, 2025
87baf2d
refactor: Make reference helpers more generic than just colors for fu…
jkuelz Nov 7, 2025
ec53fc6
chore: Disable useCssVars by default in buildtime
jkuelz Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 138 additions & 0 deletions src/browser/__tests__/__snapshots__/index.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,144 @@ exports[`generateThemeStylesheet > with baseThemeId > creates override styles 1`
}}"
`;

exports[`generateThemeStylesheet > with reference tokens and useCssVars > creates override styles with CSS variables when useCssVars is enabled 1`] = `
":root:root{
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}
.compact.compact:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}
@media not print {.dark.dark:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}}
.disabled-motion.disabled-motion:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}
.navigation.navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}
.compact.compact .navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}
.compact.compact.navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}
@media not print {.dark.dark .navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}}
@media not print {.dark.dark.navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}}
.disabled-motion.disabled-motion .navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}
.disabled-motion.disabled-motion.navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
}"
`;

exports[`generateThemeStylesheet > with reference tokens and useCssVars > creates override styles without CSS variables by default 1`] = `
":root:root{
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}
.compact.compact:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}
@media not print {.dark.dark:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}}
.disabled-motion.disabled-motion:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}
.navigation.navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}
.compact.compact .navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}
.compact.compact.navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}
@media not print {.dark.dark .navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}}
@media not print {.dark.dark.navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}}
.disabled-motion.disabled-motion .navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}
.disabled-motion.disabled-motion.navigation:not(#\\9){
--colorPrimary600-css:#ff6600;
--colorPrimary700-css:#692dc9;
--colorButtonPrimary-css:#ff6600;
--colorButtonSecondary-css:#692dc9;
--colorTextPrimary-css:#ff6600;
--colorBackgroundPrimary-css:#692dc9;
}"
`;

exports[`generateThemeStylesheet > with secondary theme > creates override styles 1`] = `
":root:root{
--shadow-css:yellow;
Expand Down
94 changes: 93 additions & 1 deletion src/browser/__tests__/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,82 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { afterEach, describe, test, expect } from 'vitest';
import { preset, presetWithSecondaryTheme, override } from '../../__fixtures__/common';
import {
preset,
presetWithSecondaryTheme,
override,
rootTheme,
createStubPropertiesMap,
createStubVariablesMap,
} from '../../__fixtures__/common';
import { applyTheme, generateThemeStylesheet } from '../index';
import { Theme, ThemePreset, Override } from '../../shared/theme';

const allStyleNodes = (targetDocument: Document = document) => targetDocument.head.querySelectorAll('style');

// Create a theme with reference tokens to test useCssVars
const themeWithReferenceTokens: Theme = {
...rootTheme,
referenceTokens: {
color: {
primary: {
600: '#006ce0',
700: '#0053ba',
800: '#064695',
},
},
},
tokens: {
...rootTheme.tokens,
// Generated reference tokens (normally created by ThemeBuilder)
colorPrimary600: '#006ce0',
colorPrimary700: '#0053ba',
colorPrimary800: '#064695',
// Tokens that reference the base tokens
colorButtonPrimary: '{colorPrimary600}',
colorButtonSecondary: '{colorPrimary700}',
colorTextPrimary: '{colorPrimary600}',
colorBorderPrimary: '{colorPrimary800}',
colorBackgroundPrimary: '{colorPrimary700}',
},
};

const presetWithReferenceTokens: ThemePreset = {
theme: themeWithReferenceTokens,
themeable: [
'colorPrimary600',
'colorPrimary700',
'colorPrimary800',
'colorButtonPrimary',
'colorButtonSecondary',
'colorTextPrimary',
'colorBorderPrimary',
'colorBackgroundPrimary',
],
exposed: [
'colorPrimary600',
'colorPrimary700',
'colorPrimary800',
'colorButtonPrimary',
'colorButtonSecondary',
'colorTextPrimary',
'colorBorderPrimary',
'colorBackgroundPrimary',
],
propertiesMap: {
...createStubPropertiesMap(themeWithReferenceTokens),
},
variablesMap: createStubVariablesMap(themeWithReferenceTokens),
};

const overrideWithReferenceTokens: Override = {
referenceTokens: { color: { primary: { 600: '#ff6600', 700: '#692dc9' } } },
tokens: {
colorPrimary700: '#ff00bf', // This should be overridden by reference token
// Don't override the dependent tokens - let them cascade via CSS variables
},
};

describe('applyTheme', () => {
afterEach(() => {
allStyleNodes().forEach((tag) => tag.remove());
Expand Down Expand Up @@ -126,4 +197,25 @@ describe('generateThemeStylesheet', () => {
).toThrow(`Specified baseThemeId 'invalid' is not available. Available values are 'root', 'secondary'.`);
});
});

describe('with reference tokens and useCssVars', () => {
test('creates override styles without CSS variables by default', () => {
const styles = generateThemeStylesheet({
override: overrideWithReferenceTokens,
preset: presetWithReferenceTokens,
});

expect(styles).toMatchSnapshot();
});

test('creates override styles with CSS variables when useCssVars is enabled', () => {
const styles = generateThemeStylesheet({
override: overrideWithReferenceTokens,
preset: presetWithReferenceTokens,
useCssVars: true,
});

expect(styles).toMatchSnapshot();
});
});
});
9 changes: 6 additions & 3 deletions src/browser/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ export interface GenerateThemeStylesheetParams {
override: Override;
preset: ThemePreset;
baseThemeId?: string;
useCssVars?: boolean;
}

export function generateThemeStylesheet(params: GenerateThemeStylesheetParams): string {
const { override, preset, baseThemeId } = params;
const { override, preset, baseThemeId, useCssVars } = params;
const availableContexts = getContexts(preset);
const validated = validateOverride(override, preset.themeable, availableContexts);
const theme = getThemeFromPreset(preset, baseThemeId);
Expand All @@ -22,7 +23,8 @@ export function generateThemeStylesheet(params: GenerateThemeStylesheetParams):
theme,
validated,
preset.propertiesMap,
createMultiThemeCustomizer(preset.theme.selector)
createMultiThemeCustomizer(preset.theme.selector),
useCssVars
);
}

Expand All @@ -31,6 +33,7 @@ export interface ApplyThemeParams {
preset: ThemePreset;
baseThemeId?: string;
targetDocument?: Document;
useCssVars?: boolean;
}

export interface ApplyThemeResult {
Expand All @@ -39,7 +42,7 @@ export interface ApplyThemeResult {

export function applyTheme(params: ApplyThemeParams): ApplyThemeResult {
const { targetDocument } = params;
const content = generateThemeStylesheet(params);
const content = generateThemeStylesheet({ ...params });
const nonce = getNonce(targetDocument);
const styleNode = createStyleNode(content, nonce);

Expand Down
Loading
Loading