Merge pull request #4318 from grommet/shadow-tokens

Rename elevation tokens to shadow and update scripts
grommet · Oct 31, 2024 · 57d089b · 57d089b
2 parents 0b92984 + 00c4336
commit 57d089b
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 65 deletions.
diff --git a/design-tokens/src/token_export.ts b/design-tokens/src/token_export.ts
@@ -49,8 +49,8 @@ export function tokenFilesFromLocalVariables(
     localVariablesResponse.meta.variableCollections;
   const localVariables = localVariablesResponse.meta.variables;
   const shadows: { [key: string]: any } = {};
-  shadows.elevation = {};
-  const root = shadows.elevation; // TO DO this hard codes the concept of "elevation" in shadow naming
+  shadows.shadow = {};
+  const root = shadows.shadow; // TO DO this hard codes the concept of "shadow" in shadow naming
 
   Object.values(localVariables).forEach(variable => {
     // Skip remote variables because we only want to generate tokens for local variables
@@ -153,7 +153,7 @@ export function tokenFilesFromLocalVariables(
             localVariables,
           );
         }
-      } else if (variable.name.includes('elevation')) {
+      } else if (/^shadow/.test(variable.name)) {
         const parts = variable.name.split('/');
         const shadow = parts.slice(1, 2).join('');
         const property = parts[parts.length - 1];
@@ -179,7 +179,7 @@ export function tokenFilesFromLocalVariables(
             },
           };
         else {
-          // elevation/small/2/offsetY --> need index 1
+          // shadow/small/2/offsetY --> need index 1
           const index =
             parseInt(parts[parts.length - 3], 10) >= 0
               ? parseInt(parts[parts.length - 3], 10)

diff --git a/design-tokens/src/utils.ts b/design-tokens/src/utils.ts
@@ -40,7 +40,7 @@ export const nonComponentTokens: string[] = [
   'heading',
   'display',
   'paragraph',
-  'elevation',
+  'shadow',
   'size',
   'fontStack',
   'breakpoint',

diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json
@@ -109,6 +109,32 @@
           }
         }
       },
+      "primary": {
+        "default": {
+          "$type": "color",
+          "$value": "{base.color.green.600}",
+          "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
+          "$extensions": {
+            "com.figma": {
+              "hiddenFromPublishing": false,
+              "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+              "codeSyntax": {}
+            }
+          }
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{TBD}",
+          "$description": "Hover color variant of the primary color.",
+          "$extensions": {
+            "com.figma": {
+              "hiddenFromPublishing": false,
+              "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+              "codeSyntax": {}
+            }
+          }
+        }
+      },
       "unknown": {
         "$type": "color",
         "$value": "{base.color.white.opacity6}",
@@ -199,32 +225,6 @@
           }
         }
       },
-      "primary": {
-        "default": {
-          "$type": "color",
-          "$value": "{base.color.green.600}",
-          "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
-          "$extensions": {
-            "com.figma": {
-              "hiddenFromPublishing": false,
-              "scopes": ["FRAME_FILL", "SHAPE_FILL"],
-              "codeSyntax": {}
-            }
-          }
-        },
-        "hover": {
-          "$type": "color",
-          "$value": "{TBD}",
-          "$description": "Hover color variant of the primary color.",
-          "$extensions": {
-            "com.figma": {
-              "hiddenFromPublishing": false,
-              "scopes": ["FRAME_FILL", "SHAPE_FILL"],
-              "codeSyntax": {}
-            }
-          }
-        }
-      },
       "ok": {
         "$type": "color",
         "$value": "{base.color.green.500-Opacity30}",
@@ -1147,7 +1147,7 @@
       }
     }
   },
-  "elevation": {
+  "shadow": {
     "small": {
       "$type": "shadow",
       "$value": [

diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json
@@ -109,6 +109,32 @@
           }
         }
       },
+      "primary": {
+        "default": {
+          "$type": "color",
+          "$value": "{base.color.green.600}",
+          "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
+          "$extensions": {
+            "com.figma": {
+              "hiddenFromPublishing": false,
+              "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+              "codeSyntax": {}
+            }
+          }
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{TBD}",
+          "$description": "Hover color variant of the primary color.",
+          "$extensions": {
+            "com.figma": {
+              "hiddenFromPublishing": false,
+              "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+              "codeSyntax": {}
+            }
+          }
+        }
+      },
       "unknown": {
         "$type": "color",
         "$value": "{base.color.black.opacity4}",
@@ -199,32 +225,6 @@
           }
         }
       },
-      "primary": {
-        "default": {
-          "$type": "color",
-          "$value": "{base.color.green.600}",
-          "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
-          "$extensions": {
-            "com.figma": {
-              "hiddenFromPublishing": false,
-              "scopes": ["FRAME_FILL", "SHAPE_FILL"],
-              "codeSyntax": {}
-            }
-          }
-        },
-        "hover": {
-          "$type": "color",
-          "$value": "{TBD}",
-          "$description": "Hover color variant of the primary color.",
-          "$extensions": {
-            "com.figma": {
-              "hiddenFromPublishing": false,
-              "scopes": ["FRAME_FILL", "SHAPE_FILL"],
-              "codeSyntax": {}
-            }
-          }
-        }
-      },
       "ok": {
         "$type": "color",
         "$value": "{base.color.green.400-Opacity24}",
@@ -1147,7 +1147,7 @@
       }
     }
   },
-  "elevation": {
+  "shadow": {
     "small": {
       "$type": "shadow",
       "$value": [

diff --git a/sandbox/grommet-app/src/theme.jsx b/sandbox/grommet-app/src/theme.jsx
@@ -758,24 +758,24 @@ const buildTheme = tokens => {
         light: {
           small: elevationlight
             ? elevationlight.hpe.elevation.small
-            : light.hpe.elevation.small,
+            : light.hpe.shadow.small,
           medium: elevationlight
             ? elevationlight.hpe.elevation.medium
-            : light.hpe.elevation.medium,
+            : light.hpe.shadow.medium,
           large: elevationlight
             ? elevationlight.hpe.elevation.large
-            : light.hpe.elevation.large,
+            : light.hpe.shadow.large,
         },
         dark: {
           small: elevationdark
             ? elevationdark.hpe.elevation.small
-            : dark.hpe.elevation.small,
+            : dark.hpe.shadow.small,
           medium: elevationdark
             ? elevationdark.hpe.elevation.medium
-            : dark.hpe.elevation.medium,
+            : dark.hpe.shadow.medium,
           large: elevationdark
             ? elevationdark.hpe.elevation.large
-            : dark.hpe.elevation.large,
+            : dark.hpe.shadow.large,
         },
       },
       hover: {