Merge pull request #98 from mxenabled/gerlach/dark_text_token

Add Dark TextColor token
mxenabled · Apr 20, 2023 · 629a3b0 · 629a3b0
2 parents 1c757e6 + 43022bb
commit 629a3b0
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [10.7.0] - 04-20-2023
+
+### Added
+
+- Added Dark, Light, TextColor token for when you need the text to stay dark or light in both light and dark mode
+
 ## [10.6.0] - 02-23-2023
 
 ### Added

diff --git a/dist/output/css/dark.css b/dist/output/css/dark.css
@@ -1,7 +1,7 @@
 /*
-** mx-design-tokens (10.6.0)
+** mx-design-tokens (10.7.0)
 **
-** css variables auto-generated on 2023-02-23
+** css variables auto-generated on 2023-04-20
 ** from https://github.com/mxenabled/mx-design-tokens to /css/dark.css
 */
 :root {
@@ -360,9 +360,11 @@
   --mx-BorderColor_TableCell: #49505A;
   --mx-TextColor_Active: #69A1FA;
   --mx-TextColor_ActiveHover: #E7F0FE;
+  --mx-TextColor_Dark: #121417;
   --mx-TextColor_Default: #FFFFFF;
   --mx-TextColor_Disabled: #6A7381;
   --mx-TextColor_Error: #F45532;
+  --mx-TextColor_Light: #FFFFFF;
   --mx-TextColor_Secondary: #A8B1BD;
   --mx-TextColor_Success: #09A57F;
   --mx-TextColor_Avatar: #FFFFFF;

diff --git a/dist/output/css/light.css b/dist/output/css/light.css
@@ -1,7 +1,7 @@
 /*
-** mx-design-tokens (10.6.0)
+** mx-design-tokens (10.7.0)
 **
-** css variables auto-generated on 2023-02-23
+** css variables auto-generated on 2023-04-20
 ** from https://github.com/mxenabled/mx-design-tokens to /css/light.css
 */
 :root {
@@ -359,9 +359,11 @@
   --mx-BorderColor_TableCell: #EEF1F6;
   --mx-TextColor_Active: #2D64EF;
   --mx-TextColor_ActiveHover: #095ADB;
+  --mx-TextColor_Dark: #121417;
   --mx-TextColor_Default: #121417;
   --mx-TextColor_Disabled: #A8B1BD;
   --mx-TextColor_Error: #DF320C;
+  --mx-TextColor_Light: #FFFFFF;
   --mx-TextColor_Secondary: #49505A;
   --mx-TextColor_Success: #078364;
   --mx-TextColor_Avatar: #121417;

diff --git a/dist/output/json/dark.json b/dist/output/json/dark.json
@@ -389,9 +389,11 @@
   "TextColor": {
     "Active": "#69A1FA",
     "ActiveHover": "#E7F0FE",
+    "Dark": "#121417",
     "Default": "#FFFFFF",
     "Disabled": "#6A7381",
     "Error": "#F45532",
+    "Light": "#FFFFFF",
     "Secondary": "#A8B1BD",
     "Success": "#09A57F",
     "Avatar": "#FFFFFF",

diff --git a/dist/output/json/light.json b/dist/output/json/light.json
@@ -388,9 +388,11 @@
   "TextColor": {
     "Active": "#2D64EF",
     "ActiveHover": "#095ADB",
+    "Dark": "#121417",
     "Default": "#121417",
     "Disabled": "#A8B1BD",
     "Error": "#DF320C",
+    "Light": "#FFFFFF",
     "Secondary": "#49505A",
     "Success": "#078364",
     "Avatar": "#121417",

diff --git a/dist/output/md/tokens.md b/dist/output/md/tokens.md
@@ -1,6 +1,6 @@
 # MX Design Tokens
 
-#### <sup><code>mx-design-tokens (10.6.0)</code> &nbsp; _last generated: 2023-02-23_</sup>
+#### <sup><code>mx-design-tokens (10.7.0)</code> &nbsp; _last generated: 2023-04-20_</sup>
 
 ## 🌞 LIGHT THEME TOKENS
 
@@ -476,9 +476,11 @@
 | :-- | :---- | :---- |
 | Active | #2D64EF | ![#2D64EF](https://via.placeholder.com/32/2D64EF/2D64EF.png) |
 | ActiveHover | #095ADB | ![#095ADB](https://via.placeholder.com/32/095ADB/095ADB.png) |
+| Dark | #121417 | ![#121417](https://via.placeholder.com/32/121417/121417.png) |
 | Default | #121417 | ![#121417](https://via.placeholder.com/32/121417/121417.png) |
 | Disabled | #A8B1BD | ![#A8B1BD](https://via.placeholder.com/32/A8B1BD/A8B1BD.png) |
 | Error | #DF320C | ![#DF320C](https://via.placeholder.com/32/DF320C/DF320C.png) |
+| Light | #FFFFFF | ![#FFFFFF](https://via.placeholder.com/32/FFFFFF/FFFFFF.png) |
 | Secondary | #49505A | ![#49505A](https://via.placeholder.com/32/49505A/49505A.png) |
 | Success | #078364 | ![#078364](https://via.placeholder.com/32/078364/078364.png) |
 | Avatar | #121417 | ![#121417](https://via.placeholder.com/32/121417/121417.png) |
@@ -1001,9 +1003,11 @@
 | :-- | :---- | :---- |
 | Active | #69A1FA | ![#69A1FA](https://via.placeholder.com/32/69A1FA/69A1FA.png) |
 | ActiveHover | #E7F0FE | ![#E7F0FE](https://via.placeholder.com/32/E7F0FE/E7F0FE.png) |
+| Dark | #121417 | ![#121417](https://via.placeholder.com/32/121417/121417.png) |
 | Default | #FFFFFF | ![#FFFFFF](https://via.placeholder.com/32/FFFFFF/FFFFFF.png) |
 | Disabled | #6A7381 | ![#6A7381](https://via.placeholder.com/32/6A7381/6A7381.png) |
 | Error | #F45532 | ![#F45532](https://via.placeholder.com/32/F45532/F45532.png) |
+| Light | #FFFFFF | ![#FFFFFF](https://via.placeholder.com/32/FFFFFF/FFFFFF.png) |
 | Secondary | #A8B1BD | ![#A8B1BD](https://via.placeholder.com/32/A8B1BD/A8B1BD.png) |
 | Success | #09A57F | ![#09A57F](https://via.placeholder.com/32/09A57F/09A57F.png) |
 | Avatar | #FFFFFF | ![#FFFFFF](https://via.placeholder.com/32/FFFFFF/FFFFFF.png) |

diff --git a/dist/output/scss/dark.scss b/dist/output/scss/dark.scss
@@ -1,7 +1,7 @@
 /*
-** mx-design-tokens (10.6.0)
+** mx-design-tokens (10.7.0)
 **
-** sass variables auto-generated on 2023-02-23
+** sass variables auto-generated on 2023-04-20
 ** from https://github.com/mxenabled/mx-design-tokens to /scss/dark.scss
 */
 $Color: (
@@ -392,9 +392,11 @@ $BorderColor: (
 $TextColor: (
   "Active": #69A1FA,
   "ActiveHover": #E7F0FE,
+  "Dark": #121417,
   "Default": #FFFFFF,
   "Disabled": #6A7381,
   "Error": #F45532,
+  "Light": #FFFFFF,
   "Secondary": #A8B1BD,
   "Success": #09A57F,
   "Avatar": #FFFFFF,

diff --git a/dist/output/scss/light.scss b/dist/output/scss/light.scss
@@ -1,7 +1,7 @@
 /*
-** mx-design-tokens (10.6.0)
+** mx-design-tokens (10.7.0)
 **
-** sass variables auto-generated on 2023-02-23
+** sass variables auto-generated on 2023-04-20
 ** from https://github.com/mxenabled/mx-design-tokens to /scss/light.scss
 */
 $Color: (
@@ -391,9 +391,11 @@ $BorderColor: (
 $TextColor: (
   "Active": #2D64EF,
   "ActiveHover": #095ADB,
+  "Dark": #121417,
   "Default": #121417,
   "Disabled": #A8B1BD,
   "Error": #DF320C,
+  "Light": #FFFFFF,
   "Secondary": #49505A,
   "Success": #078364,
   "Avatar": #121417,

diff --git a/dist/tokens/textColor.js b/dist/tokens/textColor.js
@@ -16,9 +16,11 @@ var light = function light(core) {
     // Global
     Active: core.Color.Brand300,
     ActiveHover: core.Color.Brand400,
+    Dark: core.Color.Neutral900,
     Default: core.Color.Neutral900,
     Disabled: core.Color.Neutral500,
     Error: core.Color.Error300,
+    Light: core.Color.NeutralWhite,
     Secondary: core.Color.Neutral700,
     Success: core.Color.Success400,
     // Avatar
@@ -80,9 +82,11 @@ var dark = function dark(core) {
     // Global
     Active: core.Color.Brand200,
     ActiveHover: core.Color.Brand100,
+    Dark: core.Color.Neutral900,
     Default: core.Color.NeutralWhite,
     Disabled: core.Color.Neutral600,
     Error: core.Color.Error200,
+    Light: core.Color.NeutralWhite,
     Secondary: core.Color.Neutral500,
     Success: core.Color.Success300,
     // Avatar

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mx-design-tokens",
-  "version": "10.6.0",
+  "version": "10.7.0",
   "description": "Design Tokens",
   "main": "dist/index.js",
   "engines": {

diff --git a/src/tokens/textColor.js b/src/tokens/textColor.js
@@ -2,9 +2,11 @@ const light = (core) => ({
   // Global
   Active: core.Color.Brand300,
   ActiveHover: core.Color.Brand400,
+  Dark: core.Color.Neutral900,
   Default: core.Color.Neutral900,
   Disabled: core.Color.Neutral500,
   Error: core.Color.Error300,
+  Light: core.Color.NeutralWhite,
   Secondary: core.Color.Neutral700,
   Success: core.Color.Success400,
   // Avatar
@@ -65,9 +67,11 @@ const dark = (core) => ({
   // Global
   Active: core.Color.Brand200,
   ActiveHover: core.Color.Brand100,
+  Dark: core.Color.Neutral900,
   Default: core.Color.NeutralWhite,
   Disabled: core.Color.Neutral600,
   Error: core.Color.Error200,
+  Light: core.Color.NeutralWhite,
   Secondary: core.Color.Neutral500,
   Success: core.Color.Success300,
   // Avatar