Merge pull request #1030 from lumapps/feat/refine-colors

feat(design-tokens): update color values
lumapps · Dec 4, 2023 · 46091c6 · 46091c6
2 parents db76829 + 6bf75b1
commit 46091c6
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 266 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   `@lumx/icons`: override & alias system in place. now custom icon fonts are now generated from MDI fonts we extend.
 -   `@lumx/icons`: override Twitter logo to use the new X logo.
+-   `@lumx/core`: make component spacing styles default to CSS variables.
+-   `@lumx/core`: make component border styles default to CSS variables.
+-   `@lumx/core`: change text-field background to transparent.
+-   `@lumx/core`: minor change on tabs color.
+-   `@lumx/core`: minor change on navigation colors.
+-   `@lumx/core`: minor change on button colors.
 
 ## [3.5.5][] - 2023-11-13
 

diff --git a/packages/lumx-core/src/css/design-tokens.css b/packages/lumx-core/src/css/design-tokens.css
diff --git a/packages/lumx-core/src/js/constants/design-tokens.ts b/packages/lumx-core/src/js/constants/design-tokens.ts
diff --git a/packages/lumx-core/src/scss/_design-tokens.scss b/packages/lumx-core/src/scss/_design-tokens.scss
diff --git a/packages/lumx-core/style-dictionary/properties/components/button.json b/packages/lumx-core/style-dictionary/properties/components/button.json
@@ -65,7 +65,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L5}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             },
@@ -81,7 +81,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L4}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             },
@@ -97,7 +97,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L3}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             }
@@ -115,7 +115,7 @@
                 },
                 "theme-dark": {
                     "background-color": { "value": "transparent" },
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             },
@@ -131,7 +131,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L5}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             },
@@ -147,7 +147,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L4}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             }

diff --git a/packages/lumx-core/style-dictionary/properties/components/navigation.json b/packages/lumx-core/style-dictionary/properties/components/navigation.json
@@ -24,19 +24,19 @@
                     },
                     "theme-light": {
                         "background-color": { "value": "transparent" },
-                        "border-color": "{color.dark.L5}",
+                        "border-color": "{color.dark.L4}",
                         "icon-color": "{color.dark.L1}",
                         "label-color": "{color.dark.N}",
                         "chevron-background-color": { "value": "transparent" },
                         "chevron-color": "{color.dark.L1}"
                     },
                     "theme-dark": {
                         "background-color": { "value": "transparent" },
-                        "border-color": "{color.light.L5}",
-                        "icon-color": "{color.light.N}",
+                        "border-color": "{color.light.L4}",
+                        "icon-color": "{color.light.L1}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": { "value": "transparent" },
-                        "chevron-color": "{color.light.N}"
+                        "chevron-color": "{color.light.L1}"
                     }
                 },
                 "state-hover": {
@@ -56,19 +56,19 @@
                     },
                     "theme-light": {
                         "background-color": "{color.dark.L5}",
-                        "border-color": "{color.dark.L5}",
+                        "border-color": "{color.dark.L4}",
                         "icon-color": "{color.dark.L1}",
                         "label-color": "{color.dark.N}",
                         "chevron-background-color": "{color.dark.L5}",
                         "chevron-color": "{color.dark.L1}"
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L5}",
-                        "border-color": "{color.light.L5}",
-                        "icon-color": "{color.light.N}",
+                        "border-color": "{color.light.L4}",
+                        "icon-color": "{color.light.L1}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": "{color.light.L5}",
-                        "chevron-color": "{color.light.N}"
+                        "chevron-color": "{color.light.L1}"
                     }
                 },
                 "state-active": {
@@ -88,19 +88,19 @@
                     },
                     "theme-light": {
                         "background-color": "{color.dark.L4}",
-                        "border-color": "{color.dark.L5}",
+                        "border-color": "{color.dark.L4}",
                         "icon-color": "{color.dark.L1}",
                         "label-color": "{color.dark.N}",
                         "chevron-background-color": "{color.dark.L4}",
                         "chevron-color": "{color.dark.L1}"
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L4}",
-                        "border-color": "{color.light.L5}",
-                        "icon-color": "{color.light.N}",
+                        "border-color": "{color.light.L4}",
+                        "icon-color": "{color.light.L1}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": "{color.light.L4}",
-                        "chevron-color": "{color.light.N}"
+                        "chevron-color": "{color.light.L1}"
                     }
                 }
             },
@@ -130,7 +130,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L3}",
-                        "border-color": "{color.light.L5}",
+                        "border-color": "{color.light.N}",
                         "icon-color": "{color.light.N}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": { "value": "transparent" },
@@ -162,7 +162,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L4}",
-                        "border-color": "{color.light.L5}",
+                        "border-color": "{color.light.N}",
                         "icon-color": "{color.light.N}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": "{color.light.L4}",
@@ -194,7 +194,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L5}",
-                        "border-color": "{color.light.L5}",
+                        "border-color": "{color.light.N}",
                         "icon-color": "{color.light.N}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": "{color.light.L5}",

diff --git a/packages/lumx-core/style-dictionary/properties/components/tabs.json b/packages/lumx-core/style-dictionary/properties/components/tabs.json
@@ -22,12 +22,12 @@
                     "theme-light": {
                         "background-color": { "value": "transparent" },
                         "color": "{color.dark.L1}",
-                        "border-color": "{color.dark.L5}"
+                        "border-color": "{color.dark.L4}"
                     },
                     "theme-dark": {
                         "background-color": { "value": "transparent" },
-                        "color": "{color.light.N}",
-                        "border-color": "{color.light.L5}"
+                        "color": "{color.light.L1}",
+                        "border-color": "{color.light.L4}"
                     }
                 },
                 "state-hover": {
@@ -48,12 +48,12 @@
                     "theme-light": {
                         "background-color": "{color.dark.L5}",
                         "color": "{color.dark.L1}",
-                        "border-color": "{color.dark.L5}"
+                        "border-color": "{color.dark.L4}"
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L5}",
-                        "color": "{color.light.N}",
-                        "border-color": "{color.light.L5}"
+                        "color": "{color.light.L1}",
+                        "border-color": "{color.light.L4}"
                     }
                 },
                 "state-active": {
@@ -74,12 +74,12 @@
                     "theme-light": {
                         "background-color": "{color.dark.L4}",
                         "color": "{color.dark.L1}",
-                        "border-color": "{color.dark.L5}"
+                        "border-color": "{color.dark.L4}"
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L4}",
-                        "color": "{color.light.N}",
-                        "border-color": "{color.light.L5}"
+                        "color": "{color.light.L1}",
+                        "border-color": "{color.light.L4}"
                     }
                 }
             },
@@ -106,7 +106,7 @@
                     },
                     "theme-dark": {
                         "background-color": { "value": "transparent" },
-                        "color": "{color.light.N}",
+                        "color": "{color.light.L1}",
                         "border-color": "{color.light.N}"
                     }
                 },
@@ -132,7 +132,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L5}",
-                        "color": "{color.light.N}",
+                        "color": "{color.light.L1}",
                         "border-color": "{color.light.N}"
                     }
                 },
@@ -158,7 +158,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L4}",
-                        "color": "{color.light.N}",
+                        "color": "{color.light.L1}",
                         "border-color": "{color.light.N}"
                     }
                 }

diff --git a/packages/lumx-core/style-dictionary/properties/components/text-field.json b/packages/lumx-core/style-dictionary/properties/components/text-field.json
@@ -135,7 +135,7 @@
                     }
                 },
                 "input": {
-                    "background-color": "{color.light.N}",
+                    "background-color": { "value": "transparent" },
                     "border-color": "{color.primary.N}",
                     "content": {
                         "color": "{color.dark.N}"

diff --git a/packages/lumx-core/style-dictionary/properties/core/border-radius.json b/packages/lumx-core/style-dictionary/properties/core/border-radius.json
@@ -1,3 +1,3 @@
 {
-    "border-radius": { "value": "4px" }
+    "border-radius": { "value": "4px", "preferCSSVariable": true }
 }
diff --git a/packages/lumx-core/style-dictionary/properties/core/spacing.json b/packages/lumx-core/style-dictionary/properties/core/spacing.json
@@ -1,11 +1,11 @@
 {
     "spacing": {
         "unit": {
-            "tiny": { "value": "4px" },
-            "regular": { "value": "8px" },
-            "medium": { "value": "12px" },
-            "big": { "value": "16px" },
-            "huge": { "value": "24px" }
+            "tiny": { "value": "4px", "preferCSSVariable": true },
+            "regular": { "value": "8px", "preferCSSVariable": true },
+            "medium": { "value": "12px", "preferCSSVariable": true },
+            "big": { "value": "16px", "preferCSSVariable": true },
+            "huge": { "value": "24px", "preferCSSVariable": true }
         }
     }
 }