chore: Remove useCssVars parameter and make the default behavior

Author: jkuelz

src/__fixtures__/common.ts

@@ -90,7 +90,7 @@ const emptyTheme: Theme = {
 
 export const rootTheme: Theme = {
   id: 'root',
-  selector: ':root',
+  selector: 'body',
   tokens: {
     fontFamilyBase: '"Helvetica Neue", Arial, sans-serif',
     fontFamilyBody: '{fontFamilyBase}',

src/browser/__tests__/__snapshots__/index.test.ts.snap

@@ -31,7 +31,7 @@ exports[`applyTheme > with baseThemeId > attaches one style node containing over
 `;
 
 exports[`applyTheme > with secondary theme > attaches one style node containing override 1`] = `
-":root:root{
+"body:not(#\\9){
 	--black-css:black;
 	--grey-css:grey;
 	--brown-css:brown;
@@ -59,7 +59,7 @@ exports[`applyTheme > with secondary theme > attaches one style node containing
 `;
 
 exports[`applyTheme > with targetDocument > attaches one style node containing override on the target document 1`] = `
-":root:root{
+"body:not(#\\9){
 	--black-css:black;
 	--grey-css:grey;
 	--brown-css:brown;
@@ -87,7 +87,7 @@ exports[`applyTheme > with targetDocument > attaches one style node containing o
 `;
 
 exports[`applyTheme > without secondary theme > attaches one style node containing override 1`] = `
-":root:root{
+"body:not(#\\9){
 	--black-css:black;
 	--grey-css:grey;
 	--brown-css:brown;
@@ -116,14 +116,17 @@ exports[`applyTheme > without secondary theme > attaches one style node containi
 
 exports[`generateThemeStylesheet > with baseThemeId > creates override styles 1`] = `
 ".secondary-theme.secondary-theme:not(#\\9){
+	--black-css:purple;
+	--grey-css:grey;
+	--brown-css:black;
 	--shadow-css:yellow;
 	--buttonShadow-css:red;
 	--boxShadow-css:green;
 	--lineShadow-css:pink;
 }
 @media not print {.dark.dark.secondary-theme:not(#\\9){
 	--shadow-css:orange;
-	--boxShadow-css:black;
+	--boxShadow-css:var(--brown-css);
 }}
 .secondary-theme.secondary-theme .navigation:not(#\\9){
 	--shadow-css:pink;
@@ -132,79 +135,74 @@ exports[`generateThemeStylesheet > with baseThemeId > creates override styles 1`
 	--shadow-css:pink;
 }
 @media not print {.dark.dark.secondary-theme .navigation:not(#\\9){
-	--shadow-css:grey;
+	--shadow-css:var(--grey-css);
 	--buttonShadow-css:green;
 }}
 @media not print {.dark.dark.navigation.secondary-theme:not(#\\9){
-	--shadow-css:grey;
+	--shadow-css:var(--grey-css);
 	--buttonShadow-css:green;
 }}"
 `;
 
-exports[`generateThemeStylesheet > with reference tokens and useCssVars > creates override styles with CSS variables when useCssVars is enabled 1`] = `
-":root:root{
+exports[`generateThemeStylesheet > with reference tokens > creates override styles with CSS variables 1`] = `
+"body: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;
-}"
-`;
-
 exports[`generateThemeStylesheet > with secondary theme > creates override styles 1`] = `
-":root:root{
+"body:not(#\\9){
+	--black-css:black;
+	--grey-css:grey;
+	--brown-css:brown;
 	--shadow-css:yellow;
 	--buttonShadow-css:red;
 	--boxShadow-css:green;
 	--lineShadow-css:pink;
 }
 @media not print {.dark.dark:not(#\\9){
 	--shadow-css:orange;
-	--boxShadow-css:brown;
+	--boxShadow-css:var(--brown-css);
 }}
 .navigation.navigation:not(#\\9){
 	--shadow-css:pink;
 	--boxShadow-css:purple;
 }
 @media not print {.dark.dark .navigation:not(#\\9){
-	--shadow-css:brown;
+	--shadow-css:var(--brown-css);
 	--buttonShadow-css:green;
 }}
 @media not print {.dark.dark.navigation:not(#\\9){
-	--shadow-css:brown;
+	--shadow-css:var(--brown-css);
 	--buttonShadow-css:green;
 }}"
 `;
 
 exports[`generateThemeStylesheet > without secondary theme > creates override styles 1`] = `
-":root:root{
+"body:not(#\\9){
+	--black-css:black;
+	--grey-css:grey;
+	--brown-css:brown;
 	--shadow-css:yellow;
 	--buttonShadow-css:red;
 	--boxShadow-css:green;
 	--lineShadow-css:pink;
 }
 @media not print {.dark.dark:not(#\\9){
 	--shadow-css:orange;
-	--boxShadow-css:brown;
+	--boxShadow-css:var(--brown-css);
 }}
 .navigation.navigation:not(#\\9){
 	--shadow-css:pink;
 	--boxShadow-css:purple;
 }
 @media not print {.dark.dark .navigation:not(#\\9){
-	--shadow-css:brown;
+	--shadow-css:var(--brown-css);
 	--buttonShadow-css:green;
 }}
 @media not print {.dark.dark.navigation:not(#\\9){
-	--shadow-css:brown;
+	--shadow-css:var(--brown-css);
 	--buttonShadow-css:green;
 }}"
 `;

src/browser/__tests__/index.test.ts

@@ -17,7 +17,7 @@ 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
+// Create a theme with reference tokens to test CSS variable generation
 const themeWithReferenceTokens: Theme = {
   ...rootTheme,
   referenceTokens: {
@@ -201,25 +201,15 @@ describe('generateThemeStylesheet', () => {
     });
   });
 
-  describe('with reference tokens and useCssVars', () => {
-    test('creates override styles without CSS variables by default', () => {
+  describe('with reference tokens', () => {
+    test('creates override styles with CSS variables', () => {
       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();
-    });
   });
 
   describe('performance: seed vs explicit palette', () => {

src/browser/index.ts

@@ -10,11 +10,10 @@ export interface GenerateThemeStylesheetParams {
   override: Override;
   preset: ThemePreset;
   baseThemeId?: string;
-  useCssVars?: boolean;
 }
 
 export function generateThemeStylesheet(params: GenerateThemeStylesheetParams): string {
-  const { override, preset, baseThemeId, useCssVars } = params;
+  const { override, preset, baseThemeId } = params;
   const availableContexts = getContexts(preset);
   const validated = validateOverride(override, preset.themeable, availableContexts);
   const theme = getThemeFromPreset(preset, baseThemeId);
@@ -23,8 +22,7 @@ export function generateThemeStylesheet(params: GenerateThemeStylesheetParams):
     theme,
     validated,
     preset.propertiesMap,
-    createMultiThemeCustomizer(preset.theme.selector),
-    useCssVars
+    createMultiThemeCustomizer(preset.theme.selector)
   );
 }
 
@@ -33,7 +31,6 @@ export interface ApplyThemeParams {
   preset: ThemePreset;
   baseThemeId?: string;
   targetDocument?: Document;
-  useCssVars?: boolean;
 }
 
 export interface ApplyThemeResult {
@@ -42,7 +39,7 @@ export interface ApplyThemeResult {
 
 export function applyTheme(params: ApplyThemeParams): ApplyThemeResult {
   const { targetDocument } = params;
-  const content = generateThemeStylesheet({ ...params, useCssVars: true });
+  const content = generateThemeStylesheet(params);
   const nonce = getNonce(targetDocument);
   const styleNode = createStyleNode(content, nonce);
 

src/build/__tests__/__fixtures__/template/internal/generated/theming/with-secondary-theme.js

@@ -3,7 +3,7 @@
 export var preset = {
   theme: {
     id: 'theme',
-    selector: ':root',
+    selector: 'body',
     tokens: {
       fontFamilyBase: "'Amazon Ember', 'Helvetica Neue', Roboto, Arial, sans-serif",
       colorOrange500: '#ec7211',

src/build/__tests__/__snapshots__/public-secondary.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Build-time theming of main theme with matching baseThemeId generates the correct css files 1`] = `
-":root {
+"body {
   --font-family-base-rpbu7d:"Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
   --color-orange-500-25sm1g:#ec7211;
   --color-orange-700-2auf4j:#dd6b10;
@@ -25,15 +25,17 @@ exports[`Build-time theming of main theme with matching baseThemeId generates th
   --color-orange-500-25sm1g:#ec72aa;
   --color-orange-700-2auf4j:#dd6baa;
   --color-background-button-primary-default-cqohzr:var(--color-orange-500-25sm1g);
+  --color-background-button-primary-active-h8she0:var(--color-orange-700-2auf4j);
 }
 
 .dark-mode.secondary:not(#\\9) {
   --color-background-button-primary-default-cqohzr:var(--color-orange-700-2auf4j);
+  --color-background-button-primary-active-h8she0:var(--color-orange-500-25sm1g);
 }"
 `;
 
 exports[`Build-time theming of secondary theme generates the correct css files 1`] = `
-":root {
+"body {
   --font-family-base-rpbu7d:"Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
   --color-orange-500-25sm1g:#ec7211;
   --color-orange-700-2auf4j:#dd6b10;
@@ -56,9 +58,11 @@ exports[`Build-time theming of secondary theme generates the correct css files 1
   --color-orange-500-25sm1g:#ec72aa;
   --color-orange-700-2auf4j:#dd6baa;
   --color-background-button-primary-default-l567s3:#aaaaaa;
+  --color-background-button-primary-active-h8she0:var(--color-orange-700-2auf4j);
 }
 
 .dark-mode.secondary:not(#\\9) {
   --color-background-button-primary-default-l567s3:#bbbbbb;
+  --color-background-button-primary-active-h8she0:var(--color-orange-500-25sm1g);
 }"
 `;

src/build/__tests__/css-vars.test.ts

@@ -11,7 +11,7 @@ import { join } from 'path';
 
 const testTheme: Theme = {
   id: 'test',
-  selector: ':root',
+  selector: 'body',
   tokens: {
     colorPrimary: '#0073bb',
     colorBackground: '{colorPrimary}',
@@ -55,7 +55,6 @@ test('CSS variable optimization works without errors', async () => {
       },
       componentsOutputDir: tempDir,
       scssDir: tempDir,
-      useCssVars: true,
       skip: ['preset', 'design-tokens'],
     });
 
@@ -89,7 +88,6 @@ test('generateReferenceTokenDefaults creates CSS variable declarations', () => {
 
 test('resolveTheme with CSS variables returns CSS var() for reference tokens', () => {
   const resolved = resolveTheme(testTheme, undefined, {
-    useCssVars: true,
     propertiesMap,
   });
 
@@ -118,7 +116,6 @@ test('resolveContext with CSS variables preserves var() references', () => {
   };
 
   const resolved = resolveContext(testTheme, context, undefined, undefined, {
-    useCssVars: true,
     propertiesMap,
   });
 
@@ -127,7 +124,7 @@ test('resolveContext with CSS variables preserves var() references', () => {
 });
 
 test('createBuildDeclarations includes reference tokens when useCssVars enabled', () => {
-  const css = createBuildDeclarations(testTheme, [], propertiesMap, (selector) => selector, ['colorPrimary'], true);
+  const css = createBuildDeclarations(testTheme, [], propertiesMap, (selector) => selector, ['colorPrimary']);
 
   expect(css).toContain('--color-primary-500');
   expect(css).toContain('--color-neutral-900');
@@ -152,14 +149,10 @@ test('createBuildDeclarations with secondary theme generates reference token CSS
     },
   };
 
-  const css = createBuildDeclarations(
-    testTheme,
-    [secondaryTheme],
-    propertiesMap,
-    (selector) => selector,
-    ['colorPrimary', 'colorError100'],
-    true
-  );
+  const css = createBuildDeclarations(testTheme, [secondaryTheme], propertiesMap, (selector) => selector, [
+    'colorPrimary',
+    'colorError100',
+  ]);
 
   // Should contain reference tokens from both primary and secondary themes
   expect(css).toContain('--color-primary-500');

src/build/inline-stylesheets.ts

@@ -18,16 +18,14 @@ export function getInlineStylesheets(
   resolution: SpecificResolution,
   variablesMap: Record<string, string>,
   propertiesMap: Record<string, string>,
-  neededTokens: string[],
-  useCssVars?: boolean
+  neededTokens: string[]
 ): InlineStylesheet[] {
   const declarations = createBuildDeclarations(
     primary,
     secondary,
     propertiesMap,
     (selector) => markGlobal(selector),
-    neededTokens,
-    useCssVars
+    neededTokens
   );
 
   const declaration = {

src/build/internal.ts

@@ -40,8 +40,6 @@ export interface BuildThemedComponentsInternalParams {
   jsonSchema?: boolean;
   /** Fail the build when SASS deprecation warning occurs **/
   failOnDeprecations?: boolean;
-  /** Use CSS variables instead of resolved values for better runtime theme swapping */
-  useCssVars?: boolean;
 }
 /**
  * Builds themed components and optionally design tokens, if not skipped.
@@ -73,14 +71,13 @@ export async function buildThemedComponentsInternal(params: BuildThemedComponent
     descriptions = {},
     jsonSchema = false,
     failOnDeprecations,
-    useCssVars = true,
   } = params;
 
   if (!skip.includes('design-tokens') && !designTokensOutputDir) {
     throw new Error('designTokensOutputDir needs to be specified if not skipped');
   }
 
-  const neededTokens = findNeededTokens(scssDir, variablesMap, exposed, [primary, ...secondary], useCssVars);
+  const neededTokens = findNeededTokens(scssDir, variablesMap, exposed);
 
   const resolution = resolveTheme(primary);
   const defaults = reduce(resolution, primary, defaultsReducer());
@@ -89,7 +86,7 @@ export async function buildThemedComponentsInternal(params: BuildThemedComponent
   const styleTask = buildStyles(
     scssDir,
     componentsOutputDir,
-    getInlineStylesheets(primary, secondary, defaults, variablesMap, propertiesMap, neededTokens, useCssVars),
+    getInlineStylesheets(primary, secondary, defaults, variablesMap, propertiesMap, neededTokens),
     { failOnDeprecations }
   );
   const internalTokensTask = createInternalTokenFiles(defaults, propertiesMap, componentsOutputDir);