feat: Add hover and pressed tokens for Text (#116)

Frontify · Dec 13, 2023 · 331bfef · 331bfef
1 parent d37ea3a
commit 331bfef
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/tokens/alias.text.dark.js b/tokens/alias.text.dark.js
@@ -6,12 +6,24 @@
 module.exports = {
   text: {
     "color"             : { value: "{color.grey.0.value}", attributes: { category: "color" } },
-    "color-weak"        : { value: "{color.grey.40.value}", attributes: { category: "color" } },
-    "color-x-weak"      : { value: "{color.grey.50.value}", attributes: { category: "color" } },
+    "color-hover"             : { value: "{color.grey.0.value}", attributes: { category: "color" } },
+    "color-pressed"             : { value: "{color.grey.0.value}", attributes: { category: "color" } },
+    "color-weak"        : { value: "{color.grey.20.value}", attributes: { category: "color" } },
+    "color-weak-hover"        : { value: "{color.grey.0.value}", attributes: { category: "color" } },
+    "color-weak-pressed"        : { value: "{color.grey.0.value}", attributes: { category: "color" } },
+    "color-x-weak"      : { value: "{color.grey.40.value}", attributes: { category: "color" } },
     "color-negative"    : { value: "{color.red.40.value}", attributes: { category: "color" } },
+    "color-negative-hover"    : { value: "{color.red.20.value}", attributes: { category: "color" } },
+    "color-negative-pressed"    : { value: "{color.red.10.value}", attributes: { category: "color" } },
     "color-positive"    : { value: "{color.green.40.value}", attributes: { category: "color" } },
+    "color-positive-hover"    : { value: "{color.green.20.value}", attributes: { category: "color" } },
+    "color-positive-pressed"    : { value: "{color.green.10.value}", attributes: { category: "color" } },
     "color-warning"     : { value: "{color.yellow.50.value}", attributes: { category: "color" } },
+    "color-warning-hover"     : { value: "{color.yellow.20.value}", attributes: { category: "color" } },
+    "color-warning-pressed"     : { value: "{color.yellow.10.value}", attributes: { category: "color" } },
     "color-interactive" : { value: "{color.violet.30.value}", attributes: { category: "color" } },
-    "color-disabled"    : { value: "{color.grey.40.value}", attributes: { category: "color" } },
+    "color-interactive-hover" : { value: "{color.violet.20.value}", attributes: { category: "color" } },
+    "color-interactive-pressed" : { value: "{color.violet.10.value}", attributes: { category: "color" } },
+    "color-disabled"    : { value: "{color.disabled-dark.value}", attributes: { category: "color" } },
   }
 };
diff --git a/tokens/alias.text.js b/tokens/alias.text.js
@@ -6,12 +6,24 @@
 module.exports = {
   text: {
     "color"             : { value: "{color.grey.80.value}", attributes: { category: "color" } },
+    "color-hover"             : { value: "{color.grey.90.value}", attributes: { category: "color" } },
+    "color-pressed"             : { value: "{color.grey.100.value}", attributes: { category: "color" } },
     "color-weak"        : { value: "{color.grey.60.value}", attributes: { category: "color" } },
+    "color-weak-hover"        : { value: "{color.grey.70.value}", attributes: { category: "color" } },
+    "color-weak-pressed"        : { value: "{color.grey.80.value}", attributes: { category: "color" } },
     "color-x-weak"      : { value: "{color.grey.50.value}", attributes: { category: "color" } },
     "color-disabled"    : { value: "{color.grey.40.value}", attributes: { category: "color" } },
     "color-negative"    : { value: "{color.red.80.value}", attributes: { category: "color" } },
+    "color-negative-hover"    : { value: "{color.red.90.value}", attributes: { category: "color" } },
+    "color-negative-pressed"    : { value: "{color.red.100.value}", attributes: { category: "color" } },
     "color-positive"    : { value: "{color.green.80.value}", attributes: { category: "color" } },
+    "color-positive-hover"    : { value: "{color.green.90.value}", attributes: { category: "color" } },
+    "color-positive-pressed"    : { value: "{color.green.100.value}", attributes: { category: "color" } },
     "color-warning"     : { value: "{color.yellow.80.value}", attributes: { category: "color" } },
+    "color-warning-hover"     : { value: "{color.yellow.90.value}", attributes: { category: "color" } },
+    "color-warning-pressed"     : { value: "{color.yellow.100.value}", attributes: { category: "color" } },
     "color-interactive" : { value: "{color.violet.70.value}", attributes: { category: "color" } },
+    "color-interactive-hover" : { value: "{color.violet.90.value}", attributes: { category: "color" } },
+    "color-interactive-pressed" : { value: "{color.violet.100.value}", attributes: { category: "color" } },
   }
-};
+};
diff --git a/tokens/brand.colors.js b/tokens/brand.colors.js
@@ -9,6 +9,7 @@ module.exports = {
     "off-white" : { value: "#FAFAFA" },
     "charcoal"  : { value: "#2D3232" },
     "warm-grey" : { value: "#E6DCDC" },
+    "disabled-dark" : { value: "#A5A8A8" },
 
     "grey": {
       "0"         : { value: "#FFFFFF" },
@@ -90,4 +91,4 @@ module.exports = {
       "100"       : { value: "#4C3600" },
    },
   },
-};
+};