@patternfly/design-tokens 1.14.6 → 1.14.7

package/build/css/tokens-redhat-highcontrast.scss

@@ -0,0 +1,127 @@
+
+// Do not edit directly
+// Generated on Fri, 06 Feb 2026 21:19:18 GMT
+
+// Only tokens that differ from base theme (120 tokens)
+@mixin pf-v6-tokens {
+  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
+  --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
+  --pf-t--global--border--width--action--plain--clicked: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--width--action--plain--hover: var(--pf-t--global--border--width--100);
+  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--400);
+  --pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--400);
+  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
+  --pf-t--global--border--color--control--default: var(--pf-t--global--border--color--400);
+  --pf-t--global--border--color--default: var(--pf-t--global--border--color--400);
+  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300);
+  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500);
+  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400);
+  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500);
+  --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500);
+  --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400);
+  --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500);
+  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500);
+  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500);
+  --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500);
+  --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400);
+  --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500);
+  --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500);
+  --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400);
+  --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500);
+  --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500);
+  --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400);
+  --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500);
+  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500);
+  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400);
+  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500);
+  --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500);
+  --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400);
+  --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500);
+  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
+  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
+  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500);
+  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--400);
+  --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+  --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--border--color--subtle: var(--pf-t--global--border--color--400);
+  --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--pill);
+  --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--pill);
+  --pf-t--global--border--width--high-contrast--extra-strong: var(--pf-t--global--border--width--extra-strong);
+  --pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular);
+  --pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong);
+  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--300);
+  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--200);
+  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--300);
+  --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
+  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
+  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
+  --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400);
+  --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300);
+  --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400);
+  --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100);
+  --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50);
+  --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100);
+  --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300);
+  --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200);
+  --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300);
+  --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
+  --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
+  --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
+  --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300);
+  --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200);
+  --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300);
+  --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
+  --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200);
+  --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300);
+  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+  --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--200);
+  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--400);
+  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--300);
+  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--400);
+  --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200);
+  --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200);
+  --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200);
+  --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200);
+  --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200);
+  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
+  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
+  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
+  --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150);
+  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--500);
+  --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--400);
+  --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--500);
+  --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200);
+  --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250);
+  --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350);
+  --pf-t--global--text--color--required: var(--pf-t--global--text--color--500);
+  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
+  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200);
+  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--300);
+  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250);
+  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
+  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
+  --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
+  --pf-t--global--border--color--main--default: var(--pf-t--global--border--color--default);
+  --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+}

package/build/css/tokens-redhat.scss

@@ -0,0 +1,15 @@
+
+// Do not edit directly
+// Generated on Fri, 06 Feb 2026 21:19:18 GMT
+
+// Only tokens that differ from base theme (8 tokens)
+@mixin pf-v6-tokens {
+  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--pill);
+  --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--pill);
+  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
+  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
+  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
+}

package/build.js

@@ -1,11 +1,16 @@
 /* eslint-disable no-console */
+const fs = require('fs');
+const path = require('path');
 const StyleDictionary = require('style-dictionary');
 const config = require('./config.default.json'); // Adjust the path if necessary
 const basePxFontSize = config.basePxFontSize || 16;
 const getTokenLayer = ({ filePath }) => {
   if (filePath.includes('semantic.json')) return ['semantic', 'colors'];
   if (filePath.includes('semantic.dark.json')) return ['semantic', 'colors'];
+  if (filePath.includes('semantic.glass.json')) return ['semantic', 'colors'];
+  if (filePath.includes('semantic.glass.dark.json')) return ['semantic', 'colors'];
   if (filePath.includes('semantic.dimension.json')) return ['semantic', 'dimension'];
+  if (filePath.includes('semantic.dimension.highcontrast.json')) return ['semantic', 'dimension'];
   if (filePath.includes('semantic.motion.json')) return ['semantic', 'motion'];
   if (filePath.includes('base.json')) return ['base', 'colors'];
   if (filePath.includes('base.dark.json')) return ['base', 'colors'];
@@ -85,7 +90,8 @@ const build = (selector) => {
     type: 'value',
     matcher: (token) =>
       (['border', 'focus-ring'].includes(token.attributes.type) && token.original.type === 'number') ||
-      (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color'),
+      (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color') ||
+      (token.attributes.item == 'filter' && token.attributes.state === 'blur' && token.original.type === 'number'),
     transformer: (token) => `${token.value}px`
   });
 
@@ -115,11 +121,17 @@ const build = (selector) => {
     type: 'value',
     matcher: (token) => token.type === 'number',
     transformer: (token) => {
-      console.log(token);
       return Math.round(parseFloat(token.value) * 100) / 100;
     }
   });
 
+  StyleDictionary.registerTransform({
+    name: 'patternfly/global/percentage',
+    type: 'value',
+    matcher: (token) => token.attributes.item === 'opacity' && token.original.type === 'number',
+    transformer: (token) => `${token.value}%`
+  });
+
   // Reigster custom transform group
   StyleDictionary.registerTransformGroup({
     name: 'patternfly/css',
@@ -133,6 +145,7 @@ const build = (selector) => {
       'color/css',
       // custom transforms
       'patternfly/global/round-decimel',
+      'patternfly/global/percentage',
       'patternfly/global/px',
       'patternfly/global/pxToRem',
       'patternfly/global/ms',
@@ -140,30 +153,205 @@ const build = (selector) => {
     ]
   });
 
-  // Apply configuration
+  // Build all themes
+  console.log('Building base themes...');
   const defaultExtendedSD = StyleDictionary.extend(__dirname + '/config.default.json');
-  const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
-  const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
-  const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
-  const chartsDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.dark.json');
-  const highContrastDefaultExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.json');
-  const highContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.dark.json');
-  const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
-  const layersDarkSD = StyleDictionary.extend(__dirname + '/config.layers.dark.json');
-
-  // Build all
   defaultExtendedSD.buildAllPlatforms();
+
+  const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
   darkExtendedSD.buildAllPlatforms();
+
+  // Step 2: Build other non-glass themes (order doesn't matter)
+  console.log('Building other themes...');
+  const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
   paletteExtendedSD.buildAllPlatforms();
+
+  const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
   chartsExtendedSD.buildAllPlatforms();
+
+  const chartsDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.dark.json');
   chartsDarkExtendedSD.buildAllPlatforms();
+
+  const highContrastDefaultExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.json');
   highContrastDefaultExtendedSD.buildAllPlatforms();
+
+  const highContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.dark.json');
   highContrastDarkExtendedSD.buildAllPlatforms();
+
+  const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
   layersSD.buildAllPlatforms();
+
+  const layersDarkSD = StyleDictionary.extend(__dirname + '/config.layers.dark.json');
   layersDarkSD.buildAllPlatforms();
 
+  console.log('Building layer configs for glass themes...');
+  const layersGlassSD = StyleDictionary.extend(__dirname + '/config.layers.glass.json');
+  layersGlassSD.buildAllPlatforms();
+
+  const layersGlassDarkSD = StyleDictionary.extend(__dirname + '/config.layers.glass-dark.json');
+  layersGlassDarkSD.buildAllPlatforms();
+
+  console.log('Building layer configs for highcontrast themes...');
+  const layersHighContrastSD = StyleDictionary.extend(__dirname + '/config.layers.highcontrast.json');
+  layersHighContrastSD.buildAllPlatforms();
+
+  const layersHighContrastDarkSD = StyleDictionary.extend(__dirname + '/config.layers.highcontrast-dark.json');
+  layersHighContrastDarkSD.buildAllPlatforms();
+
+  console.log('Building layer configs for redhat themes...');
+  const layersRedhatSD = StyleDictionary.extend(__dirname + '/config.layers.redhat.json');
+  layersRedhatSD.buildAllPlatforms();
+
+  const layersRedhatDarkSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-dark.json');
+  layersRedhatDarkSD.buildAllPlatforms();
+
+  const layersRedhatGlassSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-glass.json');
+  layersRedhatGlassSD.buildAllPlatforms();
+
+  const layersRedhatGlassDarkSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-glass-dark.json');
+  layersRedhatGlassDarkSD.buildAllPlatforms();
+
+  const layersRedhatHighContrastSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-highcontrast.json');
+  layersRedhatHighContrastSD.buildAllPlatforms();
+
+  const layersRedhatHighContrastDarkSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-highcontrast-dark.json');
+  layersRedhatHighContrastDarkSD.buildAllPlatforms();
+
+  // Step 3: Build glass themes
+  console.log('Building glass themes...');
+  const glassExtendedSD = StyleDictionary.extend(__dirname + '/config.glass.json');
+  glassExtendedSD.buildAllPlatforms();
+
+  const glassDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.glass.dark.json');
+  glassDarkExtendedSD.buildAllPlatforms();
+
+  // Step 4: Remove duplicate variables from glass SCSS files
+  console.log('Removing duplicate variables from glass themes...');
+  const buildPath = path.join(__dirname, 'build/css');
+  removeDuplicateVariables(
+    path.join(buildPath, 'tokens-default.scss'),
+    path.join(buildPath, 'tokens-glass.scss')
+  );
+  removeDuplicateVariables(
+    path.join(buildPath, 'tokens-dark.scss'),
+    path.join(buildPath, 'tokens-glass-dark.scss')
+  );
+
+  // Step 5: Build redhat themes
+  console.log('Building redhat themes...');
+  const redhatExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat.json');
+  redhatExtendedSD.buildAllPlatforms();
+
+  const redhatDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-dark.json');
+  redhatDarkExtendedSD.buildAllPlatforms();
+
+  const redhatGlassExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-glass.json');
+  redhatGlassExtendedSD.buildAllPlatforms();
+
+  const redhatGlassDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-glass-dark.json');
+  redhatGlassDarkExtendedSD.buildAllPlatforms();
+
+  const redhatHighContrastExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-highcontrast.json');
+  redhatHighContrastExtendedSD.buildAllPlatforms();
+
+  const redhatHighContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-highcontrast-dark.json');
+  redhatHighContrastDarkExtendedSD.buildAllPlatforms();
+
+  // Step 6: Remove duplicate variables from redhat SCSS files
+  console.log('Removing duplicate variables from redhat themes...');
+  removeDuplicateVariables(
+    path.join(buildPath, 'tokens-default.scss'),
+    path.join(buildPath, 'tokens-redhat.scss')
+  );
+  removeDuplicateVariables(
+    path.join(buildPath, 'tokens-dark.scss'),
+    path.join(buildPath, 'tokens-redhat-dark.scss')
+  );
+  // Redhat glass themes compare against default (not glass), because they source all default/glass tokens
+  removeDuplicateVariables(
+    path.join(buildPath, 'tokens-default.scss'),
+    path.join(buildPath, 'tokens-redhat-glass.scss')
+  );
+  removeDuplicateVariables(
+    path.join(buildPath, 'tokens-dark.scss'),
+    path.join(buildPath, 'tokens-redhat-glass-dark.scss')
+  );
+  removeDuplicateVariables(
+    path.join(buildPath, 'tokens-default.scss'),
+    path.join(buildPath, 'tokens-redhat-highcontrast.scss')
+  );
+  removeDuplicateVariables(
+    path.join(buildPath, 'tokens-dark.scss'),
+    path.join(buildPath, 'tokens-redhat-highcontrast-dark.scss')
+  );
+
   console.log('\n============================');
   console.log('\nBuild completed.');
 };
 
+/**
+ * Remove CSS variable declarations from glassFile that are identical to baseFile
+ * @param {string} baseFilePath - Path to base theme SCSS file (e.g., tokens-default.scss)
+ * @param {string} glassFilePath - Path to glass theme SCSS file (e.g., tokens-glass.scss)
+ */
+function removeDuplicateVariables(baseFilePath, glassFilePath) {
+  const baseContent = fs.readFileSync(baseFilePath, 'utf8');
+  const glassContent = fs.readFileSync(glassFilePath, 'utf8');
+
+  // Extract all CSS variable declarations from base file
+  // Match lines like: --pf-t--global--border--radius--100: 4px;
+  const varRegex = /^\s*(--[^:]+:\s*[^;]+;)\s*$/gm;
+
+  const baseVars = new Set();
+  let match;
+  while ((match = varRegex.exec(baseContent)) !== null) {
+    // Store the complete declaration (trimmed for comparison)
+    baseVars.add(match[1].trim());
+  }
+
+  // Split glass file into lines
+  const glassLines = glassContent.split('\n');
+  const filteredLines = [];
+  let removedCount = 0;
+
+  // Filter out lines that exist in base
+  for (const line of glassLines) {
+    const varMatch = line.match(/^\s*(--[^:]+:\s*[^;]+;)\s*$/);
+
+    if (varMatch && baseVars.has(varMatch[1].trim())) {
+      // This line is identical to base, skip it
+      removedCount++;
+      continue;
+    }
+
+    // Keep this line (either not a var declaration or different from base)
+    filteredLines.push(line);
+  }
+
+  // Reconstruct the file
+  let newContent = filteredLines.join('\n');
+
+  // Count remaining variables
+  const remainingVars = filteredLines.filter(l => l.trim().startsWith('--')).length;
+
+  // Update or add the comment to reflect actual diff count
+  if (newContent.includes('// Only tokens that differ from base theme')) {
+    newContent = newContent.replace(
+      /\/\/ Only tokens that differ from base theme \(\d+ tokens\)/,
+      `// Only tokens that differ from base theme (${remainingVars} tokens)`
+    );
+  } else {
+    // Add the comment if it doesn't exist
+    newContent = newContent.replace(
+      /(@mixin pf-v6-tokens \{)/,
+      `// Only tokens that differ from base theme (${remainingVars} tokens)\n$1`
+    );
+  }
+
+  // Write back to glass file
+  fs.writeFileSync(glassFilePath, newContent, 'utf8');
+
+  console.log(`Removed ${removedCount} duplicate variables from ${path.basename(glassFilePath)}`);
+}
+
 module.exports = { build };

package/config.dark.json

@@ -1,5 +1,5 @@
 {
-  "source": ["tokens/dark/*.json"],
+  "source": ["tokens/default/dark/*.json"],
   "platforms": {
     "css": {
       "transformGroup": "patternfly/css",

package/config.default.json

@@ -1,5 +1,5 @@
 {
-  "source": ["tokens/default/*.json"],
+  "source": ["tokens/default/light/*.json"],
   "basePxFontSize": 16,
   "platforms": {
     "css": {

package/config.glass.dark.json

@@ -0,0 +1,23 @@
+{
+  "source": ["tokens/default/glass-dark/*.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "build/css/",
+      "prefix": "pf-t",
+      "files": [{
+        "destination": "tokens-glass-dark.scss",
+        "format": "customFormat",
+        "options": {
+          "outputReferences": true
+        },
+        "filter": {
+          "attributes": {
+            "category": "global"
+          }
+        }
+      }
+    ]
+    }
+  }
+}

package/config.glass.json

@@ -0,0 +1,24 @@
+{
+  "source": ["tokens/default/glass/*.json"],
+  "basePxFontSize": 16,
+  "platforms": {
+    "css": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "build/css/",
+      "prefix": "pf-t",
+      "files": [{
+        "destination": "tokens-glass.scss",
+        "format": "customFormat",
+        "options": {
+          "outputReferences": true
+        },
+        "filter": {
+          "attributes": {
+            "category": "global"
+          }
+        }
+      }
+    ]
+    }
+  }
+}

package/config.layers.glass-dark.json

@@ -0,0 +1,19 @@
+{
+  "source": ["tokens/default/glass-dark/*.json"],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-glass-dark.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/config.layers.glass.json

@@ -0,0 +1,19 @@
+{
+  "source": ["tokens/default/glass/*.json"],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-glass.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/config.layers.highcontrast-dark.json

@@ -0,0 +1,19 @@
+{
+  "source": ["tokens/default/highcontrast-dark/*.json"],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-highcontrast-dark.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/config.layers.highcontrast.json

@@ -0,0 +1,19 @@
+{
+  "source": ["tokens/default/highcontrast/*.json"],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-highcontrast.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/config.layers.redhat-dark.json

@@ -0,0 +1,22 @@
+{
+  "source": [
+    "tokens/default/dark/*.json",
+    "tokens/redhat/dark/redhat*.json"
+  ],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-redhat-dark.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/config.layers.redhat-glass-dark.json

@@ -0,0 +1,22 @@
+{
+  "source": [
+    "tokens/default/glass-dark/*.json",
+    "tokens/redhat/glass-dark/redhat*.json"
+  ],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-redhat-glass-dark.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/config.layers.redhat-glass.json

@@ -0,0 +1,22 @@
+{
+  "source": [
+    "tokens/default/glass/*.json",
+    "tokens/redhat/glass/redhat*.json"
+  ],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-redhat-glass.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/config.layers.redhat-highcontrast-dark.json

@@ -0,0 +1,22 @@
+{
+  "source": [
+    "tokens/default/highcontrast-dark/*.json",
+    "tokens/redhat/highcontrast-dark/redhat*.json"
+  ],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-redhat-highcontrast-dark.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}