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" },
  },
  },
-};
+};