Increase contrast to action weak and medium (#54)

johanekhager · web-flow · commit 38d3cc361f8f · 2025-09-15T13:50:22.000+02:00
* Increase contrast to action weak and medium

* Update output configs

---------

Co-authored-by: johanekhager &lt;johanekhager@users.noreply.github.com&gt;
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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 GMT
  */
 module.exports = /** @type {const} */ {
     "background": {
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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 GMT
  */
 module.exports = /** @type {const} */ {
     "background": {
@@ -40,9 +40,9 @@ module.exports = /** @type {const} */ {
             "strongDisabled": "rgba(244,63,133, 0.5)",
             "medium": "#ffffff",
             "mediumHover": "#f8f8f9",
-            "mediumActive": "#fff0f5",
-            "weakHover": "#f8f8f9",
-            "weakActive": "#fff0f5"
+            "mediumActive": "#ffe5ee",
+            "weakHover": "#eeeef0",
+            "weakActive": "#ffe5ee"
         },
         "copilot": {
             "default": "#faf5ff",
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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 GMT
  */
 
 module.exports = /** @type {const} */ {
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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 GMT
  */
 
 module.exports = /** @type {const} */ {
@@ -40,9 +40,9 @@ module.exports = /** @type {const} */ {
       "strongDisabled": "rgba(244,63,133, 0.5)",
       "medium": "#ffffff",
       "mediumHover": "#f8f8f9",
-      "mediumActive": "#fff0f5",
-      "weakHover": "#f8f8f9",
-      "weakActive": "#fff0f5"
+      "mediumActive": "#ffe5ee",
+      "weakHover": "#eeeef0",
+      "weakActive": "#ffe5ee"
     },
     "copilot": {
       "default": "#faf5ff",
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 Thu, 30 Jan 2025 07:55:55 GMT
+ * Generated on Mon, 15 Sep 2025 11:49:56 GMT
  */
 
 module.exports = /** @type {const} */ {
diff --git a/src/output/theme-light.css b/src/output/theme-light.css
@@ -23,9 +23,9 @@
   --color-background-action-strong-disabled: rgba(244,63,133, 0.5);
   --color-background-action-medium: rgb(255, 255, 255);
   --color-background-action-medium-hover: rgb(248, 248, 249);
-  --color-background-action-medium-active: rgb(255, 240, 245);
-  --color-background-action-weak-hover: rgb(248, 248, 249);
-  --color-background-action-weak-active: rgb(255, 240, 245);
+  --color-background-action-medium-active: rgb(255, 229, 238);
+  --color-background-action-weak-hover: rgb(238, 238, 240);
+  --color-background-action-weak-active: rgb(255, 229, 238);
   --color-background-copilot-default: rgb(250, 245, 255);
   --color-background-copilot-weak: rgb(243, 232, 255);
   --color-background-copilot-medium: rgb(168, 85, 247);
diff --git a/tokens.json b/tokens.json
@@ -1040,19 +1040,19 @@
             "description": "{color.zinc.50}"
           },
           "medium-active": {
-            "value": "{color.pink.50}",
+            "value": "{color.pink.100}",
             "type": "color",
-            "description": "{color.pink.50}"
+            "description": "{color.pink.100}"
           },
           "weak-hover": {
-            "value": "{color.zinc.50}",
+            "value": "{color.zinc.150}",
             "type": "color",
-            "description": "{color.zinc.50}"
+            "description": "{color.zinc.150}"
           },
           "weak-active": {
-            "value": "{color.pink.50}",
+            "value": "{color.pink.100}",
             "type": "color",
-            "description": "{color.pink.50}"
+            "description": "{color.pink.100}"
           }
         },
         "copilot": {
diff --git a/tokens/light.json b/tokens/light.json
@@ -157,21 +157,21 @@
           "failedToResolve": true
         },
         "medium-active": {
-          "value": "{color.pink.50}",
+          "value": "{color.pink.100}",
           "type": "color",
-          "description": "{color.pink.50}",
+          "description": "{color.pink.100}",
           "failedToResolve": true
         },
         "weak-hover": {
-          "value": "{color.zinc.50}",
+          "value": "{color.zinc.150}",
           "type": "color",
-          "description": "{color.zinc.50}",
+          "description": "{color.zinc.150}",
           "failedToResolve": true
         },
         "weak-active": {
-          "value": "{color.pink.50}",
+          "value": "{color.pink.100}",
           "type": "color",
-          "description": "{color.pink.50}",
+          "description": "{color.pink.100}",
           "failedToResolve": true
         }
       },
