From 46ae6870881d9d917568009fb4e0fcf647eb45a7 Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Mon, 13 Jan 2025 05:08:50 -1000 Subject: [PATCH] fix(calendar,dial,pickerbutton,progressbar,radio,stepper): unused custom properties (#3487) * fix(pickerbutton): add missing custom properties * fix(radio): add missing custom props * fix(calendar): add missing custom properties * fix(stepper): define unused custom props * fix(progressbar): remove unused custom properties; change background-color to background see #2929; fix static color * fix(dial): remove unused custom properties; add undefined custom properties --- .changeset/wicked-dragons-cheer.md | 17 +++ components/calendar/dist/metadata.json | 1 + components/calendar/index.css | 1 + components/dial/dist/metadata.json | 6 +- components/dial/index.css | 13 +- components/pickerbutton/dist/metadata.json | 5 + components/pickerbutton/index.css | 9 ++ components/progressbar/index.css | 8 +- components/radio/dist/metadata.json | 3 + components/radio/index.css | 6 + components/stepper/dist/metadata.json | 7 + components/stepper/index.css | 145 ++++++++++++--------- 12 files changed, 151 insertions(+), 70 deletions(-) create mode 100644 .changeset/wicked-dragons-cheer.md diff --git a/.changeset/wicked-dragons-cheer.md b/.changeset/wicked-dragons-cheer.md new file mode 100644 index 0000000000..db2204d023 --- /dev/null +++ b/.changeset/wicked-dragons-cheer.md @@ -0,0 +1,17 @@ +--- +"@spectrum-css/pickerbutton": patch +"@spectrum-css/progressbar": patch +"@spectrum-css/calendar": patch +"@spectrum-css/stepper": patch +"@spectrum-css/radio": patch +"@spectrum-css/dial": patch +--- + +Fixes to align `spectrum-two` with `s2-foundations-redux`/`main`, mostly defining unused custom properties, but addresses any other lint warnings or inconsistencies noted in the following components: + +**Calendar**: Defines 1 previously undefined custom property to align with `main` and `s2-foundations-redux` +**Dial**: Defines 6 previously undefined custom properties, removes 3 unused custom properties +**Pickerbutton**: Defines 9 previously undefined custom properties to align with `main` and `s2-foundations-redux` +**Progressbar**: Removes 3 unused custom properties, reverts background-color to background to accommodate gradients +**Radio**: Defines 4 previously undefined custom properties to align with `main` and `s2-foundations-redux` +**Stepper**: moves high contrast block further down to align with other components' CSS structure, defines multiple undefined custom properties, adds disable-next-line comment to suppress no-unused-custom-properties warning diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index 31023c3444..c4901c2be4 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -166,6 +166,7 @@ "--spectrum-font-size-100", "--spectrum-font-size-300", "--spectrum-font-size-50", + "--spectrum-gray-100-rgb", "--spectrum-gray-800", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", diff --git a/components/calendar/index.css b/components/calendar/index.css index 5644980528..5017388e45 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -46,6 +46,7 @@ --spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent); --spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); --spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); + --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); --spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); --spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))); --spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))); diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json index b0cdd9b910..49c6d601fe 100644 --- a/components/dial/dist/metadata.json +++ b/components/dial/dist/metadata.json @@ -75,9 +75,7 @@ "component": [ "--spectrum-dial-background-color-default", "--spectrum-dial-border-color", - "--spectrum-dial-border-color-disabled", "--spectrum-dial-border-color-hover", - "--spectrum-dial-border-color-key-focus", "--spectrum-dial-border-radius", "--spectrum-dial-container-width", "--spectrum-dial-controls-margin", @@ -88,7 +86,6 @@ "--spectrum-dial-handle-inline-margin", "--spectrum-dial-handle-marker-border-radius", "--spectrum-dial-handle-marker-color", - "--spectrum-dial-handle-marker-color-disabled", "--spectrum-dial-handle-marker-color-hover", "--spectrum-dial-handle-marker-color-key-focus", "--spectrum-dial-handle-marker-color-mouse-focus", @@ -111,11 +108,12 @@ "global": [ "--spectrum-border-width-200", "--spectrum-font-size-75", - "--spectrum-gray-200", "--spectrum-gray-25", + "--spectrum-gray-400", "--spectrum-gray-600", "--spectrum-gray-700", "--spectrum-gray-75", + "--spectrum-gray-800", "--spectrum-line-height-200" ], "passthroughs": [], diff --git a/components/dial/index.css b/components/dial/index.css index 2e7b4510d0..e49e3578bd 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -14,16 +14,21 @@ .spectrum-Dial { --spectrum-dial-background-color-default: var(--spectrum-gray-75); - --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200); - --spectrum-dial-border-color-disabled: var(--spectrum-gray-200); - --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); --spectrum-dial-border-color: var(--spectrum-gray-700); + --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800); + --spectrum-dial-border-color-hover: var(--spectrum-gray-800); + + --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); + --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600); --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); - --spectrum-dial-border-color-key-focus: var(--spectrum-gray-25); + + --spectrum-dial-label-text-color: var(--spectrum-gray-700); + --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700); + --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400); --spectrum-dial-container-width: 48px; diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index e9e54d7550..7880559c3c 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -107,10 +107,12 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-body-sans-serif-font-weight", + "--spectrum-border-width-100", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-corner-radius-100", "--spectrum-corner-radius-200", "--spectrum-default-font-style", "--spectrum-disabled-background-color", @@ -123,6 +125,9 @@ "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", + "--spectrum-gray-100", + "--spectrum-gray-200", + "--spectrum-gray-50", "--spectrum-in-field-button-edge-to-fill", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index 3156a78a81..27580aacda 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -35,8 +35,17 @@ --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); --spectrum-picker-button-font-size: var(--spectrum-font-size-100); + --spectrum-picker-button-border-color: inherit; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-picker-button-border-radius-rounded-sided: 0; + --spectrum-picker-button-border-radius-sided: 0; + --spectrum-picker-button-border-width: var(--spectrum-border-width-100); --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); + --spectrum-picker-button-background-color: var(--spectrum-gray-50); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); &:hover { diff --git a/components/progressbar/index.css b/components/progressbar/index.css index e69d5328da..a45e9285b0 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -133,14 +133,14 @@ block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); border-radius: var(--spectrum-progressbar-corner-radius); - background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); } .spectrum-ProgressBar-fill { border: none; block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); transition: width 1s; - background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); + background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); } } @@ -183,7 +183,7 @@ .spectrum-ProgressBar--staticWhite { .spectrum-ProgressBar-fill { color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); - background-color: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))); + background: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))); } .spectrum-ProgressBar-label, @@ -192,7 +192,7 @@ } .spectrum-ProgressBar-track { - background-color: var(--spectrum-progressbar-track-color-white); + background: var(--spectrum-progressbar-track-color-white); } } diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index cb1748d9a2..ac43c3c938 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -149,6 +149,9 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-50", + "--spectrum-gray-600", + "--spectrum-gray-700", + "--spectrum-gray-800", "--spectrum-line-height-100", "--spectrum-neutral-background-color-selected-default", "--spectrum-neutral-background-color-selected-down", diff --git a/components/radio/index.css b/components/radio/index.css index bdbbb67678..b8d1661716 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -53,6 +53,12 @@ --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); + /* unchecked selection indicator */ + --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); + --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + /* checked selection indicator */ --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index f141c7f9ae..3467a605f2 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -111,6 +111,7 @@ ], "global": [ "--spectrum-animation-duration-100", + "--spectrum-border-width-100", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", @@ -120,6 +121,12 @@ "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", + "--spectrum-gray-25", + "--spectrum-gray-50", + "--spectrum-gray-500", + "--spectrum-gray-600", + "--spectrum-gray-800", + "--spectrum-gray-900", "--spectrum-in-field-button-width-stacked-extra-large", "--spectrum-in-field-button-width-stacked-large", "--spectrum-in-field-button-width-stacked-medium", diff --git a/components/stepper/index.css b/components/stepper/index.css index dfd834c1d7..c6c28cd946 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -11,66 +11,14 @@ * governing permissions and limitations under the License. */ -/* --- High contrast settings --- */ -@media (forced-colors: active) { - .spectrum-Stepper { - --highcontrast-stepper-border-color: CanvasText; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: CanvasText; - --highcontrast-stepper-focus-indicator-color: Highlight; - - &.is-invalid { - --highcontrast-stepper-border-color: Highlight; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: Highlight; - } - - &.is-disabled { - --highcontrast-stepper-border-color: GrayText; - --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - } - - &:not(.is-disabled) { - &:hover { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover); - } - - &.is-focused, - &:focus { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus); - - &:hover { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover); - } - } - - &.is-keyboardFocused, - &:focus-visible { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus); - } - } - } - - /* @passthrough start */ - .spectrum-Stepper-input { - --highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color); - } - /* @passthrough end */ - - /* @passthrough start */ - .spectrum-Stepper-button { - --highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color); - --highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color); - } - /* @passthrough end */ -} - /* --- Component-level definitions --- */ .spectrum-Stepper { + --spectrum-stepper-border-width: var(--spectrum-border-width-100); + --spectrum-stepper-border-color-default: var(--spectrum-gray-500); + --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); --spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default))); --spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100)); @@ -83,6 +31,26 @@ --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); + --spectrum-stepper-buttons-border-style: none; + --spectrum-stepper-buttons-border-width: 0; + --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25); + --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); + + --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); + + /** Invalid **/ + --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); + + /** Disabled **/ + --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100); + --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); + &.spectrum-Stepper--sizeS { --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small)); --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-75)); @@ -131,6 +99,9 @@ } &.spectrum-Stepper--quiet { + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used by --mod-infield-button-inner-edge-to-fill and --mod-infield-button-edge-to-fill */ + --spectrum-stepper-button-edge-to-fill: 0; + --mod-stepper-buttons-background-color: transparent; /* quiet hover */ @@ -151,6 +122,64 @@ } } +/* --- High contrast settings --- */ +@media (forced-colors: active) { + .spectrum-Stepper { + --highcontrast-stepper-border-color: CanvasText; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: CanvasText; + --highcontrast-stepper-focus-indicator-color: Highlight; + + &.is-invalid { + --highcontrast-stepper-border-color: Highlight; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: Highlight; + } + + &.is-disabled { + --highcontrast-stepper-border-color: GrayText; + --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + } + + &:not(.is-disabled) { + &:hover { + --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover); + } + + &.is-focused, + &:focus { + --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus); + + &:hover { + --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover); + } + } + + &.is-keyboardFocused, + &:focus-visible { + --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus); + } + } + } + + /* @passthrough start */ + .spectrum-Stepper-input { + --highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color); + } + /* @passthrough end */ + + /* @passthrough start */ + .spectrum-Stepper-button { + --highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color); + --highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color); + } + /* @passthrough end */ +} + /* --- Component-level passthroughs for nested components --- */ /* @passthrough start -- MODS for sub components */ .spectrum-Stepper {