From 12964aeaab2dbe1e6333856df6e9766eb7b1e25e Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 5 Nov 2024 18:02:49 -0500 Subject: [PATCH] fix: specificity adjustments for variant application via theming --- .gitignore | 1 + .../actionbutton/stories/actionbutton.test.js | 8 +- components/avatar/metadata/metadata.json | 4 +- components/avatar/themes/spectrum-two.css | 2 +- components/button/index.css | 9 +- components/button/metadata/metadata.json | 8 +- components/button/themes/spectrum-two.css | 228 ++++++------ components/calendar/index.css | 5 +- components/calendar/metadata/metadata.json | 2 - components/combobox/themes/spectrum-two.css | 12 +- components/datepicker/index.css | 107 +++--- components/datepicker/metadata/metadata.json | 20 +- .../datepicker/stories/datepicker.stories.js | 1 - components/datepicker/stories/template.js | 9 +- components/datepicker/themes/spectrum-two.css | 3 +- components/dial/metadata/metadata.json | 2 +- components/dial/themes/spectrum-two.css | 8 +- components/divider/index.css | 49 +-- components/divider/metadata/metadata.json | 18 +- components/fieldlabel/index.css | 2 +- components/fieldlabel/metadata/metadata.json | 1 + components/fieldlabel/metadata/mods.md | 1 + .../metadata/metadata.json | 2 +- .../themes/spectrum-two.css | 20 +- components/helptext/index.css | 48 +-- components/helptext/metadata/metadata.json | 33 +- components/helptext/metadata/mods.md | 1 - components/helptext/themes/spectrum-two.css | 19 +- components/meter/metadata/metadata.json | 6 +- components/meter/themes/spectrum-two.css | 28 +- components/picker/metadata/metadata.json | 12 +- components/picker/themes/spectrum-two.css | 112 +++--- components/radio/index.css | 100 +++-- components/radio/metadata/metadata.json | 10 +- components/radio/themes/spectrum-two.css | 86 ++--- components/sidenav/index.css | 2 +- components/statuslight/metadata/metadata.json | 8 +- .../statuslight/themes/spectrum-two.css | 74 ++-- components/stepper/index.css | 23 +- components/stepper/metadata/metadata.json | 6 +- components/stepper/themes/express.css | 2 - components/stepper/themes/spectrum-two.css | 2 +- components/stepper/themes/spectrum.css | 1 - components/table/index.css | 6 +- components/table/metadata/metadata.json | 23 +- components/table/themes/spectrum-two.css | 352 +++++++++--------- components/table/themes/spectrum.css | 8 +- components/textfield/index.css | 299 +++++++-------- components/textfield/metadata/metadata.json | 78 ++-- components/textfield/metadata/mods.md | 3 + components/textfield/stories/template.js | 1 + components/thumbnail/metadata/metadata.json | 24 +- components/thumbnail/themes/spectrum-two.css | 75 ++-- components/treeview/metadata/metadata.json | 1 + components/treeview/themes/spectrum-two.css | 6 +- plugins/stylelint-theme-alignment/index.js | 21 +- stylelint.config.js | 10 +- 57 files changed, 969 insertions(+), 1033 deletions(-) diff --git a/.gitignore b/.gitignore index 931f844218..17d143d6cb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ dist !tokens/dist/index.css +!tokens/dist/css/*.css # Not committing the map assets, these are dev-only *.map diff --git a/components/actionbutton/stories/actionbutton.test.js b/components/actionbutton/stories/actionbutton.test.js index fb37fdc910..01871f05da 100644 --- a/components/actionbutton/stories/actionbutton.test.js +++ b/components/actionbutton/stories/actionbutton.test.js @@ -63,12 +63,12 @@ export const ActionButtonGroup = Variants({ staticColor: "black", }, { - testHeading: "Static black - emphasized", + testHeading: "Static black (emphasized)", staticColor: "black", isEmphasized: true, }, { - testHeading: "Static black - quiet", + testHeading: "Static black (quiet)", staticColor: "black", isQuiet: true, }, @@ -77,12 +77,12 @@ export const ActionButtonGroup = Variants({ staticColor: "white", }, { - testHeading: "Static white - emphasized", + testHeading: "Static white (emphasized)", staticColor: "white", isEmphasized: true, }, { - testHeading: "Static white - quiet", + testHeading: "Static white (quiet)", staticColor: "white", isQuiet: true, }, diff --git a/components/avatar/metadata/metadata.json b/components/avatar/metadata/metadata.json index 43e3326630..7961c5c4ca 100644 --- a/components/avatar/metadata/metadata.json +++ b/components/avatar/metadata/metadata.json @@ -2,11 +2,11 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Avatar", - ".spectrum-Avatar .spectrum-Avatar.spectrum-Avatar--size100", ".spectrum-Avatar-image", ".spectrum-Avatar-link", ".spectrum-Avatar.is-disabled", ".spectrum-Avatar.is-focused:not(.is-disabled):after", + ".spectrum-Avatar.spectrum-Avatar--size100", ".spectrum-Avatar.spectrum-Avatar--size200", ".spectrum-Avatar.spectrum-Avatar--size300", ".spectrum-Avatar.spectrum-Avatar--size400", @@ -53,11 +53,13 @@ "--spectrum-focus-indicator-thickness" ], "system-theme": [ + "--system-avatar-block-size", "--system-avatar-color-opacity", "--system-avatar-color-opacity-disabled", "--system-avatar-focus-indicator-color", "--system-avatar-focus-indicator-gap", "--system-avatar-focus-indicator-thickness", + "--system-avatar-inline-size", "--system-avatar-size-100-block-size", "--system-avatar-size-100-inline-size", "--system-avatar-size-200-block-size", diff --git a/components/avatar/themes/spectrum-two.css b/components/avatar/themes/spectrum-two.css index 354b1931d6..d6de93fbec 100644 --- a/components/avatar/themes/spectrum-two.css +++ b/components/avatar/themes/spectrum-two.css @@ -21,7 +21,7 @@ --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled); - & + &, &.spectrum-Avatar--size100 { --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); diff --git a/components/button/index.css b/components/button/index.css index 8d04cf6e9d..0edf733e8b 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -72,7 +72,6 @@ .spectrum-Icon { /* 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. */ - /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- use the icon sizing to determine the size calculation */ --spectrum-button-icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size))); 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))); @@ -201,10 +200,10 @@ a.spectrum-Button { --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); &.is-selected { - --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-default)); - --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-hover)); - --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-down)); - --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-focus)); + --mod-button-content-color-default: var(--mod-button-static-content-color); + --mod-button-content-color-hover: var(--mod-button-static-content-color); + --mod-button-content-color-down: var(--mod-button-static-content-color); + --mod-button-content-color-focus: var(--mod-button-static-content-color); } } diff --git a/components/button/metadata/metadata.json b/components/button/metadata/metadata.json index 0351d34370..f4df1d2470 100644 --- a/components/button/metadata/metadata.json +++ b/components/button/metadata/metadata.json @@ -154,10 +154,6 @@ "--spectrum-button-min-width", "--spectrum-button-minimum-width-multiplier", "--spectrum-button-padding-label-to-icon", - "--spectrum-button-static-white-content-color-default", - "--spectrum-button-static-white-content-color-down", - "--spectrum-button-static-white-content-color-focus", - "--spectrum-button-static-white-content-color-hover", "--spectrum-button-top-to-icon", "--spectrum-button-top-to-text", "--spectrum-button-top-to-text-extra-large", @@ -525,7 +521,7 @@ "--system-button-static-black-content-color-down", "--system-button-static-black-content-color-focus", "--system-button-static-black-content-color-hover", - "--system-button-static-black-focus-indicator-color", + "--system-button-static-black-focus-ring-color", "--system-button-static-black-outline-background-color-default", "--system-button-static-black-outline-background-color-disabled", "--system-button-static-black-outline-background-color-down", @@ -594,7 +590,7 @@ "--system-button-static-white-content-color-down", "--system-button-static-white-content-color-focus", "--system-button-static-white-content-color-hover", - "--system-button-static-white-focus-indicator-color", + "--system-button-static-white-focus-ring-color", "--system-button-static-white-outline-background-color-default", "--system-button-static-white-outline-background-color-disabled", "--system-button-static-white-outline-background-color-down", diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css index 99e3c81f7b..7abbee5d18 100644 --- a/components/button/themes/spectrum-two.css +++ b/components/button/themes/spectrum-two.css @@ -340,7 +340,7 @@ --mod-button-content-color-down: var(--spectrum-black); --mod-button-content-color-focus: var(--spectrum-black); - --mod-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --mod-button-focus-ring-color: var(--spectrum-static-white-focus-indicator-color); --mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); --mod-button-border-color-disabled: transparent; @@ -362,71 +362,71 @@ } &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-1000); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-1000); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-1000); - - --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-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --mod-button-background-color-default: transparent; + --mod-button-background-color-hover: var(--spectrum-transparent-white-400); + --mod-button-background-color-down: var(--spectrum-transparent-white-500); + --mod-button-background-color-focus: var(--spectrum-transparent-white-400); + + --mod-button-border-color-default: var(--spectrum-transparent-white-900); + --mod-button-border-color-hover: var(--spectrum-transparent-white-1000); + --mod-button-border-color-down: var(--spectrum-transparent-white-1000); + --mod-button-border-color-focus: var(--spectrum-transparent-white-1000); + + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); + + --mod-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --mod-button-background-color-disabled: transparent; + --mod-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); } &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); + --mod-button-background-color-default: var(--spectrum-transparent-white-300); + --mod-button-background-color-hover: var(--spectrum-transparent-white-400); + --mod-button-background-color-down: var(--spectrum-transparent-white-500); + --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; + --mod-button-border-color-default: transparent; + --mod-button-border-color-hover: transparent; + --mod-button-border-color-down: transparent; + --mod-button-border-color-focus: transparent; - --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); + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --mod-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); + --mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --mod-button-border-color-disabled: transparent; + --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-500); - - --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-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --mod-button-background-color-default: transparent; + --mod-button-background-color-hover: var(--spectrum-transparent-white-400); + --mod-button-background-color-down: var(--spectrum-transparent-white-500); + --mod-button-background-color-focus: var(--spectrum-transparent-white-400); + + --mod-button-border-color-default: var(--spectrum-transparent-white-400); + --mod-button-border-color-hover: var(--spectrum-transparent-white-500); + --mod-button-border-color-down: var(--spectrum-transparent-white-600); + --mod-button-border-color-focus: var(--spectrum-transparent-white-500); + + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); + + --mod-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --mod-button-background-color-disabled: transparent; + --mod-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); } } } @@ -448,78 +448,78 @@ --mod-button-content-color-down: var(--spectrum-white); --mod-button-content-color-focus: var(--spectrum-white); - --mod-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --mod-button-focus-ring-color: var(--spectrum-static-black-focus-indicator-color); --mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); --mod-button-border-color-disabled: transparent; --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-700); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-600); - - --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-black-focus-indicator-color); - - --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); + --mod-button-background-color-default: transparent; + --mod-button-background-color-hover: var(--spectrum-transparent-black-400); + --mod-button-background-color-down: var(--spectrum-transparent-black-500); + --mod-button-background-color-focus: var(--spectrum-transparent-black-400); + + --mod-button-border-color-default: var(--spectrum-transparent-black-500); + --mod-button-border-color-hover: var(--spectrum-transparent-black-600); + --mod-button-border-color-down: var(--spectrum-transparent-black-700); + --mod-button-border-color-focus: var(--spectrum-transparent-black-600); + + --mod-button-content-color-default: var(--spectrum-black); + --mod-button-content-color-hover: var(--spectrum-black); + --mod-button-content-color-down: var(--spectrum-black); + --mod-button-content-color-focus: var(--spectrum-black); + + --mod-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --mod-button-background-color-disabled: transparent; + --mod-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); } &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); + --mod-button-background-color-default: var(--spectrum-transparent-black-300); + --mod-button-background-color-hover: var(--spectrum-transparent-black-400); + --mod-button-background-color-down: var(--spectrum-transparent-black-500); + --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; + --mod-button-border-color-default: transparent; + --mod-button-border-color-hover: transparent; + --mod-button-border-color-down: transparent; + --mod-button-border-color-focus: transparent; - --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); + --mod-button-content-color-default: var(--spectrum-black); + --mod-button-content-color-hover: var(--spectrum-black); + --mod-button-content-color-down: var(--spectrum-black); + --mod-button-content-color-focus: var(--spectrum-black); - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --mod-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); + --mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --mod-button-border-color-disabled: transparent; + --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); - - --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-black-focus-indicator-color); - - --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); + --mod-button-background-color-default: transparent; + --mod-button-background-color-hover: var(--spectrum-transparent-black-400); + --mod-button-background-color-down: var(--spectrum-transparent-black-500); + --mod-button-background-color-focus: var(--spectrum-transparent-black-400); + + --mod-button-border-color-default: var(--spectrum-transparent-black-400); + --mod-button-border-color-hover: var(--spectrum-transparent-black-500); + --mod-button-border-color-down: var(--spectrum-transparent-black-600); + --mod-button-border-color-focus: var(--spectrum-transparent-black-500); + + --mod-button-content-color-default: var(--spectrum-black); + --mod-button-content-color-hover: var(--spectrum-black); + --mod-button-content-color-down: var(--spectrum-black); + --mod-button-content-color-focus: var(--spectrum-black); + + --mod-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --mod-button-background-color-disabled: transparent; + --mod-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); } } } diff --git a/components/calendar/index.css b/components/calendar/index.css index 22af5998ba..bf003eb976 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -374,7 +374,7 @@ @media (forced-colors: active) { .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { - --highcontrast-calendar-button-icon-color-disabled: GrayText; + /* --highcontrast-calendar-button-icon-color-disabled: GrayText; */ --highcontrast-calendar-button-icon-color: ButtonText; } @@ -390,7 +390,8 @@ --highcontrast-calendar-day-text-color-disabled: GrayText; --highcontrast-calendar-day-text-color-hover: ButtonText; --highcontrast-calendar-day-text-color-key-focus: ButtonText; - --highcontrast-calendar-day-text-color-selected-hover: HighlightText; + + /* --highcontrast-calendar-day-text-color-selected-hover: HighlightText; */ --highcontrast-calendar-day-text-color-selected: HighlightText; --highcontrast-calendar-day-title-text-color: CanvasText; --highcontrast-calendar-day-today-background-color-selected-hover: Highlight; diff --git a/components/calendar/metadata/metadata.json b/components/calendar/metadata/metadata.json index 374c1e745b..1c8191a961 100644 --- a/components/calendar/metadata/metadata.json +++ b/components/calendar/metadata/metadata.json @@ -201,7 +201,6 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-calendar-button-icon-color", - "--highcontrast-calendar-button-icon-color-disabled", "--highcontrast-calendar-day-background-color-cap-selected", "--highcontrast-calendar-day-background-color-down", "--highcontrast-calendar-day-background-color-hover", @@ -214,7 +213,6 @@ "--highcontrast-calendar-day-text-color-hover", "--highcontrast-calendar-day-text-color-key-focus", "--highcontrast-calendar-day-text-color-selected", - "--highcontrast-calendar-day-text-color-selected-hover", "--highcontrast-calendar-day-title-text-color", "--highcontrast-calendar-day-today-background-color-selected-hover", "--highcontrast-calendar-day-today-border-color", diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css index 17c5f469d5..db2096fa66 100644 --- a/components/combobox/themes/spectrum-two.css +++ b/components/combobox/themes/spectrum-two.css @@ -103,24 +103,24 @@ &.spectrum-Combobox--quiet { --spectrum-combobox-minimum-width-multiplier: var(--spectrum-combo-box-quiet-minimum-width-multiplier); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); + --mod-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); + --mod-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); &, &.spectrum-Combobox--sizeM { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); + --mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); } &.spectrum-Combobox--sizeS { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); + --mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); } &.spectrum-Combobox--sizeL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large); + --mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large); } &.spectrum-Combobox--sizeXL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); + --mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); } } } diff --git a/components/datepicker/index.css b/components/datepicker/index.css index aa7960e012..4b3f5a7616 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -22,9 +22,8 @@ border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)); &.is-disabled { - .spectrum-DatePicker-rangeDash { - color: var(--highcontrast-datepicker-dash-color-disabled, var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled))); - } + --highcontrast-datepicker-dash-color: var(--highcontrast-datepicker-dash-color-disabled); + --mod-datepicker-dash-color: var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled)); } &.is-invalid { @@ -33,20 +32,23 @@ --mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet)); /* @passthrough end */ } -} -.spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled) { - /* @passthrough -- ensures picker button border color matches the textfield border color */ - --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color))); + &:not(.spectrum-DatePicker--quiet, .is-disabled) { + /* @passthrough -- ensures picker button border color matches the textfield border color */ + --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color))); - &.is-invalid { - /* @passthrough */ - --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid))); + &.is-invalid { + /* @passthrough start */ + --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid))); + --mod-textfield-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid))); + --mod-textfield-border-color-hover: var(--mod-textfield-border-color); + /* @passthrough end */ + } } } /* input padding inline end */ -/* standard and range */ +/* standard and range */ .spectrum-DatePicker-input { padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end)); @@ -55,15 +57,14 @@ inline-size: 100%; &.spectrum-DatePicker-startField { + --mod-datepicker-padding-inline: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding)); + border-inline-end: 0; border-start-end-radius: 0; border-end-end-radius: 0; - padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding)); } &.spectrum-DatePicker-endField { - padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end)); - border-inline-start: 0; border-start-start-radius: 0; border-end-start-radius: 0; @@ -71,7 +72,6 @@ } } -/* standard and range invalid */ .spectrum-DatePicker-button { /* Be above textfield so box shadow shines through */ position: absolute; @@ -80,7 +80,7 @@ /* quiet */ .spectrum-DatePicker--quiet { - border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); + --mod-datepicker-border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); .spectrum-DatePicker-input { padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); @@ -91,46 +91,39 @@ } } - /* quiet invalid and quiet range invalid */ - .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) { - padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet)); - } - .spectrum-DatePicker-button { inline-size: auto; inset-inline-end: calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset))); - &:disabled, - &:disabled:hover { - border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled)); + &:disabled { + --mod-picker-button-border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled)); } &:disabled:not(.is-open) { - .spectrum-PickerButton-fill { - border-color: transparent; - } + --mod-picker-button-border-color: transparent; } &:not(:disabled, .is-open) { - .spectrum-PickerButton-fill { - background-color: transparent; - } + --mod-picker-button-background-color: transparent; } } - &:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) { - .spectrum-DatePicker-input, - .spectrum-DatePicker-button { - border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover)); + &.is-invalid { + /* invalid bottom border color */ + --mod-picker-button-border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color))); + --mod-textfield-border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color))); + --mod-textfield-border-color-hover: var(--mod-textfield-border-color); + + /* quiet invalid and quiet range invalid */ + .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) { + padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet)); } } - /* invalid bottom border color */ - &.is-invalid { - .spectrum-DatePicker-input, - .spectrum-DatePicker-button { - border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color))); - } + &:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid):hover { + --mod-picker-button-border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover)); + --mod-textfield-border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover)); + --mod-textfield-border-color-hover: var(--mod-textfield-border-color); } } @@ -151,30 +144,32 @@ border-color var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out; } - &.is-keyboardFocused:not(.spectrum-DatePicker--quiet) { - &::after { - box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); - } + &.is-keyboardFocused { + &:not(.spectrum-DatePicker--quiet) { + &::after { + box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); + } - .spectrum-DatePicker-textfield::after { - display: none; + .spectrum-DatePicker-textfield::after { + display: none; + } } - } - &.is-keyboardFocused.spectrum-DatePicker--quiet { - /* quiet variant bottom border focus indicator */ - &::after { - margin: 0; - box-shadow: none; - border-radius: 0; - border-block-end: var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); - inset-block-end: calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap))); + &.spectrum-DatePicker--quiet { + /* quiet variant bottom border focus indicator */ + &::after { + margin: 0; + box-shadow: none; + border-radius: 0; + border-block-end: var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); + inset-block-end: calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap))); + } } } /* Input Group */ &.spectrum-DatePicker--quiet { - border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); + --mod-datepicker-border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); .spectrum-DatePicker-textfield { min-inline-size: 0; diff --git a/components/datepicker/metadata/metadata.json b/components/datepicker/metadata/metadata.json index d8eb3c2aec..b4938e8c48 100644 --- a/components/datepicker/metadata/metadata.json +++ b/components/datepicker/metadata/metadata.json @@ -3,18 +3,15 @@ "selectors": [ ".spectrum-DatePicker", ".spectrum-DatePicker--quiet", - ".spectrum-DatePicker--quiet .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)", ".spectrum-DatePicker--quiet .spectrum-DatePicker-button", ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled", - ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:hover", - ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:not(.is-open) .spectrum-PickerButton-fill", - ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open) .spectrum-PickerButton-fill", + ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:not(.is-open)", + ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open)", ".spectrum-DatePicker--quiet .spectrum-DatePicker-input", ".spectrum-DatePicker--quiet .spectrum-DatePicker-input.spectrum-DatePicker-endField", - ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-button", - ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input", - ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) .spectrum-DatePicker-button", - ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) .spectrum-DatePicker-input", + ".spectrum-DatePicker--quiet.is-invalid", + ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)", + ".spectrum-DatePicker--quiet:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid):hover", ".spectrum-DatePicker--range", ".spectrum-DatePicker--range .spectrum-DatePicker-textfield", ".spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type", @@ -35,7 +32,7 @@ ".spectrum-DatePicker-input.spectrum-DatePicker-startField", ".spectrum-DatePicker-rangeDash", ".spectrum-DatePicker-rangeDash:before", - ".spectrum-DatePicker.is-disabled .spectrum-DatePicker-rangeDash", + ".spectrum-DatePicker.is-disabled", ".spectrum-DatePicker.is-invalid", ".spectrum-DatePicker.is-invalid:not(.spectrum-DatePicker--quiet, .is-disabled)", ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)" @@ -97,7 +94,6 @@ "--spectrum-datepicker-focus-thickness", "--spectrum-datepicker-generic-padding", "--spectrum-datepicker-icon-size", - "--spectrum-datepicker-icon-to-button", "--spectrum-datepicker-icon-to-text", "--spectrum-datepicker-initial-height", "--spectrum-datepicker-initial-width", @@ -166,7 +162,6 @@ "--system-date-picker-focus-ring-width", "--system-date-picker-focus-thickness", "--system-date-picker-icon-size", - "--system-date-picker-icon-to-button", "--system-date-picker-icon-to-text", "--system-date-picker-initial-height", "--system-date-picker-input-width", @@ -190,7 +185,10 @@ "--system-date-picker-range-input-width-quiet-first" ], "passthroughs": [ + "--mod-picker-button-background-color", "--mod-picker-button-border-color", + "--mod-textfield-border-color", + "--mod-textfield-border-color-hover", "--mod-textfield-icon-spacing-inline-end-invalid", "--mod-textfield-icon-spacing-inline-end-quiet-invalid" ], diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index 5b60505789..6edb1ae083 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -105,7 +105,6 @@ Quiet.parameters = { }; export const Range = Template.bind({}); -Range.tags = ["!dev"]; Range.args = { lastDay: 3, isRange: true, diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index a6d4909d85..8425f1b702 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -76,15 +76,16 @@ export const DatePicker = ({ size: "m", isQuiet, isDisabled, - isInvalid, isReadOnly, + isInvalid, customClasses: [`${rootClass}-textfield`], customInputClasses: [`${rootClass}-input`, `${rootClass}-endField`], placeholder: "Choose a date", name: "field", - value: lastDay - ? new Date(lastDay).toLocaleDateString(lang) - : undefined, + value: lastDay ? new Date(lastDay).toLocaleDateString(lang) : undefined, + onclick: function () { + if (!isOpen) updateArgs({ isOpen: true }); + }, }, context))} ${PickerButton({ customClasses: [`${rootClass}-button`], diff --git a/components/datepicker/themes/spectrum-two.css b/components/datepicker/themes/spectrum-two.css index 313ee6a18f..644227c50e 100644 --- a/components/datepicker/themes/spectrum-two.css +++ b/components/datepicker/themes/spectrum-two.css @@ -27,7 +27,6 @@ --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100)); --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset)); --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100); - --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100); --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100); /* focus */ @@ -67,7 +66,7 @@ /* padding inline end */ --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2)); --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)); - --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2)); + --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-text-to-visual-100) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2)); --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)); } } diff --git a/components/dial/metadata/metadata.json b/components/dial/metadata/metadata.json index bf988a1c51..7f5f4459a7 100644 --- a/components/dial/metadata/metadata.json +++ b/components/dial/metadata/metadata.json @@ -4,7 +4,6 @@ ".js-focus-within .spectrum-Dial-handle[focus-within]", ".js-focus-within .spectrum-Dial-handle[focus-within]:after", ".spectrum-Dial", - ".spectrum-Dial--small", ".spectrum-Dial-controls", ".spectrum-Dial-controls:after", ".spectrum-Dial-controls:before", @@ -35,6 +34,7 @@ ".spectrum-Dial.is-disabled .spectrum-Dial-handle:after", ".spectrum-Dial.is-disabled .spectrum-Dial-handle:before", ".spectrum-Dial.is-disabled .spectrum-Dial-labelContainer", + ".spectrum-Dial.spectrum-Dial--small", ".u-isGrabbing", ".u-isGrabbing .spectrum-Dial .spectrum-Dial-label", ".u-isGrabbing .spectrum-Dial .spectrum-Dial-value" diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css index 5debb640d0..b7c0e75235 100644 --- a/components/dial/themes/spectrum-two.css +++ b/components/dial/themes/spectrum-two.css @@ -57,10 +57,10 @@ --spectrum-dial-handle-border-size: var(--spectrum-border-width-200); --spectrum-dial-label-text-size: var(--spectrum-font-size-75); --spectrum-dial-label-line-height: var(--spectrum-line-height-200); - } - .spectrum-Dial--small { - --spectrum-dial-width: 24px; - --spectrum-dial-height: 24px; + &.spectrum-Dial--small { + --spectrum-dial-width: 24px; + --spectrum-dial-height: 24px; + } } } diff --git a/components/divider/index.css b/components/divider/index.css index 320acb45d4..7455082948 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -32,37 +32,38 @@ border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); background-color: var(--mod-divider-background-color, var(--spectrum-divider-background-color)); -} -/* static white variant colors */ -.spectrum-Divider--staticWhite { - &, - &.spectrum-Divider--sizeM { - --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white)); - } - &.spectrum-Divider--sizeS { - --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white)); - } + /* static white variant colors */ + &.spectrum-Divider--staticWhite { + &, + &.spectrum-Divider--sizeM { + --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white)); + } - &.spectrum-Divider--sizeL { - --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white)); - } -} + &.spectrum-Divider--sizeS { + --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white)); + } -/* static black variant colors */ -.spectrum-Divider--staticBlack { - &, - &.spectrum-Divider--sizeM { - --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black)); + &.spectrum-Divider--sizeL { + --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white)); + } } - &.spectrum-Divider--sizeS { - --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black)); - } + /* static black variant colors */ + &.spectrum-Divider--staticBlack { + &, + &.spectrum-Divider--sizeM { + --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black)); + } + + &.spectrum-Divider--sizeS { + --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black)); + } - &.spectrum-Divider--sizeL { - --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black)); + &.spectrum-Divider--sizeL { + --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black)); + } } } diff --git a/components/divider/metadata/metadata.json b/components/divider/metadata/metadata.json index 010cee60cd..b0e344c161 100644 --- a/components/divider/metadata/metadata.json +++ b/components/divider/metadata/metadata.json @@ -2,18 +2,18 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Divider", - ".spectrum-Divider--staticBlack", - ".spectrum-Divider--staticBlack.spectrum-Divider--sizeL", - ".spectrum-Divider--staticBlack.spectrum-Divider--sizeM", - ".spectrum-Divider--staticBlack.spectrum-Divider--sizeS", - ".spectrum-Divider--staticWhite", - ".spectrum-Divider--staticWhite.spectrum-Divider--sizeL", - ".spectrum-Divider--staticWhite.spectrum-Divider--sizeM", - ".spectrum-Divider--staticWhite.spectrum-Divider--sizeS", ".spectrum-Divider--vertical", ".spectrum-Divider.spectrum-Divider--sizeL", ".spectrum-Divider.spectrum-Divider--sizeM", - ".spectrum-Divider.spectrum-Divider--sizeS" + ".spectrum-Divider.spectrum-Divider--sizeS", + ".spectrum-Divider.spectrum-Divider--staticBlack", + ".spectrum-Divider.spectrum-Divider--staticBlack.spectrum-Divider--sizeL", + ".spectrum-Divider.spectrum-Divider--staticBlack.spectrum-Divider--sizeM", + ".spectrum-Divider.spectrum-Divider--staticBlack.spectrum-Divider--sizeS", + ".spectrum-Divider.spectrum-Divider--staticWhite", + ".spectrum-Divider.spectrum-Divider--staticWhite.spectrum-Divider--sizeL", + ".spectrum-Divider.spectrum-Divider--staticWhite.spectrum-Divider--sizeM", + ".spectrum-Divider.spectrum-Divider--staticWhite.spectrum-Divider--sizeS" ], "modifiers": [ "--mod-divider-background-color", diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index 88f3039b3e..dd87a487d1 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -43,7 +43,7 @@ /********* Disabled state *********/ &.is-disabled, &.is-disabled .spectrum-FieldLabel-requiredIcon { - --mod-fieldlabel-color: var(--highcontrast-field-label-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-field-label-disabled-content-color))); + --mod-fieldlabel-color: var(--highcontrast-field-label-disabled-content-color, var(--mod-disabled-content-color, var(--mod-field-label-content-color-disabled, var(--spectrum-field-label-disabled-content-color)))); } } diff --git a/components/fieldlabel/metadata/metadata.json b/components/fieldlabel/metadata/metadata.json index 581a2f8426..d27d456e52 100644 --- a/components/fieldlabel/metadata/metadata.json +++ b/components/fieldlabel/metadata/metadata.json @@ -19,6 +19,7 @@ "--mod-disabled-content-color", "--mod-field-label-asterisk-vertical-align", "--mod-field-label-bottom-to-text", + "--mod-field-label-content-color-disabled", "--mod-field-label-text-to-asterisk", "--mod-field-label-top-to-text", "--mod-fieldlabel-color", diff --git a/components/fieldlabel/metadata/mods.md b/components/fieldlabel/metadata/mods.md index b7fb79c638..9c29021509 100644 --- a/components/fieldlabel/metadata/mods.md +++ b/components/fieldlabel/metadata/mods.md @@ -3,6 +3,7 @@ | `--mod-disabled-content-color` | | `--mod-field-label-asterisk-vertical-align` | | `--mod-field-label-bottom-to-text` | +| `--mod-field-label-content-color-disabled` | | `--mod-field-label-text-to-asterisk` | | `--mod-field-label-top-to-text` | | `--mod-fieldlabel-color` | diff --git a/components/floatingactionbutton/metadata/metadata.json b/components/floatingactionbutton/metadata/metadata.json index 68175288ef..cd40ed1530 100644 --- a/components/floatingactionbutton/metadata/metadata.json +++ b/components/floatingactionbutton/metadata/metadata.json @@ -2,7 +2,7 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-FloatingActionButton", - ".spectrum-FloatingActionButton--secondary", + ".spectrum-FloatingActionButton.spectrum-FloatingActionButton--secondary", ".spectrum-FloatingActionButton:active", ".spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon", ".spectrum-FloatingActionButton:after", diff --git a/components/floatingactionbutton/themes/spectrum-two.css b/components/floatingactionbutton/themes/spectrum-two.css index 59a0892c7d..9108c6cda6 100644 --- a/components/floatingactionbutton/themes/spectrum-two.css +++ b/components/floatingactionbutton/themes/spectrum-two.css @@ -31,16 +31,16 @@ --spectrum-floating-action-button-icon-color-hover: var(--spectrum-white); --spectrum-floating-action-button-icon-color-down: var(--spectrum-white); --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white); - } - .spectrum-FloatingActionButton--secondary { - --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + &.spectrum-FloatingActionButton--secondary { + --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + } } } diff --git a/components/helptext/index.css b/components/helptext/index.css index bb692d9633..9a76f58057 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -16,7 +16,6 @@ @media (forced-colors: active) { .spectrum-HelpText { --highcontrast-helptext-content-color-default: CanvasText; - --highcontrast-helptext-icon-color-default: CanvasText; &, .spectrum-HelpText-validationIcon, @@ -34,7 +33,15 @@ font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --mod-helptext-line-height: var(--mod-helptext-line-height-cjk); + --spectrum-helptext-line-height: var(--spectrum-helptext-line-height-cjk); + } + .spectrum-HelpText-validationIcon { + color: inherit; margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon)); padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon)); @@ -44,46 +51,9 @@ } .spectrum-HelpText-text { + color: inherit; padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text)); padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height)); } - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - .spectrum-HelpText-text { - line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-helptext-line-height-cjk)); - } - } - - &.spectrum-HelpText--neutral { - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } - - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); - } - } - - &.spectrum-HelpText--negative { - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } - - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); - } - } - - &.is-disabled { - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } - - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); - } - } } diff --git a/components/helptext/metadata/metadata.json b/components/helptext/metadata/metadata.json index 2f35efb8ae..14fc1e1c78 100644 --- a/components/helptext/metadata/metadata.json +++ b/components/helptext/metadata/metadata.json @@ -5,31 +5,22 @@ ".spectrum-HelpText .spectrum-HelpText-text", ".spectrum-HelpText .spectrum-HelpText-validationIcon", ".spectrum-HelpText.is-disabled", - ".spectrum-HelpText.is-disabled .spectrum-HelpText-text", - ".spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon", - ".spectrum-HelpText.spectrum-HelpText--negative", - ".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text", - ".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon", - ".spectrum-HelpText.spectrum-HelpText--neutral", - ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text", - ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon", + ".spectrum-HelpText.spectrum-HelpText--negative:not(.is-disabled)", + ".spectrum-HelpText.spectrum-HelpText--neutral:not(.is-disabled)", ".spectrum-HelpText.spectrum-HelpText--sizeL", ".spectrum-HelpText.spectrum-HelpText--sizeM", ".spectrum-HelpText.spectrum-HelpText--sizeS", ".spectrum-HelpText.spectrum-HelpText--sizeXL", ".spectrum-HelpText:lang(ja)", - ".spectrum-HelpText:lang(ja) .spectrum-HelpText-text", ".spectrum-HelpText:lang(ko)", - ".spectrum-HelpText:lang(ko) .spectrum-HelpText-text", ".spectrum-HelpText:lang(zh)", - ".spectrum-HelpText:lang(zh) .spectrum-HelpText-text" + ".spectrum-HelpText:not(.is-disabled)" ], "modifiers": [ "--mod-helptext-bottom-to-text", "--mod-helptext-bottom-to-workflow-icon", "--mod-helptext-content-color-default", "--mod-helptext-font-size", - "--mod-helptext-icon-color-default", "--mod-helptext-icon-size", "--mod-helptext-line-height", "--mod-helptext-line-height-cjk", @@ -46,9 +37,7 @@ "--spectrum-helptext-bottom-to-text", "--spectrum-helptext-bottom-to-workflow-icon", "--spectrum-helptext-content-color-default", - "--spectrum-helptext-disabled-content-color", "--spectrum-helptext-font-size", - "--spectrum-helptext-icon-color-default", "--spectrum-helptext-icon-size", "--spectrum-helptext-line-height", "--spectrum-helptext-line-height-cjk", @@ -85,22 +74,17 @@ ], "system-theme": [ "--system-help-text-bottom-to-text", - "--system-help-text-content-color-default", - "--system-help-text-disabled-content-color", "--system-help-text-disabled-content-color-default", - "--system-help-text-disabled-icon-color-default", "--system-help-text-font-size", - "--system-help-text-icon-color-default", "--system-help-text-icon-size", "--system-help-text-lang-ja-line-height-cjk", "--system-help-text-lang-ko-line-height-cjk", "--system-help-text-lang-zh-line-height-cjk", "--system-help-text-line-height", "--system-help-text-min-height", - "--system-help-text-negative-content-color-default", - "--system-help-text-negative-icon-color-default", - "--system-help-text-neutral-content-color-default", - "--system-help-text-neutral-icon-color-default", + "--system-help-text-negative-not-disabled-content-color-default", + "--system-help-text-neutral-not-disabled-content-color-default", + "--system-help-text-not-disabled-content-color-default", "--system-help-text-size-l-bottom-to-text", "--system-help-text-size-l-font-size", "--system-help-text-size-l-icon-size", @@ -134,8 +118,5 @@ "--system-help-text-top-to-workflow-icon" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" - ] + "high-contrast": ["--highcontrast-helptext-content-color-default"] } diff --git a/components/helptext/metadata/mods.md b/components/helptext/metadata/mods.md index 41d2f53905..bcaca53bcf 100644 --- a/components/helptext/metadata/mods.md +++ b/components/helptext/metadata/mods.md @@ -4,7 +4,6 @@ | `--mod-helptext-bottom-to-workflow-icon` | | `--mod-helptext-content-color-default` | | `--mod-helptext-font-size` | -| `--mod-helptext-icon-color-default` | | `--mod-helptext-icon-size` | | `--mod-helptext-line-height` | | `--mod-helptext-line-height-cjk` | diff --git a/components/helptext/themes/spectrum-two.css b/components/helptext/themes/spectrum-two.css index 7bd6433480..1ca5ba86a9 100644 --- a/components/helptext/themes/spectrum-two.css +++ b/components/helptext/themes/spectrum-two.css @@ -14,23 +14,18 @@ @container style(--system: spectrum) { .spectrum-HelpText { --spectrum-helptext-line-height: var(--spectrum-line-height-100); - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color); - &.spectrum-HelpText--neutral { - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + &.is-disabled { + --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); } - &.spectrum-HelpText--negative { - --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); - --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); + &:not(.is-disabled), + &:not(.is-disabled).spectrum-HelpText--neutral { + --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); } - &.is-disabled { - --spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color); - --spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color); + &:not(.is-disabled).spectrum-HelpText--negative { + --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); } &:lang(ja), diff --git a/components/meter/metadata/metadata.json b/components/meter/metadata/metadata.json index 914673fcc2..a29a88233e 100644 --- a/components/meter/metadata/metadata.json +++ b/components/meter/metadata/metadata.json @@ -2,11 +2,11 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Meter", - ".spectrum-Meter--sizeL", - ".spectrum-Meter--sizeS", ".spectrum-Meter.is-negative", ".spectrum-Meter.is-notice", - ".spectrum-Meter.is-positive" + ".spectrum-Meter.is-positive", + ".spectrum-Meter.spectrum-Meter--sizeL", + ".spectrum-Meter.spectrum-Meter--sizeS" ], "modifiers": [ "--mod-meter-fill-color-negative", diff --git a/components/meter/themes/spectrum-two.css b/components/meter/themes/spectrum-two.css index 965d40fedf..75c27c9176 100644 --- a/components/meter/themes/spectrum-two.css +++ b/components/meter/themes/spectrum-two.css @@ -19,21 +19,21 @@ --spectrum-meter-fill-color-positive: var(--spectrum-positive-visual-color); --spectrum-meter-fill-color-notice: var(--spectrum-notice-visual-color); --spectrum-meter-fill-color-negative: var(--spectrum-negative-visual-color); - } - /* Meter only supports size S and L (default) */ - .spectrum-Meter, - .spectrum-Meter--sizeL { - --spectrum-meter-thickness: var(--spectrum-meter-thickness-large); - --spectrum-meter-inline-size: var(--spectrum-progressbar-size-2500); - --spectrum-meter-font-size: var(--spectrum-font-size-100); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text-200); - } + /* Meter only supports size S and L (default) */ + &, + &.spectrum-Meter--sizeL { + --spectrum-meter-thickness: var(--spectrum-meter-thickness-large); + --spectrum-meter-inline-size: var(--spectrum-progressbar-size-2500); + --spectrum-meter-font-size: var(--spectrum-font-size-100); + --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text-200); + } - .spectrum-Meter--sizeS { - --spectrum-meter-thickness: var(--spectrum-meter-thickness-small); - --spectrum-meter-inline-size: var(--spectrum-progressbar-size-2400); - --spectrum-meter-font-size: var(--spectrum-font-size-75); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text-75); + &.spectrum-Meter--sizeS { + --spectrum-meter-thickness: var(--spectrum-meter-thickness-small); + --spectrum-meter-inline-size: var(--spectrum-progressbar-size-2400); + --spectrum-meter-font-size: var(--spectrum-font-size-75); + --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text-75); + } } } diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json index bdcfe7a68c..dfbe28dddd 100644 --- a/components/picker/metadata/metadata.json +++ b/components/picker/metadata/metadata.json @@ -20,12 +20,6 @@ ".spectrum-Picker--quiet:focus-visible:after", ".spectrum-Picker--quiet:hover", ".spectrum-Picker--sideLabel", - ".spectrum-Picker--sizeL", - ".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open", - ".spectrum-Picker--sizeS", - ".spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open", - ".spectrum-Picker--sizeXL", - ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open", ".spectrum-Picker-label", ".spectrum-Picker-label ~ .spectrum-Picker-menuIcon", ".spectrum-Picker-label.is-placeholder", @@ -60,6 +54,12 @@ ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon", ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label", ".spectrum-Picker.is-placeholder:focus-visible", + ".spectrum-Picker.spectrum-Picker--sizeL", + ".spectrum-Picker.spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker.spectrum-Picker--sizeS", + ".spectrum-Picker.spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker.spectrum-Picker--sizeXL", + ".spectrum-Picker.spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open", ".spectrum-Picker::-moz-focus-inner", ".spectrum-Picker:active", ".spectrum-Picker:active:after", diff --git a/components/picker/themes/spectrum-two.css b/components/picker/themes/spectrum-two.css index e05a16e0ce..70f51f301d 100644 --- a/components/picker/themes/spectrum-two.css +++ b/components/picker/themes/spectrum-two.css @@ -59,10 +59,6 @@ --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); - } - /* animation */ --spectrum-picker-animation-duration: var(--spectrum-animation-duration-100); @@ -98,65 +94,69 @@ --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); - } - - .spectrum-Picker--sizeS { - --spectrum-picker-font-size: var(--spectrum-font-size-75); - --spectrum-picker-block-size: var(--spectrum-component-height-75); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); } - } - - .spectrum-Picker--sizeL { - --spectrum-picker-font-size: var(--spectrum-font-size-200); - --spectrum-picker-block-size: var(--spectrum-component-height-200); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); + &.spectrum-Picker--sizeS { + --spectrum-picker-font-size: var(--spectrum-font-size-75); + --spectrum-picker-block-size: var(--spectrum-component-height-75); + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); + } } - } - .spectrum-Picker--sizeXL { - --spectrum-picker-font-size: var(--spectrum-font-size-300); - --spectrum-picker-block-size: var(--spectrum-component-height-300); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); + &.spectrum-Picker--sizeL { + --spectrum-picker-font-size: var(--spectrum-font-size-200); + --spectrum-picker-block-size: var(--spectrum-component-height-200); + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); + } + } - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); + &.spectrum-Picker--sizeXL { + --spectrum-picker-font-size: var(--spectrum-font-size-300); + --spectrum-picker-block-size: var(--spectrum-component-height-300); + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); + } } } } diff --git a/components/radio/index.css b/components/radio/index.css index 6d65410ad9..34b10d5994 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -56,10 +56,8 @@ --highcontrast-radio-focus-indicator-color: CanvasText; /* ensure focus ring is visible if user agent has non-accessible system overrides */ - .spectrum-Radio-button { - &::after { - forced-color-adjust: none; - } + .spectrum-Radio-button::after { + forced-color-adjust: none; } } } @@ -145,41 +143,6 @@ } } -.spectrum-Radio--emphasized { - /* selection indicator emphasized */ - .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))); - } - - /* selection indicator emphasized hover */ - &:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))); - } - - /* selection indicator emphasized active */ - &:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))); - } - - /* selection indicator emphasized focus */ - &:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))); - } -} - -/* Disabled state */ -.spectrum-Radio .spectrum-Radio-input:disabled, -.spectrum-Radio .spectrum-Radio-input:checked:disabled { - /* selection indicator */ - & + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))); - } - - & ~ .spectrum-Radio-label { - color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))); - } -} - .spectrum-Radio-input { /* Change the font styles in all browsers for input. */ font-family: inherit; @@ -212,24 +175,33 @@ } /* selection indicator checked */ - &:checked + .spectrum-Radio-button { - &::before { - /* half of element width minus half of indicator width is checked border width */ - border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2)); - border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default))); - } + &:checked + .spectrum-Radio-button::before { + /* half of element width minus half of indicator width is checked border width */ + border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2)); + border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default))); } /* focused state */ - &:focus-visible { - + .spectrum-Radio-button::after { - border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); - border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); - border-style: solid; + &:focus-visible + .spectrum-Radio-button::after { + border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); + border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); + border-style: solid; - inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); - block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); - } + inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); + block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); + } +} + +/* Disabled state */ +.spectrum-Radio .spectrum-Radio-input:disabled, +.spectrum-Radio .spectrum-Radio-input:checked:disabled { + /* selection indicator */ + & + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))); + } + + & ~ .spectrum-Radio-label { + color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))); } } @@ -311,3 +283,25 @@ } } } + +.spectrum-Radio--emphasized { + /* selection indicator emphasized */ + .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))); + } + + /* selection indicator emphasized hover */ + &:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))); + } + + /* selection indicator emphasized active */ + &:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))); + } + + /* selection indicator emphasized focus */ + &:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))); + } +} diff --git a/components/radio/metadata/metadata.json b/components/radio/metadata/metadata.json index 2a534273f0..02b81b1042 100644 --- a/components/radio/metadata/metadata.json +++ b/components/radio/metadata/metadata.json @@ -7,15 +7,10 @@ ".spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label", ".spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before", ".spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label", - ".spectrum-Radio--emphasized", ".spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before", - ".spectrum-Radio--sizeL", - ".spectrum-Radio--sizeM", - ".spectrum-Radio--sizeS", - ".spectrum-Radio--sizeXL", ".spectrum-Radio-button", ".spectrum-Radio-button:after", ".spectrum-Radio-button:before", @@ -31,6 +26,11 @@ ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-label", + ".spectrum-Radio.spectrum-Radio--emphasized", + ".spectrum-Radio.spectrum-Radio--sizeL", + ".spectrum-Radio.spectrum-Radio--sizeM", + ".spectrum-Radio.spectrum-Radio--sizeS", + ".spectrum-Radio.spectrum-Radio--sizeXL", ".spectrum-Radio:active .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-label", diff --git a/components/radio/themes/spectrum-two.css b/components/radio/themes/spectrum-two.css index 4fc174dc04..bec5aab44b 100644 --- a/components/radio/themes/spectrum-two.css +++ b/components/radio/themes/spectrum-two.css @@ -62,61 +62,61 @@ &:lang(ko) { --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); } - } - .spectrum-Radio, - .spectrum-Radio--sizeM { - --spectrum-radio-height: var(--spectrum-component-height-100); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + &, + &.spectrum-Radio--sizeM { + --spectrum-radio-height: var(--spectrum-component-height-100); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --spectrum-radio-font-size: var(--spectrum-font-size-100); - } + --spectrum-radio-font-size: var(--spectrum-font-size-100); + } - .spectrum-Radio--sizeS { - --spectrum-radio-height: var(--spectrum-component-height-75); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small); + &.spectrum-Radio--sizeS { + --spectrum-radio-height: var(--spectrum-component-height-75); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); - --spectrum-radio-font-size: var(--spectrum-font-size-75); - } + --spectrum-radio-font-size: var(--spectrum-font-size-75); + } - .spectrum-Radio--sizeL { - --spectrum-radio-height: var(--spectrum-component-height-200); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large); + &.spectrum-Radio--sizeL { + --spectrum-radio-height: var(--spectrum-component-height-200); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); - --spectrum-radio-font-size: var(--spectrum-font-size-200); - } + --spectrum-radio-font-size: var(--spectrum-font-size-200); + } - .spectrum-Radio--sizeXL { - --spectrum-radio-height: var(--spectrum-component-height-300); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large); + &.spectrum-Radio--sizeXL { + --spectrum-radio-height: var(--spectrum-component-height-300); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); - --spectrum-radio-font-size: var(--spectrum-font-size-300); - } + --spectrum-radio-font-size: var(--spectrum-font-size-300); + } - .spectrum-Radio--emphasized { - --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900); - --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000); - --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100); - --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000); + &.spectrum-Radio--emphasized { + --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900); + --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000); + } } } diff --git a/components/sidenav/index.css b/components/sidenav/index.css index f1295f9f19..3fe0f6b084 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -17,7 +17,7 @@ /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ .spectrum-SideNav { .spectrum-Icon { - forced-color-adjust: preserve-parent-color; /* stylelint-disable-line declaration-property-value-no-unknown */ + forced-color-adjust: preserve-parent-color; } } diff --git a/components/statuslight/metadata/metadata.json b/components/statuslight/metadata/metadata.json index 28fc2976ca..8d3c1b0199 100644 --- a/components/statuslight/metadata/metadata.json +++ b/components/statuslight/metadata/metadata.json @@ -22,11 +22,11 @@ ".spectrum-StatusLight--purple:before", ".spectrum-StatusLight--red:before", ".spectrum-StatusLight--seafoam:before", - ".spectrum-StatusLight--sizeL", - ".spectrum-StatusLight--sizeM", - ".spectrum-StatusLight--sizeS", - ".spectrum-StatusLight--sizeXL", ".spectrum-StatusLight--yellow:before", + ".spectrum-StatusLight.spectrum-StatusLight--sizeL", + ".spectrum-StatusLight.spectrum-StatusLight--sizeM", + ".spectrum-StatusLight.spectrum-StatusLight--sizeS", + ".spectrum-StatusLight.spectrum-StatusLight--sizeXL", ".spectrum-StatusLight:before", ".spectrum-StatusLight:lang(ja)", ".spectrum-StatusLight:lang(ko)", diff --git a/components/statuslight/themes/spectrum-two.css b/components/statuslight/themes/spectrum-two.css index b3bbd94bdd..ff1b828741 100644 --- a/components/statuslight/themes/spectrum-two.css +++ b/components/statuslight/themes/spectrum-two.css @@ -45,54 +45,54 @@ --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color); --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); - } - .spectrum-StatusLight, - .spectrum-StatusLight--sizeM { - --spectrum-statuslight-height: var(--spectrum-component-height-100); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); + &, + &.spectrum-StatusLight--sizeM { + --spectrum-statuslight-height: var(--spectrum-component-height-100); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); - --spectrum-statuslight-font-size: var(--spectrum-font-size-100); + --spectrum-statuslight-font-size: var(--spectrum-font-size-100); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); - } + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + } - .spectrum-StatusLight--sizeS { - --spectrum-statuslight-height: var(--spectrum-component-height-75); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small); + &.spectrum-StatusLight--sizeS { + --spectrum-statuslight-height: var(--spectrum-component-height-75); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small); - --spectrum-statuslight-font-size: var(--spectrum-font-size-75); + --spectrum-statuslight-font-size: var(--spectrum-font-size-75); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); - } + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); + } - .spectrum-StatusLight--sizeL { - --spectrum-statuslight-height: var(--spectrum-component-height-200); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large); + &.spectrum-StatusLight--sizeL { + --spectrum-statuslight-height: var(--spectrum-component-height-200); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large); - --spectrum-statuslight-font-size: var(--spectrum-font-size-200); + --spectrum-statuslight-font-size: var(--spectrum-font-size-200); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); - } + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); + } - .spectrum-StatusLight--sizeXL { - --spectrum-statuslight-height: var(--spectrum-component-height-300); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large); + &.spectrum-StatusLight--sizeXL { + --spectrum-statuslight-height: var(--spectrum-component-height-300); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large); - --spectrum-statuslight-font-size: var(--spectrum-font-size-300); + --spectrum-statuslight-font-size: var(--spectrum-font-size-300); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); + } } } diff --git a/components/stepper/index.css b/components/stepper/index.css index 23819f756e..52c08648a8 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -132,12 +132,12 @@ } &.is-disabled { - --mod-stepper-border-color: var(--spectrum-stepper-button-border-color-disabled); - --mod-stepper-border-color-hover: var(--spectrum-stepper-button-border-color-disabled); - --mod-stepper-border-color-focus: var(--spectrum-stepper-button-border-color-disabled); - --mod-stepper-border-color-focus-hover: var(--spectrum-stepper-button-border-color-disabled); - --mod-stepper-border-color-keyboard-focus: var(--spectrum-stepper-button-border-color-disabled); - --mod-stepper-buttons-background-color: var(--spectrum-stepper-buttons-background-color-disabled); + --spectrum-stepper-border-color: var(--spectrum-stepper-button-border-color-disabled); + --spectrum-stepper-border-color-hover: var(--spectrum-stepper-button-border-color-disabled); + --spectrum-stepper-border-color-focus: var(--spectrum-stepper-button-border-color-disabled); + --spectrum-stepper-border-color-focus-hover: var(--spectrum-stepper-button-border-color-disabled); + --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-stepper-button-border-color-disabled); + --spectrum-stepper-buttons-background-color: var(--spectrum-stepper-buttons-background-color-disabled); /* @passthrough start */ --mod-infield-button-border-width: var(--spectrum-stepper-button-border-width-disabled); @@ -153,13 +153,14 @@ border-inline-end-width: 0; } - /* stylelint-disable-next-line selector-class-pattern -- hide-stepper is a legacy class name */ + /* stylelint-disable selector-class-pattern -- hide-stepper is a legacy class name */ .spectrum-Stepper-textfield:not(:has(+ .spectrum-Stepper-buttons)) .spectrum-Stepper-input, &.hide-stepper .spectrum-Stepper-input { border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); } + /* stylelint-enable selector-class-pattern */ /* container for stepUp and stepDown buttons */ .spectrum-Stepper-buttons { @@ -252,10 +253,14 @@ --highcontrast-stepper-border-color-focus: Highlight; --highcontrast-stepper-border-color-focus-hover: Highlight; --highcontrast-stepper-border-color-keyboard-focus: CanvasText; + + /* --highcontrast-stepper-button-background-color-default: Canvas; --highcontrast-stepper-button-background-color-hover: Canvas; --highcontrast-stepper-button-background-color-focus: Canvas; --highcontrast-stepper-button-background-color-keyboard-focus: Canvas; + */ + --highcontrast-stepper-focus-indicator-color: Highlight; &.is-invalid { @@ -264,13 +269,15 @@ --highcontrast-stepper-border-color-focus: Highlight; --highcontrast-stepper-border-color-focus-hover: Highlight; --highcontrast-stepper-border-color-keyboard-focus: Highlight; + /* @passthrough */ --highcontrast-infield-button-border-color: Highlight; } &.is-disabled { --highcontrast-stepper-border-color: GrayText; - --highcontrast-infield-button-border-color: GrayText; --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + /* @passthrough */ + --highcontrast-infield-button-border-color: GrayText; } } } diff --git a/components/stepper/metadata/metadata.json b/components/stepper/metadata/metadata.json index 40ab315063..ed3b1ff5cb 100644 --- a/components/stepper/metadata/metadata.json +++ b/components/stepper/metadata/metadata.json @@ -119,10 +119,10 @@ "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-corner-radius-100", + "--spectrum-disabled-border-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", - "--spectrum-gray-100", "--spectrum-gray-25", "--spectrum-gray-50", "--spectrum-gray-500", @@ -205,10 +205,6 @@ "--highcontrast-stepper-border-color-focus-hover", "--highcontrast-stepper-border-color-hover", "--highcontrast-stepper-border-color-keyboard-focus", - "--highcontrast-stepper-button-background-color-default", - "--highcontrast-stepper-button-background-color-focus", - "--highcontrast-stepper-button-background-color-hover", - "--highcontrast-stepper-button-background-color-keyboard-focus", "--highcontrast-stepper-buttons-background-color", "--highcontrast-stepper-buttons-border-width", "--highcontrast-stepper-focus-indicator-color" diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index e53e5c51e1..bcfcabe98f 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -34,8 +34,6 @@ --spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); --spectrum-stepper-button-border-width: 0; - --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400); - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); /** Invalid **/ --spectrum-stepper-border-color-invalid: transparent; diff --git a/components/stepper/themes/spectrum-two.css b/components/stepper/themes/spectrum-two.css index 0dedcfb49a..ac2191e09a 100644 --- a/components/stepper/themes/spectrum-two.css +++ b/components/stepper/themes/spectrum-two.css @@ -48,7 +48,7 @@ --spectrum-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); /** Disabled **/ - --spectrum-stepper-button-border-color-disabled: var(--spectrum-gray-100); + --spectrum-stepper-button-border-color-disabled: var(--spectrum-disabled-border-color); --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100); --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index 504e6243d2..5714cf3d93 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -17,7 +17,6 @@ @container (--system: legacy) { .spectrum-Stepper { - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); --spectrum-stepper-button-border-color-disabled: var(--spectrum-gray-200); --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-100); diff --git a/components/table/index.css b/components/table/index.css index b1b7ae5019..ad90a3f114 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -25,12 +25,14 @@ --highcontrast-table-selected-row-background-color: Highlight; --highcontrast-table-selected-row-text-color: HighlightText; - --highcontrast-table-selected-row-text-color-default: HighlightText; + + /* --highcontrast-table-selected-row-text-color-default: HighlightText; */ @supports (color: SelectedItem) { --highcontrast-table-selected-row-background-color: SelectedItem; --highcontrast-table-selected-row-text-color: SelectedItemText; - --highcontrast-table-selected-row-text-color-default: SelectedItemText; + + /* --highcontrast-table-selected-row-text-color-default: SelectedItemText; */ } --highcontrast-table-selected-row-background-color-focus: Highlight; diff --git a/components/table/metadata/metadata.json b/components/table/metadata/metadata.json index 7ff52cc4bb..078c1ce2f3 100644 --- a/components/table/metadata/metadata.json +++ b/components/table/metadata/metadata.json @@ -3,18 +3,9 @@ "selectors": [ ".spectrum-Table", ".spectrum-Table--compact", - ".spectrum-Table--compact.spectrum-Table--sizeL", - ".spectrum-Table--compact.spectrum-Table--sizeS", - ".spectrum-Table--compact.spectrum-Table--sizeXL", ".spectrum-Table--emphasized", ".spectrum-Table--quiet", - ".spectrum-Table--sizeL", - ".spectrum-Table--sizeS", - ".spectrum-Table--sizeXL", ".spectrum-Table--spacious", - ".spectrum-Table--spacious.spectrum-Table--sizeL", - ".spectrum-Table--spacious.spectrum-Table--sizeS", - ".spectrum-Table--spacious.spectrum-Table--sizeXL", ".spectrum-Table-body", ".spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child", ".spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child", @@ -120,6 +111,19 @@ ".spectrum-Table-thumbnailInner", ".spectrum-Table-thumbnailInner .spectrum-Table-thumbnailContent", ".spectrum-Table-thumbnailInner .spectrum-Thumbnail", + ".spectrum-Table.spectrum-Table--compact", + ".spectrum-Table.spectrum-Table--compact.spectrum-Table--sizeL", + ".spectrum-Table.spectrum-Table--compact.spectrum-Table--sizeS", + ".spectrum-Table.spectrum-Table--compact.spectrum-Table--sizeXL", + ".spectrum-Table.spectrum-Table--emphasized", + ".spectrum-Table.spectrum-Table--quiet", + ".spectrum-Table.spectrum-Table--sizeL", + ".spectrum-Table.spectrum-Table--sizeS", + ".spectrum-Table.spectrum-Table--sizeXL", + ".spectrum-Table.spectrum-Table--spacious", + ".spectrum-Table.spectrum-Table--spacious.spectrum-Table--sizeL", + ".spectrum-Table.spectrum-Table--spacious.spectrum-Table--sizeS", + ".spectrum-Table.spectrum-Table--spacious.spectrum-Table--sizeXL", ".spectrum-Table:dir(rtl)", ".spectrum-Table:not(.spectrum-Table-scroller)", "[dir=\"rtl\"] .spectrum-Table" @@ -617,7 +621,6 @@ "--highcontrast-table-selected-row-background-color", "--highcontrast-table-selected-row-background-color-focus", "--highcontrast-table-selected-row-text-color", - "--highcontrast-table-selected-row-text-color-default", "--highcontrast-table-selected-row-text-color-focus", "--highcontrast-table-transition-duration" ] diff --git a/components/table/themes/spectrum-two.css b/components/table/themes/spectrum-two.css index 960b9bfed0..b2ccc8efc8 100644 --- a/components/table/themes/spectrum-two.css +++ b/components/table/themes/spectrum-two.css @@ -106,227 +106,227 @@ --spectrum-table-cell-background-color: var(--spectrum-table-row-background-color); --spectrum-table-selected-cell-background-color: var(--spectrum-table-selected-row-background-color-non-emphasized); --spectrum-table-selected-cell-background-color-focus: var(--spectrum-table-selected-row-background-color-non-emphasized-focus); - } - - /********* T-SHIRT SIZES (Regular Density) *********/ - .spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-100); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); - - --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-75); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); - - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); - - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75); - - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); - } - - .spectrum-Table--sizeL { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-200); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); - - --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200); - - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-200); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); - - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); - - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200); - - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); - } - - .spectrum-Table--sizeXL { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-300); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); - - --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300); - - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-300); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); - - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300); - - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); - } - - /********* VARIANTS *********/ - .spectrum-Table--compact { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-compact); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-compact); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-compact); + /********* T-SHIRT SIZES (Regular Density) *********/ + &.spectrum-Table--sizeS { + /* Size and Spacing */ + --spectrum-table-min-header-height: var(--spectrum-component-height-100); + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-compact); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-compact); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - &.spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-compact); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-compact); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-compact); + /* Typography */ + --spectrum-table-row-font-size: var(--spectrum-font-size-75); /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-compact); + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); + + /* Summary Row and Section Header Row */ + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-compact); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-50); + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75); + + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); } &.spectrum-Table--sizeL { /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-compact); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-compact); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-compact); + --spectrum-table-min-header-height: var(--spectrum-component-height-200); + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-compact); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-compact); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - } + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200); - &.spectrum-Table--sizeXL { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-compact); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-compact); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-compact); + /* Typography */ + --spectrum-table-row-font-size: var(--spectrum-font-size-200); /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-compact); + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); + + /* Summary Row and Section Header Row */ + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact); + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200); + + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200); --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); } - } - .spectrum-Table--spacious { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-spacious); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-spacious); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-spacious); + &.spectrum-Table--sizeXL { + /* Size and Spacing */ + --spectrum-table-min-header-height: var(--spectrum-component-height-300); + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-spacious); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300); - &.spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-spacious); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-spacious); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-spacious); + /* Typography */ + --spectrum-table-row-font-size: var(--spectrum-font-size-300); /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-spacious); + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); + + /* Summary Row and Section Header Row */ + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-spacious); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300); + + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); } - &.spectrum-Table--sizeL { + /********* VARIANTS *********/ + &.spectrum-Table--compact { /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-spacious); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-spacious); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-spacious); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-compact); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-compact); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-compact); /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-spacious); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-compact); /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-spacious); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-compact); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); + + &.spectrum-Table--sizeS { + /* Size and Spacing */ + --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-compact); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-compact); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-compact); + + /* Row Selection */ + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-compact); + + /* Collapsible and Thumbnails */ + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-compact); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-50); + } + + &.spectrum-Table--sizeL { + /* Size and Spacing */ + --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-compact); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-compact); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-compact); + + /* Row Selection */ + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-compact); + + /* Collapsible and Thumbnails */ + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-compact); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + } + + &.spectrum-Table--sizeXL { + /* Size and Spacing */ + --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-compact); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-compact); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-compact); + + /* Row Selection */ + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-compact); + + /* Collapsible and Thumbnails */ + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); + } } - &.spectrum-Table--sizeXL { + &.spectrum-Table--spacious { /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-spacious); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-spacious); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-spacious); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-spacious); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-spacious); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-spacious); /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-spacious); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-spacious); /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-800); + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); + + &.spectrum-Table--sizeS { + /* Size and Spacing */ + --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-spacious); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-spacious); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-spacious); + + /* Row Selection */ + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-spacious); + + /* Collapsible and Thumbnails */ + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-spacious); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + } + + &.spectrum-Table--sizeL { + /* Size and Spacing */ + --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-spacious); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-spacious); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-spacious); + + /* Row Selection */ + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-spacious); + + /* Collapsible and Thumbnails */ + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-spacious); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); + } + + &.spectrum-Table--sizeXL { + /* Size and Spacing */ + --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-spacious); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-spacious); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-spacious); + + /* Row Selection */ + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-spacious); + + /* Collapsible and Thumbnails */ + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-800); + } } - } - .spectrum-Table--emphasized { - --spectrum-table-selected-cell-background-color: var(--spectrum-table-selected-row-background-color); - --spectrum-table-selected-cell-background-color-focus: var(--spectrum-table-selected-row-background-color-focus); - } + &.spectrum-Table--emphasized { + --spectrum-table-selected-cell-background-color: var(--spectrum-table-selected-row-background-color); + --spectrum-table-selected-cell-background-color-focus: var(--spectrum-table-selected-row-background-color-focus); + } - .spectrum-Table--quiet { - --spectrum-table-border-radius: 0px; - --spectrum-table-outer-border-inline-width: 0px; - --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); - --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); + &.spectrum-Table--quiet { + --spectrum-table-border-radius: 0px; + --spectrum-table-outer-border-inline-width: 0px; + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); + --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); + } } } diff --git a/components/table/themes/spectrum.css b/components/table/themes/spectrum.css index f0ac6a68db..ce8b3627eb 100644 --- a/components/table/themes/spectrum.css +++ b/components/table/themes/spectrum.css @@ -25,10 +25,10 @@ --spectrum-table-section-header-background-color: var(--spectrum-gray-200); --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus); --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover); - } - .spectrum-Table--quiet { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); - --spectrum-table-row-background-color: var(--spectrum-transparent-white-100); + &.spectrum-Table--quiet { + --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); + --spectrum-table-row-background-color: var(--spectrum-transparent-white-100); + } } } diff --git a/components/textfield/index.css b/components/textfield/index.css index e1f889aff4..871364db85 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -15,8 +15,13 @@ /********* TEXT FIELD and TEXT AREA Outer Wrapper *********/ .spectrum-Textfield { - /* line height */ --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); + --spectrum-textfield-spacing-inline-default: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + + /* @passthrough start */ + --mod-fieldlabel-margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block)); + --mod-disabled-content-color: var(--spectrum-textfield-text-color-disabled); + /* @passthrough end */ position: relative; text-overflow: ellipsis; @@ -36,36 +41,38 @@ /* Firefox and Safari - Remove the margin for input. */ margin: 0; - &.spectrum-Textfield--quiet { - &::after { - content: ""; - pointer-events: none; - position: absolute; - inset-block-end: calc(-1 * (var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)))); - inset-inline-start: 0; - inline-size: 100%; - block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)); - } + /*** Input Valid ✅ ***/ + &.is-valid { + --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-valid); + --mod-textfield-text-color-default: var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid)); + --mod-textfield-spacing-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + } - &.is-keyboardFocused { - &::after { - background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); - } - } + /*** Input Invalid ⛔️ ***/ + &.is-invalid { + --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-default); + --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)); - /*** Quiet Input Invalid ⚠️ ***/ - &.is-invalid { - .spectrum-Textfield-input { - padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid))); - } - } + --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-invalid); + --mod-textfield-text-color-default: var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid)); + } - /*** Quiet Input Valid ✅ ***/ - &.is-valid { - .spectrum-Textfield-input { - padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid))); - } - } + &:last-of-type:has(.is-invalid) &, + &:only-of-type:has(.is-invalid) & { + --mod-textfield-spacing-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + } + + /********* Child Component - Label *********/ + .spectrum-FieldLabel { + grid-row: 1; + grid-column: 1 / span 1; + } + + /********* Child Component - Help Text *********/ + .spectrum-HelpText { + margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block)); + grid-row: 3; + grid-column: 1 / span 2; } } @@ -124,32 +131,6 @@ } } -/********* Child Component - Label *********/ -.spectrum-FieldLabel { - .spectrum-Textfield & { - margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block)); - grid-row: 1; - grid-column: 1 / span 1; - } - - .spectrum-Textfield--quiet & { - margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet)); - } - - .is-disabled & { - color: var(--spectrum-textfield-text-color-disabled); - } -} - -/********* Child Component - Help Text *********/ -.spectrum-HelpText { - .spectrum-Textfield & { - margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block)); - grid-row: 3; - grid-column: 1 / span 2; - } -} - /********* Child Element - Character Count *********/ .spectrum-Textfield-characterCount { display: inline-flex; @@ -165,10 +146,6 @@ grid-column: 2 / span 1; grid-row: 1; padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2); - - .spectrum-Textfield--quiet & { - margin-block-end: var(--mod-textfield-character-count-spacing-block-quiet, var(--spectrum-textfield-character-count-spacing-block-quiet)); - } } /********* Child Element - Input *********/ @@ -181,10 +158,11 @@ min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width)); block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); - padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + padding-block-start: var(--mod-textfield-spacing-block-start, calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)))); + padding-block-end: var(--mod-textfield-spacing-block-end, calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)))); - padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + padding-inline-start: var(--mod-textfield-spacing-inline-start, var(--spectrum-textfield-spacing-inline-default)); + padding-inline-end: var(--mod-textfield-spacing-inline-end, var(--spectrum-textfield-spacing-inline-default)); vertical-align: top; /* used to align them correctly in forms. */ outline: none; @@ -248,152 +226,163 @@ } /* hover */ - .spectrum-Textfield:hover &, - &:hover { - border-color: var(--highcontrast-textfield-border-color-hover, var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))); - color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))); + .spectrum-Textfield:not(.is-disabled, .is-readOnly):hover &, + .spectrum-Textfield:not(.is-disabled, .is-readOnly) &:hover { + --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-hover); + --mod-textfield-border-color: var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover)); - &::placeholder { - color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))); - } + --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-hover); + --mod-textfield-text-color-default: var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)); } /* mouse focus */ - .is-focused &, - &:focus { - border-color: var(--highcontrast-textfield-border-color-focus, var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))); - color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); + .spectrum-Textfield:not(.is-disabled, .is-readOnly).is-focused &, + .spectrum-Textfield:not(.is-disabled, .is-readOnly) &:focus { + --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-focus); + --mod-textfield-border-color: var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus)); - &::placeholder { - color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); - } + --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-focus); + --mod-textfield-text-color-default: var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus)); /* focus hover */ &:hover { - border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))); - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); - } + --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-focus-hover); + --mod-textfield-border-color: var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover)); - &:hover::placeholder { - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-focus-hover); + --mod-textfield-text-color-default: var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)); } } /* keyboard focus */ - .is-keyboardFocused & { - border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))); - color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); + .spectrum-Textfield:not(.is-disabled, .is-readOnly).is-keyboardFocused &, + .spectrum-Textfield:not(.is-disabled, .is-readOnly) &:focus-visible { + --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-keyboard-focus); + --mod-textfield-border-color: var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus)); + + --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-keyboard-focus); + --mod-textfield-text-color-default: var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)); /* focus indicator is focused state */ outline-width: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)); outline-style: solid; outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)); - - &::placeholder { - color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); - } - } - - /*** Input Valid ✅ ***/ - .is-valid & { - padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))); - } - - /*** Input Invalid ⚠️ ***/ - .is-invalid & { - padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - color: var(--highcontrast-textfield-text-color-invalid, var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))); - border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))); } /* Invalid hover */ - .is-invalid:hover:not(.is-disabled) &, - .is-invalid &:hover:not(.is-disabled) { - border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))); + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):hover &, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:hover { + --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-hover); + --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover)); } /* Invalid mouse focus */ - .is-invalid.is-focused &, - .is-invalid:focus &, - .is-invalid &:focus { - border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))); + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly).is-focused &, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus &, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:focus { + --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-focus); + --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus)); + } - /* focus hover */ - &:hover { - border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))); - } + /* Invalid mouse focus + hover */ + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly).is-focused:hover &, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus:hover &, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):hover &:focus, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly).is-focused &:hover, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus &:hover, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:focus:hover { + --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover); + --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover)); } - /* invalid keyboard focus */ - .is-invalid.is-keyboardFocused &, - .is-invalid &:focus-visible { - border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))); + /* Invalid keyboard focus */ + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly).is-keyboardFocused &, + .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:focus-visible { + --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus); + --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus)); } /****** Input Disabled 🚫 ******/ .spectrum-Textfield.is-disabled &, - .spectrum-Textfield.is-disabled:hover &, &:disabled { - background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled)); - border-color: transparent; - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-disabled); + --mod-textfield-text-color-default: var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)); + --mod-textfield-border-color: transparent; + --mod-textfield-background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled)); /* Disable the resize functionality when disabled */ resize: none; /* The opacity must be set to 1 */ opacity: 1; + } + + /****** Input ReadOnly ******/ + .spectrum-Textfield.is-readOnly &, + &:read-only { + --mod-textfield-border-color: transparent; + --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-readonly); + --mod-textfield-text-color-default: var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)); + + outline: none; + &, &::placeholder { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + background-color: transparent; } } +} - /****** Input - Quiet 🤫 ******/ - .spectrum-Textfield--quiet & { - outline: none; - border-block-start-width: 0; - border-inline-width: 0; +.spectrum-Textfield--quiet { + --mod-fieldlabel-margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet)); + --mod-textfield-background-color-disabled: transparent; + --mod-textfield-spacing-block-start: var(--spectrum-textfield-spacing-block-start); + --mod-textfield-spacing-block-end: var(--mod-textfield-spacing-block-quiet, var(--spectrum-textfield-spacing-block-quiet)); - margin-block-end: var(--mod-textfield-spacing-block-quiet, var(--spectrum-textfield-spacing-block-quiet)); - padding-block-start: var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)); - padding-inline: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet)); - background-color: transparent; - border-radius: 0; + --mod-textfield-spacing-inline-start: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet)); + --mod-textfield-spacing-inline-end: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet)); + --mod-textfield-background-color: transparent; + --mod-textfield-corner-radius: 0; + --mod-textfield-border-color-disabled: var(--spectrum-textfield-border-color-disabled); - /* Treat all quiet inputs and text areas the same */ - resize: none; - overflow-y: hidden; + &::after { + content: ""; + pointer-events: none; + position: absolute; + inset-block-end: calc(-1 * (var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)))); + inset-inline-start: 0; + inline-size: 100%; + block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)); } - /****** Input - Quiet 🤫 + Disabled 🚫 ******/ - .spectrum-Textfield--quiet.is-disabled &, - .spectrum-Textfield--quiet.is-disabled:hover &, - &:disabled { - background-color: transparent; - border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled)); - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + &.is-keyboardFocused::after { + background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); + } - &::placeholder { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); - } + /*** Quiet Input Invalid ⚠️ ***/ + &.is-invalid { + --mod-textfield-spacing-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid))); } - /****** Input ReadOnly ******/ - .spectrum-Textfield.is-readOnly &, - .spectrum-Textfield.is-readOnly:hover &, - &:read-only { - background-color: transparent; - border-color: transparent; - color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); - outline: none; + /*** Quiet Input Valid ✅ ***/ + &.is-valid { + --mod-textfield-spacing-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid))); + } - &::placeholder { - color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); - background-color: transparent; - } + .spectrum-Textfield-characterCount { + margin-block-end: var(--mod-textfield-character-count-spacing-block-quiet, var(--spectrum-textfield-character-count-spacing-block-quiet)); + } + + /****** Input - Quiet 🤫 ******/ + .spectrum-Textfield-input { + /* outline: none; */ + border-block-start-width: 0; + border-inline-width: 0; + + /* Treat all quiet inputs and text areas the same */ + resize: none; + overflow-y: hidden; } } diff --git a/components/textfield/metadata/metadata.json b/components/textfield/metadata/metadata.json index 5596b52ef0..ca5191a220 100644 --- a/components/textfield/metadata/metadata.json +++ b/components/textfield/metadata/metadata.json @@ -1,25 +1,6 @@ { "sourceFile": "index.css", "selectors": [ - ".is-disabled .spectrum-FieldLabel", - ".is-focused .spectrum-Textfield-input", - ".is-focused .spectrum-Textfield-input::placeholder", - ".is-focused .spectrum-Textfield-input:hover", - ".is-focused .spectrum-Textfield-input:hover::placeholder", - ".is-invalid .spectrum-Textfield-input", - ".is-invalid .spectrum-Textfield-input:focus", - ".is-invalid .spectrum-Textfield-input:focus-visible", - ".is-invalid .spectrum-Textfield-input:focus:hover", - ".is-invalid .spectrum-Textfield-input:hover:not(.is-disabled)", - ".is-invalid.is-focused .spectrum-Textfield-input", - ".is-invalid.is-focused .spectrum-Textfield-input:hover", - ".is-invalid.is-keyboardFocused .spectrum-Textfield-input", - ".is-invalid:focus .spectrum-Textfield-input", - ".is-invalid:focus .spectrum-Textfield-input:hover", - ".is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input", - ".is-keyboardFocused .spectrum-Textfield-input", - ".is-keyboardFocused .spectrum-Textfield-input::placeholder", - ".is-valid .spectrum-Textfield-input", ".spectrum-Textfield", ".spectrum-Textfield .spectrum-FieldLabel", ".spectrum-Textfield .spectrum-HelpText", @@ -30,16 +11,16 @@ ".spectrum-Textfield--multiline.spectrum-Textfield--grows .spectrum-Textfield-input", ".spectrum-Textfield--multiline.spectrum-Textfield--grows.spectrum-Textfield--sideLabel .spectrum-Textfield-input", ".spectrum-Textfield--multiline.spectrum-Textfield--quiet .spectrum-Textfield-input", - ".spectrum-Textfield--quiet .spectrum-FieldLabel", + ".spectrum-Textfield--quiet", ".spectrum-Textfield--quiet .spectrum-Textfield-characterCount", ".spectrum-Textfield--quiet .spectrum-Textfield-input", ".spectrum-Textfield--quiet .spectrum-Textfield-validationIcon", - ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input", - ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder", - ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input", - ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield--quiet.is-invalid", ".spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon", + ".spectrum-Textfield--quiet.is-keyboardFocused:after", + ".spectrum-Textfield--quiet.is-valid", ".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon", + ".spectrum-Textfield--quiet:after", ".spectrum-Textfield--sideLabel", ".spectrum-Textfield--sideLabel .spectrum-FieldLabel", ".spectrum-Textfield--sideLabel .spectrum-HelpText", @@ -52,13 +33,6 @@ ".spectrum-Textfield-input:-moz-ui-invalid", ".spectrum-Textfield-input::placeholder", ".spectrum-Textfield-input:disabled", - ".spectrum-Textfield-input:disabled::placeholder", - ".spectrum-Textfield-input:focus", - ".spectrum-Textfield-input:focus::placeholder", - ".spectrum-Textfield-input:focus:hover", - ".spectrum-Textfield-input:focus:hover::placeholder", - ".spectrum-Textfield-input:hover", - ".spectrum-Textfield-input:hover::placeholder", ".spectrum-Textfield-input:lang(ja)::placeholder", ".spectrum-Textfield-input:lang(ko)::placeholder", ".spectrum-Textfield-input:lang(zh)::placeholder", @@ -68,30 +42,45 @@ ".spectrum-Textfield-input[type=\"number\"]::-webkit-inner-spin-button", ".spectrum-Textfield-input[type=\"number\"]::-webkit-outer-spin-button", ".spectrum-Textfield.is-disabled .spectrum-Textfield-input", - ".spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input", - ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-focused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input", + ".spectrum-Textfield.is-focused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover", + ".spectrum-Textfield.is-invalid", ".spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon", + ".spectrum-Textfield.is-invalid.is-focused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid.is-focused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover", + ".spectrum-Textfield.is-invalid.is-focused:not(.is-disabled, .is-readOnly):hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus-visible", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus:hover", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus .spectrum-Textfield-input:hover", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus:hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):hover .spectrum-Textfield-input:focus", + ".spectrum-Textfield.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-input", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input", - ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield.is-valid", ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input", - ".spectrum-Textfield.spectrum-Textfield--quiet.is-keyboardFocused:after", - ".spectrum-Textfield.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input", - ".spectrum-Textfield.spectrum-Textfield--quiet:after", ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", ".spectrum-Textfield.spectrum-Textfield--sizeL", ".spectrum-Textfield.spectrum-Textfield--sizeM", ".spectrum-Textfield.spectrum-Textfield--sizeS", ".spectrum-Textfield.spectrum-Textfield--sizeXL", - ".spectrum-Textfield:hover .spectrum-Textfield-input", - ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" + ".spectrum-Textfield:last-of-type:has(.is-invalid) .spectrum-Textfield", + ".spectrum-Textfield:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus", + ".spectrum-Textfield:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus-visible", + ".spectrum-Textfield:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus:hover", + ".spectrum-Textfield:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover", + ".spectrum-Textfield:not(.is-disabled, .is-readOnly):hover .spectrum-Textfield-input", + ".spectrum-Textfield:only-of-type:has(.is-invalid) .spectrum-Textfield" ], "modifiers": [ + "--mod-disabled-content-color", "--mod-texfield-animation-duration", "--mod-text-area-min-block-size", "--mod-text-area-min-block-size-quiet", @@ -147,7 +136,9 @@ "--mod-textfield-spacing-block-quiet", "--mod-textfield-spacing-block-start", "--mod-textfield-spacing-inline", + "--mod-textfield-spacing-inline-end", "--mod-textfield-spacing-inline-quiet", + "--mod-textfield-spacing-inline-start", "--mod-textfield-text-color-default", "--mod-textfield-text-color-disabled", "--mod-textfield-text-color-focus", @@ -213,6 +204,7 @@ "--spectrum-textfield-spacing-block-quiet", "--spectrum-textfield-spacing-block-start", "--spectrum-textfield-spacing-inline", + "--spectrum-textfield-spacing-inline-default", "--spectrum-textfield-spacing-inline-quiet", "--spectrum-textfield-text-color-default", "--spectrum-textfield-text-color-disabled", @@ -469,7 +461,7 @@ "--system-textfield-text-color-valid", "--system-textfield-width" ], - "passthroughs": [], + "passthroughs": ["--mod-fieldlabel-margin-block-end"], "high-contrast": [ "--highcontrast-textfield-border-color", "--highcontrast-textfield-border-color-focus", diff --git a/components/textfield/metadata/mods.md b/components/textfield/metadata/mods.md index 246f118f70..76d22d973e 100644 --- a/components/textfield/metadata/mods.md +++ b/components/textfield/metadata/mods.md @@ -1,5 +1,6 @@ | Modifiable custom properties | | ------------------------------------------------------- | +| `--mod-disabled-content-color` | | `--mod-texfield-animation-duration` | | `--mod-text-area-min-block-size` | | `--mod-text-area-min-block-size-quiet` | @@ -55,7 +56,9 @@ | `--mod-textfield-spacing-block-quiet` | | `--mod-textfield-spacing-block-start` | | `--mod-textfield-spacing-inline` | +| `--mod-textfield-spacing-inline-end` | | `--mod-textfield-spacing-inline-quiet` | +| `--mod-textfield-spacing-inline-start` | | `--mod-textfield-text-color-default` | | `--mod-textfield-text-color-disabled` | | `--mod-textfield-text-color-focus` | diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index ea9d22f909..5f20b0abb8 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -151,6 +151,7 @@ export const Template = ({ ${when(displayLabel, () => FieldLabel({ size, label: labelText, + isDisabled, }, context))} ${when(typeof characterCount !== "undefined", () => html` ${characterCount}`)} diff --git a/components/thumbnail/metadata/metadata.json b/components/thumbnail/metadata/metadata.json index 2279d03895..aa6a8a0240 100644 --- a/components/thumbnail/metadata/metadata.json +++ b/components/thumbnail/metadata/metadata.json @@ -3,18 +3,6 @@ "selectors": [ ".spectrum-Thumbnail", ".spectrum-Thumbnail--cover .spectrum-Thumbnail-image", - ".spectrum-Thumbnail--size100", - ".spectrum-Thumbnail--size1000", - ".spectrum-Thumbnail--size200", - ".spectrum-Thumbnail--size300", - ".spectrum-Thumbnail--size400", - ".spectrum-Thumbnail--size50", - ".spectrum-Thumbnail--size500", - ".spectrum-Thumbnail--size600", - ".spectrum-Thumbnail--size700", - ".spectrum-Thumbnail--size75", - ".spectrum-Thumbnail--size800", - ".spectrum-Thumbnail--size900", ".spectrum-Thumbnail-background", ".spectrum-Thumbnail-image", ".spectrum-Thumbnail-image-wrapper", @@ -26,6 +14,18 @@ ".spectrum-Thumbnail.is-focused", ".spectrum-Thumbnail.is-focused .spectrum-Thumbnail-image-wrapper", ".spectrum-Thumbnail.is-focused:after", + ".spectrum-Thumbnail.spectrum-Thumbnail--size100", + ".spectrum-Thumbnail.spectrum-Thumbnail--size1000", + ".spectrum-Thumbnail.spectrum-Thumbnail--size200", + ".spectrum-Thumbnail.spectrum-Thumbnail--size300", + ".spectrum-Thumbnail.spectrum-Thumbnail--size400", + ".spectrum-Thumbnail.spectrum-Thumbnail--size50", + ".spectrum-Thumbnail.spectrum-Thumbnail--size500", + ".spectrum-Thumbnail.spectrum-Thumbnail--size600", + ".spectrum-Thumbnail.spectrum-Thumbnail--size700", + ".spectrum-Thumbnail.spectrum-Thumbnail--size75", + ".spectrum-Thumbnail.spectrum-Thumbnail--size800", + ".spectrum-Thumbnail.spectrum-Thumbnail--size900", ".spectrum-Thumbnail:before" ], "modifiers": [ diff --git a/components/thumbnail/themes/spectrum-two.css b/components/thumbnail/themes/spectrum-two.css index be05fe4f65..c6cc2a78b3 100644 --- a/components/thumbnail/themes/spectrum-two.css +++ b/components/thumbnail/themes/spectrum-two.css @@ -13,8 +13,6 @@ @container style(--system: spectrum) { .spectrum-Thumbnail { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); - --spectrum-thumbnail-border-radius: 2px; --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); @@ -33,53 +31,54 @@ --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); - } - .spectrum-Thumbnail--size50 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); - } + &.spectrum-Thumbnail--size50 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); + } - .spectrum-Thumbnail--size75 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); - } + &.spectrum-Thumbnail--size75 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); + } - .spectrum-Thumbnail--size100 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); - } + &.spectrum-Thumbnail--size100 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); + } - .spectrum-Thumbnail--size200 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); - } + &.spectrum-Thumbnail--size200 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); + } - .spectrum-Thumbnail--size300 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); - } + &.spectrum-Thumbnail--size300 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); + } - .spectrum-Thumbnail--size400 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); - } + &.spectrum-Thumbnail--size400 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); + } - .spectrum-Thumbnail--size500 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); - } + &, + &.spectrum-Thumbnail--size500 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); + } - .spectrum-Thumbnail--size600 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); - } + &.spectrum-Thumbnail--size600 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); + } - .spectrum-Thumbnail--size700 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); - } + &.spectrum-Thumbnail--size700 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); + } - .spectrum-Thumbnail--size800 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); - } + &.spectrum-Thumbnail--size800 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); + } - .spectrum-Thumbnail--size900 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); - } + &.spectrum-Thumbnail--size900 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); + } - .spectrum-Thumbnail--size1000 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); + &.spectrum-Thumbnail--size1000 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); + } } } diff --git a/components/treeview/metadata/metadata.json b/components/treeview/metadata/metadata.json index a04957c695..ad31093014 100644 --- a/components/treeview/metadata/metadata.json +++ b/components/treeview/metadata/metadata.json @@ -45,6 +45,7 @@ ".spectrum-TreeView-itemLink:hover:before", ".spectrum-TreeView-section > .spectrum-TreeView", ".spectrum-TreeView-section:not(:first-child)", + ".spectrum-TreeView.spectrum-TreeView--detached", ".spectrum-TreeView.spectrum-TreeView--sizeL", ".spectrum-TreeView.spectrum-TreeView--sizeM", ".spectrum-TreeView.spectrum-TreeView--sizeS", diff --git a/components/treeview/themes/spectrum-two.css b/components/treeview/themes/spectrum-two.css index b6f8eeed32..c58407b263 100644 --- a/components/treeview/themes/spectrum-two.css +++ b/components/treeview/themes/spectrum-two.css @@ -107,9 +107,9 @@ --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px; } - } - .spectrum-TreeView--detached { - --spectrum-treeview-item-border-radius: var(--spectrum-corner-radius-100); + &.spectrum-TreeView--detached { + --spectrum-treeview-item-border-radius: var(--spectrum-corner-radius-100); + } } } diff --git a/plugins/stylelint-theme-alignment/index.js b/plugins/stylelint-theme-alignment/index.js index 9602349933..44ca89ab62 100644 --- a/plugins/stylelint-theme-alignment/index.js +++ b/plugins/stylelint-theme-alignment/index.js @@ -11,11 +11,12 @@ */ import fs from "node:fs"; -import { relative, sep } from "node:path"; +import { basename, relative, sep } from "node:path"; import postcss from "postcss"; import valuesParser from "postcss-values-parser"; import stylelint from "stylelint"; +import { isString } from "stylelint/lib/utils/validateTypes.mjs"; const { createPlugin, @@ -34,7 +35,7 @@ const messages = ruleMessages(ruleName, { }); /** @type {import('stylelint').Plugin} */ -const ruleFunction = (enabled) => { +const ruleFunction = (enabled, options = {}) => { return (root, result) => { const validOptions = validateOptions( result, @@ -43,19 +44,29 @@ const ruleFunction = (enabled) => { actual: enabled, possible: [true], }, + { + actual: options, + possible: { + baseFilename: isString, + }, + optional: true, + }, ); if (!validOptions) return; + + const { baseFilename = "spectrum-two" } = options; + const sourceFile = root.source.input.file; const parts = sourceFile ? sourceFile.split(sep) : []; const isTheme = parts[parts.length - 2] === "themes"; const filename = parts[parts.length - 1]; - if (!isTheme || filename === "spectrum-two.css") return; + if (!isTheme || basename(filename, ".css") === baseFilename) return; - // All the parts of the source file but replace the filename with spectrum-two.css - const baseFile = [...parts.slice(0, -1), "spectrum-two.css"].join(sep); + // All the parts of the source file but replace the filename with the baseFilename + const baseFile = [...parts.slice(0, -1), `${baseFilename}.css`].join(sep); const rootPath = parts.slice(0, -2).join(sep); // If the base file doesn't exist, throw an error diff --git a/stylelint.config.js b/stylelint.config.js index b0db806e8e..0e40223fb6 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -63,8 +63,7 @@ module.exports = { true, { ignoreProperties: { - "/.+/": ["CanvasText"], - "forced-color-adjust": ["preserve-parent-color"], + "/.+/": ["CanvasText", "preserve-parent-color"], }, }, ], @@ -196,7 +195,12 @@ module.exports = { /* Validate that the legacy themes don't introduce any new selectors or custom properties */ files: ["components/*/themes/spectrum.css", "components/*/themes/express.css", "!components/*/themes/spectrum-two.css"], rules: { - "spectrum-tools/theme-alignment": true, + "spectrum-tools/theme-alignment": [ + true, + { + baseFilename: "spectrum-two", + }, + ], }, }, ],