From 21fafef418d4cfe4e9414ea893150b8ca5c9f0eb Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 23 Apr 2024 11:49:04 -0400 Subject: [PATCH 01/11] refactor(button): spectrum 2 styles and cleanup Spectrum 2 changes to CSS: - integrate themes css into main css - use s2 corner rounding - use s2 colors Cleanup items of note: - make medium size the default - consolidate and organize focus indicator styles. Some declarations were repeated. - Rename mod for font weight that was referencing a global token instead of a component specific name. - simplify repetitive disabled custom properties - removed some unused css; static variant declarations at the end of the file were being overridden by more specific styles - remove unused is-selected, emphasized, and quiet classes that are not used on this component - remove the spectrum-Button--fill class. it was already the default. --- components/button/index.css | 490 +++++++++++++----- components/button/metadata/button-accent.yml | 33 +- .../button/metadata/button-negative.yml | 33 +- components/button/metadata/button-primary.yml | 33 +- .../button/metadata/button-secondary.yml | 33 +- .../button/metadata/button-staticcolor.yml | 75 +-- components/button/metadata/mods.md | 94 ++-- components/button/stories/template.js | 13 +- components/button/themes/express.css | 37 -- components/button/themes/spectrum.css | 462 ----------------- 10 files changed, 525 insertions(+), 778 deletions(-) delete mode 100644 components/button/themes/express.css delete mode 100644 components/button/themes/spectrum.css diff --git a/components/button/index.css b/components/button/index.css index 9970e58cecd..fb4323898e1 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -10,21 +10,63 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "./themes/express.css"; @import "@spectrum-css/commons/basebutton.css"; /* default for all buttons */ .spectrum-Button { --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-button-border-radius: var(--spectrum-corner-radius-full); --spectrum-button-border-width: var(--spectrum-border-width-200); --spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */ --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap)); --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + + --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-height: var(--spectrum-component-height-100); + + /* @todo set line-height value per size, using font size specific line-height tokens when they are finalized. */ + --spectrum-button-line-height: 1.2; + --spectrum-button-font-weight: var(--spectrum-bold-font-weight); + --spectrum-button-font-size: var(--spectrum-font-size-100); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-button-background-color-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); --mod-progress-circle-position: absolute; /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */ @@ -33,8 +75,6 @@ governing permissions and limitations under the License. .spectrum-Button--sizeS { --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75); --spectrum-button-height: var(--spectrum-component-height-75); --spectrum-button-font-size: var(--spectrum-font-size-75); @@ -53,28 +93,8 @@ governing permissions and limitations under the License. } } -.spectrum-Button--sizeM { - --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-button-height: var(--spectrum-component-height-100); - - --spectrum-button-font-size: var(--spectrum-font-size-100); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); -} - .spectrum-Button--sizeL { --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200); --spectrum-button-height: var(--spectrum-component-height-200); --spectrum-button-font-size: var(--spectrum-font-size-200); @@ -91,8 +111,6 @@ governing permissions and limitations under the License. .spectrum-Button--sizeXL { --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300); --spectrum-button-height: var(--spectrum-component-height-300); --spectrum-button-font-size: var(--spectrum-font-size-300); @@ -107,6 +125,258 @@ governing permissions and limitations under the License. --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300); } +/* Variant colors */ +.spectrum-Button { + &.spectrum-Button--accent, + &.spectrum-Button--negative { + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + } + + &.spectrum-Button--outline { + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + + /* ---- Accent ---- */ + &.spectrum-Button--accent { + --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-accent-color-200); + --spectrum-button-background-color-down: var(--spectrum-accent-color-300); + --spectrum-button-background-color-focus: var(--spectrum-accent-color-200); + + --spectrum-button-border-color-default: var(--spectrum-accent-color-900); + --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000); + --spectrum-button-border-color-down: var(--spectrum-accent-color-1100); + --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000); + + --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus); + } + } + + /* ---- Negative ---- */ + &.spectrum-Button--negative { + --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-negative-color-200); + --spectrum-button-background-color-down: var(--spectrum-negative-color-300); + --spectrum-button-background-color-focus: var(--spectrum-negative-color-200); + + --spectrum-button-border-color-default: var(--spectrum-negative-color-900); + --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000); + --spectrum-button-border-color-down: var(--spectrum-negative-color-1100); + --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000); + + --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus); + } + } + + /* ---- Primary ---- */ + /* Also shows as the default when a variant is not set. */ + &.spectrum-Button--primary, + & { + --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + + --spectrum-button-content-color-default: var(--spectrum-gray-25); + --spectrum-button-content-color-hover: var(--spectrum-gray-25); + --spectrum-button-content-color-down: var(--spectrum-gray-25); + --spectrum-button-content-color-focus: var(--spectrum-gray-25); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + + --spectrum-button-border-color-default: var(--spectrum-gray-800); + --spectrum-button-border-color-hover: var(--spectrum-gray-900); + --spectrum-button-border-color-down: var(--spectrum-gray-900); + --spectrum-button-border-color-focus: var(--spectrum-gray-900); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + } + } + + /* ---- Secondary ---- */ + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + + --spectrum-button-border-color-default: var(--spectrum-gray-300); + --spectrum-button-border-color-hover: var(--spectrum-gray-400); + --spectrum-button-border-color-down: var(--spectrum-gray-400); + --spectrum-button-border-color-focus: var(--spectrum-gray-400); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + } + } + + /* ---- Static White ---- */ + &.spectrum-Button--staticWhite { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-background-color-disabled: var(--spectrum-transparent-white-25); + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + + &.spectrum-Button--outline { + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); + } + } + } + + /* ---- Static Black ---- */ + &.spectrum-Button--staticBlack { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); + + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); + } + } + } +} + .spectrum-Button { @extend %spectrum-BaseButton; @extend %spectrum-ButtonWithFocusRing; @@ -115,39 +385,41 @@ governing permissions and limitations under the License. border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); border-style: solid; font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); - font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); + font-weight: var(--mod-button-font-weight, var(--spectrum-button-font-weight)); gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); min-block-size: var(--mod-button-height, var(--spectrum-button-height)); - /* Start with text-only padding */ padding-block: 0; padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); position: relative; - /* let staticColor variants inherit their color */ - color: inherit; + background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); + border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); + color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); + transition: border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, + color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, + background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear; margin-block: var(--mod-button-margin-block); margin-inline-end: var(--mod-button-margin-right); margin-inline-start: var(--mod-button-margin-left); - &:hover, - &:active { - box-shadow: none; - } - - &:active { - transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); - } - .spectrum-Icon { /* stylelint-disable-next-line custom-property-pattern -- Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ - --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); + --spectrum-button-icon-size-difference: max(0px, + var(--spectrum-button-intended-icon-size) - + var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)) + ); - /* stylelint-disable-next-line custom-property-pattern -- see note above */ - margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); + margin-block-start: var(--mod-button-icon-margin-block-start, + max(0px, + var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - + var(--mod-button-border-width, var(--spectrum-button-border-width)) + + (var(--spectrum-button-icon-size-difference, 0px) / 2) + ) + ); margin-inline-start: calc( var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - @@ -158,91 +430,38 @@ governing permissions and limitations under the License. align-self: flex-start; } - /* correct focus indicator radius for t-shirt sizing */ - &::after { - border-radius: calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); - } - - &.spectrum-Button--iconOnly { - min-inline-size: unset; - padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - border-radius: 50%; - - .spectrum-Icon { - align-self: center; - margin-inline-start: 0; - margin-block-start: 0; - } - - &::after { - border-radius: 50%; - } - } -} - -a.spectrum-Button { - @extend %spectrum-AnchorButton; -} - -.spectrum-Button-label { - @extend %spectrum-ButtonLabel; - padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - line-height: var(--mod-button-line-height, var(--spectrum-button-line-height)); - align-self: start; - text-align: var(--mod-button-text-align, center); -} - -.spectrum-Button .spectrum-Icon + .spectrum-Button-label { - text-align: var(--mod-button-text-align-with-icon, start); -} - -.spectrum-Button { - &:focus-visible, - &.is-focused { - &::after { - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)); - } - } -} - -/* Special cases for focus indicator */ -.spectrum-Button { - transition: border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; - + /* Focus indicator */ &::after { position: absolute; inset: 0; - margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1); - border-radius: var(--mod-button-focus-ring-border-radius, var(--spectrum-button-focus-ring-border-radius)); + margin: calc(( + var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ) * -1 + ); + border-radius: var(--mod-button-focus-ring-border-radius, var(--mod-button-border-radius, var(--spectrum-button-border-radius))); transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; pointer-events: none; content: ''; } - &:focus-visible { - /* Remove the default focus outline */ + &:focus-visible, + &.is-focused { box-shadow: none; outline: none; &::after { - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, - var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)))); + box-shadow: 0 0 0 + var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) + var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color))); } } -} - -/* Core Token Theming */ -/* former skin.css, applied / copied from actionbutton/index.css */ -.spectrum-Button { - @extend %spectrum-BaseButton; - background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); - border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); - color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); - transition: border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, - color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, - background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear; + /* States and interaction */ + &:hover, + &:active { + box-shadow: none; + } &:hover { background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); @@ -260,6 +479,7 @@ a.spectrum-Button { background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); + transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } &:disabled, @@ -305,32 +525,58 @@ a.spectrum-Button { } } -/* Static color variants */ -.spectrum-Button--staticWhite { - --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); +a.spectrum-Button { + @extend %spectrum-AnchorButton; } -.spectrum-Button--staticBlack { - --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); +.spectrum-Button-label { + @extend %spectrum-ButtonLabel; + padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + line-height: var(--mod-button-line-height, var(--spectrum-button-line-height)); + align-self: start; + text-align: var(--mod-button-text-align, center); } -/* Windows High Contrast Mode */ +.spectrum-Button .spectrum-Icon + .spectrum-Button-label { + text-align: var(--mod-button-text-align-with-icon, start); +} + +/* Icon only variant */ +.spectrum-Button.spectrum-Button--iconOnly { + min-inline-size: unset; + padding: calc( + var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ); + + .spectrum-Icon { + align-self: center; + margin-inline-start: 0; + margin-block-start: 0; + } +} + +/* Forced colors / high contrast mode */ @media (forced-colors: active) { .spectrum-Button { --highcontrast-button-content-color-disabled: GrayText; --highcontrast-button-border-color-disabled: GrayText; + --mod-progress-circle-track-border-color: ButtonText; --mod-progress-circle-track-border-color-over-background: ButtonText; --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + --highcontrast-button-focus-ring-color: ButtonText; + &:focus-visible { &::after { + /* Make sure the box-shadow used for the focus indicator is displayed. */ forced-color-adjust: none; - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) ButtonText; } } - &.spectrum-Button--accent.spectrum-Button--fill { + &.spectrum-Button--accent:not(.spectrum-Button--outline) { --highcontrast-button-background-color-default: ButtonText; --highcontrast-button-content-color-default: ButtonFace; --highcontrast-button-background-color-disabled: ButtonFace; diff --git a/components/button/metadata/button-accent.yml b/components/button/metadata/button-accent.yml index 9870c50f9ec..315beb7d19e 100644 --- a/components/button/metadata/button-accent.yml +++ b/components/button/metadata/button-accent.yml @@ -11,9 +11,12 @@ sections: ### x/x/2024 - Version 13.0.0 #### Spectrum 2 release Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed. + - The `.spectrum-Button--fill` class is no longer needed and has been removed. - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + - The mod custom property `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`. ### Versions prior to 13.0.0 #### Fill or Outline class required @@ -50,18 +53,18 @@ examples:

S

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -