refactor button styles implementation to more maintainable approach w…

…ith simpler naming
jpmorganchase · Feb 11, 2025 · c67d44a · c67d44a
1 parent 9bf90d7
commit c67d44a
Show file tree

Hide file tree

Showing 21 changed files with 396 additions and 268 deletions.
diff --git a/.changeset/tough-hats-draw.md b/.changeset/tough-hats-draw.md
@@ -0,0 +1,54 @@
+---
+"@salt-ds/core": patch
+---
+
+Refactor internal implementation of button styles
+
+- this is a non-breaking refactor of how we organise the styles within the CSS file.
+- removes un-supported/un-documented vars prefixed `--saltButton`
+
+```
+--saltButton-alignItems
+--saltButton-background
+--saltButton-background-active
+--saltButton-background-active-hover
+--saltButton-background-disabled
+--saltButton-background-hover
+--saltButton-borderColor
+--saltButton-borderColor-active
+--saltButton-borderColor-disabled
+--saltButton-borderColor-hover
+--saltButton-borderRadius
+--saltButton-borderStyle
+--saltButton-borderWidth
+--saltButton-cursor
+--saltButton-cursor-disabled
+--saltButton-fontFamily
+--saltButton-fontSize
+--saltButton-fontWeight
+--saltButton-height
+--saltButton-justifyContent
+--saltButton-letterSpacing
+--saltButton-lineHeight
+--saltButton-margin
+--saltButton-minWidth
+--saltButton-padding
+--saltButton-text-color
+--saltButton-text-color-active
+--saltButton-text-color-active-hover
+--saltButton-text-color-disabled
+--saltButton-text-color-hover
+--saltButton-textAlign
+--saltButton-textTransform
+--saltButton-width
+```
+
+if using these vars then use the equivalent `button` prefix vars, that map to CSS attributes.
+
+```diff
+- --saltButton-background
++ --button-background
+```
+
+- switched approach to a minimal set of base styles that consistently apply CSS variables, making the style easier to read and maintain
+- updated core/stable references to `--saltButton` to `--button` in `Button`, `Input`, `MultilineInput`, `NavigationItem`, `Pagination`, `Pill`
diff --git a/packages/core/src/button/Button.css b/packages/core/src/button/Button.css
diff --git a/packages/core/src/input/Input.css b/packages/core/src/input/Input.css
@@ -215,9 +215,9 @@
 
 .saltInput-startAdornmentContainer > .saltButton,
 .saltInput-endAdornmentContainer > .saltButton {
-  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
+  --button-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
+  --button-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --button-borderRadius: var(--salt-palette-corner-weaker);
 }
 
 /* Style applied to inner input component */

diff --git a/packages/core/src/multiline-input/MultilineInput.css b/packages/core/src/multiline-input/MultilineInput.css
@@ -243,9 +243,9 @@
 /* Styles for button adornment */
 .saltMultilineInput-startAdornmentContainer > .saltButton,
 .saltMultilineInput-endAdornmentContainer > .saltButton {
-  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
+  --button-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
+  --button-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --button-borderRadius: var(--salt-palette-corner-weaker);
 }
 
 /* Style applied to inner textarea element */

diff --git a/packages/core/src/navigation-item/NavigationItem.css b/packages/core/src/navigation-item/NavigationItem.css
@@ -69,7 +69,7 @@
 
 /* Styles applied when orientation = "vertical" */
 .saltNavigationItem-vertical {
-  --saltButton-margin: var(--salt-spacing-50) 0;
+  --button-margin: var(--salt-spacing-50) 0;
 
   min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);
   padding-right: var(--salt-spacing-100);

diff --git a/packages/core/src/pagination/CompactPaginator.css b/packages/core/src/pagination/CompactPaginator.css
@@ -6,7 +6,7 @@
 }
 
 .saltCompactPaginator-arrowButton {
-  --saltButton-width: var(--salt-size-base);
-  --saltButton-height: var(--salt-size-base);
-  --saltButton-padding: var(--salt-spacing-100);
+  --button-width: var(--salt-size-base);
+  --button-height: var(--salt-size-base);
+  --button-padding: var(--salt-spacing-100);
 }
diff --git a/packages/core/src/pagination/PageButton.css b/packages/core/src/pagination/PageButton.css
@@ -1,30 +1,32 @@
 .saltPageButton {
-  --saltButton-minWidth: var(--salt-size-base);
-  --saltButton-fontWeight: var(--salt-text-fontWeight);
-  --saltButton-height: var(--salt-size-base);
-  --saltButton-text-color: var(--salt-content-primary-foreground);
-  --saltButton-background-active: var(--salt-selectable-background-selected);
-  --saltButton-text-color-active: var(--salt-content-primary-foreground);
+  --button-minWidth: var(--salt-size-base);
+  --button-fontWeight: var(--salt-text-fontWeight);
+  --button-height: var(--salt-size-base);
+  --button-color: var(--salt-content-primary-foreground);
+}
+.saltPageButton:active {
+  --button-background-active: var(--salt-selectable-background-selected);
+  --button-color-active: var(--salt-content-primary-foreground);
 }
 
 .saltPageButton:hover,
 .saltPageButton:focus-visible {
-  --saltButton-text-color-hover: var(--salt-content-primary-foreground);
-  --saltButton-background-hover: var(--salt-selectable-background-hover);
+  --button-color-hover: var(--salt-content-primary-foreground);
+  --button-background-hover: var(--salt-selectable-background-hover);
 }
 
 .saltPageButton:disabled {
-  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);
-  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);
+  --button-color-disabled: var(--salt-content-secondary-foreground);
+  --button-cursor-disabled: var(--salt-editable-cursor-readonly);
 }
 
 .saltPageButton-selected {
-  --saltButton-background: var(--salt-selectable-background-selected);
+  --button-background: var(--salt-selectable-background-selected);
 }
 .saltPageButton-selected:focus-visible {
-  --saltButton-background-hover: var(--salt-selectable-background-selected);
+  --button-background-hover: var(--salt-selectable-background-selected);
 }
 
 .saltPageButton-fixed {
-  --saltButton-padding: 0;
+  --button-padding: 0;
 }
diff --git a/packages/core/src/pagination/Paginator.css b/packages/core/src/pagination/Paginator.css
@@ -4,9 +4,9 @@
 }
 
 .saltPaginator-arrowButton-previous {
-  --saltButton-margin: 0 var(--salt-spacing-100) 0 0;
+  --button-margin: 0 var(--salt-spacing-100) 0 0;
 }
 
 .saltPaginator-arrowButton-next {
-  --saltButton-margin: 0 0 0 var(--salt-spacing-100);
+  --button-margin: 0 0 0 var(--salt-spacing-100);
 }
diff --git a/packages/core/src/pill-input/PillInput.css b/packages/core/src/pill-input/PillInput.css
@@ -239,9 +239,9 @@
 
 .saltPillInput-startAdornmentContainer > .saltButton,
 .saltPillInput-endAdornmentContainer > .saltButton {
-  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
+  --button-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
+  --button-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --button-borderRadius: var(--salt-palette-corner-weaker);
 }
 
 .saltPillInput-inputWrapper {

diff --git a/packages/lab/src/color-chooser/ColorChooser.css b/packages/lab/src/color-chooser/ColorChooser.css
@@ -18,7 +18,7 @@
 
 .saltColorChooser-overlayButtonText {
   font-weight: var(--salt-text-fontWeight);
-  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));
+  font-family: var(--button-fontFamily, var(--salt-text-fontFamily));
   font-size: var(--salt-text-fontSize);
   letter-spacing: normal;
 }

diff --git a/packages/lab/src/date-input/DateInput.css b/packages/lab/src/date-input/DateInput.css
@@ -204,8 +204,8 @@
 }
 
 .saltDateInput-endAdornmentContainer > .saltButton {
-  --saltButton-padding: var(--salt-spacing-50);
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --button-padding: var(--salt-spacing-50);
+  --button-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
 }
 
 /* Style applied to inner input component */

diff --git a/packages/lab/src/dropdown/DropdownButton.css b/packages/lab/src/dropdown/DropdownButton.css
@@ -1,15 +1,15 @@
 .saltDropdownButton {
-  --saltButton-background-hover: var(--salt-actionable-secondary-background);
-  --saltButton-background-active: var(--salt-actionable-secondary-background);
-  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */
-  --saltButton-textAlign: left;
-  --saltButton-textTransform: none;
-  --saltButton-width: 100%;
+  --button-background-hover: var(--salt-actionable-secondary-background);
+  --button-background-active: var(--salt-actionable-secondary-background);
+  --button-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */
+  --button-textAlign: left;
+  --button-textTransform: none;
+  --button-width: 100%;
 }
 
 .saltDropdownButton:active {
   --saltIcon-color: var(--salt-actionable-secondary-foreground);
-  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);
+  --button-color-active: var(--salt-actionable-secondary-foreground);
 }
 
 .saltDropdownButton-fullwidth {

diff --git a/packages/lab/src/input-legacy/InputLegacy.css b/packages/lab/src/input-legacy/InputLegacy.css
@@ -111,7 +111,7 @@
 /* Style applied to salt Button used within Input component adornments */
 .saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,
 .saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {
-  height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));
+  height: calc(var(--button-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));
   margin: var(--inputLegacy-button-inset);
   padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset));
 }

diff --git a/packages/lab/src/stepper-input/StepperInput.css b/packages/lab/src/stepper-input/StepperInput.css
@@ -250,9 +250,9 @@
 
 .saltStepperInput-startAdornmentContainer > .saltButton,
 .saltStepperInput-endAdornmentContainer > .saltButton {
-  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
+  --button-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
+  --button-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --button-borderRadius: var(--salt-palette-corner-weaker);
 }
 
 .saltStepperInput-inputTextAlignLeft {
@@ -279,13 +279,13 @@
 
 /* Styles applied to stepper buttons */
 .saltStepperInput-stepperButton {
-  --saltButton-height: calc((var(--salt-size-base) - var(--stepperInput-buttonGap)) * 0.5);
-  --saltButton-width: var(--salt-size-base);
+  --button-height: calc((var(--salt-size-base) - var(--stepperInput-buttonGap)) * 0.5);
+  --button-width: var(--salt-size-base);
 }
 
 .saltStepperInput-stepperButtonIncrement {
-  --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;
+  --button-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;
 }
 .saltStepperInput-stepperButtonDecrement {
-  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);
+  --button-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);
 }
diff --git a/packages/lab/src/tabs/Tabstrip.css b/packages/lab/src/tabs/Tabstrip.css
@@ -65,8 +65,8 @@
 }
 
 .saltTabstrip-overflowMenu-open {
-  --saltButton-background: var(--salt-actionable-secondary-background-active);
-  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);
+  --button-background: var(--salt-actionable-secondary-background-active);
+  --button-text-color: var(--salt-actionable-secondary-text-color-active);
 }
 
 .saltTabstrip-overflowMenu-open .saltButton {

diff --git a/packages/lab/src/tokenized-input-next/TokenizedInputNext.css b/packages/lab/src/tokenized-input-next/TokenizedInputNext.css
@@ -213,13 +213,13 @@
 }
 
 .saltTokenizedInputNext .saltButton {
-  --saltButton-padding: 0;
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --button-padding: 0;
+  --button-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --button-width: calc(var(--salt-size-base) - var(--salt-spacing-100));
 }
 
 .saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {
-  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;
+  --button-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;
 }
 .saltTokenizedInputNext-hidden {
   display: none;

diff --git a/packages/lab/src/tokenized-input/TokenizedInput.css b/packages/lab/src/tokenized-input/TokenizedInput.css
@@ -106,8 +106,8 @@
 /* Styles applied to Expand Button  */
 .saltTokenizedInput-expandButton.saltButton {
   padding: 0 calc(var(--tokenizedInput-spacing) / 4);
-  --saltButton-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);
-  --saltButton-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;
+  --button-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);
+  --button-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;
 }
 
 /* Styles applied to root component and pill container if `expanded={true}` */

diff --git a/packages/lab/src/toolbar/Toolbar.css b/packages/lab/src/toolbar/Toolbar.css
@@ -20,8 +20,8 @@
 }
 
 /* .saltToolbarField:not([data-overflow-indicator]) > .saltButton {
-  --saltButton-fontSize: 0;
-  --saltButton-letterSpacing: 0;
+  --button-fontSize: 0;
+  --button-letterSpacing: 0;
 } */
 
 .saltToolbar > .Responsive-inner {

diff --git a/packages/lab/src/toolbar/ToolbarButton.css b/packages/lab/src/toolbar/ToolbarButton.css
@@ -3,7 +3,7 @@
 } */
 
 .saltToolbarButton:not([data-is-inside-panel]) {
-  --saltButton-fontSize: 0;
-  --saltButton-letterSpacing: 0;
+  --button-fontSize: 0;
+  --button-letterSpacing: 0;
   gap: 0;
 }
diff --git a/packages/lab/src/toolbar/overflow-panel/OverflowPanel.css b/packages/lab/src/toolbar/overflow-panel/OverflowPanel.css
@@ -5,7 +5,7 @@
 }
 
 .saltOverflowPanel-content {
-  --saltButton-justifyContent: flex-start;
+  --button-justifyContent: flex-start;
   align-items: stretch;
   color: var(--salt-content-primary-foreground);
   border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
@@ -16,8 +16,8 @@
 }
 
 .saltOverflowPanel [aria-expanded="true"] {
-  --saltButton-background: var(--salt-actionable-secondary-background-active);
-  --saltButton-background-hover: var(--salt-actionable-secondary-background-active);
+  --button-background: var(--salt-actionable-secondary-background-active);
+  --button-background-hover: var(--salt-actionable-secondary-background-active);
   --saltIcon-color: var(--salt-actionable-secondary-foreground-active);
 }
 

diff --git a/packages/lab/stories/toolbar/toolbar.stories.css b/packages/lab/stories/toolbar/toolbar.stories.css
@@ -1,4 +1,4 @@
 #toolbar-simple-collapsible [data-collapsed] {
-  --saltButton-fontSize: 0;
-  --saltButton-letterSpacing: 0;
+  --button-fontSize: 0;
+  --button-letterSpacing: 0;
 }