Adjust dark theme for decorative zinc (#44)

johanekhager · web-flow · commit 4766846d1b13 · 2024-02-29T09:30:09.000+01:00
* fix: adjust decorative zinc for dark mode

* 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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 GMT
  */
 module.exports = /** @type {const} */ {
     "background": {
@@ -37,8 +37,8 @@ module.exports = /** @type {const} */ {
             "strongHover": "#d7256d",
             "strongActive": "#8e104a",
             "strongDisabled": "rgba(244,63,133, 0.5)",
-            "medium": "#28282b",
-            "mediumHover": "#34353a",
+            "medium": "#1c1c1e",
+            "mediumHover": "#28282b",
             "mediumActive": "#3f3f46",
             "weakHover": "#34353a",
             "weakActive": "#3f3f46"
@@ -129,9 +129,9 @@ module.exports = /** @type {const} */ {
                 "strong": "#ca8a04"
             },
             "zinc": {
-                "default": "#0f0f10",
-                "weak": "#1c1c1e",
-                "medium": "#28282b",
+                "default": "#28282b",
+                "weak": "#28282b",
+                "medium": "#3f3f46",
                 "strong": "#57595f"
             },
             "cerise": {
@@ -158,7 +158,7 @@ module.exports = /** @type {const} */ {
         "neutral": {
             "default": "rgba(255,255,255, 0.14)",
             "medium": "rgba(255,255,255, 0.2)",
-            "strong": "rgba( #ffffff, 0.28)"
+            "strong": "rgba(255,255,255, 0.28)"
         },
         "success": {
             "default": "rgba(52,53,58, 0.05)"
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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 GMT
  */
 module.exports = /** @type {const} */ {
     "background": {
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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 GMT
  */
 
 module.exports = /** @type {const} */ {
@@ -37,8 +37,8 @@ module.exports = /** @type {const} */ {
       "strongHover": "#d7256d",
       "strongActive": "#8e104a",
       "strongDisabled": "rgba(244,63,133, 0.5)",
-      "medium": "#28282b",
-      "mediumHover": "#34353a",
+      "medium": "#1c1c1e",
+      "mediumHover": "#28282b",
       "mediumActive": "#3f3f46",
       "weakHover": "#34353a",
       "weakActive": "#3f3f46"
@@ -129,9 +129,9 @@ module.exports = /** @type {const} */ {
         "strong": "#ca8a04"
       },
       "zinc": {
-        "default": "#0f0f10",
-        "weak": "#1c1c1e",
-        "medium": "#28282b",
+        "default": "#28282b",
+        "weak": "#28282b",
+        "medium": "#3f3f46",
         "strong": "#57595f"
       },
       "cerise": {
@@ -158,7 +158,7 @@ module.exports = /** @type {const} */ {
     "neutral": {
       "default": "rgba(255,255,255, 0.14)",
       "medium": "rgba(255,255,255, 0.2)",
-      "strong": "rgba( #ffffff, 0.28)"
+      "strong": "rgba(255,255,255, 0.28)"
     },
     "success": {
       "default": "rgba(52,53,58, 0.05)"
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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 GMT
  */
 
 module.exports = /** @type {const} */ {
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 Wed, 28 Feb 2024 09:00:00 GMT
+ * Generated on Thu, 29 Feb 2024 08:28:44 GMT
  */
 
 module.exports = /** @type {const} */ {
diff --git a/src/output/theme-dark.css b/src/output/theme-dark.css
@@ -20,8 +20,8 @@
   --color-background-action-strong-hover: rgb(215, 37, 109);
   --color-background-action-strong-active: rgb(142, 16, 74);
   --color-background-action-strong-disabled: rgba(244,63,133, 0.5);
-  --color-background-action-medium: rgb(40, 40, 43);
-  --color-background-action-medium-hover: rgb(52, 53, 58);
+  --color-background-action-medium: rgb(28, 28, 30);
+  --color-background-action-medium-hover: rgb(40, 40, 43);
   --color-background-action-medium-active: rgb(63, 63, 70);
   --color-background-action-weak-hover: rgb(52, 53, 58);
   --color-background-action-weak-active: rgb(63, 63, 70);
@@ -81,9 +81,9 @@
   --color-background-decorative-yellow-weak: rgb(113, 63, 18);
   --color-background-decorative-yellow-medium: rgb(133, 77, 14);
   --color-background-decorative-yellow-strong: rgb(202, 138, 4);
-  --color-background-decorative-zinc-default: rgb(15, 15, 16);
-  --color-background-decorative-zinc-weak: rgb(28, 28, 30);
-  --color-background-decorative-zinc-medium: rgb(40, 40, 43);
+  --color-background-decorative-zinc-default: rgb(40, 40, 43);
+  --color-background-decorative-zinc-weak: rgb(40, 40, 43);
+  --color-background-decorative-zinc-medium: rgb(63, 63, 70);
   --color-background-decorative-zinc-strong: rgb(87, 89, 95);
   --color-background-decorative-cerise-default: rgb(73, 13, 37);
   --color-background-decorative-cerise-weak: rgb(131, 24, 67);
@@ -99,7 +99,7 @@
   --color-background-decorative-red-strong: rgb(220, 38, 38);
   --color-border-neutral-default: rgba(255,255,255, 0.14);
   --color-border-neutral-medium: rgba(255,255,255, 0.2);
-  --color-border-neutral-strong: rgba( rgb(255, 255, 255), 0.28);
+  --color-border-neutral-strong: rgba(255,255,255, 0.28);
   --color-border-success-default: rgba(52,53,58, 0.05);
   --color-border-danger-default: rgba(52,53,58, 0.05);
   --color-border-warning-default: rgba(52,53,58, 0.05);
diff --git a/tokens.json b/tokens.json
@@ -2714,14 +2714,14 @@
             "description": "rgba($color.pink.500, 0.5)"
           },
           "medium": {
-            "value": "{color.zinc.800}",
+            "value": "{color.zinc.900}",
             "type": "color",
-            "description": "{color.zinc.800}"
+            "description": "{color.zinc.900}"
           },
           "medium-hover": {
-            "value": "{color.zinc.750}",
+            "value": "{color.zinc.800}",
             "type": "color",
-            "description": "{color.zinc.750}"
+            "description": "{color.zinc.800}"
           },
           "medium-active": {
             "value": "{color.zinc.700}",
@@ -3050,19 +3050,19 @@
           },
           "zinc": {
             "DEFAULT": {
-              "value": "{color.zinc.1000}",
+              "value": "{color.zinc.800}",
               "type": "color",
-              "description": "{color.zinc.1000}"
+              "description": "{color.zinc.800}"
             },
             "weak": {
-              "value": "{color.zinc.900}",
+              "value": "{color.zinc.800}",
               "type": "color",
-              "description": "{color.zinc.900"
+              "description": "{color.zinc.800"
             },
             "medium": {
-              "value": "{color.zinc.800}",
+              "value": "{color.zinc.700}",
               "type": "color",
-              "description": "{color.zinc.800}"
+              "description": "{color.zinc.700}"
             },
             "strong": {
               "value": "{color.zinc.600}",
@@ -3151,7 +3151,7 @@
             "description": "rgba({color.white}, 0.2)"
           },
           "strong": {
-            "value": "rgba( {color.white}, 0.28)",
+            "value": "rgba({color.white}, 0.28)",
             "type": "color",
             "description": "rgba({color.white}, 0.28)"
           }
diff --git a/tokens/dark.json b/tokens/dark.json
@@ -139,15 +139,15 @@
           "failedToResolve": true
         },
         "medium": {
-          "value": "{color.zinc.800}",
+          "value": "{color.zinc.900}",
           "type": "color",
-          "description": "{color.zinc.800}",
+          "description": "{color.zinc.900}",
           "failedToResolve": true
         },
         "medium-hover": {
-          "value": "{color.zinc.750}",
+          "value": "{color.zinc.800}",
           "type": "color",
-          "description": "{color.zinc.750}",
+          "description": "{color.zinc.800}",
           "failedToResolve": true
         },
         "medium-active": {
@@ -536,21 +536,21 @@
         },
         "zinc": {
           "DEFAULT": {
-            "value": "{color.zinc.1000}",
+            "value": "{color.zinc.800}",
             "type": "color",
-            "description": "{color.zinc.1000}",
+            "description": "{color.zinc.800}",
             "failedToResolve": true
           },
           "weak": {
-            "value": "{color.zinc.900}",
+            "value": "{color.zinc.800}",
             "type": "color",
-            "description": "{color.zinc.900",
+            "description": "{color.zinc.800",
             "failedToResolve": true
           },
           "medium": {
-            "value": "{color.zinc.800}",
+            "value": "{color.zinc.700}",
             "type": "color",
-            "description": "{color.zinc.800}",
+            "description": "{color.zinc.700}",
             "failedToResolve": true
           },
           "strong": {
@@ -655,7 +655,7 @@
           "failedToResolve": true
         },
         "strong": {
-          "value": "rgba( {color.white}, 0.28)",
+          "value": "rgba({color.white}, 0.28)",
           "type": "color",
           "description": "rgba({color.white}, 0.28)",
           "failedToResolve": true
