@patternfly/design-tokens 1.14.6 → 1.14.7

package/plugins/export-patternfly-tokens/src/code.ts

@@ -1,5 +1,3 @@
-console.clear();
-
 interface FileData {
   fileName: string;
   body: {
@@ -17,7 +15,6 @@ type VariableValueExtended = VariableValue & {
 /* MAIN function */
 
 figma.ui.onmessage = (e) => {
-  console.log('code received message', e);
   if (e.type === 'EXPORT') {
     exportToJSON();
   }
@@ -45,23 +42,45 @@ function exportToJSON() {
 
 /* EXPORT - helper functions */
 
-function processCollection({ name, modes, variableIds }) {
+function processCollection(collection) {
+  const { name, modes, variableIds } = collection;
   const files = [];
+
+  // Check if this is an extended collection
+  const isExtended = (collection as any).parentVariableCollectionId !== undefined;
+  const variableOverrides = (collection as any).variableOverrides || {};
+
   modes.forEach((mode) => {
     let file: FileData = { fileName: `${name}.${mode.name}.tokens.json`, body: {} };
 
-    variableIds.forEach((variableId) => {
-      const { name, resolvedType, valuesByMode, description } = figma.variables.getVariableById(variableId);
+    // For extended collections, only process overridden variables
+    const varsToProcess = isExtended ? Object.keys(variableOverrides) : variableIds;
+
+    varsToProcess.forEach((variableId) => {
+      const variable = figma.variables.getVariableById(variableId);
+      if (!variable) {
+        return;
+      }
+
+      const { name: varName, resolvedType, valuesByMode, description } = variable;
 
-      if (name.includes('figma-only')) {
+      const varExcludePattern = /figma-only/i;
+      if (varExcludePattern.test(varName)) {
         return; // Skip this variable
       }
 
-      const value: VariableValueExtended = valuesByMode[mode.modeId];
+      // For extended collections, get the overridden value
+      let value: VariableValueExtended;
+      if (isExtended) {
+        const overrides = variableOverrides[variableId];
+        value = overrides ? overrides[mode.modeId] : undefined;
+      } else {
+        value = valuesByMode[mode.modeId];
+      }
 
       if (value !== undefined && ['COLOR', 'FLOAT', 'STRING'].includes(resolvedType)) {
         let obj = file.body;
-        name.split('/').forEach((groupName) => {
+        varName.split('/').forEach((groupName) => {
           obj[groupName] = obj[groupName] || {};
           obj = obj[groupName];
         });
@@ -73,7 +92,6 @@ function processCollection({ name, modes, variableIds }) {
         if (value.type === 'VARIABLE_ALIAS') {
           obj.$type = resolvedType === 'COLOR' ? 'color' : 'number';
           obj.$value = `{${figma.variables.getVariableById(value.id).name.replace(/\//g, '.')}}`;
-          console.log(value);
         } else if (resolvedType === 'COLOR') {
           obj.$type = 'color';
           obj.$value = rgbToHex(value);
@@ -86,6 +104,7 @@ function processCollection({ name, modes, variableIds }) {
         }
       }
     });
+
     files.push(file);
   });
   return files;

package/plugins/export-patternfly-tokens/src/ui.tsx

@@ -25,82 +25,127 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
       // Color palette
       case '/* Color Palette.Mode 1.tokens.json */':
         saveFileName = 'palette.color.json';
-        saveFolderNames = ['default', 'dark', 'highcontrast', 'highcontrast-dark'];
+        saveFolderNames = ['default/light', 'default/dark', 'default/highcontrast', 'default/highcontrast-dark', 'default/glass', 'default/glass-dark'];
         break;
 
       // Base tokens
       // Base color
       case '/* Base Color Tokens - Light.Value.tokens.json */':
         saveFileName = 'base.json';
-        saveFolderNames = ['default', 'highcontrast'];
+        saveFolderNames = ['default/light', 'default/highcontrast', 'default/glass'];
         break;
       // Base color - dark
       case '/* Base Color Tokens - Dark.Mode 1.tokens.json */':
         saveFileName = 'base.dark.json';
-        saveFolderNames = ['dark', 'highcontrast-dark'];
+        saveFolderNames = ['default/dark', 'default/highcontrast-dark', 'default/glass-dark'];
         break;
       // Base dimension
       case '/* Base Dimension Tokens.Mode 1.tokens.json */':
         saveFileName = 'base.dimension.json';
-        saveFolderNames = ['default', 'highcontrast'];
+        saveFolderNames = ['default/light', 'default/highcontrast', 'default/glass']; //why not dark?
         break;
       // Base motion
       case '/* Base Motion Tokens.Mode 1.tokens.json */':
         saveFileName = 'base.motion.json';
-        saveFolderNames = ['default'];
+        saveFolderNames = ['default/light'];
         break;
 
       // Semantic tokens
       // Semantic color
-      case '/* Semantic Color Tokens.Light.tokens.json */':
+      case '/* Default Semantic Color Tokens.Light.tokens.json */':
         saveFileName = 'semantic.json';
-        saveFolderNames = ['default'];
+        saveFolderNames = ['default/light'];
         break;
       // Semantic color - dark
-      case '/* Semantic Color Tokens.Dark.tokens.json */':
+      case '/* Default Semantic Color Tokens.Dark.tokens.json */':
         saveFileName = 'semantic.dark.json';
-        saveFolderNames = ['dark'];
+        saveFolderNames = ['default/dark'];
+        break;
+      // Semantic color - glass
+      case '/* Default Semantic Color Tokens.Light - Glass.tokens.json */':
+        saveFileName = 'semantic.glass.json';
+        saveFolderNames = ['default/glass'];
+        break;
+      // Semantic color - dark glass
+      case '/* Default Semantic Color Tokens.Dark - Glass.tokens.json */':
+        saveFileName = 'semantic.glass.dark.json';
+        saveFolderNames = ['default/glass-dark'];
         break;
       // Semantic color - high contrast
-      case '/* Semantic Color Tokens.Light - High Contrast.tokens.json */':
+      case '/* Default Semantic Color Tokens.Light - High Contrast (Beta).tokens.json */':
         saveFileName = 'semantic.highcontrast.json';
-        saveFolderNames = ['highcontrast'];
+        saveFolderNames = ['default/highcontrast'];
         break;
       // Semantic color - high contrast - dark
-      case '/* Semantic Color Tokens.Dark - High Contrast.tokens.json */':
+      case '/* Default Semantic Color Tokens.Dark - High Contrast (Beta).tokens.json */':
         saveFileName = 'semantic.highcontrast.dark.json';
-        saveFolderNames = ['highcontrast-dark'];
+        saveFolderNames = ['default/highcontrast-dark'];
         break;
       // Semantic dimension
       case ('/* Semantic Dimension Tokens.Default.tokens.json */'):
         saveFileName = 'semantic.dimension.json';
-        saveFolderNames = ['default'];
+        saveFolderNames = ['default/light'];
         break;
       // Semantic dimension - high contrast
-      case '/* Semantic Dimension Tokens.High Contrast.tokens.json */':
+      case '/* Semantic Dimension Tokens.High Contrast - Beta.tokens.json */':
         saveFileName = 'semantic.dimension.highcontrast.json';
-        saveFolderNames = ['highcontrast'];
+        saveFolderNames = ['default/highcontrast'];
         break;
       // Semantic motion
       case '/* Semantic Motion Tokens.Mode 1.tokens.json */':
         saveFileName = 'semantic.motion.json';
-        saveFolderNames = ['default'];
+        saveFolderNames = ['default/light'];
         break;
 
       // Charts tokens
       // Charts
       case '/* Charts.Light.tokens.json */':
         saveFileName = 'charts.json';
-        saveFolderNames = ['default'];
+        saveFolderNames = ['default/light'];
         break;
       // Charts - dark
       case '/* Charts.Dark.tokens.json */':
         saveFileName = 'charts.dark.json';
-        saveFolderNames = ['dark'];
+        saveFolderNames = ['default/dark'];
+        break;
+
+      // Red Hat color tokens
+      case '/* Red Hat Color Tokens.Light.tokens.json */':
+        saveFileName = 'redhat.color.json';
+        saveFolderNames = ['redhat/light'];
+        break;
+      case '/* Red Hat Color Tokens.Dark.tokens.json */':
+        saveFileName = 'redhat.color.dark.json';
+        saveFolderNames = ['redhat/dark'];
+        break;
+      case '/* Red Hat Color Tokens.Light - Glass.tokens.json */':
+        saveFileName = 'redhat.color.glass.json';
+        saveFolderNames = ['redhat/glass'];
+        break;
+      case '/* Red Hat Color Tokens.Dark - Glass.tokens.json */':
+        saveFileName = 'redhat.color.glass.dark.json';
+        saveFolderNames = ['redhat/glass-dark'];
+        break;
+      case '/* Red Hat Color Tokens.Light - High Contrast (Beta).tokens.json */':
+        saveFileName = 'redhat.color.highcontrast.json';
+        saveFolderNames = ['redhat/highcontrast'];
+        break;
+      case '/* Red Hat Color Tokens.Dark - High Contrast (Beta).tokens.json */':
+        saveFileName = 'redhat.color.highcontrast.dark.json';
+        saveFolderNames = ['redhat/highcontrast-dark'];
+        break;
+      // Red Hat dimension tokens
+      case '/* Red Hat Dimension Tokens.Default.tokens.json */':
+        saveFileName = 'redhat.dimension.json';
+        saveFolderNames = ['redhat/light'];
+        break;
+      case '/* Red Hat Dimension Tokens.High Contrast - Beta.tokens.json */':
+        saveFileName = 'redhat.dimension.highcontrast.json';
+        saveFolderNames = ['redhat/highcontrast'];
         break;
       default:
         saveFileName = splitFiles[i].split('\n', 1)[0];
-        saveFolderNames = ['default'];
+        saveFolderNames = ['default/light'];
     }
 
     const fileToExport = splitFiles[i].substring(splitFiles[i].indexOf('\n') + 1);

package/tokens/{dark → default/dark}/base.dark.json

@@ -32,6 +32,10 @@
             "type": "color",
             "value": "rgba(199, 199, 199, 0.1500)"
           },
+          "700": {
+            "type": "color",
+            "value": "rgba(199, 199, 199, 0.2500)"
+          },
           "highlight": {
             "100": {
               "type": "color",
@@ -57,6 +61,42 @@
           "300": {
             "type": "color",
             "value": "{color.blue.10}"
+          },
+          "accent": {
+            "100": {
+              "type": "color",
+              "value": "{color.red.50}"
+            },
+            "200": {
+              "type": "color",
+              "value": "{color.red.40}"
+            },
+            "300": {
+              "type": "color",
+              "value": "{color.red.30}"
+            },
+            "350": {
+              "type": "color",
+              "value": "{color.red.20}"
+            },
+            "400": {
+              "type": "color",
+              "value": "{color.white}"
+            }
+          },
+          "subtle": {
+            "100": {
+              "type": "color",
+              "value": "{color.blue.70}"
+            },
+            "200": {
+              "type": "color",
+              "value": "{color.blue.60}"
+            },
+            "300": {
+              "type": "color",
+              "value": "{color.blue.30}"
+            }
           }
         },
         "disabled": {
@@ -87,48 +127,6 @@
             "value": "{color.yellow.20}"
           }
         },
-        "severity": {
-          "undefined": {
-            "100": {
-              "type": "color",
-              "value": "{color.gray.40}"
-            }
-          },
-          "none": {
-            "100": {
-              "type": "color",
-              "value": "{color.blue.30}"
-            }
-          },
-          "minor": {
-            "100": {
-              "type": "color",
-              "value": "{color.gray.30}"
-            }
-          },
-          "moderate": {
-            "100": {
-              "type": "color",
-              "value": "{color.yellow.30}"
-            }
-          },
-          "important": {
-            "100": {
-              "type": "color",
-              "value": "{color.orange.40}"
-            }
-          },
-          "critical": {
-            "100": {
-              "type": "color",
-              "value": "{color.red-orange.50}"
-            },
-            "200": {
-              "type": "color",
-              "value": "{color.red-orange.40}"
-            }
-          }
-        },
         "status": {
           "success": {
             "100": {
@@ -201,6 +199,48 @@
             }
           }
         },
+        "severity": {
+          "undefined": {
+            "100": {
+              "type": "color",
+              "value": "{color.gray.40}"
+            }
+          },
+          "none": {
+            "100": {
+              "type": "color",
+              "value": "{color.blue.30}"
+            }
+          },
+          "minor": {
+            "100": {
+              "type": "color",
+              "value": "{color.gray.30}"
+            }
+          },
+          "moderate": {
+            "100": {
+              "type": "color",
+              "value": "{color.yellow.30}"
+            }
+          },
+          "important": {
+            "100": {
+              "type": "color",
+              "value": "{color.orange.40}"
+            }
+          },
+          "critical": {
+            "100": {
+              "type": "color",
+              "value": "{color.red-orange.50}"
+            },
+            "200": {
+              "type": "color",
+              "value": "{color.red-orange.40}"
+            }
+          }
+        },
         "nonstatus": {
           "red": {
             "100": {
@@ -338,7 +378,7 @@
         "color": {
           "50": {
             "type": "color",
-            "value": "{color.gray.60}"
+            "value": "{color.gray.70}"
           },
           "100": {
             "type": "color",

package/tokens/{highcontrast-dark → default/dark}/palette.color.json

@@ -22,6 +22,10 @@
         "type": "color",
         "value": "#a3a3a3"
       },
+      "45": {
+        "type": "color",
+        "value": "#8c8c8c"
+      },
       "50": {
         "type": "color",
         "value": "#707070"
@@ -321,6 +325,10 @@
       "80": {
         "type": "color",
         "value": "#3f0000"
+      },
+      "05": {
+        "type": "color",
+        "value": "#fef0f0"
       }
     }
   }