chore: add comments & hash prefix to color values

Changes to be committed: modified: scripts/config-jetstream-darkmode.json modified: scripts/config-jetstream.json modified: src/themes/jetstream/color/base.json modified: src/themes/jetstream/color/brand.json modified: src/themes/jetstream/color/text.json modified: src/themes/jetstream/color/tier.json new file: src/themes/jetstream/comments.json
AlaskaAirlines · May 31, 2024 · 37b42d8 · 37b42d8
1 parent 73657da
commit 37b42d8
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 44 deletions.
diff --git a/scripts/config-jetstream-darkmode.json b/scripts/config-jetstream-darkmode.json
@@ -1,9 +1,10 @@
 {
+  "source": ["./src/themes/jetstream/color-darkmode/*.json"],
   "include": [
     "./src/themes/jetstream/color/base.json",
-    "./src/themes/jetstream/color/brand.json"
+    "./src/themes/jetstream/color/brand.json",
+    "./src/themes/jetstream/comments.json"
   ],
-  "source": ["./src/themes/jetstream/color-darkmode/*.json"],
   "platforms": {
     "JSONVariables": {
       "transformGroup": "css",

diff --git a/scripts/config-jetstream.json b/scripts/config-jetstream.json
@@ -1,6 +1,6 @@
 {
-  "include": ["./src/themes/jetstream/*.json"],
   "source": ["./src/themes/jetstream/color/*.json"],
+  "include": ["./src/themes/jetstream/*.json"],
   "platforms": {
     "JSONVariables": {
       "transformGroup": "css",

diff --git a/src/themes/jetstream/color/base.json b/src/themes/jetstream/color/base.json
@@ -2,77 +2,77 @@
   "color": {
     "jetstream": {
       "white": {
-        "value": "ffffff",
-        "comment": "",
+        "value": "#ffffff",
+        "comment": "{comments.color.base.value.comment}",
         "public": true,
         "deprecated": false
       },
       "black": {
-        "value": "000000",
-        "comment": "",
+        "value": "#000000",
+        "comment": "{comments.color.base.value.comment}",
         "public": true,
         "deprecated": false
       },
       "black-opacity-30": {
-        "value": "0000004d",
-        "comment": "black @ 30%",
+        "value": "#0000004d",
+        "comment": "{comments.color.base.value.comment}",
         "public": true,
         "opacity": true,
         "deprecated": false
       },
       "gray": {
         "50": {
-          "value": "EBEEF1",
+          "value": "#EBEEF1",
           "public": true,
           "deprecated": false
         },
         "100": {
-          "value": "8C9EAE",
+          "value": "#8C9EAE",
           "public": true,
           "deprecated": false
         },
         "200": {
-          "value": "b2bec9",
+          "value": "#b2bec9",
           "public": true,
           "deprecated": false
         },
         "300": {
-          "value": "A6B3C0",
+          "value": "#A6B3C0",
           "public": true,
           "deprecated": false
         }
       },
       "dark-gray": {
-        "value": "4A657E",
-        "comment": "alias color for #4A657E",
+        "value": "#4A657E",
+        "comment": "{comments.color.base.value.comment}",
         "public": true,
         "opacity": true,
         "deprecated": false
       },
       "white-gray": {
-        "value": "D9DFE4",
-        "comment": "alias color for #D9DFE4",
+        "value": "#D9DFE4",
+        "comment": "{comments.color.base.value.comment}",
         "public": true,
         "opacity": true,
         "deprecated": false
       },
       "medium-blue": {
         "value": "254664",
-        "comment": "alias color for #254664",
+        "comment": "{comments.color.base.value.comment}",
         "public": true,
         "opacity": true,
         "deprecated": false
       },
       "active": {
         "value": "0074c8",
-        "comment": "alias color for #0074c8",
+        "comment": "{comments.color.base.value.comment}",
         "public": true,
         "opacity": true,
         "deprecated": false
       },
       "blue": {
         "value": "30A1F2",
-        "comment": "alias color for #30A1F2",
+        "comment": "{comments.color.base.value.comment}",
         "public": true,
         "opacity": true,
         "deprecated": false

diff --git a/src/themes/jetstream/color/brand.json b/src/themes/jetstream/color/brand.json
@@ -7,7 +7,7 @@
           "comment": "",
           "public": true,
           "neutral": true,
-          "usage": "Transactional colors to move guests through task-based interactions.",
+          "usage": "{comments.color.brand.transactional.comment}",
           "wcag": "n/a",
           "deprecated": false
         },
@@ -16,7 +16,7 @@
           "comment": "",
           "public": true,
           "neutral": true,
-          "usage": "Transactional colors to move guests through task-based interactions.",
+          "usage": "{comments.color.brand.transactional.comment}",
           "wcag": "n/a",
           "deprecated": false
         }
@@ -27,7 +27,7 @@
           "comment": "",
           "public": true,
           "neutral": true,
-          "usage": "Transactional colors to move guests through task-based interactions.",
+          "usage": "{comments.color.brand.transactional.comment}",
           "wcag": "n/a",
           "deprecated": false
         },
@@ -36,7 +36,7 @@
           "comment": "",
           "public": true,
           "neutral": true,
-          "usage": "Transactional colors to move guests through task-based interactions.",
+          "usage": "{comments.color.brand.transactional.comment}",
           "wcag": "n/a",
           "deprecated": false
         }
@@ -57,15 +57,15 @@
           "value": "F5F6F8",
           "public": true,
           "neutral": true,
-          "usage": "Neutral accent",
+          "usage": "{comments.color.brand.neutral.comment}",
           "wcag": "n/a",
           "deprecated": false
         },
         "200": {
           "value": "D6DCE2",
           "public": true,
           "neutral": true,
-          "usage": "Neutral accent",
+          "usage": "{comments.color.brand.neutral.comment}",
           "wcag": "n/a",
           "deprecated": false
         },
@@ -74,7 +74,7 @@
           "comment": "",
           "public": true,
           "neutral": true,
-          "usage": "Neutral accent",
+          "usage": "{comments.color.brand.neutral.comment}",
           "wcag": "n/a",
           "deprecated": false
         },
@@ -83,15 +83,15 @@
           "comment": "",
           "public": true,
           "neutral": true,
-          "usage": "Neutral accent",
+          "usage": "{comments.color.brand.neutral.comment}",
           "wcag": "n/a",
           "deprecated": false
         },
         "500": {
           "value": "405D77",
           "public": true,
           "neutral": true,
-          "usage": "Neutral accent",
+          "usage": "{comments.color.brand.neutral.comment}",
           "wcag": "n/a",
           "deprecated": false
         }
@@ -101,15 +101,15 @@
           "value": "7B7B7B",
           "public": true,
           "neutral": true,
-          "usage": "Transactional colors to move guests through task-based interactions.",
+          "usage": "{comments.color.brand.transactional.comment}",
           "wcag": "n/a",
           "deprecated": false
         },
         "200": {
           "value": "C7C7C7",
           "public": true,
           "neutral": true,
-          "usage": "Transactional colors to move guests through task-based interactions.",
+          "usage": "{comments.color.brand.transactional.comment}",
           "wcag": "n/a",
           "deprecated": false
         }
@@ -119,15 +119,15 @@
           "value": "7E623D",
           "public": true,
           "neutral": true,
-          "usage": "Transactional colors to move guests through task-based interactions.",
+          "usage": "{comments.color.brand.transactional.comment}",
           "wcag": "n/a",
           "deprecated": false
         },
         "200": {
           "value": "8F7B39",
           "public": true,
           "neutral": true,
-          "usage": "Transactional colors to move guests through task-based interactions.",
+          "usage": "{comments.color.brand.transactional.comment}",
           "wcag": "n/a",
           "deprecated": false
         }
@@ -136,23 +136,23 @@
         "value": "0F8C4A",
         "public": true,
         "neutral": true,
-        "usage": "Transactional colors to move guests through task-based interactions.",
+        "usage": "{comments.color.brand.transactional.comment}",
         "wcag": "n/a",
         "deprecated": false
       },
       "sapphire": {
         "value": "10699C",
         "public": true,
         "neutral": true,
-        "usage": "Transactional colors to move guests through task-based interactions.",
+        "usage": "{comments.color.brand.transactional.comment}",
         "wcag": "n/a",
         "deprecated": false
       },
       "ruby": {
         "value": "9C305A",
         "public": true,
         "neutral": true,
-        "usage": "Transactional colors to move guests through task-based interactions.",
+        "usage": "{comments.color.brand.transactional.comment}",
         "wcag": "n/a",
         "deprecated": false
       }

diff --git a/src/themes/jetstream/color/text.json b/src/themes/jetstream/color/text.json
@@ -93,7 +93,7 @@
           "deprecated": false
         },
         "inverse": {
-          "value": "0074CB",
+          "value": "#0074CB",
           "public": true,
           "default": true,
           "usage": "Emphasis inverse color for body text on light backgrounds",
@@ -107,7 +107,7 @@
     "primary": {
       "hover": {
         "default": {
-          "value": "0d0d0d",
+          "value": "#0d0d0d",
           "public": true,
           "default": true,
           "usage": "Primary hover color for body and header text light mode and light backgrounds",
@@ -119,7 +119,7 @@
     "secondary": {
       "hover": {
         "default": {
-          "value": "3d3e40",
+          "value": "#3d3e40",
           "public": true,
           "default": true,
           "usage": "Secondary hover color for body and header text light mode and light backgrounds",
@@ -130,7 +130,7 @@
     },
     "tertiary": {
       "default": {
-        "value": "84868b",
+        "value": "#84868b",
         "jetstream": true,
         "public": true,
         "default": true,
@@ -140,7 +140,7 @@
       },
       "hover": {
         "default": {
-          "value": "737373",
+          "value": "#737373",
           "public": true,
           "default": true,
           "usage": "Tertiary hover color for body and header text light mode and light backgrounds",

diff --git a/src/themes/jetstream/color/tier.json b/src/themes/jetstream/color/tier.json
@@ -4,15 +4,15 @@
       "alaska": {
         "mvp": {
           "default": {
-            "value": "00436D",
+            "value": "#00436D",
             "public": true,
             "default": true,
             "usage": "MVP tier color for Alaska Airlines",
             "wcag": "n/a",
             "deprecated": false
           },
           "inverse": {
-            "value": "71ADE3",
+            "value": "#71ADE3",
             "public": true,
             "inverse": true,
             "usage": "MVP tier color for Alaska Airlines",
@@ -30,7 +30,7 @@
             "deprecated": false
           },
           "inverse": {
-            "value": "C2AB61",
+            "value": "#C2AB61",
             "public": true,
             "inverse": true,
             "usage": "MVP Gold tier color for Alaska Airlines",

diff --git a/src/themes/jetstream/comments.json b/src/themes/jetstream/comments.json
@@ -0,0 +1,38 @@
+{
+  "comments": {
+    "value": "test",
+    "deprecated": {
+      "comment": "\n  // Deprecated, no replacement; token to be REMOVED in next MAJOR release"
+    },
+    "reference": {
+      "comment": "\n  // New token, see"
+    },
+    "color": {
+      "base": {
+        "value": {
+          "comment": "\n  // Base value for token support; should not use in code!"
+        }
+      },
+      "brand": {
+        "value": {
+          "comment": "\n  // Please consider descriptive token prior to using brand token"
+        },
+        "transactional": {
+          "comment": "\n  // Transactional colors to move guests through task-based interactions."
+        },
+        "neutral": {
+          "comment": "\n  // Neutral accent"
+        }
+      },
+      "classic": {
+        "comment": "\n  // DO NOT USE for anything other than legacy projects or classic component themes"
+      },
+      "matrix": {
+        "comment": "\n  // DO NOT USE for anything other than legacy projects related to the matrix search"
+      },
+      "reference": {
+        "comment": "{comments.reference.comment}"
+      }
+    }
+  }
+}