diff --git a/.changeset/tough-hats-draw.md b/.changeset/tough-hats-draw.md new file mode 100644 index 00000000000..03b72510882 --- /dev/null +++ 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 index cdbf2d62423..5682e9c28c7 100644 --- a/packages/core/src/button/Button.css +++ b/packages/core/src/button/Button.css @@ -1,402 +1,474 @@ +/* + Deprecated Variables Notice: + +The CSS variables listed below are deprecated and should be replaced with their corresponding SaltStyleContract variables. +If you are currently overriding these variables, please create a SaltStyleContract that utilizes the --saltButton-contract- prefixed variables. +This approach allows us to share contracts that manage style tokens and provide a structured way for users to implement known levels of customization. + +--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 + + Please transition to using the `--saltButton-contract-` variables to ensure compatibility with future updates. +*/ + .saltButton { - align-items: var(--saltButton-alignItems, center); + --button-alignItems: center; + --button-background: var(--button-background-default); + --button-borderColor: var(--button-borderColor-default, transparent); + --button-borderRadius: var(--salt-palette-corner-weak, 0); + --button-borderStyle: solid; + --button-borderWidth: var(--salt-size-border, 0); + --button-color: var(--button-color-default, inherit); + --button-cursor: pointer; + --button-fontFamily: var(--salt-text-action-fontFamily); + --button-fontSize: var(--salt-text-fontSize); + --button-fontWeight: var(--salt-text-action-fontWeight); + --button-gap: var(--salt-spacing-50); + --button-height: var(--salt-size-base); + --button-justifyContent: center; + --button-letterSpacing: var(--salt-text-action-letterSpacing); + --button-lineHeight: var(--salt-text-lineHeight); + --button-margin: 0; + --button-minWidth: unset; + --button-padding: 0 calc(var(--salt-spacing-100) - var(--salt-size-border, 0)); + --button-textAlign: var(--salt-text-action-textAlign); + --button-textTransform: var(--salt-text-action-textTransform); + --button-width: auto; + + --button-outlineStyle: none; + --button-outlineWidth: var(--salt-focused-outlineWidth); + --button-outlineColor: var(--salt-focused-outlineColor); + --button-outlineOffset: var(--salt-focused-outlineOffset); + + /* Properties with contract variable support */ + align-items: var(--button-alignItems); + background: var(--button-background); + border-color: var(--button-borderColor); + border-radius: var(--button-borderRadius); + border-style: var(--button-borderStyle); + border-width: var(--button-borderWidth); + color: var(--button-color); + cursor: var(--button-cursor); + font-family: var(--button-fontFamily); + font-size: var(--button-fontSize); + font-weight: var(--button-fontWeight); + gap: var(--button-gap); + height: var(--button-height); + justify-content: var(--button-justifyContent); + letter-spacing: var(--button-letterSpacing); + line-height: var(--button-lineHeight); + margin: var(--button-margin); + min-width: var(--button-minWidth); + outline: var(--button-outlineColor) var(--button-outlineStyle) var(--button-outlineWidth); + outline-offset: var(--button-outlineOffset); + padding: var(--button-padding); + text-align: var(--button-textAlign); + text-transform: var(--button-textTransform); + width: var(--button-width); + + /* Other properties */ appearance: none; - background: var(--saltButton-background, var(--button-background)); - border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent)); - border-style: var(--saltButton-borderStyle, solid); - border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0)); - border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0)); - color: var(--saltButton-text-color, var(--button-text-color)); - cursor: var(--saltButton-cursor, pointer); + box-sizing: border-box; display: inline-flex; - gap: var(--salt-spacing-50); - justify-content: var(--saltButton-justifyContent, center); - font-size: var(--saltButton-fontSize, var(--salt-text-fontSize)); - font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily)); - line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight)); - letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing)); - text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform)); - padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0)))); - margin: var(--saltButton-margin, 0); - height: var(--saltButton-height, var(--salt-size-base)); - min-width: var(--saltButton-minWidth, unset); position: relative; - text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign)); text-decoration: none; transition: none; - width: var(--saltButton-width, auto); -webkit-appearance: none; -webkit-tap-highlight-color: transparent; - /* Styles applied to align children*/ - font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight)); -} - -/* Pseudo-class applied to the root element on focus */ -.saltButton:focus-visible { - outline-style: var(--salt-focused-outlineStyle); - outline-width: var(--salt-focused-outlineWidth); - outline-color: var(--salt-focused-outlineColor); - outline-offset: var(--salt-focused-outlineOffset); - background: var(--saltButton-background-hover, var(--button-background-hover)); - color: var(--saltButton-text-color-hover, var(--button-text-color-hover)); - border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover)); -} - -/* Pseudo-class applied to the root element on focus when Button is active */ -.saltButton.saltButton-active:focus-visible, -.saltButton:focus-visible:active { - background: var(--saltButton-background-active-hover, var(--button-background)); - color: var(--saltButton-text-color-active-hover, var(--button-text-color)); - border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover)); -} - -/* Pseudo-class applied to the root element on hover when Button is not active or disabled */ -.saltButton:hover { - background: var(--saltButton-background-hover, var(--button-background-hover)); - color: var(--saltButton-text-color-hover, var(--button-text-color-hover)); - border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover)); -} - -/* Pseudo-class applied to the root element when Button is active and not disabled */ -.saltButton:active, -.saltButton.saltButton-active { - background: var(--saltButton-background-active, var(--button-background-active)); - color: var(--saltButton-text-color-active, var(--button-text-color-active)); - border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active)); -} - -/* Styles applied when the button triggers a dialog or menu */ -.saltButton[aria-expanded="true"][aria-haspopup="menu"], -.saltButton[aria-expanded="true"][aria-haspopup="dialog"] { - background: var(--saltButton-background-active, var(--button-background-active)); - color: var(--saltButton-text-color-active, var(--button-text-color-active)); - border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active)); -} - -/* Pseudo-class applied to the root element if disabled={true} */ -.saltButton:disabled, -.saltButton-disabled, -.saltButton-disabled:active, -.saltButton-disabled:focus-visible, -.saltButton-disabled:focus-visible:active, -.saltButton-disabled:hover { - background: var(--saltButton-background-disabled, var(--button-background-disabled)); - color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled)); - cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled)); - border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled)); } .saltButton-accented.saltButton-solid { - --button-text-color: var(--salt-actionable-accented-bold-foreground); - --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover); - --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active); - --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled); - --button-background: var(--salt-actionable-accented-bold-background); + --button-color-default: var(--salt-actionable-accented-bold-foreground); + --button-color-hover: var(--salt-actionable-accented-bold-foreground-hover); + --button-color-active: var(--salt-actionable-accented-bold-foreground-active); + --button-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled); + --button-background-default: var(--salt-actionable-accented-bold-background); --button-background-active: var(--salt-actionable-accented-bold-background-active); --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled); --button-background-hover: var(--salt-actionable-accented-bold-background-hover); - --button-borderColor: var(--salt-actionable-accented-bold-borderColor); + --button-borderColor-default: var(--salt-actionable-accented-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled); } .saltButton-accented.saltButton-bordered { - --button-text-color: var(--salt-actionable-accented-foreground); - --button-text-color-hover: var(--salt-actionable-accented-foreground-hover); - --button-text-color-active: var(--salt-actionable-accented-foreground-active); - --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled); - --button-background: var(--salt-actionable-accented-background); + --button-color-default: var(--salt-actionable-accented-foreground); + --button-color-hover: var(--salt-actionable-accented-foreground-hover); + --button-color-active: var(--salt-actionable-accented-foreground-active); + --button-color-disabled: var(--salt-actionable-accented-foreground-disabled); + --button-background-default: var(--salt-actionable-accented-background); --button-background-hover: var(--salt-actionable-accented-background-hover); --button-background-active: var(--salt-actionable-accented-background-active); --button-background-disabled: var(--salt-actionable-accented-background-disabled); - --button-borderColor: var(--salt-actionable-accented-borderColor); + --button-borderColor-default: var(--salt-actionable-accented-borderColor); --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover); --button-borderColor-active: var(--salt-actionable-accented-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled); } .saltButton-accented.saltButton-transparent { - --button-text-color: var(--salt-actionable-accented-subtle-foreground); - --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover); - --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active); - --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled); - --button-background: var(--salt-actionable-accented-subtle-background); + --button-color-default: var(--salt-actionable-accented-subtle-foreground); + --button-color-hover: var(--salt-actionable-accented-subtle-foreground-hover); + --button-color-active: var(--salt-actionable-accented-subtle-foreground-active); + --button-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled); + --button-background-default: var(--salt-actionable-accented-subtle-background); --button-background-hover: var(--salt-actionable-accented-subtle-background-hover); --button-background-active: var(--salt-actionable-accented-subtle-background-active); --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled); - --button-borderColor: var(--salt-actionable-accented-subtle-borderColor); + --button-borderColor-default: var(--salt-actionable-accented-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled); } .saltButton-accented.saltButton-loading { - --button-text-color: var(--salt-actionable-accented-background); - --button-text-color-hover: var(--salt-actionable-accented-background); - --button-text-color-active: var(--salt-actionable-accented-background); - --button-text-color-disabled: var(--salt-actionable-accented-background); - --button-background: var(--salt-actionable-accented-background); + --button-color-default: var(--salt-actionable-accented-background); + --button-color-hover: var(--salt-actionable-accented-background); + --button-color-active: var(--salt-actionable-accented-background); + --button-color-disabled: var(--salt-actionable-accented-background); + --button-background-default: var(--salt-actionable-accented-background); --button-background-hover: var(--salt-actionable-accented-background); --button-background-active: var(--salt-actionable-accented-background); --button-background-disabled: var(--salt-actionable-accented-background); - --button-borderColor: var(--salt-actionable-accented-borderColor); + --button-borderColor-default: var(--salt-actionable-accented-borderColor); --button-borderColor-hover: var(--salt-actionable-accented-borderColor); --button-borderColor-active: var(--salt-actionable-accented-borderColor); --button-borderColor-disabled: var(--salt-actionable-accented-borderColor); - cursor: progress; + --button-cursor: progress; } .saltButton-neutral.saltButton-solid { - --button-text-color: var(--salt-actionable-bold-foreground); - --button-text-color-hover: var(--salt-actionable-bold-foreground-hover); - --button-text-color-active: var(--salt-actionable-bold-foreground-active); - --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled); - --button-background: var(--salt-actionable-bold-background); + --button-color-default: var(--salt-actionable-bold-foreground); + --button-color-hover: var(--salt-actionable-bold-foreground-hover); + --button-color-active: var(--salt-actionable-bold-foreground-active); + --button-color-disabled: var(--salt-actionable-bold-foreground-disabled); + --button-background-default: var(--salt-actionable-bold-background); --button-background-hover: var(--salt-actionable-bold-background-hover); --button-background-active: var(--salt-actionable-bold-background-active); --button-background-disabled: var(--salt-actionable-bold-background-disabled); - --button-borderColor: var(--salt-actionable-bold-borderColor); + --button-borderColor-default: var(--salt-actionable-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-bold-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled); } .saltButton-neutral.saltButton-bordered { - --button-text-color: var(--salt-actionable-foreground); - --button-text-color-hover: var(--salt-actionable-foreground-hover); - --button-text-color-active: var(--salt-actionable-foreground-active); - --button-text-color-disabled: var(--salt-actionable-foreground-disabled); - --button-background: var(--salt-actionable-background); + --button-color-default: var(--salt-actionable-foreground); + --button-color-hover: var(--salt-actionable-foreground-hover); + --button-color-active: var(--salt-actionable-foreground-active); + --button-color-disabled: var(--salt-actionable-foreground-disabled); + --button-background-default: var(--salt-actionable-background); --button-background-hover: var(--salt-actionable-background-hover); --button-background-active: var(--salt-actionable-background-active); --button-background-disabled: var(--salt-actionable-background-disabled); - --button-borderColor: var(--salt-actionable-borderColor); + --button-borderColor-default: var(--salt-actionable-borderColor); --button-borderColor-hover: var(--salt-actionable-borderColor-hover); --button-borderColor-active: var(--salt-actionable-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled); } .saltButton-neutral.saltButton-transparent { - --button-text-color: var(--salt-actionable-subtle-foreground); - --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover); - --button-text-color-active: var(--salt-actionable-subtle-foreground-active); - --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled); - --button-background: var(--salt-actionable-subtle-background); + --button-color-default: var(--salt-actionable-subtle-foreground); + --button-color-hover: var(--salt-actionable-subtle-foreground-hover); + --button-color-active: var(--salt-actionable-subtle-foreground-active); + --button-color-disabled: var(--salt-actionable-subtle-foreground-disabled); + --button-background-default: var(--salt-actionable-subtle-background); --button-background-hover: var(--salt-actionable-subtle-background-hover); --button-background-active: var(--salt-actionable-subtle-background-active); --button-background-disabled: var(--salt-actionable-subtle-background-disabled); - --button-borderColor: var(--salt-actionable-subtle-borderColor); + --button-borderColor-default: var(--salt-actionable-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled); } .saltButton-neutral.saltButton-loading { - --button-text-color: var(--salt-actionable-background); - --button-text-color-hover: var(--salt-actionable-background); - --button-text-color-active: var(--salt-actionable-background); - --button-text-color-disabled: var(--salt-actionable-background); - --button-background: var(--salt-actionable-background); + --button-color-default: var(--salt-actionable-background); + --button-color-hover: var(--salt-actionable-background); + --button-color-active: var(--salt-actionable-background); + --button-color-disabled: var(--salt-actionable-background); + --button-background-default: var(--salt-actionable-background); --button-background-hover: var(--salt-actionable-background); --button-background-active: var(--salt-actionable-background); --button-background-disabled: var(--salt-actionable-background); - --button-borderColor: var(--salt-actionable-borderColor); + --button-borderColor-default: var(--salt-actionable-borderColor); --button-borderColor-hover: var(--salt-actionable-borderColor); --button-borderColor-active: var(--salt-actionable-borderColor); --button-borderColor-disabled: var(--salt-actionable-borderColor); - cursor: progress; + --button-cursor: progress; } .saltButton-negative.saltButton-solid { - --button-text-color: var(--salt-actionable-negative-bold-foreground); - --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover); - --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active); - --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled); - --button-background: var(--salt-actionable-negative-bold-background); + --button-color-default: var(--salt-actionable-negative-bold-foreground); + --button-color-hover: var(--salt-actionable-negative-bold-foreground-hover); + --button-color-active: var(--salt-actionable-negative-bold-foreground-active); + --button-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled); + --button-background-default: var(--salt-actionable-negative-bold-background); --button-background-hover: var(--salt-actionable-negative-bold-background-hover); --button-background-active: var(--salt-actionable-negative-bold-background-active); --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled); - --button-borderColor: var(--salt-actionable-negative-bold-borderColor); + --button-borderColor-default: var(--salt-actionable-negative-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled); } .saltButton-negative.saltButton-bordered { - --button-text-color: var(--salt-actionable-negative-foreground); - --button-text-color-hover: var(--salt-actionable-negative-foreground-hover); - --button-text-color-active: var(--salt-actionable-negative-foreground-active); - --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled); - --button-background: var(--salt-actionable-negative-background); + --button-color-default: var(--salt-actionable-negative-foreground); + --button-color-hover: var(--salt-actionable-negative-foreground-hover); + --button-color-active: var(--salt-actionable-negative-foreground-active); + --button-color-disabled: var(--salt-actionable-negative-foreground-disabled); + --button-background-default: var(--salt-actionable-negative-background); --button-background-hover: var(--salt-actionable-negative-background-hover); --button-background-active: var(--salt-actionable-negative-background-active); --button-background-disabled: var(--salt-actionable-negative-background-disabled); - --button-borderColor: var(--salt-actionable-negative-borderColor); + --button-borderColor-default: var(--salt-actionable-negative-borderColor); --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover); --button-borderColor-active: var(--salt-actionable-negative-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled); } .saltButton-negative.saltButton-transparent { - --button-text-color: var(--salt-actionable-negative-subtle-foreground); - --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover); - --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active); - --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled); - --button-background: var(--salt-actionable-negative-subtle-background); + --button-color-default: var(--salt-actionable-negative-subtle-foreground); + --button-color-hover: var(--salt-actionable-negative-subtle-foreground-hover); + --button-color-active: var(--salt-actionable-negative-subtle-foreground-active); + --button-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled); + --button-background-default: var(--salt-actionable-negative-subtle-background); --button-background-hover: var(--salt-actionable-negative-subtle-background-hover); --button-background-active: var(--salt-actionable-negative-subtle-background-active); --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled); - --button-borderColor: var(--salt-actionable-negative-subtle-borderColor); + --button-borderColor-default: var(--salt-actionable-negative-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled); } .saltButton-negative.saltButton-loading { - --button-text-color: var(--salt-actionable-negative-background); - --button-text-color-hover: var(--salt-actionable-negative-background); - --button-text-color-active: var(--salt-actionable-negative-background); - --button-text-color-disabled: var(--salt-actionable-negative-background); - --button-background: var(--salt-actionable-negative-background); + --button-color-default: var(--salt-actionable-negative-background); + --button-color-hover: var(--salt-actionable-negative-background); + --button-color-active: var(--salt-actionable-negative-background); + --button-color-disabled: var(--salt-actionable-negative-background); + --button-background-default: var(--salt-actionable-negative-background); --button-background-hover: var(--salt-actionable-negative-background); --button-background-active: var(--salt-actionable-negative-background); --button-background-disabled: var(--salt-actionable-negative-background); - --button-borderColor: var(--salt-actionable-negative-borderColor); + --button-borderColor-default: var(--salt-actionable-negative-borderColor); --button-borderColor-hover: var(--salt-actionable-negative-borderColor); --button-borderColor-active: var(--salt-actionable-negative-borderColor); --button-borderColor-disabled: var(--salt-actionable-negative-borderColor); - cursor: progress; + --button-cursor: progress; } .saltButton-positive.saltButton-solid { - --button-text-color: var(--salt-actionable-positive-bold-foreground); - --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover); - --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active); - --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled); - --button-background: var(--salt-actionable-positive-bold-background); + --button-color-default: var(--salt-actionable-positive-bold-foreground); + --button-color-hover: var(--salt-actionable-positive-bold-foreground-hover); + --button-color-active: var(--salt-actionable-positive-bold-foreground-active); + --button-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled); + --button-background-default: var(--salt-actionable-positive-bold-background); --button-background-hover: var(--salt-actionable-positive-bold-background-hover); --button-background-active: var(--salt-actionable-positive-bold-background-active); --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled); - --button-borderColor: var(--salt-actionable-positive-bold-borderColor); + --button-borderColor-default: var(--salt-actionable-positive-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled); } .saltButton-positive.saltButton-bordered { - --button-text-color: var(--salt-actionable-positive-foreground); - --button-text-color-hover: var(--salt-actionable-positive-foreground-hover); - --button-text-color-active: var(--salt-actionable-positive-foreground-active); - --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled); - --button-background: var(--salt-actionable-positive-background); + --button-color-default: var(--salt-actionable-positive-foreground); + --button-color-hover: var(--salt-actionable-positive-foreground-hover); + --button-color-active: var(--salt-actionable-positive-foreground-active); + --button-color-disabled: var(--salt-actionable-positive-foreground-disabled); + --button-background-default: var(--salt-actionable-positive-background); --button-background-hover: var(--salt-actionable-positive-background-hover); --button-background-active: var(--salt-actionable-positive-background-active); --button-background-disabled: var(--salt-actionable-positive-background-disabled); - --button-borderColor: var(--salt-actionable-positive-borderColor); + --button-borderColor-default: var(--salt-actionable-positive-borderColor); --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover); --button-borderColor-active: var(--salt-actionable-positive-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled); } .saltButton-positive.saltButton-transparent { - --button-text-color: var(--salt-actionable-positive-subtle-foreground); - --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover); - --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active); - --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled); - --button-background: var(--salt-actionable-positive-subtle-background); + --button-color-default: var(--salt-actionable-positive-subtle-foreground); + --button-color-hover: var(--salt-actionable-positive-subtle-foreground-hover); + --button-color-active: var(--salt-actionable-positive-subtle-foreground-active); + --button-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled); + --button-background-default: var(--salt-actionable-positive-subtle-background); --button-background-hover: var(--salt-actionable-positive-subtle-background-hover); --button-background-active: var(--salt-actionable-positive-subtle-background-active); --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled); - --button-borderColor: var(--salt-actionable-positive-subtle-borderColor); + --button-borderColor-default: var(--salt-actionable-positive-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled); } .saltButton-positive.saltButton-loading { - --button-text-color: var(--salt-actionable-positive-background); - --button-text-color-hover: var(--salt-actionable-positive-background); - --button-text-color-active: var(--salt-actionable-positive-background); - --button-text-color-disabled: var(--salt-actionable-positive-background); - --button-background: var(--salt-actionable-positive-background); + --button-color-default: var(--salt-actionable-positive-background); + --button-color-hover: var(--salt-actionable-positive-background); + --button-color-active: var(--salt-actionable-positive-background); + --button-color-disabled: var(--salt-actionable-positive-background); + --button-background-default: var(--salt-actionable-positive-background); --button-background-hover: var(--salt-actionable-positive-background); --button-background-active: var(--salt-actionable-positive-background); --button-background-disabled: var(--salt-actionable-positive-background); - --button-borderColor: var(--salt-actionable-positive-borderColor); + --button-borderColor-default: var(--salt-actionable-positive-borderColor); --button-borderColor-hover: var(--salt-actionable-positive-borderColor); --button-borderColor-active: var(--salt-actionable-positive-borderColor); --button-borderColor-disabled: var(--salt-actionable-positive-borderColor); - cursor: progress; + --button-cursor: progress; } .saltButton-caution.saltButton-solid { - --button-text-color: var(--salt-actionable-caution-bold-foreground); - --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover); - --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active); - --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled); - --button-background: var(--salt-actionable-caution-bold-background); + --button-color-default: var(--salt-actionable-caution-bold-foreground); + --button-color-hover: var(--salt-actionable-caution-bold-foreground-hover); + --button-color-active: var(--salt-actionable-caution-bold-foreground-active); + --button-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled); + --button-background-default: var(--salt-actionable-caution-bold-background); --button-background-hover: var(--salt-actionable-caution-bold-background-hover); --button-background-active: var(--salt-actionable-caution-bold-background-active); --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled); - --button-borderColor: var(--salt-actionable-caution-bold-borderColor); + --button-borderColor-default: var(--salt-actionable-caution-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled); } .saltButton-caution.saltButton-bordered { - --button-text-color: var(--salt-actionable-caution-foreground); - --button-text-color-hover: var(--salt-actionable-caution-foreground-hover); - --button-text-color-active: var(--salt-actionable-caution-foreground-active); - --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled); - --button-background: var(--salt-actionable-caution-background); + --button-color-default: var(--salt-actionable-caution-foreground); + --button-color-hover: var(--salt-actionable-caution-foreground-hover); + --button-color-active: var(--salt-actionable-caution-foreground-active); + --button-color-disabled: var(--salt-actionable-caution-foreground-disabled); + --button-background-default: var(--salt-actionable-caution-background); --button-background-hover: var(--salt-actionable-caution-background-hover); --button-background-active: var(--salt-actionable-caution-background-active); --button-background-disabled: var(--salt-actionable-caution-background-disabled); - --button-borderColor: var(--salt-actionable-caution-borderColor); + --button-borderColor-default: var(--salt-actionable-caution-borderColor); --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover); --button-borderColor-active: var(--salt-actionable-caution-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled); } .saltButton-caution.saltButton-transparent { - --button-text-color: var(--salt-actionable-caution-subtle-foreground); - --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover); - --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active); - --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled); - --button-background: var(--salt-actionable-caution-subtle-background); + --button-color-default: var(--salt-actionable-caution-subtle-foreground); + --button-color-hover: var(--salt-actionable-caution-subtle-foreground-hover); + --button-color-active: var(--salt-actionable-caution-subtle-foreground-active); + --button-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled); + --button-background-default: var(--salt-actionable-caution-subtle-background); --button-background-hover: var(--salt-actionable-caution-subtle-background-hover); --button-background-active: var(--salt-actionable-caution-subtle-background-active); --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled); - --button-borderColor: var(--salt-actionable-caution-subtle-borderColor); + --button-borderColor-default: var(--salt-actionable-caution-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active); --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled); } .saltButton-caution.saltButton-loading { - --button-text-color: var(--salt-actionable-caution-background); - --button-text-color-hover: var(--salt-actionable-caution-background); - --button-text-color-active: var(--salt-actionable-caution-background); - --button-text-color-disabled: var(--salt-actionable-caution-background); - --button-background: var(--salt-actionable-caution-background); + --button-color-default: var(--salt-actionable-caution-background); + --button-color-hover: var(--salt-actionable-caution-background); + --button-color-active: var(--salt-actionable-caution-background); + --button-color-disabled: var(--salt-actionable-caution-background); + --button-background-default: var(--salt-actionable-caution-background); --button-background-hover: var(--salt-actionable-caution-background); --button-background-active: var(--salt-actionable-caution-background); --button-background-disabled: var(--salt-actionable-caution-background); - --button-borderColor: var(--salt-actionable-caution-borderColor); + --button-borderColor-default: var(--salt-actionable-caution-borderColor); --button-borderColor-hover: var(--salt-actionable-caution-borderColor); --button-borderColor-active: var(--salt-actionable-caution-borderColor); --button-borderColor-disabled: var(--salt-actionable-caution-borderColor); - cursor: progress; + --button-cursor: progress; +} + +/* Pseudo-class applied to the root element on hover when Button is not active or disabled */ +.saltButton:hover { + --button-background: var(--button-background-hover); + --button-borderColor: var(--button-borderColor-hover); + --button-color: var(--button-color-hover); +} + +/* Pseudo-class applied to the root element on focus */ +.saltButton:focus-visible { + --button-background: var(--button-background-hover); + --button-borderColor: var(--button-borderColor-hover); + --button-outline-style: var(--salt-focused-outlineStyle); + --button-color: var(--button-color-hover); +} + +/* Pseudo-class applied to the root element on focus when Button is active */ +.saltButton.saltButton-active:focus-visible, +.saltButton:focus-visible:active { + --button-borderColor: var(--button-borderColor-hover); +} + +/* Pseudo-class applied to the root element when Button is active and not disabled */ +.saltButton:active, +.saltButton.saltButton-active { + --button-background: var(--button-background-active); + --button-borderColor: var(--button-borderColor-active); + --button-color: var(--button-color-active); +} + +/* Styles applied when the button triggers a dialog or menu */ +.saltButton[aria-expanded="true"][aria-haspopup="menu"], +.saltButton[aria-expanded="true"][aria-haspopup="dialog"] { + --button-background: var(--button-background-active); + --button-borderColor: var(--button-borderColor-active); + --button-color: var(--button-color-active); +} + +/* Pseudo-class applied to the root element if disabled={true} */ +.saltButton:disabled, +.saltButton-disabled, +.saltButton-disabled:active, +.saltButton-disabled:focus-visible, +.saltButton-disabled:focus-visible:active, +.saltButton-disabled:hover { + --button-background: var(--button-background-disabled); + --button-borderColor: var(--button-borderColor-disabled); + --button-color: var(--button-color-disabled); + --button-cursor: var(--salt-actionable-cursor-disabled); } .saltButton-spinner { position: absolute; inset: 0; display: flex; - align-items: center; - justify-content: center; + --button-alignItems: center; + --button-justifyContent: center; } .saltButton-sr-only { diff --git a/packages/core/src/input/Input.css b/packages/core/src/input/Input.css index c66fc58d0b9..cb56943fc3d 100644 --- 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 index 8c9dc3a88a2..e611060ce69 100644 --- 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 index 17b3c29e2b8..6a10a4fbf53 100644 --- 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 index 6dfae57bd8d..93d89ac1814 100644 --- 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 index 189869221a6..16598555372 100644 --- 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 index f8eef185133..fae33eaddb0 100644 --- 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 index b33d89e7fd0..1be6017f5ee 100644 --- 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 index 39c1bd51fc1..27e08bb8b6b 100644 --- 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 index 7cec102040a..e0afeccf90f 100644 --- 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 index 055d1585fb6..cf51c705615 100644 --- 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 index e89477f130f..1d4c44d7f87 100644 --- 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 index 83a7b80d4ff..58fab16b59a 100644 --- 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 index 184bbd27164..cc9be7b5e77 100644 --- 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 index a5e13cb2635..8ffc2c7375e 100644 --- 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 index 078e407462f..07c408518dd 100644 --- 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 index ea9dfbda230..c094d2e5688 100644 --- 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 index c82e3402915..2b8846e6c48 100644 --- 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 index 6da2601c6cc..cb9625cbe41 100644 --- 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 index 6679e184cfd..8a663c6b4b8 100644 --- 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; }