perf(darkmode): update token naming convention #129

Changes to be committed: renamed: scripts/config-dark.json -> scripts/config-darkmode.json modified: scripts/styleDictionary.js renamed: src/color-dark/alert.json -> src/color-darkmode/alert.json renamed: src/color-dark/background.json -> src/color-darkmode/background.json renamed: src/color-dark/base.json -> src/color-darkmode/base.json renamed: src/color-dark/border.json -> src/color-darkmode/border.json renamed: src/color-dark/brand.json -> src/color-darkmode/brand.json renamed: src/color-dark/icon.json -> src/color-darkmode/icon.json renamed: src/color-dark/text.json -> src/color-darkmode/text.json renamed: src/color-dark/tier.json -> src/color-darkmode/tier.json renamed: src/color-dark/ui.json -> src/color-darkmode/ui.json
AlaskaAirlines · Sep 13, 2023 · 83fee5a · 83fee5a
1 parent 427f8d9
commit 83fee5a
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 93 deletions.
diff --git a/scripts/config-dark.json → scripts/config-darkmode.json b/scripts/config-dark.json → scripts/config-darkmode.json
@@ -1,22 +1,22 @@
 {
   "include": ["./src/asset/*.json", "./src/size/*.json", "./src/*.json"],
-  "source": ["./src/color-dark/*.json"],
+  "source": ["./src/color-darkmode/*.json"],
   "platforms": {
-    "SCSSVariables--dark": {
+    "SCSSVariables--darkmode": {
       "transformGroup": "scss",
       "prefix": "ds",
       "comment": "File type: SCSS; variable type: Sass; filter: public, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "SCSSVariables--dark.scss",
+          "destination": "SCSSVariables--darkmode.scss",
           "format": "scss/variables",
           "filter": {
             "public": true
           }
         },
         {
-          "destination": "SCSSVariablesMapFlat--dark.scss",
+          "destination": "SCSSVariablesMapFlat--darkmode.scss",
           "format": "custom/scss/map-flat",
           "mapName": "auroTokens",
           "filter": {
@@ -25,21 +25,21 @@
         }
       ]
     },
-    "CSSVariables--dark": {
+    "CSSVariables--darkmode": {
       "transformGroup": "css",
       "prefix": "ds",
       "comment": "File type: CSS; variable type: css; filter: public",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "CSSVariables--dark.css",
+          "destination": "CSSVariables--darkmode.css",
           "format": "css/variables",
           "filter": {
             "public": true
           }
         },
         {
-          "destination": "CSSVariablesMapFlat--dark.css",
+          "destination": "CSSVariablesMapFlat--darkmode.css",
           "format": "custom/scss/map-flat",
           "mapName": "auroTokens",
           "filter": {
@@ -48,30 +48,30 @@
         }
       ]
     },
-    "SCSSOpacityVariables--dark": {
+    "SCSSOpacityVariables--darkmode": {
       "transformGroup": "scss",
       "prefix": "ds",
       "comment": "File type: SCSS; variable type: Sass; filter: opacity, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "SCSSOpacityVariables--dark.scss",
+          "destination": "SCSSOpacityVariables--darkmode.scss",
           "format": "scss/variables",
           "filter": {
             "opacity": true
           }
         }
       ]
     },
-    "SCSSVariableMap--dark": {
+    "SCSSVariableMap--darkmode": {
       "transformGroup": "scss",
       "prefix": "ds",
       "comment": "File type: SCSS; variable type: Sassmap; filter: size, public, theme: dark mode",
       "dependency": "WCSS: ./src/utilityMixins/_spacingUtility.scss",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "SCSSVariableMap--dark.scss",
+          "destination": "SCSSVariableMap--darkmode.scss",
           "format": "scss/map-deep",
           "filter": {
             "attributes": {
@@ -83,30 +83,30 @@
       ]
     },
 
-    "CSSCustomProperties--dark": {
+    "CSSCustomProperties--darkmode": {
       "transformGroup": "css",
       "prefix": "ds",
       "comment": "File type: CSS; variable type: CSS; filter: public, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "CSSCustomProperties--dark.css",
+          "destination": "CSSCustomProperties--darkmode.css",
           "format": "css/variables",
           "filter": {
             "public": true
           }
         }
       ]
     },
-    "CSSCustomPropertiesColorRGB--dark": {
+    "CSSCustomPropertiesColorRGB--darkmode": {
       "transformGroup": "css",
       "transforms": ["attribute/cti", "name/cti/kebab", "custom/color/rgb"],
       "prefix": "ds-rgb",
       "comment": "File type: CSS; variable type: CSS; filter: color; custom rgb output, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "CSSCustomPropertiesColorRGB--dark.css",
+          "destination": "CSSCustomPropertiesColorRGB--darkmode.css",
           "format": "css/variables",
           "filter": {
             "attributes": {
@@ -117,15 +117,15 @@
         }
       ]
     },
-    "SassCustomPropertiesColorRGB--dark": {
+    "SassCustomPropertiesColorRGB--darkmode": {
       "transformGroup": "css",
       "transforms": ["attribute/cti", "name/cti/kebab", "custom/color/rgb"],
       "prefix": "ds-rgb",
       "comment": "File type: Sass; variable type: CSS; filter: color; custom rgb output, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "SassCustomPropertiesColorRGB--dark.scss",
+          "destination": "SassCustomPropertiesColorRGB--darkmode.scss",
           "format": "css/variables",
           "filter": {
             "attributes": {
@@ -136,29 +136,29 @@
         }
       ]
     },
-    "CSSOpacityCustomProperties--dark": {
+    "CSSOpacityCustomProperties--darkmode": {
       "transformGroup": "css",
       "prefix": "ds",
       "comment": "File type: SCSS; variable type: Sass; filter: opacity, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "CSSOpacityProperties--dark.scss",
+          "destination": "CSSOpacityProperties--darkmode.scss",
           "format": "css/variables",
           "filter": {
             "opacity": true
           }
         }
       ]
     },
-    "CSSSizeCustomProperties--dark": {
+    "CSSSizeCustomProperties--darkmode": {
       "transformGroup": "css",
       "prefix": "ds",
       "comment": "File type: CSS; variable type: CSS; filter: size, public, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "CSSSizeCustomProperties--dark.css",
+          "destination": "CSSSizeCustomProperties--darkmode.css",
           "format": "css/variables",
           "filter": {
             "attributes": {
@@ -169,14 +169,14 @@
         }
       ]
     },
-    "SassSizeCustomProperties--dark": {
+    "SassSizeCustomProperties--darkmode": {
       "transformGroup": "scss",
       "prefix": "ds",
       "comment": "File type: Sass; variable type: Sass; filter: size, public, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "SassSizeCustomProperties--dark.scss",
+          "destination": "SassSizeCustomProperties--darkmode.scss",
           "format": "css/variables",
           "filter": {
             "attributes": {
@@ -187,14 +187,14 @@
         }
       ]
     },
-    "SassCustomProperties--dark": {
+    "SassCustomProperties--darkmode": {
       "transformGroup": "css",
       "prefix": "ds",
       "comment": "File type: SCSS; variable type: CSS; filter: public, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "SassCustomProperties--dark.scss",
+          "destination": "SassCustomProperties--darkmode.scss",
           "format": "css/variables",
           "filter": {
             "public": true
@@ -210,7 +210,7 @@
       "transforms": ["attribute/cti", "name/cti/kebab", "color/css"],
       "files": [
         {
-          "destination": "JSData--darkColor.js",
+          "destination": "JSData--darkmodeColor.js",
           "format": "javascript/module",
           "filter": {
             "attributes": {
@@ -221,14 +221,14 @@
         }
       ]
     },
-    "JSes6--darkColor": {
+    "JSes6--darkmodeColor": {
       "prefix": "ds",
       "transformGroup": "js",
       "comment": "File type: JS; data type: JS; filter: colors || public, theme: dark mode",
       "buildPath": "./dist/tokens/",
       "files": [
         {
-          "destination": "JSVariables--darkColor.js",
+          "destination": "JSVariables--darkmodeColor.js",
           "format": "javascript/es6",
           "filter": {
             "attributes": {
@@ -256,12 +256,12 @@
         }
       ]
     },
-    "JSONtest--dark": {
+    "JSONtest--darkmode": {
       "transformGroup": "css",
       "buildPath": "./test/",
       "files": [
         {
-          "destination": "validJSON--dark",
+          "destination": "validJSON--darkmode",
           "format": "css/variables"
         }
       ]

diff --git a/scripts/styleDictionary.js b/scripts/styleDictionary.js
@@ -30,6 +30,6 @@ const tokensConfig = StyleDictionary.extend('./scripts/config.json');
 // Style Dictionary build function
 tokensConfig.buildAllPlatforms();
 
-const darkTokensConfig = StyleDictionary.extend('./scripts/config-dark.json');
+const darkTokensConfig = StyleDictionary.extend('./scripts/config-darkmode.json');
 
 darkTokensConfig.buildAllPlatforms();
diff --git a/src/color-dark/alert.json → src/color-darkmode/alert.json b/src/color-dark/alert.json → src/color-darkmode/alert.json
@@ -2,50 +2,50 @@
   "color": {
     "alert": {
       "notification": {
-        "onDark": {
+        "default": {
           "value": "{color.brand.breeze.300.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Notification color on dark backgrounds",
           "wcag": "AAA",
           "deprecated": false
         }
       },
       "warning": {
-        "onDark": {
+        "default": {
           "value": "{color.state.warning.500.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Warning color on light backgrounds",
           "wcag": "AAA",
           "deprecated": false
         }
       },
       "error": {
-        "onDark": {
+        "default": {
           "value": "{color.state.error.100.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Error color on dark backgrounds",
           "wcag": "AAA",
           "deprecated": false
         }
       },
       "success": {
-        "onDark": {
+        "default": {
           "value": "{color.state.success.100.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Success color on dark backgrounds",
           "wcag": "AAA",
           "deprecated": false
         }
       },
       "advisory": {
-        "onDark": {
+        "default": {
           "value": "{color.brand.goldcoast.100.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Travel advisory or system maintenance color on dark backgrounds",
           "wcag": "AAA",
           "deprecated": false

diff --git a/src/color-dark/background.json → src/color-darkmode/background.json b/src/color-dark/background.json → src/color-darkmode/background.json
diff --git a/src/color-dark/base.json → src/color-darkmode/base.json b/src/color-dark/base.json → src/color-darkmode/base.json
diff --git a/src/color-dark/border.json → src/color-darkmode/border.json b/src/color-dark/border.json → src/color-darkmode/border.json
@@ -2,60 +2,60 @@
   "color": {
     "border": {
       "primary": {
-        "onDark": {
+        "default": {
           "value": "{color.brand.neutral.400.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Primary border color on dark background",
           "wcag": "n/a",
           "deprecated": false
         }
       },
       "active": {
-        "onDark": {
+        "default": {
           "value": "{color.brand.breeze.300.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Active border color on dark backgrounds",
           "wcag": "n/a",
           "deprecated": false
         }
       },
       "error": {
-        "onDark": {
+        "default": {
           "value": "{color.state.error.100.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Error states border color on dark background",
           "wcag": "n/a",
           "deprecated": false
         }
       },
       "disabled": {
-        "onDark": {
+        "default": {
           "value": "{color.base.gray.200.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Disabled border color on dark background",
           "wcag": "n/a",
           "deprecated": false
         }
       },
       "Focus": {
-        "onDark": {
+        "default": {
           "value": "{color.base.white.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Focus border color for dark backgrounds",
           "wcag": "n/a",
           "deprecated": false
         }
       },
       "divider": {
-        "onDark": {
+        "default": {
           "value": "{color.base.white.value}",
           "public": true,
-          "onDark": true,
+          "default": true,
           "usage": "Strict use as divider between elements on dark backgrounds",
           "wcag": "n/a",
           "deprecated": false

diff --git a/src/color-dark/brand.json → src/color-darkmode/brand.json b/src/color-dark/brand.json → src/color-darkmode/brand.json