chore(button): deprecate selected state padding variables

lumapps · Dec 10, 2024 · 15d2126 · 15d2126
1 parent e2baa1e
commit 15d2126
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   `DatePicker`: update day buttons to use standard button styles
 -   `Chip`: add border and background color CSS variable theming on selected state.
 -   `SideNavigationItem`: add border CSS variable theming on selected state.
+-   `Button`: deprecated variables `--lumx-button-emphasis-selected-state-default-padding-horizontal`,
+     `--lumx-button-emphasis-selected-hover-hover-padding-horizontal` and
+     `--lumx-button-emphasis-selected-hover-active-padding-horizontal` (use the base `low` or `medium` emphasis padding)
 
 ### Fixed
 

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 Wed, 04 Dec 2024 10:53:03 GMT
+ * Generated on Fri, 06 Dec 2024 13:46:59 GMT
  */
 
 :root {
@@ -80,23 +80,23 @@
     --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-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-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
     --lumx-button-emphasis-selected-state-default-border-width: 0;
     --lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
     --lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2);
     --lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent;
     --lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
     --lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
     --lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent;
-    --lumx-button-emphasis-selected-state-hover-padding-horizontal: var(--lumx-spacing-unit-big);
+    --lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
     --lumx-button-emphasis-selected-state-hover-border-width: 0;
     --lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
     --lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2);
     --lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent;
     --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
     --lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
     --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent;
-    --lumx-button-emphasis-selected-state-active-padding-horizontal: var(--lumx-spacing-unit-big);
+    --lumx-button-emphasis-selected-state-active-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
     --lumx-button-emphasis-selected-state-active-border-width: 0;
     --lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
     --lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2);

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 Wed, 04 Dec 2024 10:53:03 GMT
+ * Generated on Fri, 06 Dec 2024 13:46:59 GMT
  */
 
 export const DESIGN_TOKENS = {
@@ -283,7 +283,7 @@ export const DESIGN_TOKENS = {
         },
         'emphasis-selected': {
             'state-default': {
-                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -313,7 +313,7 @@ export const DESIGN_TOKENS = {
                 },
             },
             'state-hover': {
-                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -343,7 +343,7 @@ export const DESIGN_TOKENS = {
                 },
             },
             'state-active': {
-                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {

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 Wed, 04 Dec 2024 10:53:03 GMT
+ * Generated on Fri, 06 Dec 2024 13:46:59 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -79,23 +79,23 @@ $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !de
 $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-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-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
 $lumx-button-emphasis-selected-state-default-border-width: 0 !default;
 $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
 $lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
 $lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
 $lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
 $lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-selected-state-hover-padding-horizontal: var(--lumx-spacing-unit-big) !default;
+$lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
 $lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
 $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
 $lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
 $lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
 $lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
 $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-selected-state-active-padding-horizontal: var(--lumx-spacing-unit-big) !default;
+$lumx-button-emphasis-selected-state-active-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
 $lumx-button-emphasis-selected-state-active-border-width: 0 !default;
 $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
 $lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;

diff --git a/packages/lumx-core/style-dictionary/properties/components/button.json b/packages/lumx-core/style-dictionary/properties/components/button.json
@@ -155,7 +155,7 @@
         "emphasis-selected": {
             "state-default": {
                 "padding": {
-                    "horizontal": "{spacing.unit.big}"
+                    "horizontal": { "value": "{spacing.unit.big.value}", "comment": "deprecated (use base emphasis padding)" }
                 },
                 "border-width": { "value": "0" },
                 "theme-light": {
@@ -171,7 +171,7 @@
             },
             "state-hover": {
                 "padding": {
-                    "horizontal": "{spacing.unit.big}"
+                    "horizontal": { "value": "{spacing.unit.big.value}", "comment":  "deprecated (use base emphasis padding)" }
                 },
                 "border-width": { "value": "0" },
                 "theme-light": {
@@ -187,7 +187,7 @@
             },
             "state-active": {
                 "padding": {
-                    "horizontal": "{spacing.unit.big}"
+                    "horizontal": { "value": "{spacing.unit.big.value}", "comment":  "deprecated (use base emphasis padding)" }
                 },
                 "border-width": { "value": "0" },
                 "theme-light": {