@patternfly/design-tokens 1.15.0 → 1.15.2

package/build.js

@@ -27,6 +27,7 @@ const getTheme = ({ filePath }) => /tokens\/([^\/]*)\//gm.exec(filePath)[1];
 
 const build = (selector) => {
   const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers;
+  const buildPath = path.join(__dirname, 'build/css');
 
   console.log('Build started...');
   console.log('\n============================');
@@ -168,6 +169,11 @@ const build = (selector) => {
   const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
   darkExtendedSD.buildAllPlatforms();
 
+  // Set glass tokens to initial in base themes
+  console.log('Setting glass tokens to initial in base themes...');
+  setGlassTokensToInitial(path.join(buildPath, 'tokens-default.scss'));
+  setGlassTokensToInitial(path.join(buildPath, 'tokens-dark.scss'));
+
   // 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');
@@ -185,6 +191,11 @@ const build = (selector) => {
   const highContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.dark.json');
   highContrastDarkExtendedSD.buildAllPlatforms();
 
+  // Set glass tokens to initial in highcontrast themes
+  console.log('Setting glass tokens to initial in highcontrast themes...');
+  setGlassTokensToInitial(path.join(buildPath, 'tokens-highcontrast.scss'));
+  setGlassTokensToInitial(path.join(buildPath, 'tokens-highcontrast-dark.scss'));
+
   const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
   layersSD.buildAllPlatforms();
 
@@ -205,24 +216,24 @@ const build = (selector) => {
   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();
+  console.log('Building layer configs for felt themes...');
+  const layersFeltSD = StyleDictionary.extend(__dirname + '/config.layers.felt.json');
+  layersFeltSD.buildAllPlatforms();
 
-  const layersRedhatDarkSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-dark.json');
-  layersRedhatDarkSD.buildAllPlatforms();
+  const layersFeltDarkSD = StyleDictionary.extend(__dirname + '/config.layers.felt-dark.json');
+  layersFeltDarkSD.buildAllPlatforms();
 
-  const layersRedhatGlassSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-glass.json');
-  layersRedhatGlassSD.buildAllPlatforms();
+  const layersFeltGlassSD = StyleDictionary.extend(__dirname + '/config.layers.felt-glass.json');
+  layersFeltGlassSD.buildAllPlatforms();
 
-  const layersRedhatGlassDarkSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-glass-dark.json');
-  layersRedhatGlassDarkSD.buildAllPlatforms();
+  const layersFeltGlassDarkSD = StyleDictionary.extend(__dirname + '/config.layers.felt-glass-dark.json');
+  layersFeltGlassDarkSD.buildAllPlatforms();
 
-  const layersRedhatHighContrastSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-highcontrast.json');
-  layersRedhatHighContrastSD.buildAllPlatforms();
+  const layersFeltHighContrastSD = StyleDictionary.extend(__dirname + '/config.layers.felt-highcontrast.json');
+  layersFeltHighContrastSD.buildAllPlatforms();
 
-  const layersRedhatHighContrastDarkSD = StyleDictionary.extend(__dirname + '/config.layers.redhat-highcontrast-dark.json');
-  layersRedhatHighContrastDarkSD.buildAllPlatforms();
+  const layersFeltHighContrastDarkSD = StyleDictionary.extend(__dirname + '/config.layers.felt-highcontrast-dark.json');
+  layersFeltHighContrastDarkSD.buildAllPlatforms();
 
   // Step 3: Build glass themes
   console.log('Building glass themes...');
@@ -234,7 +245,6 @@ const build = (selector) => {
 
   // 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')
@@ -244,52 +254,59 @@ const build = (selector) => {
     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();
+  // Step 5: Build felt themes
+  console.log('Building felt themes...');
+  const feltExtendedSD = StyleDictionary.extend(__dirname + '/config.felt.json');
+  feltExtendedSD.buildAllPlatforms();
 
-  const redhatDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-dark.json');
-  redhatDarkExtendedSD.buildAllPlatforms();
+  const feltDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.felt-dark.json');
+  feltDarkExtendedSD.buildAllPlatforms();
 
-  const redhatGlassExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-glass.json');
-  redhatGlassExtendedSD.buildAllPlatforms();
+  const feltGlassExtendedSD = StyleDictionary.extend(__dirname + '/config.felt-glass.json');
+  feltGlassExtendedSD.buildAllPlatforms();
 
-  const redhatGlassDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-glass-dark.json');
-  redhatGlassDarkExtendedSD.buildAllPlatforms();
+  const feltGlassDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.felt-glass-dark.json');
+  feltGlassDarkExtendedSD.buildAllPlatforms();
 
-  const redhatHighContrastExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-highcontrast.json');
-  redhatHighContrastExtendedSD.buildAllPlatforms();
+  const feltHighContrastExtendedSD = StyleDictionary.extend(__dirname + '/config.felt-highcontrast.json');
+  feltHighContrastExtendedSD.buildAllPlatforms();
 
-  const redhatHighContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-highcontrast-dark.json');
-  redhatHighContrastDarkExtendedSD.buildAllPlatforms();
+  const feltHighContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.felt-highcontrast-dark.json');
+  feltHighContrastDarkExtendedSD.buildAllPlatforms();
 
-  // Step 6: Remove duplicate variables from redhat SCSS files
-  console.log('Removing duplicate variables from redhat themes...');
+  // Set glass tokens to initial in felt non-glass themes
+  console.log('Setting glass tokens to initial in felt themes...');
+  setGlassTokensToInitial(path.join(buildPath, 'tokens-felt.scss'));
+  setGlassTokensToInitial(path.join(buildPath, 'tokens-felt-dark.scss'));
+  setGlassTokensToInitial(path.join(buildPath, 'tokens-felt-highcontrast.scss'));
+  setGlassTokensToInitial(path.join(buildPath, 'tokens-felt-highcontrast-dark.scss'));
+
+  // Step 6: Remove duplicate variables from felt SCSS files
+  console.log('Removing duplicate variables from felt themes...');
   removeDuplicateVariables(
     path.join(buildPath, 'tokens-default.scss'),
-    path.join(buildPath, 'tokens-redhat.scss')
+    path.join(buildPath, 'tokens-felt.scss')
   );
   removeDuplicateVariables(
     path.join(buildPath, 'tokens-dark.scss'),
-    path.join(buildPath, 'tokens-redhat-dark.scss')
+    path.join(buildPath, 'tokens-felt-dark.scss')
   );
-  // Redhat glass themes compare against default (not glass), because they source all default/glass tokens
+  // Felt 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')
+    path.join(buildPath, 'tokens-felt-glass.scss')
   );
   removeDuplicateVariables(
     path.join(buildPath, 'tokens-dark.scss'),
-    path.join(buildPath, 'tokens-redhat-glass-dark.scss')
+    path.join(buildPath, 'tokens-felt-glass-dark.scss')
   );
   removeDuplicateVariables(
     path.join(buildPath, 'tokens-default.scss'),
-    path.join(buildPath, 'tokens-redhat-highcontrast.scss')
+    path.join(buildPath, 'tokens-felt-highcontrast.scss')
   );
   removeDuplicateVariables(
     path.join(buildPath, 'tokens-dark.scss'),
-    path.join(buildPath, 'tokens-redhat-highcontrast-dark.scss')
+    path.join(buildPath, 'tokens-felt-highcontrast-dark.scss')
   );
 
   console.log('\n============================');
@@ -361,4 +378,30 @@ function removeDuplicateVariables(baseFilePath, glassFilePath) {
   console.log(`Removed ${removedCount} duplicate variables from ${path.basename(glassFilePath)}`);
 }
 
+/**
+ * Set all glass token values to 'initial' in non-glass SCSS files
+ * @param {string} scssFilePath - Path to non-glass SCSS file (e.g., tokens-default.scss)
+ */
+function setGlassTokensToInitial(scssFilePath) {
+  const content = fs.readFileSync(scssFilePath, 'utf8');
+
+  // Match CSS variable declarations with "glass" in the name
+  // Pattern: --pf-t--global--..--glass--...: <any-value>;
+  const glassVarRegex = /(--pf-t--[^:]*--glass--[^:]+):\s*[^;]+;/g;
+
+  let modifiedContent = content;
+  let replacementCount = 0;
+
+  // Replace all glass token values with 'initial'
+  modifiedContent = content.replace(glassVarRegex, (_match, varName) => {
+    replacementCount++;
+    return `${varName}: initial;`;
+  });
+
+  // Write back to file
+  fs.writeFileSync(scssFilePath, modifiedContent, 'utf8');
+
+  console.log(`Set ${replacementCount} glass token values to 'initial' in ${path.basename(scssFilePath)}`);
+}
+
 module.exports = { build };

package/{config.redhat-dark.json → config.felt-dark.json}

@@ -1,7 +1,7 @@
 {
   "source": [
     "tokens/default/dark/*.json",
-    "tokens/redhat/dark/redhat*.json"
+    "tokens/felt/dark/felt*.json"
   ],
   "platforms": {
     "css": {
@@ -9,7 +9,7 @@
       "buildPath": "build/css/",
       "prefix": "pf-t",
       "files": [{
-        "destination": "tokens-redhat-dark.scss",
+        "destination": "tokens-felt-dark.scss",
         "format": "customFormat",
         "options": {
           "outputReferences": true

package/{config.redhat-glass-dark.json → config.felt-glass-dark.json}

@@ -1,7 +1,7 @@
 {
   "source": [
     "tokens/default/glass-dark/*.json",
-    "tokens/redhat/glass-dark/redhat*.json"
+    "tokens/felt/glass-dark/felt*.json"
   ],
   "platforms": {
     "css": {
@@ -9,7 +9,7 @@
       "buildPath": "build/css/",
       "prefix": "pf-t",
       "files": [{
-        "destination": "tokens-redhat-glass-dark.scss",
+        "destination": "tokens-felt-glass-dark.scss",
         "format": "customFormat",
         "options": {
           "outputReferences": true

package/{config.redhat-glass.json → config.felt-glass.json}

@@ -1,7 +1,7 @@
 {
   "source": [
     "tokens/default/glass/*.json",
-    "tokens/redhat/glass/redhat*.json"
+    "tokens/felt/glass/felt*.json"
   ],
   "basePxFontSize": 16,
   "platforms": {
@@ -10,7 +10,7 @@
       "buildPath": "build/css/",
       "prefix": "pf-t",
       "files": [{
-        "destination": "tokens-redhat-glass.scss",
+        "destination": "tokens-felt-glass.scss",
         "format": "customFormat",
         "options": {
           "outputReferences": true

package/{config.redhat-highcontrast-dark.json → config.felt-highcontrast-dark.json}

@@ -1,7 +1,7 @@
 {
   "source": [
     "tokens/default/highcontrast-dark/*.json",
-    "tokens/redhat/highcontrast-dark/redhat*.json"
+    "tokens/felt/highcontrast-dark/felt*.json"
   ],
   "platforms": {
     "css": {
@@ -9,7 +9,7 @@
       "buildPath": "build/css/",
       "prefix": "pf-t",
       "files": [{
-        "destination": "tokens-redhat-highcontrast-dark.scss",
+        "destination": "tokens-felt-highcontrast-dark.scss",
         "format": "customFormat",
         "options": {
           "outputReferences": true

package/{config.redhat.json → config.felt.json}

@@ -1,7 +1,7 @@
 {
   "source": [
     "tokens/default/light/*.json",
-    "tokens/redhat/light/redhat*.json"
+    "tokens/felt/light/felt*.json"
   ],
   "basePxFontSize": 16,
   "platforms": {
@@ -10,7 +10,7 @@
       "buildPath": "build/css/",
       "prefix": "pf-t",
       "files": [{
-        "destination": "tokens-redhat.scss",
+        "destination": "tokens-felt.scss",
         "format": "customFormat",
         "options": {
           "outputReferences": true

package/{config.layers.redhat-dark.json → config.layers.felt-dark.json}

@@ -1,7 +1,7 @@
 {
   "source": [
     "tokens/default/dark/*.json",
-    "tokens/redhat/dark/redhat*.json"
+    "tokens/felt/dark/felt*.json"
   ],
   "platforms": {
     "json/default": {
@@ -10,7 +10,7 @@
       "prefix": "pf-t",
       "files": [
         {
-          "destination": "token-layers-redhat-dark.json",
+          "destination": "token-layers-felt-dark.json",
           "format": "json/flat-categories",
           "options": {
             "outputReferences": false

package/{config.layers.redhat-glass-dark.json → config.layers.felt-glass-dark.json}

@@ -1,7 +1,7 @@
 {
   "source": [
     "tokens/default/glass-dark/*.json",
-    "tokens/redhat/glass-dark/redhat*.json"
+    "tokens/felt/glass-dark/felt*.json"
   ],
   "platforms": {
     "json/default": {
@@ -10,7 +10,7 @@
       "prefix": "pf-t",
       "files": [
         {
-          "destination": "token-layers-redhat-glass-dark.json",
+          "destination": "token-layers-felt-glass-dark.json",
           "format": "json/flat-categories",
           "options": {
             "outputReferences": false

package/{config.layers.redhat-glass.json → config.layers.felt-glass.json}

@@ -1,7 +1,7 @@
 {
   "source": [
     "tokens/default/glass/*.json",
-    "tokens/redhat/glass/redhat*.json"
+    "tokens/felt/glass/felt*.json"
   ],
   "platforms": {
     "json/default": {
@@ -10,7 +10,7 @@
       "prefix": "pf-t",
       "files": [
         {
-          "destination": "token-layers-redhat-glass.json",
+          "destination": "token-layers-felt-glass.json",
           "format": "json/flat-categories",
           "options": {
             "outputReferences": false

package/{config.layers.redhat-highcontrast-dark.json → config.layers.felt-highcontrast-dark.json}

@@ -1,7 +1,7 @@
 {
   "source": [
     "tokens/default/highcontrast-dark/*.json",
-    "tokens/redhat/highcontrast-dark/redhat*.json"
+    "tokens/felt/highcontrast-dark/felt*.json"
   ],
   "platforms": {
     "json/default": {
@@ -10,7 +10,7 @@
       "prefix": "pf-t",
       "files": [
         {
-          "destination": "token-layers-redhat-highcontrast-dark.json",
+          "destination": "token-layers-felt-highcontrast-dark.json",
           "format": "json/flat-categories",
           "options": {
             "outputReferences": false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/design-tokens",
-  "version": "1.15.0",
+  "version": "1.15.2",
   "description": "Define the design tokens for patternfly design system and component library",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",