Action active and dark alert colors (#53)

johanekhager · web-flow · commit 0f5f75dde548 · 2025-01-30T08:57:09.000+01:00
* fix: action active and dark alert colors

* Update output configs

* Update README.md

* Update output configs

---------

Co-authored-by: johanekhager &lt;johanekhager@users.noreply.github.com&gt;
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ To use this inside your Tailwind config you should import the relevant config in
 
 ```javascript
 // tailwind.config.js
-const {tokenColors, themeColors} = require('@teamtailor/design-tokens');
+const { tokenColors, themeColors } = require("@teamtailor/design-tokens")
 
 module.exports = {
   // ...
@@ -52,3 +52,12 @@ Css files are located here and are apply by using `.theme-light` or `.theme-dark
 @teamtailor/design-tokens/src/output/theme-light.css';
 @teamtailor/design-tokens/src/output/theme-dark.css';
 ```
+
+## Change colors
+
+Do those steps in order to change colors:
+
+1. Create a branch with the name `chore/figma-changes` (we will generate files depending on this branch name)
+2. Make changes in `tokens.json`
+3. Create a PR. Now will Github actions generate lots of necessary files (and bump version)
+4. Update package.json in your repo with the new version
diff --git a/dist/output/colors.spectrum.react.js b/dist/output/colors.spectrum.react.js
@@ -1,7 +1,7 @@
 "use strict";
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 module.exports = /** @type {const} */ {
     "black": "#000000",
diff --git a/dist/output/colors.spectrum.tailwind.js b/dist/output/colors.spectrum.tailwind.js
@@ -1,7 +1,7 @@
 "use strict";
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 module.exports = /** @type {const} */ {
     "black": "#000000",
diff --git a/dist/output/colors.theme.dark.react.js b/dist/output/colors.theme.dark.react.js
@@ -1,7 +1,7 @@
 "use strict";
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 module.exports = /** @type {const} */ {
     "background": {
@@ -400,19 +400,19 @@ module.exports = /** @type {const} */ {
             "weak": "#71717a"
         },
         "success": {
-            "default": "#defade",
+            "default": "#16a31b",
             "strong": "#ffffff"
         },
         "danger": {
-            "default": "#fee2e2",
+            "default": "#dc2626",
             "strong": "#ffffff"
         },
         "warning": {
-            "default": "#fef3c7",
+            "default": "#d97706",
             "strong": "#ffffff"
         },
         "info": {
-            "default": "#dcf2fe",
+            "default": "#0284c7",
             "strong": "#ffffff"
         },
         "copilot": {
diff --git a/dist/output/colors.theme.light.react.js b/dist/output/colors.theme.light.react.js
@@ -1,7 +1,7 @@
 "use strict";
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 module.exports = /** @type {const} */ {
     "background": {
@@ -260,9 +260,9 @@ module.exports = /** @type {const} */ {
             "hover": "#d7256d",
             "defaultActive": "#d7256d",
             "weak": "#34353a",
-            "weakActive": "#f43f85",
+            "weakActive": "#d7256d",
             "medium": "#34353a",
-            "mediumActive": "#f43f85",
+            "mediumActive": "#d7256d",
             "strong": "#ffffff"
         },
         "success": {
diff --git a/dist/output/colors.theme.tailwind.js b/dist/output/colors.theme.tailwind.js
@@ -1,7 +1,7 @@
 "use strict";
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 module.exports = /** @type {const} */ {
     "background": {
diff --git a/src/output/colors.spectrum.react.js b/src/output/colors.spectrum.react.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 
 module.exports = /** @type {const} */ {
diff --git a/src/output/colors.spectrum.tailwind.js b/src/output/colors.spectrum.tailwind.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 
 module.exports = /** @type {const} */ {
diff --git a/src/output/colors.theme.dark.react.js b/src/output/colors.theme.dark.react.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 
 module.exports = /** @type {const} */ {
@@ -400,19 +400,19 @@ module.exports = /** @type {const} */ {
       "weak": "#71717a"
     },
     "success": {
-      "default": "#defade",
+      "default": "#16a31b",
       "strong": "#ffffff"
     },
     "danger": {
-      "default": "#fee2e2",
+      "default": "#dc2626",
       "strong": "#ffffff"
     },
     "warning": {
-      "default": "#fef3c7",
+      "default": "#d97706",
       "strong": "#ffffff"
     },
     "info": {
-      "default": "#dcf2fe",
+      "default": "#0284c7",
       "strong": "#ffffff"
     },
     "copilot": {
diff --git a/src/output/colors.theme.light.react.js b/src/output/colors.theme.light.react.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 
 module.exports = /** @type {const} */ {
@@ -260,9 +260,9 @@ module.exports = /** @type {const} */ {
       "hover": "#d7256d",
       "defaultActive": "#d7256d",
       "weak": "#34353a",
-      "weakActive": "#f43f85",
+      "weakActive": "#d7256d",
       "medium": "#34353a",
-      "mediumActive": "#f43f85",
+      "mediumActive": "#d7256d",
       "strong": "#ffffff"
     },
     "success": {
diff --git a/src/output/colors.theme.tailwind.js b/src/output/colors.theme.tailwind.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 07:15:31 GMT
+ * Generated on Thu, 30 Jan 2025 07:55:55 GMT
  */
 
 module.exports = /** @type {const} */ {
diff --git a/src/output/theme-dark.css b/src/output/theme-dark.css
@@ -225,13 +225,13 @@
   --color-text-decorative-red-strong: rgb(255, 255, 255);
   --color-icon-neutral-default: rgb(178, 179, 185);
   --color-icon-neutral-weak: rgb(113, 113, 122);
-  --color-icon-success-default: rgb(222, 250, 222);
+  --color-icon-success-default: rgb(22, 163, 27);
   --color-icon-success-strong: rgb(255, 255, 255);
-  --color-icon-danger-default: rgb(254, 226, 226);
+  --color-icon-danger-default: rgb(220, 38, 38);
   --color-icon-danger-strong: rgb(255, 255, 255);
-  --color-icon-warning-default: rgb(254, 243, 199);
+  --color-icon-warning-default: rgb(217, 119, 6);
   --color-icon-warning-strong: rgb(255, 255, 255);
-  --color-icon-info-default: rgb(220, 242, 254);
+  --color-icon-info-default: rgb(2, 132, 199);
   --color-icon-info-strong: rgb(255, 255, 255);
   --color-icon-copilot-default: rgb(233, 213, 255);
   --color-icon-copilot-weak: rgb(233, 213, 255);
diff --git a/src/output/theme-light.css b/src/output/theme-light.css
@@ -139,9 +139,9 @@
   --color-text-action-hover: rgb(215, 37, 109);
   --color-text-action-default-active: rgb(215, 37, 109);
   --color-text-action-weak: rgb(52, 53, 58);
-  --color-text-action-weak-active: rgb(244, 63, 133);
+  --color-text-action-weak-active: rgb(215, 37, 109);
   --color-text-action-medium: rgb(52, 53, 58);
-  --color-text-action-medium-active: rgb(244, 63, 133);
+  --color-text-action-medium-active: rgb(215, 37, 109);
   --color-text-action-strong: rgb(255, 255, 255);
   --color-text-success-default: rgb(52, 53, 58);
   --color-text-danger-default: rgb(52, 53, 58);
diff --git a/tokens.json b/tokens.json
@@ -1724,19 +1724,19 @@
             "description": "{color.zinc.750}"
           },
           "weak-active": {
-            "value": "{color.pink.500}",
+            "value": "{color.pink.600}",
             "type": "color",
-            "description": "{color.pink.500}"
+            "description": "{color.pink.600}"
           },
           "medium": {
             "value": "{color.zinc.750}",
             "type": "color",
             "description": "{color.zinc.750}"
           },
           "medium-active": {
-            "value": "{color.pink.500}",
+            "value": "{color.pink.600}",
             "type": "color",
-            "description": "{color.pink.500}"
+            "description": "{color.pink.600}"
           },
           "strong": {
             "value": "{color.white}",
@@ -3980,9 +3980,9 @@
         },
         "success": {
           "DEFAULT": {
-            "value": "{color.green.100}",
+            "value": "{color.green.600}",
             "type": "color",
-            "description": "{color.green.100}"
+            "description": "{color.green.600}"
           },
           "strong": {
             "value": "{color.white}",
@@ -3992,9 +3992,9 @@
         },
         "danger": {
           "DEFAULT": {
-            "value": "{color.red.100}",
+            "value": "{color.red.600}",
             "type": "color",
-            "description": "{color.red.100}"
+            "description": "{color.red.600}"
           },
           "strong": {
             "value": "{color.white}",
@@ -4004,9 +4004,9 @@
         },
         "warning": {
           "DEFAULT": {
-            "value": "{color.amber.100}",
+            "value": "{color.amber.600}",
             "type": "color",
-            "description": "{color.amber.100}"
+            "description": "{color.amber.600}"
           },
           "strong": {
             "value": "{color.white}",
@@ -4016,9 +4016,9 @@
         },
         "info": {
           "DEFAULT": {
-            "value": "{color.light-blue.100}",
+            "value": "{color.light-blue.600}",
             "type": "color",
-            "description": "{color.light-blue.100}"
+            "description": "{color.light-blue.600}"
           },
           "strong": {
             "value": "{color.white}",
diff --git a/tokens/dark.json b/tokens/dark.json
@@ -1527,9 +1527,9 @@
       },
       "success": {
         "DEFAULT": {
-          "value": "{color.green.100}",
+          "value": "{color.green.600}",
           "type": "color",
-          "description": "{color.green.100}",
+          "description": "{color.green.600}",
           "failedToResolve": true
         },
         "strong": {
@@ -1541,9 +1541,9 @@
       },
       "danger": {
         "DEFAULT": {
-          "value": "{color.red.100}",
+          "value": "{color.red.600}",
           "type": "color",
-          "description": "{color.red.100}",
+          "description": "{color.red.600}",
           "failedToResolve": true
         },
         "strong": {
@@ -1555,9 +1555,9 @@
       },
       "warning": {
         "DEFAULT": {
-          "value": "{color.amber.100}",
+          "value": "{color.amber.600}",
           "type": "color",
-          "description": "{color.amber.100}",
+          "description": "{color.amber.600}",
           "failedToResolve": true
         },
         "strong": {
@@ -1569,9 +1569,9 @@
       },
       "info": {
         "DEFAULT": {
-          "value": "{color.light-blue.100}",
+          "value": "{color.light-blue.600}",
           "type": "color",
-          "description": "{color.light-blue.100}",
+          "description": "{color.light-blue.600}",
           "failedToResolve": true
         },
         "strong": {
diff --git a/tokens/light.json b/tokens/light.json
@@ -957,9 +957,9 @@
           "failedToResolve": true
         },
         "weak-active": {
-          "value": "{color.pink.500}",
+          "value": "{color.pink.600}",
           "type": "color",
-          "description": "{color.pink.500}",
+          "description": "{color.pink.600}",
           "failedToResolve": true
         },
         "medium": {
@@ -969,9 +969,9 @@
           "failedToResolve": true
         },
         "medium-active": {
-          "value": "{color.pink.500}",
+          "value": "{color.pink.600}",
           "type": "color",
-          "description": "{color.pink.500}",
+          "description": "{color.pink.600}",
           "failedToResolve": true
         },
         "strong": {
