chore(design-tokens): minor change on button colors

lumapps · Dec 1, 2023 · 6bf75b1 · 6bf75b1
1 parent 3ab4de6
commit 6bf75b1
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   `@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
@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Dec 2023 09:06:10 GMT
+ * Generated on Fri, 01 Dec 2023 09:07:37 GMT
  */
 
 :root {
@@ -38,47 +38,47 @@
     --lumx-button-emphasis-medium-state-default-theme-light-color: var(--lumx-color-dark-L1);
     --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
     --lumx-button-emphasis-medium-state-default-theme-dark-background-color: var(--lumx-color-light-L5);
-    --lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-L1);
     --lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent;
     --lumx-button-emphasis-medium-state-hover-padding-horizontal: var(--lumx-spacing-unit-big);
     --lumx-button-emphasis-medium-state-hover-border-width: 0;
     --lumx-button-emphasis-medium-state-hover-theme-light-background-color: var(--lumx-color-dark-L4);
     --lumx-button-emphasis-medium-state-hover-theme-light-color: var(--lumx-color-dark-L1);
     --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
     --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
-    --lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-L1);
     --lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent;
     --lumx-button-emphasis-medium-state-active-padding-horizontal: var(--lumx-spacing-unit-big);
     --lumx-button-emphasis-medium-state-active-border-width: 0;
     --lumx-button-emphasis-medium-state-active-theme-light-background-color: var(--lumx-color-dark-L3);
     --lumx-button-emphasis-medium-state-active-theme-light-color: var(--lumx-color-dark-L1);
     --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
     --lumx-button-emphasis-medium-state-active-theme-dark-background-color: var(--lumx-color-light-L3);
-    --lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-L1);
     --lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent;
     --lumx-button-emphasis-low-state-default-padding-horizontal: var(--lumx-spacing-unit-regular);
     --lumx-button-emphasis-low-state-default-border-width: 0;
     --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
     --lumx-button-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1);
     --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
     --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
-    --lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-L1);
     --lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent;
     --lumx-button-emphasis-low-state-hover-padding-horizontal: var(--lumx-spacing-unit-regular);
     --lumx-button-emphasis-low-state-hover-border-width: 0;
     --lumx-button-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
     --lumx-button-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1);
     --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
     --lumx-button-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
-    --lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-L1);
     --lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent;
     --lumx-button-emphasis-low-state-active-padding-horizontal: var(--lumx-spacing-unit-regular);
     --lumx-button-emphasis-low-state-active-border-width: 0;
     --lumx-button-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
     --lumx-button-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1);
     --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
     --lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
-    --lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1);
     --lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent;
     --lumx-button-emphasis-selected-state-default-padding-horizontal: var(--lumx-spacing-unit-big);
     --lumx-button-emphasis-selected-state-default-border-width: 0;

diff --git a/packages/lumx-core/src/js/constants/design-tokens.ts b/packages/lumx-core/src/js/constants/design-tokens.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Dec 2023 09:06:10 GMT
+ * Generated on Fri, 01 Dec 2023 09:07:37 GMT
  */
 
 export const DESIGN_TOKENS = {
@@ -123,9 +123,9 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L5',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
@@ -153,9 +153,9 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L4',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
@@ -183,9 +183,9 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L3',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
@@ -209,9 +209,9 @@ export const DESIGN_TOKENS = {
                 'theme-dark': {
                     'background-color': { value: 'transparent' },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
@@ -241,9 +241,9 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L5',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
@@ -273,9 +273,9 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L4',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },

diff --git a/packages/lumx-core/src/scss/_design-tokens.scss b/packages/lumx-core/src/scss/_design-tokens.scss
@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Dec 2023 09:06:10 GMT
+ * Generated on Fri, 01 Dec 2023 09:07:37 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -37,47 +37,47 @@ $lumx-button-emphasis-medium-state-default-theme-light-background-color: var(--l
 $lumx-button-emphasis-medium-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-default-theme-dark-background-color: var(--lumx-color-light-L5) !default;
-$lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-hover-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-medium-state-hover-border-width: 0 !default;
 $lumx-button-emphasis-medium-state-hover-theme-light-background-color: var(--lumx-color-dark-L4) !default;
 $lumx-button-emphasis-medium-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
-$lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-active-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-medium-state-active-border-width: 0 !default;
 $lumx-button-emphasis-medium-state-active-theme-light-background-color: var(--lumx-color-dark-L3) !default;
 $lumx-button-emphasis-medium-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-active-theme-dark-background-color: var(--lumx-color-light-L3) !default;
-$lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !default;
 $lumx-button-emphasis-low-state-default-padding-horizontal: var(--lumx-spacing-unit-regular) !default;
 $lumx-button-emphasis-low-state-default-border-width: 0 !default;
 $lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
 $lumx-button-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
-$lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent !default;
 $lumx-button-emphasis-low-state-hover-padding-horizontal: var(--lumx-spacing-unit-regular) !default;
 $lumx-button-emphasis-low-state-hover-border-width: 0 !default;
 $lumx-button-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
 $lumx-button-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
-$lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent !default;
 $lumx-button-emphasis-low-state-active-padding-horizontal: var(--lumx-spacing-unit-regular) !default;
 $lumx-button-emphasis-low-state-active-border-width: 0 !default;
 $lumx-button-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
 $lumx-button-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
-$lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent !default;
 $lumx-button-emphasis-selected-state-default-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-selected-state-default-border-width: 0 !default;

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" }
                 }
             }