feat: edit tokens for better control of output

This commit addresses a few concerns with the last release 1. Removes tokens that do not have true darkmode values 2. Tags tokens with `darkmode` flag for accurate filtering Tokens should not be duplicated within the darkmode scope in order to maintain alias relationships. This can be addressed using the include property of the config file. In order to filter out all tokens that are not intended to be processed, using the `darkmode` flag on tokens that have been updated with a darkmode value will allow the config to filter out non-darkmode tokens in the build process. Changes to be committed: deleted: src/color-darkmode/alert.json deleted: src/color-darkmode/background.json deleted: src/color-darkmode/brand.json deleted: src/color-darkmode/ui.json modified: src/color-darkmode/base.json modified: src/color-darkmode/border.json modified: src/color-darkmode/icon.json modified: src/color-darkmode/text.json modified: src/color-darkmode/tier.json Modified this config file to address typo: modified: scripts/config-darkmode.json
AlaskaAirlines · Sep 14, 2023 · 9a1521b · 9a1521b
1 parent d6d87b4
commit 9a1521b
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 904 deletions.
diff --git a/scripts/config-darkmode.json b/scripts/config-darkmode.json
@@ -59,7 +59,7 @@
         }
       ]
     },
-    "JSmoduledarkC-color": {
+    "JSmodule--color": {
       "prefix": "ds",
       "transformGroup": "js",
       "comment": "File type: JS; data type: JS; filter: colors || public, theme: dark mode",

diff --git a/src/color-darkmode/alert.json b/src/color-darkmode/alert.json
diff --git a/src/color-darkmode/background.json b/src/color-darkmode/background.json
diff --git a/src/color-darkmode/base.json b/src/color-darkmode/base.json
@@ -2,138 +2,18 @@
   "color": {
     "base": {
       "white": {
-        "value": "ffffff",
+        "value": "000000",
         "comment": "{comments.color.base.value.comment}",
         "public": true,
-        "deprecated": false
-      },
-      "white-opacity-40": {
-        "value": "ffffff66",
-        "comment": "white @ 40%",
-        "public": true,
-        "opacity": true,
-        "deprecated": false
+        "deprecated": false,
+        "darkmode": true
       },
       "black": {
-        "value": "000000",
+        "value": "ffffff",
         "comment": "{comments.color.base.value.comment}",
         "public": true,
-        "deprecated": false
-      },
-      "black-opacity-15": {
-        "value": "00000026",
-        "comment": "black @ 15%",
-        "public": true,
-        "opacity": true,
-        "deprecated": false
-      },
-      "gray": {
-        "100": {
-          "value": "f8f8f8",
-          "version": "3.1.0",
-          "public": false,
-          "neutral": true,
-          "usage": "Neutral accent",
-          "wcag": "n/a",
-          "deprecated": true,
-          "reference": "color-brand-gray-100",
-          "comment": "{comments.reference.comment} color-brand-gray-100"
-        },
-        "200": {
-          "value": "dbdbdb",
-          "public": false,
-          "neutral": true,
-          "usage": "Neutral accent",
-          "wcag": "n/a",
-          "deprecated": true,
-          "version": "3.1.0",
-          "reference": "color-brand-gray-200",
-          "comment": "{comments.reference.comment} color-brand-gray-200"
-        },
-        "300": {
-          "value": "b2b2b2",
-          "public": false,
-          "neutral": true,
-          "usage": "Neutral accent",
-          "wcag": "n/a",
-          "deprecated": true,
-          "version": "3.1.0",
-          "reference": "color-brand-gray-300",
-          "comment": "{comments.reference.comment} color-brand-gray-300"
-        },
-        "400": {
-          "value": "767676",
-          "public": false,
-          "neutral": true,
-          "usage": "Neutral accent",
-          "wcag": "n/a",
-          "deprecated": true,
-          "version": "3.1.0",
-          "reference": "color-brand-gray-400",
-          "comment": "{comments.reference.comment} color-brand-gray-400"
-        },
-        "500": {
-          "value": "222222",
-          "public": false,
-          "neutral": true,
-          "usage": "Neutral accent",
-          "wcag": "n/a",
-          "deprecated": true,
-          "version": "3.1.0",
-          "reference": "color-brand-gray-500",
-          "comment": "{comments.reference.comment} color-brand-gray-500"
-        }
-      },
-      "neutral": {
-        "400": {
-          "value": "9fabbb",
-          "public": false,
-          "deprecated": true,
-          "version": "3.1.0",
-          "reference": "color-brand-neutral-400",
-          "comment": "{comments.reference.comment} color-brand-neutral-400"
-        },
-        "500": {
-          "value": "626b79",
-          "public": false,
-          "deprecated": true,
-          "version": "3.1.0",
-          "reference": "color-brand-neutral-500",
-          "comment": "{comments.reference.comment} color-brand-neutral-500"
-        }
-      }
-    },
-    "state": {
-      "error": {
-        "100": {
-          "value": "ff999b",
-          "public": true,
-          "deprecated": false
-        },
-        "500": {
-          "value": "df0b37",
-          "public": true,
-          "deprecated": false
-        }
-      },
-      "success": {
-        "100": {
-          "value": "69cf96",
-          "public": true,
-          "deprecated": false
-        },
-        "500": {
-          "value": "00805d",
-          "public": true,
-          "deprecated": false
-        }
-      },
-      "warning": {
-        "500": {
-          "value": "de750c",
-          "public": true,
-          "deprecated": false
-        }
+        "deprecated": false,
+        "darkmode": true
       }
     }
   }

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