fixed issue where neutral status tokens were applied to neutral non s…

…tatus token
gsoft-inc · Jul 5, 2024 · 52ff96d · 52ff96d
1 parent 166374d
commit 52ff96d
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 12 deletions.
diff --git a/apps/docs/datas/tokens.json b/apps/docs/datas/tokens.json
@@ -991,7 +991,7 @@
       },
       {
         "name": "hop-neutral-border",
-        "value": "#3c3c3c"
+        "value": "#b3b3b1"
       },
       {
         "name": "hop-neutral-border-selected",
@@ -1003,11 +1003,11 @@
       },
       {
         "name": "hop-neutral-border-hover",
-        "value": "#505050"
+        "value": "#959593"
       },
       {
         "name": "hop-neutral-border-press",
-        "value": "#292929"
+        "value": "#777775"
       },
       {
         "name": "hop-neutral-border-strong",
@@ -1091,7 +1091,7 @@
       },
       {
         "name": "hop-neutral-surface-strong",
-        "value": "#b3b3b1"
+        "value": "#3c3c3c"
       },
       {
         "name": "hop-neutral-surface-weak",
@@ -2097,14 +2097,66 @@
         "name": "hop-status-negative-text-selected",
         "value": "#952927"
       },
+      {
+        "name": "hop-status-neutral-border",
+        "value": "#3c3c3c"
+      },
+      {
+        "name": "hop-status-neutral-border-disabled",
+        "value": "#ecebe8"
+      },
+      {
+        "name": "hop-status-neutral-border-hover",
+        "value": "#505050"
+      },
+      {
+        "name": "hop-status-neutral-border-press",
+        "value": "#292929"
+      },
+      {
+        "name": "hop-status-neutral-border-selected",
+        "value": "#3c3c3c"
+      },
       {
         "name": "hop-status-neutral-icon",
         "value": "#3c3c3c"
       },
+      {
+        "name": "hop-status-neutral-icon-disabled",
+        "value": "#959593"
+      },
+      {
+        "name": "hop-status-neutral-icon-hover",
+        "value": "#505050"
+      },
+      {
+        "name": "hop-status-neutral-icon-press",
+        "value": "#292929"
+      },
+      {
+        "name": "hop-status-neutral-icon-selected",
+        "value": "#ffffff"
+      },
       {
         "name": "hop-status-neutral-surface",
         "value": "#ffffff"
       },
+      {
+        "name": "hop-status-neutral-surface-disabled",
+        "value": "#ecebe8"
+      },
+      {
+        "name": "hop-status-neutral-surface-hover",
+        "value": "#f8f6f3"
+      },
+      {
+        "name": "hop-status-neutral-surface-press",
+        "value": "#ecebe8"
+      },
+      {
+        "name": "hop-status-neutral-surface-selected",
+        "value": "#3c3c3c"
+      },
       {
         "name": "hop-status-neutral-surface-strong",
         "value": "#b3b3b1"
@@ -2113,6 +2165,22 @@
         "name": "hop-status-neutral-text",
         "value": "#3c3c3c"
       },
+      {
+        "name": "hop-status-neutral-text-disabled",
+        "value": "#959593"
+      },
+      {
+        "name": "hop-status-neutral-text-hover",
+        "value": "#505050"
+      },
+      {
+        "name": "hop-status-neutral-text-press",
+        "value": "#292929"
+      },
+      {
+        "name": "hop-status-neutral-text-selected",
+        "value": "#ffffff"
+      },
       {
         "name": "hop-status-option1-border",
         "value": "#5d9acd"

diff --git a/packages/styled-system/src/tokens/generated/lightSemanticTokens.ts b/packages/styled-system/src/tokens/generated/lightSemanticTokens.ts
@@ -267,11 +267,11 @@ export const SemanticTokens = {
     "--hop-neutral-surface-weak-active": "var(--hop-rock-100)",
     "--hop-neutral-text-active": "var(--hop-rock-900)",
     "--hop-neutral-text-weak-active": "var(--hop-rock-700)",
-    "--hop-neutral-border": "var(--hop-rock-800)",
+    "--hop-neutral-border": "var(--hop-rock-200)",
     "--hop-neutral-border-selected": "var(--hop-rock-800)",
     "--hop-neutral-border-disabled": "var(--hop-rock-50)",
-    "--hop-neutral-border-hover": "var(--hop-rock-700)",
-    "--hop-neutral-border-press": "var(--hop-rock-900)",
+    "--hop-neutral-border-hover": "var(--hop-rock-300)",
+    "--hop-neutral-border-press": "var(--hop-rock-400)",
     "--hop-neutral-border-strong": "var(--hop-rock-800)",
     "--hop-neutral-border-strong-hover": "var(--hop-rock-700)",
     "--hop-neutral-border-weak": "var(--hop-rock-75)",
@@ -292,7 +292,7 @@ export const SemanticTokens = {
     "--hop-neutral-surface-disabled": "var(--hop-rock-50)",
     "--hop-neutral-surface-hover": "var(--hop-rock-25)",
     "--hop-neutral-surface-press": "var(--hop-rock-50)",
-    "--hop-neutral-surface-strong": "var(--hop-rock-200)",
+    "--hop-neutral-surface-strong": "var(--hop-rock-800)",
     "--hop-neutral-surface-weak": "var(--hop-rock-50)",
     "--hop-neutral-surface-weak-selected": "var(--hop-rock-50)",
     "--hop-neutral-surface-weak-hover": "var(--hop-rock-75)",
@@ -544,10 +544,27 @@ export const SemanticTokens = {
     "--hop-status-negative-text-hover": "var(--hop-amanita-700)",
     "--hop-status-negative-text-press": "var(--hop-amanita-800)",
     "--hop-status-negative-text-selected": "var(--hop-amanita-700)",
+    "--hop-status-neutral-border": "var(--hop-rock-800)",
+    "--hop-status-neutral-border-disabled": "var(--hop-rock-50)",
+    "--hop-status-neutral-border-hover": "var(--hop-rock-700)",
+    "--hop-status-neutral-border-press": "var(--hop-rock-900)",
+    "--hop-status-neutral-border-selected": "var(--hop-rock-800)",
     "--hop-status-neutral-icon": "var(--hop-rock-800)",
+    "--hop-status-neutral-icon-disabled": "var(--hop-rock-300)",
+    "--hop-status-neutral-icon-hover": "var(--hop-rock-700)",
+    "--hop-status-neutral-icon-press": "var(--hop-rock-900)",
+    "--hop-status-neutral-icon-selected": "var(--hop-samoyed)",
     "--hop-status-neutral-surface": "var(--hop-samoyed)",
+    "--hop-status-neutral-surface-disabled": "var(--hop-rock-50)",
+    "--hop-status-neutral-surface-hover": "var(--hop-rock-25)",
+    "--hop-status-neutral-surface-press": "var(--hop-rock-50)",
+    "--hop-status-neutral-surface-selected": "var(--hop-rock-800)",
     "--hop-status-neutral-surface-strong": "var(--hop-rock-200)",
     "--hop-status-neutral-text": "var(--hop-rock-800)",
+    "--hop-status-neutral-text-disabled": "var(--hop-rock-300)",
+    "--hop-status-neutral-text-hover": "var(--hop-rock-700)",
+    "--hop-status-neutral-text-press": "var(--hop-rock-900)",
+    "--hop-status-neutral-text-selected": "var(--hop-samoyed)",
     "--hop-status-option1-border": "var(--hop-coastal-300)",
     "--hop-status-option1-border-disabled": "var(--hop-coastal-50)",
     "--hop-status-option1-border-hover": "var(--hop-coastal-400)",

diff --git a/packages/styled-system/src/tokens/generated/styledSystemToTokenMappings.ts b/packages/styled-system/src/tokens/generated/styledSystemToTokenMappings.ts
@@ -272,6 +272,10 @@ export const BackgroundColors = {
     "status-negative-selected": "status-negative-surface-selected",
     "status-negative-strong": "status-negative-surface-strong",
     "status-neutral": "status-neutral-surface",
+    "status-neutral-disabled": "status-neutral-surface-disabled",
+    "status-neutral-hover": "status-neutral-surface-hover",
+    "status-neutral-press": "status-neutral-surface-press",
+    "status-neutral-selected": "status-neutral-surface-selected",
     "status-neutral-strong": "status-neutral-surface-strong",
     "status-option1": "status-option1-surface",
     "status-option1-disabled": "status-option1-surface-disabled",
@@ -408,6 +412,10 @@ export const TextColors = {
     "status-negative-press": "status-negative-text-press",
     "status-negative-selected": "status-negative-text-selected",
     "status-neutral": "status-neutral-text",
+    "status-neutral-disabled": "status-neutral-text-disabled",
+    "status-neutral-hover": "status-neutral-text-hover",
+    "status-neutral-press": "status-neutral-text-press",
+    "status-neutral-selected": "status-neutral-text-selected",
     "status-option1": "status-option1-text",
     "status-option1-disabled": "status-option1-text-disabled",
     "status-option1-hover": "status-option1-text-hover",
@@ -527,6 +535,10 @@ export const IconColors = {
     "status-negative-press": "status-negative-icon-press",
     "status-negative-selected": "status-negative-icon-selected",
     "status-neutral": "status-neutral-icon",
+    "status-neutral-disabled": "status-neutral-icon-disabled",
+    "status-neutral-hover": "status-neutral-icon-hover",
+    "status-neutral-press": "status-neutral-icon-press",
+    "status-neutral-selected": "status-neutral-icon-selected",
     "status-option1": "status-option1-icon",
     "status-option1-disabled": "status-option1-icon-disabled",
     "status-option1-hover": "status-option1-icon-hover",
@@ -626,6 +638,11 @@ export const BorderColors = {
     "status-negative-hover": "status-negative-border-hover",
     "status-negative-press": "status-negative-border-press",
     "status-negative-selected": "status-negative-border-selected",
+    "status-neutral": "status-neutral-border",
+    "status-neutral-disabled": "status-neutral-border-disabled",
+    "status-neutral-hover": "status-neutral-border-hover",
+    "status-neutral-press": "status-neutral-border-press",
+    "status-neutral-selected": "status-neutral-border-selected",
     "status-option1": "status-option1-border",
     "status-option1-disabled": "status-option1-border-disabled",
     "status-option1-hover": "status-option1-border-hover",

diff --git a/packages/tokens/src/tokens/semantic/light/colors.tokens.json b/packages/tokens/src/tokens/semantic/light/colors.tokens.json
@@ -558,7 +558,7 @@
     "neutral": {
         "border": {
             "$type": "color",
-            "$value": "{rock.800}"
+            "$value": "{rock.200}"
         },
         "border-selected": {
             "$type": "color",
@@ -570,11 +570,11 @@
         },
         "border-hover": {
             "$type": "color",
-            "$value": "{rock.700}"
+            "$value": "{rock.300}"
         },
         "border-press": {
             "$type": "color",
-            "$value": "{rock.900}"
+            "$value": "{rock.400}"
         },
         "border-strong": {
             "$type": "color",
@@ -658,7 +658,7 @@
         },
         "surface-strong": {
             "$type": "color",
-            "$value": "{rock.200}"
+            "$value": "{rock.800}"
         },
         "surface-weak": {
             "$type": "color",
@@ -1115,21 +1115,89 @@
             }
         },
         "neutral": {
+            "border": {
+                "$type": "color",
+                "$value": "{rock.800}"
+            },
+            "border-disabled": {
+                "$type": "color",
+                "$value": "{rock.50}"
+            },
+            "border-hover": {
+                "$type": "color",
+                "$value": "{rock.700}"
+            },
+            "border-press": {
+                "$type": "color",
+                "$value": "{rock.900}"
+            },
+            "border-selected": {
+                "$type": "color",
+                "$value": "{rock.800}"
+            },
             "icon": {
                 "$type": "color",
                 "$value": "{rock.800}"
             },
+            "icon-disabled": {
+                "$type": "color",
+                "$value": "{rock.300}"
+            },
+            "icon-hover": {
+                "$type": "color",
+                "$value": "{rock.700}"
+            },
+            "icon-press": {
+                "$type": "color",
+                "$value": "{rock.900}"
+            },
+            "icon-selected": {
+                "$type": "color",
+                "$value": "{samoyed}"
+            },
             "surface": {
                 "$type": "color",
                 "$value": "{samoyed}"
             },
+            "surface-disabled": {
+                "$type": "color",
+                "$value": "{rock.50}"
+            },
+            "surface-hover": {
+                "$type": "color",
+                "$value": "{rock.25}"
+            },
+            "surface-press": {
+                "$type": "color",
+                "$value": "{rock.50}"
+            },
+            "surface-selected": {
+                "$type": "color",
+                "$value": "{rock.800}"
+            },
             "surface-strong": {
                 "$type": "color",
                 "$value": "{rock.200}"
             },
             "text": {
                 "$type": "color",
                 "$value": "{rock.800}"
+            },
+            "text-disabled": {
+                "$type": "color",
+                "$value": "{rock.300}"
+            },
+            "text-hover": {
+                "$type": "color",
+                "$value": "{rock.700}"
+            },
+            "text-press": {
+                "$type": "color",
+                "$value": "{rock.900}"
+            },
+            "text-selected": {
+                "$type": "color",
+                "$value": "{samoyed}"
             }
         },
         "option1": {