feat(data): adding bg and bg alt progress colors

Sage · Oct 9, 2024 · cd51101 · cd51101
1 parent fbd52ac
commit cd51101
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 25 deletions.
diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json
@@ -147,8 +147,6 @@
     "$figmaModeId": "89711:0",
     "$figmaVariableReferences": {
       "modes.color.none": "f1a023bc3bbfc5335e65ade4b6d450f6f3191b1b",
-      "modes.color.brandreference.custom1": "e75cefc18d44d8e122d4ba64778d8b77d1772f07",
-      "modes.color.brandreference.custom2": "12e4ccc8df1dcccc92e71c4e215e42a3ac5cfe49",
       "modes.color.generic.bg.nought": "e28a5842ad93f9c83628fa9b247333193197d97f",
       "modes.color.generic.bg.faint": "042e9ce16ad97cd71261ae564c3a72bbb64333fd",
       "modes.color.generic.bg.delicate": "70e63935aea8dd8e91953514f0c2b6d0dca4acd4",
@@ -265,7 +263,8 @@
       "modes.color.status.reviews.default": "9d192fd3843b352796d9b32f4a287ff2534079c3",
       "modes.color.status.reviews.hover": "ba35bfc3dc5cc1e269c6d4840f8d3ba2668872c2",
       "modes.color.modifier.contrastLess": "7aca5a3b336cadb2696c48c5f7f69563fe0edd59",
-      "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568"
+      "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568",
+      "modes.color.brandreference.custombrand": "12e4ccc8df1dcccc92e71c4e215e42a3ac5cfe49"
     },
     "group": "Mode"
   },
@@ -281,8 +280,6 @@
     "$figmaModeId": "89711:1",
     "$figmaVariableReferences": {
       "modes.color.none": "f1a023bc3bbfc5335e65ade4b6d450f6f3191b1b",
-      "modes.color.brandreference.custom1": "e75cefc18d44d8e122d4ba64778d8b77d1772f07",
-      "modes.color.brandreference.custom2": "12e4ccc8df1dcccc92e71c4e215e42a3ac5cfe49",
       "modes.color.generic.bg.nought": "e28a5842ad93f9c83628fa9b247333193197d97f",
       "modes.color.generic.bg.faint": "042e9ce16ad97cd71261ae564c3a72bbb64333fd",
       "modes.color.generic.bg.delicate": "70e63935aea8dd8e91953514f0c2b6d0dca4acd4",
@@ -399,7 +396,8 @@
       "modes.color.status.reviews.default": "9d192fd3843b352796d9b32f4a287ff2534079c3",
       "modes.color.status.reviews.hover": "ba35bfc3dc5cc1e269c6d4840f8d3ba2668872c2",
       "modes.color.modifier.contrastLess": "7aca5a3b336cadb2696c48c5f7f69563fe0edd59",
-      "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568"
+      "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568",
+      "modes.color.brandreference.custombrand": "12e4ccc8df1dcccc92e71c4e215e42a3ac5cfe49"
     },
     "group": "Mode"
   },

diff --git a/data/tokens/components/container.json b/data/tokens/components/container.json
@@ -85,7 +85,7 @@
       "interactive": {
         "detailedicon": {
           "bg": {
-            "value": "{modes.color.brandreference.custom1}",
+            "value": "{modes.color.brandreference.custombrand}",
             "type": "color",
             "description": "\n"
           }

diff --git a/data/tokens/components/progress.json b/data/tokens/components/progress.json
@@ -207,6 +207,35 @@
           "type": "color"
         }
       },
+      "loader": {
+        "bg-default": {
+          "value": "{modes.color.interactive.progress.bg}",
+          "type": "color"
+        },
+        "bg-alt": {
+          "value": "{modes.color.interactive.progress.bgAlt}",
+          "type": "color",
+          "description": "used for inverse loader bgs"
+        },
+        "fg-default": {
+          "value": "{modes.color.interactive.monochrome.active}",
+          "type": "color",
+          "description": "used for loader standard loader spinner"
+        },
+        "fg-alt": {
+          "value": "{modes.color.interactive.monochrome.withActive}",
+          "type": "color",
+          "description": "used on inverse loading spinner"
+        },
+        "fg-error": {
+          "value": "{modes.color.status.negative.default}",
+          "type": "color"
+        },
+        "fg-complete": {
+          "value": "{modes.color.status.success.default}",
+          "type": "color"
+        }
+      },
       "stepflow": {
         "bg-active": {
           "value": "{modes.color.interactive.monochrome.active}",

diff --git a/data/tokens/modes/dark.json b/data/tokens/modes/dark.json
@@ -15,15 +15,10 @@
         }
       },
       "brandreference": {
-        "custom1": {
-          "value": "{primitives.colors.emerald}",
-          "type": "color",
-          "description": "This is the color to replace in white label products. \nEnsure luminousity of custom color = 46.8 (see hsluv.org). \nAAA against FFFFFF bg."
-        },
-        "custom2": {
+        "custombrand": {
           "value": "{primitives.colors.brilliantGreen}",
           "type": "color",
-          "description": "This is the color to replace in white label products. Ensure luminousity of custom color is >=52.1 (see hsluv.org) to be AAA text on 000000 bgs."
+          "description": "This is the color to replace in white label products. Dark mode recommended luminosity is 75.1 (tested), but above 52.1 may be ok. See hsluv.org) to be AAA text on 000000 bgs."
         }
       },
       "generic": {
@@ -720,7 +715,7 @@
             }
           },
           "default": {
-            "value": "{modes.color.brandreference.custom2}",
+            "value": "{modes.color.brandreference.custombrand}",
             "type": "color"
           },
           "defaultAlt": {
@@ -795,7 +790,7 @@
               }
             },
             "default": {
-              "value": "{modes.color.brandreference.custom2}",
+              "value": "{modes.color.brandreference.custombrand}",
               "type": "color"
             },
             "hover": {
@@ -822,7 +817,20 @@
               "studio.tokens": {
                 "modify": {
                   "type": "alpha",
-                  "value": "0.04",
+                  "value": "0.08",
+                  "space": "lch"
+                }
+              }
+            }
+          },
+          "bgAlt": {
+            "value": "{primitives.colors.black}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.08",
                   "space": "lch"
                 }
               }

diff --git a/data/tokens/modes/light.json b/data/tokens/modes/light.json
@@ -15,15 +15,10 @@
         }
       },
       "brandreference": {
-        "custom1": {
+        "custombrand": {
           "value": "{primitives.colors.emerald}",
           "type": "color",
           "description": "This is the color to replace in white label products. \nEnsure luminousity of custom color = 46.8 (see hsluv.org). \nAAA against FFFFFF bg."
-        },
-        "custom2": {
-          "value": "{primitives.colors.brilliantGreen}",
-          "type": "color",
-          "description": "This is the color to replace in white label products. Ensure luminousity of custom color is =52.1 (see hsluv.org) to be AAA text on 000000 bgs."
         }
       },
       "generic": {
@@ -303,7 +298,20 @@
               "studio.tokens": {
                 "modify": {
                   "type": "alpha",
-                  "value": "0.04",
+                  "value": "0.08",
+                  "space": "lch"
+                }
+              }
+            }
+          },
+          "bgAlt": {
+            "value": "{primitives.colors.white}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.08",
                   "space": "lch"
                 }
               }
@@ -749,7 +757,7 @@
             }
           },
           "default": {
-            "value": "{modes.color.brandreference.custom1}",
+            "value": "{modes.color.brandreference.custombrand}",
             "type": "color"
           },
           "defaultAlt": {