diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 5bee87f2a3f..c30e69f9467 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -11,183 +11,426 @@ governing permissions and limitations under the License. */ @import "../commons/basebutton.css"; -@import "../vars/css/components/spectrum-actionbutton.css"; -@import "./actionbutton-generated.css"; -.spectrum-ActionButton--sizeS { - @remapvars { - find: --spectrum-actionbutton-s-; - replace: --spectrum-actionbutton-; - } - - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-25); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-25); +.spectrum-ActionButton { + --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); + + --spectrum-actionbutton-focus-ring-gap: var(--spectrum-focus-ring-gap); + --spectrum-actionbutton-focus-ring-thickness: var(--spectrum-focus-ring-thickness); + --spectrum-actionbutton-focus-ring-color: var(--spectrum-focus-ring-color); + --spectrum-actionbutton-focus-ring-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap)); +} - /* hack to fix the incorrect min-width */ - --spectrum-actionbutton-textonly-min-width: var(--spectrum-global-dimension-size-300); +.spectrum-ActionButton--sizeS { + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-75); + --spectrum-actionbutton-height: var(--spectrum-component-height-75); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeM { - @remapvars { - find: --spectrum-actionbutton-m-; - replace: --spectrum-actionbutton-; - } - - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-40); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-40); + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-100); + --spectrum-actionbutton-height: var(--spectrum-component-height-100); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeL { - @remapvars { - find: --spectrum-actionbutton-l-; - replace: --spectrum-actionbutton-; - } - - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-50); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-50); + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-200); + --spectrum-actionbutton-height: var(--spectrum-component-height-200); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeXL { - @remapvars { - find: --spectrum-actionbutton-xl-; - replace: --spectrum-actionbutton-; - } + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-300); + --spectrum-actionbutton-height: var(--spectrum-component-height-300); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)); +} + +.spectrum { + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: transparent; + } + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + + &.spectrum-ActionButton--emphasized { + --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); + } + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-border-color-disabled: transparent; + } + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-black); + --spectrum-actionbutton-content-color-hover: var(--spectrum-black); + --spectrum-actionbutton-content-color-down: var(--spectrum-black); + --spectrum-actionbutton-content-color-focus: var(--spectrum-black); - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-65); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-65); + --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-black-focus-ring-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-actionbutton-border-color-disabled: transparent; + + --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + } + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + + --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-white-focus-ring-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + } + } + } } -.spectrum-ActionButton {/* --spectrum-actionbutton-textonly-padding-left 12px */ /* --spectrum-actionbutton-textonly-border-size 1px */ - /* Adjustments for inset/outset padding in DNA */ - --spectrum-actionbutton-padding-left-adjusted: calc(var(--spectrum-actionbutton-texticon-padding-left) - var(--spectrum-actionbutton-texticon-border-size)); - --spectrum-actionbutton-padding-right-adjusted: calc(var(--spectrum-actionbutton-texticon-padding-right) - var(--spectrum-actionbutton-texticon-border-size)); - --spectrum-actionbutton-textonly-padding-left-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-left) - var(--spectrum-actionbutton-textonly-border-size)); - --spectrum-actionbutton-textonly-padding-right-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-right) - var(--spectrum-actionbutton-textonly-border-size)); - --spectrum-actionbutton-icononly-padding-left-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-left) - var(--spectrum-actionbutton-icononly-border-size)); - --spectrum-actionbutton-icononly-padding-right-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-right) - var(--spectrum-actionbutton-icononly-border-size)); - --spectrum-actionbutton-focus-ring-border-radius-adjusted: calc(var(--spectrum-actionbutton-quiet-textonly-border-radius) + var(--spectrum-actionbutton-focus-ring-gap)); +.spectrum--express { + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + } + } } -a.spectrum-ActionButton { - @inherit: %spectrum-AnchorButton; +@media (forced-colors: active) { + .spectrum-ActionButton { + &:after { + /* make sure focus-ring renders */ + forced-color-adjust: none; + } + + /* force a more visible focus-ring color */ + --highcontrast-actionbutton-focus-ring-color: ButtonText; + + &.is-selected { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* ensure custom text colors from above get applied */ + /* it seems like this shouldn't have to be done, but colors are wrong without it */ + forced-color-adjust: none; + } + } + } } .spectrum-ActionButton { @inherit: %spectrum-BaseButton; position: relative; - block-size: var(--spectrum-actionbutton-textonly-height); - min-inline-size: var(--spectrum-actionbutton-textonly-min-width); + min-inline-size: var(--custom-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); + height: var(--custom-actionbutton-height, var(--spectrum-actionbutton-height)); + + border-radius: var(--custom-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); + border-width: var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width)); /* Start with text-only padding */ - padding-inline: var(--spectrum-actionbutton-textonly-padding-left-adjusted) var(--spectrum-actionbutton-textonly-padding-right-adjusted); + padding-inline-start: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); + padding-inline-end: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); - border-width: var(--spectrum-actionbutton-textonly-border-size); - border-radius: var(--spectrum-actionbutton-textonly-border-radius); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--custom-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); + border-color: var(--highcontrast-actionbutton-border-color-default, var(--custom-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); + color: var(--highcontrast-actionbutton-content-color-default, var(--custom-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); - font-size: var(--spectrum-actionbutton-textonly-text-size); - font-weight: var(--spectrum-actionbutton-textonly-text-font-weight); - line-height: var(--spectrum-actionbutton-textonly-text-line-height); + &:hover { + background-color: var(--highcontrast-actionbutton-background-color-hover, var(--custom-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); + border-color: var(--highcontrast-actionbutton-border-color-hover, var(--custom-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover))); + color: var(--highcontrast-actionbutton-content-color-hover, var(--custom-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); + } - /* Let static variants inherit their color */ - color: inherit; + &:focus-ring { + background-color: var(--highcontrast-actionbutton-background-color-focus, var(--custom-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); + border-color: var(--highcontrast-actionbutton-border-color-focus, var(--custom-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus))); + color: var(--highcontrast-actionbutton-content-color-focus, var(--custom-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); + } - .spectrum-Icon { - @inherit: %spectrum-ButtonIcon; + &:active { + background-color: var(--highcontrast-actionbutton-background-color-down, var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); + border-color: var(--highcontrast-actionbutton-border-color-down, var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down))); + color: var(--highcontrast-actionbutton-content-color-down, var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); + } - /* Scoot over, assuming we have both icon and text */ - margin-inline-start: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))); + &:disabled, + &.is-disabled { + background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--custom-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); + border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--custom-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); + color: var(--highcontrast-actionbutton-content-color-disabled, var(--custom-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); } +} - .spectrum-Icon + .spectrum-ActionButton-label { +a.spectrum-ActionButton { + @inherit: %spectrum-AnchorButton; +} + +.spectrum-ActionButton-icon { + width: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + height: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + + color: inherit; + + & + .spectrum-ActionButton-label { /* Have gap on on the left */ - padding-inline-start: var(--spectrum-actionbutton-texticon-icon-gap); + padding-inline-start: var(--custom-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)); - /* - Have no padding on the right (it's built into the element) - This will fail if --spectrum-actionbutton-textonly-padding-right !== --spectrum-actionbutton-padding-right - */ + /* Have no padding on the right (it's built into the element) */ padding-inline-end: 0; } - .spectrum-ActionButton-hold + .spectrum-Icon, - .spectrum-Icon:only-child { - /* Use icon-only padding, subtracted from the default text-only padding */ - margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-icononly-padding-left-adjusted))); - margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-right-adjusted) - var(--spectrum-actionbutton-icononly-padding-right-adjusted))); - } + padding-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)))); +} + +.spectrum-ActionButton-hold + .spectrum-ActionButton-icon, +.spectrum-ActionButton-icon:only-child { + /* Use icon-only padding, subtracted from the default text-only padding */ + margin-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); + margin-inline-end: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); } .spectrum-ActionButton-label { @inherit: %spectrum-ButtonLabel; + font-size: var(--custom-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); white-space: nowrap; - overflow: hidden; + color: inherit; + text-overflow: ellipsis; + overflow: hidden; } .spectrum-ActionButton-hold { position: absolute; - inset-inline-end: var(--spectrum-actionbutton-textonly-hold-icon-padding-right); - inset-block-end: var(--spectrum-actionbutton-textonly-hold-icon-padding-bottom); - - transform: logical rotate(0deg); -} + inset-inline-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); + inset-block-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); -.spectrum-ActionButton--quiet { - border-width: var(--spectrum-actionbutton-quiet-textonly-border-size); - border-radius: var(--spectrum-actionbutton-quiet-textonly-border-radius); + color: inherit; - font-size: var(--spectrum-actionbutton-quiet-textonly-text-size); - font-weight: var(--spectrum-actionbutton-quiet-textonly-text-font-weight); + transform: logical rotate(0deg); } /* special cases for focus-ring */ .spectrum-ActionButton { - --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap); - --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size); - --spectrum-actionbutton-focus-ring-color: var(--spectrum-actionbutton-m-textonly-focus-ring-border-color-key-focus); - - transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; + transition: border-color var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; &:after { + position: absolute; + inset: 0; + + margin: calc((var(--custom-actionbutton-focus-ring-gap, var(--spectrum-actionbutton-focus-ring-gap)) + var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1); + + border-radius: var(--custom-actionbutton-focus-ring-border-radius, var(--spectrum-actionbutton-focus-ring-border-radius)); + + transition: box-shadow var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; + pointer-events: none; content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - margin: calc((var(--spectrum-actionbutton-focus-ring-gap) + var(--spectrum-actionbutton-textonly-border-size)) * -1); - border-radius: var(--spectrum-actionbutton-focus-ring-border-radius-adjusted); - transition: box-shadow var(--spectrum-global-animation-duration-100) ease-in-out; } &:focus-ring { - /* kill the default ring */ box-shadow: none !important; &:after { - box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color); + box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--highcontrast-actionbutton-focus-ring-color, var(--custom-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-ring-color))); } } } - -.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-white); -} - -.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-black); -} - -.spectrum-ActionButton--emphasized.is-selected, -.spectrum-ActionButton--staticWhite, -.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap-emphasized); - --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size-emphasized); -} diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml index 75a07a21325..731cb619cdf 100644 --- a/components/actionbutton/metadata/actionbutton.yml +++ b/components/actionbutton/metadata/actionbutton.yml @@ -5,9 +5,47 @@ description: | - For Action Buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup - If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element. - If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element. + - When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticblack`, use the `--custom-actionbutton-static-content-color` custom property to set the text color when selected. sections: + - name: Custom Properties API + description: | + Define a subset of the following properties on your own class, such as `.custom-ActionButton`, to customize ActionButton. + + These properties override all API options, but can be layered on top of them. + + | Custom property | + | ------------------------------------------------- | + | `--custom-actionbutton-background-color-default` | + | `--custom-actionbutton-background-color-hover` | + | `--custom-actionbutton-background-color-down` | + | `--custom-actionbutton-background-color-focus` | + | `--custom-actionbutton-background-color-disabled` | + | `--custom-actionbutton-border-color-default` | + | `--custom-actionbutton-border-color-hover` | + | `--custom-actionbutton-border-color-down` | + | `--custom-actionbutton-border-color-focus` | + | `--custom-actionbutton-border-color-disabled` | + | `--custom-actionbutton-content-color-default` | + | `--custom-actionbutton-content-color-hover` | + | `--custom-actionbutton-content-color-down` | + | `--custom-actionbutton-content-color-focus` | + | `--custom-actionbutton-content-color-disabled` | + | `--custom-actionbutton-focus-ring-color` | + | `--custom-actionbutton-static-content-color` | + | `--custom-actionbutton-min-width` | + | `--custom-actionbutton-height` | + | `--custom-actionbutton-icon-size` | + | `--custom-actionbutton-font-size` | + | `--custom-actionbutton-text-to-visual` | + | `--custom-actionbutton-edge-to-hold-icon` | + | `--custom-actionbutton-edge-to-visual` | + | `--custom-actionbutton-edge-to-text` | + | `--custom-actionbutton-edge-to-visual-only` | - name: Migration Guide description: | + ### Action Button now required a class on its icon + The `.spectrum-ActionButton-icon` class is now required on the icon. + ### T-shirt sizing Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class. @@ -52,14 +90,14 @@ examples: @@ -68,7 +106,7 @@ examples: - Edit @@ -99,7 +137,7 @@ examples: - Edit @@ -131,7 +169,7 @@ examples: - Edit @@ -163,7 +201,7 @@ examples: - Edit @@ -200,7 +238,7 @@ examples: - Edit @@ -231,7 +269,7 @@ examples: - Edit @@ -262,7 +300,7 @@ examples: - Edit @@ -293,7 +331,7 @@ examples: - Edit @@ -331,7 +369,7 @@ examples: - Edit @@ -362,7 +400,7 @@ examples: - Edit @@ -393,7 +431,7 @@ examples: - Edit @@ -424,7 +462,7 @@ examples: - Edit @@ -462,7 +500,7 @@ examples: - Edit @@ -493,7 +531,7 @@ examples: - Edit @@ -524,7 +562,7 @@ examples: - Edit @@ -555,7 +593,7 @@ examples: - Edit @@ -592,7 +630,7 @@ examples: - Edit @@ -623,7 +661,7 @@ examples: - Edit @@ -654,7 +692,7 @@ examples: - Edit @@ -685,7 +723,7 @@ examples: -
+

Default

@@ -707,14 +745,14 @@ examples: @@ -723,7 +761,7 @@ examples: - Edit @@ -754,7 +792,7 @@ examples: - Edit @@ -785,7 +823,7 @@ examples: - Edit @@ -816,7 +854,7 @@ examples: -
+

Default

@@ -839,14 +877,14 @@ examples: @@ -855,7 +893,7 @@ examples: - Edit @@ -886,7 +924,7 @@ examples: - Edit @@ -917,7 +955,7 @@ examples: - Edit @@ -948,7 +986,7 @@ examples: -
+

Default

@@ -972,14 +1010,14 @@ examples: @@ -988,7 +1026,7 @@ examples: - Edit @@ -1019,7 +1057,7 @@ examples: - Edit @@ -1050,7 +1088,7 @@ examples: - Edit @@ -1081,7 +1119,7 @@ examples: -
+

Default

@@ -1104,14 +1142,14 @@ examples: @@ -1120,7 +1158,7 @@ examples: - Edit @@ -1151,7 +1189,7 @@ examples: - Edit @@ -1182,7 +1220,7 @@ examples: - Edit @@ -1213,7 +1251,7 @@ examples: -
+ + - id: actionbutton-api + name: Customized + markup: | + + + diff --git a/components/tokens/custom.css b/components/tokens/custom.css index 40ab62f67f1..f792877800b 100644 --- a/components/tokens/custom.css +++ b/components/tokens/custom.css @@ -14,10 +14,20 @@ governing permissions and limitations under the License. .spectrum { --spectrum-animation-duration-100: 130ms; +} +.spectrum--medium { /* edge-to-visual-only is used for icon-only buttons */ --spectrum-edge-to-visual-only-75: 4px; --spectrum-edge-to-visual-only-100: 7px; - --spectrum-edge-to-visual-only-200: 8px; - --spectrum-edge-to-visual-only-300: 9px; + --spectrum-edge-to-visual-only-200: 10px; + --spectrum-edge-to-visual-only-300: 13px; +} + +.spectrum--large { + /* edge-to-visual-only is used for icon-only buttons */ + --spectrum-edge-to-visual-only-75: 5px; + --spectrum-edge-to-visual-only-100: 9px; + --spectrum-edge-to-visual-only-200: 13px; + --spectrum-edge-to-visual-only-300: 16px; } diff --git a/tools/component-builder/css/vars.js b/tools/component-builder/css/vars.js index 480aba7415e..937c2f37898 100644 --- a/tools/component-builder/css/vars.js +++ b/tools/component-builder/css/vars.js @@ -60,8 +60,8 @@ function bakeVars() { if (varName.indexOf('spectrum-global') !== -1) { logger.warn(`⚠️ ${pkg.name} directly uses global variable ${varName}`); } - else if (!allVars[varName]) { - if (!varName.startsWith('--custom') && !varName.startsWith('--highcontrast') && componentVars.indexOf(varName) === -1) { + else if (!allVars[varName] && !varName.startsWith('--custom') && !varName.startsWith('--highcontrast')) { + if (componentVars.indexOf(varName) === -1) { errors.push(`${pkg.name} uses undefined variable ${varName}`); } else {