From 497635a850074386ec8b8ddfeb0f95bd6f1aabf8 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Fri, 10 May 2024 09:47:55 -0400
Subject: [PATCH 1/2] docs(meter): use typography in storybook for heading
Use typography template in Meter storybook. Helps make sure that color
is set on this heading without coming from higher up in the DOM, and
completes code TODO item.
---
components/progressbar/stories/meter.template.js | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
index c88707fee9..cc9011016a 100644
--- a/components/progressbar/stories/meter.template.js
+++ b/components/progressbar/stories/meter.template.js
@@ -3,6 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import "../index.css";
@@ -10,9 +11,6 @@ export const Template = ({
rootClass = "spectrum-ProgressBar",
customClasses = [],
customStyles = {},
- headingStyles = {
- "text-decoration": "underline",
- },
items = [],
label = "Storage space",
value,
@@ -25,9 +23,12 @@ export const Template = ({
const meterLabel = meter.label ?? label;
const fill = meter.meterFill ?? meterFill;
- // @todo: Should the heading content render through typography?
return html`
- ${heading}
+ ${Typography({
+ semantics: "heading",
+ size: "xs",
+ content: [heading],
+ })}
Date: Thu, 9 May 2024 16:17:56 -0400
Subject: [PATCH 2/2] feat: define color property in some components
During the work to create a single entry point for PostCSS, it was
discovered that parts of several components did not define a color, and
instead relied on a color being set higher up in the DOM. This update
sets a color on some of these and adds mods where necessary.
---
.changeset/new-sheep-bathe.md | 11 +
components/datepicker/index.css | 521 +++++------
components/datepicker/metadata/mods.md | 1 +
components/radio/index.css | 794 ++++++++--------
components/slider/index.css | 1176 ++++++++++++------------
components/slider/metadata/mods.md | 1 +
components/splitview/index.css | 399 ++++----
components/splitview/metadata/mods.md | 1 +
components/treeview/index.css | 575 ++++++------
components/well/index.css | 24 +-
components/well/metadata/mods.md | 1 +
11 files changed, 1708 insertions(+), 1796 deletions(-)
create mode 100644 .changeset/new-sheep-bathe.md
diff --git a/.changeset/new-sheep-bathe.md b/.changeset/new-sheep-bathe.md
new file mode 100644
index 0000000000..51a0f3f2d9
--- /dev/null
+++ b/.changeset/new-sheep-bathe.md
@@ -0,0 +1,11 @@
+---
+"@spectrum-css/datepicker": minor
+"@spectrum-css/splitview": minor
+"@spectrum-css/treeview": minor
+"@spectrum-css/slider": minor
+"@spectrum-css/radio": minor
+"@spectrum-css/well": minor
+"@spectrum-css/progressbar": patch
+---
+
+Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM.
diff --git a/components/datepicker/index.css b/components/datepicker/index.css
index 362ce4b424..be305ceb30 100644
--- a/components/datepicker/index.css
+++ b/components/datepicker/index.css
@@ -13,302 +13,307 @@ governing permissions and limitations under the License.
@import "./themes/express.css";
.spectrum-DatePicker {
- --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-datepicker-border-radius-quiet: 0;
- --spectrum-datepicker-border-width: var(--spectrum-border-width-100);
- --spectrum-datepicker-min-width: var(--spectrum-field-width);
- --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);
-
- /* button */
- --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500);
- --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default);
- --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 */
- --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100);
- --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100);
- --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color);
- --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75);
-
- /* color */
- --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default);
- --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500);
- --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color);
-
- /* dash */
- --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100);
- --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-datepicker-range-dash-marin-inline-start: calc( -0.5 * var(--spectrum-datepicker-dash-font-size));
- --spectrum-datepicker-range-dash-padding-top: 0;
-
- /* calculating widths */
- /* todo: if we add t-shirt sizing, this will be wrong ❤️ */
- --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));
- --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height));
- --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
-
- --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding));
- --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second));
-
- --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first));
- --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
- --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width));
- --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
-
- /* 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-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
+ --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-datepicker-border-radius-quiet: 0;
+ --spectrum-datepicker-border-width: var(--spectrum-border-width-100);
+ --spectrum-datepicker-min-width: var(--spectrum-field-width);
+ --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);
+
+ /* button */
+ --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500);
+ --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default);
+ --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 */
+ --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100);
+ --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100);
+ --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color);
+ --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75);
+
+ /* color */
+ --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default);
+ --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500);
+ --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color);
+
+ /* dash */
+ --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100);
+ --spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size));
+ --spectrum-datepicker-range-dash-padding-top: 0;
+
+ /* calculating widths */
+ /* todo: if we add t-shirt sizing, this will be wrong ❤️ */
+ --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));
+ --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height));
+ --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+
+ --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding));
+ --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second));
+
+ --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first));
+ --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+ --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width));
+ --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+
+ /* 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-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
}
.spectrum-DatePicker {
- position: relative;
- display: inline-flex;
- flex-direction: row;
- flex-wrap: nowrap;
- min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width));
- 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)))
- }
- }
-
- &.is-invalid {
- --mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button));
- --mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet));
- }
+ position: relative;
+ display: inline-flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width));
+ 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)));
+ }
+ }
+
+ &.is-invalid {
+ --mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button));
+ --mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet));
+ }
}
.spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled) {
- /* 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)));
+ /* 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 {
- --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 {
+ --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)));
+ }
}
/* input padding inline end */
/* standard and range */
.spectrum-DatePicker-input {
- padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
+ padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
- &.spectrum-DatePicker-endField {
- padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
- }
+ &.spectrum-DatePicker-endField {
+ padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
+ }
}
/* standard and range invalid */
.is-invalid .spectrum-DatePicker-input {
- padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid));
+ padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid));
}
/* quiet */
.spectrum-DatePicker--quiet {
- .spectrum-DatePicker-input {
- padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
- }
-
- /* 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-input {
+ padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
+ }
+
+ /* 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));
+ }
}
/* quiet range */
.spectrum-DatePicker--quiet .spectrum-DatePicker-input {
- &.spectrum-DatePicker-endField {
- padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
- }
+ &.spectrum-DatePicker-endField {
+ padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
+ }
}
.spectrum-DatePicker-button {
- /* Be above textfield so box shadow shines through */
- position: absolute;
- inset-inline-end: 0;
+ /* Be above textfield so box shadow shines through */
+ position: absolute;
+ inset-inline-end: 0;
}
.spectrum-DatePicker--quiet {
- border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-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:not(.is-open) {
- .spectrum-PickerButton-fill {
- border-color: transparent;
- }
- }
-
- &:not(:disabled, .is-open) {
- .spectrum-PickerButton-fill {
- 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));
- }
- }
-
- /* 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)));
- }
- }
+ border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-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:not(.is-open) {
+ .spectrum-PickerButton-fill {
+ border-color: transparent;
+ }
+ }
+
+ &:not(:disabled, .is-open) {
+ .spectrum-PickerButton-fill {
+ 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));
+ }
+ }
+
+ /* 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)));
+ }
+ }
}
.spectrum-DatePicker--range {
- border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
-
- /* focus-ring */
- &::after {
- pointer-events: none;
- content: '';
- position: absolute;
- inset: 0;
- margin: calc(var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)) * -1);
- border-radius: calc(var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)) + var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)));
- border-color: transparent;
- transition: box-shadow var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out, 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)));
- }
-
- .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)));
- }
- }
-
- /* Input Group */
- &.spectrum-DatePicker--quiet {
- border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
-
- .spectrum-DatePicker-textfield {
- min-inline-size: 0;
- inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet));
-
- &:first-of-type {
- inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first));
- }
- }
- }
-
- /* Datetime Range */
- &.spectrum-DatePicker--datetimeRange {
- /* Inputs */
- .spectrum-DatePicker-textfield {
- inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width));
- min-inline-size: 0;
-
- &:first-of-type {
- inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first));
- }
- }
-
- &.spectrum-DatePicker--quiet {
- .spectrum-DatePicker-textfield {
- inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width));
-
- &:first-of-type {
- inline-size: var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first));
- }
- }
- }
- }
-
- /* Inputs */
- .spectrum-DatePicker-textfield {
- flex: initial;
- min-inline-size: 0;
- inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width));
-
- &:first-of-type {
- inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first));
- }
- }
+ border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
+
+ /* focus-ring */
+ &::after {
+ pointer-events: none;
+ content: "";
+ position: absolute;
+ inset: 0;
+ margin: calc(var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)) * -1);
+ border-radius: calc(var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)) + var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)));
+ border-color: transparent;
+ transition:
+ box-shadow var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out,
+ 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)));
+ }
+
+ .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)));
+ }
+ }
+
+ /* Input Group */
+ &.spectrum-DatePicker--quiet {
+ border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
+
+ .spectrum-DatePicker-textfield {
+ min-inline-size: 0;
+ inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet));
+
+ &:first-of-type {
+ inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first));
+ }
+ }
+ }
+
+ /* Datetime Range */
+ &.spectrum-DatePicker--datetimeRange {
+ /* Inputs */
+ .spectrum-DatePicker-textfield {
+ inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width));
+ min-inline-size: 0;
+
+ &:first-of-type {
+ inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first));
+ }
+ }
+
+ &.spectrum-DatePicker--quiet {
+ .spectrum-DatePicker-textfield {
+ inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width));
+
+ &:first-of-type {
+ inline-size: var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first));
+ }
+ }
+ }
+ }
+
+ /* Inputs */
+ .spectrum-DatePicker-textfield {
+ flex: initial;
+ min-inline-size: 0;
+ inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width));
+
+ &:first-of-type {
+ inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first));
+ }
+ }
}
- .spectrum-DatePicker-input {
- /* fill space */
- flex: 1;
- inline-size: 100%;
-
- &.spectrum-DatePicker-startField {
- 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 {
- border-inline-start: 0;
- border-start-start-radius: 0;
- border-end-start-radius: 0;
- padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
- }
- }
-
- /* "-" between inputs */
- .spectrum-DatePicker-rangeDash {
- line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
- padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top));
- flex: initial;
- inline-size: 0;
- z-index: 1;
-
- &::before {
- content: "–";
- display: inline-block;
- margin-block: 0;
- margin-inline: var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start));
- overflow: hidden;
- text-align: center;
- vertical-align: middle;
- inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size));
- }
- }
+.spectrum-DatePicker-input {
+ /* fill space */
+ flex: 1;
+ inline-size: 100%;
+
+ &.spectrum-DatePicker-startField {
+ 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 {
+ border-inline-start: 0;
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+ padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
+ }
+}
+
+/* "-" between inputs */
+.spectrum-DatePicker-rangeDash {
+ color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-datepicker-dash-color)));
+ line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
+ padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top));
+ flex: initial;
+ inline-size: 0;
+ z-index: 1;
+
+ &::before {
+ content: "–";
+ display: inline-block;
+ margin-block: 0;
+ margin-inline: var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start));
+ overflow: hidden;
+ text-align: center;
+ vertical-align: middle;
+ inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size));
+ }
+}
/********* WHCM *********/
@media (forced-colors: active) {
.spectrum-DatePicker {
- --highcontrast-datepicker-dash-color-disabled: GrayText;
- --highcontrast-datepicker-focus-ring-color: Highlight;
- --highcontrast-datepicker-pickerbutton-border-color: Highlight;
- --highcontrast-datepicker-invalid-quiet-color: Highlight;
- }
+ --highcontrast-datepicker-dash-color: CanvasText;
+ --highcontrast-datepicker-dash-color-disabled: GrayText;
+ --highcontrast-datepicker-focus-ring-color: Highlight;
+ --highcontrast-datepicker-pickerbutton-border-color: Highlight;
+ --highcontrast-datepicker-invalid-quiet-color: Highlight;
+ }
}
diff --git a/components/datepicker/metadata/mods.md b/components/datepicker/metadata/mods.md
index d6c467088c..e92f2d8bad 100644
--- a/components/datepicker/metadata/mods.md
+++ b/components/datepicker/metadata/mods.md
@@ -3,6 +3,7 @@
| `--mod-datepicker-border-color-disabled` |
| `--mod-datepicker-border-radius` |
| `--mod-datepicker-border-radius-quiet` |
+| `--mod-datepicker-dash-color` |
| `--mod-datepicker-dash-color-disabled` |
| `--mod-datepicker-dash-font-size` |
| `--mod-datepicker-dash-line-height` |
diff --git a/components/radio/index.css b/components/radio/index.css
index 3256d3091f..b7fd10bbed 100644
--- a/components/radio/index.css
+++ b/components/radio/index.css
@@ -12,479 +12,417 @@ governing permissions and limitations under the License.
@import "./themes/express.css";
-/* radio/index.css
- *
- * ::before is to style the input circle
- * ::after is to style the Focus ring
- *
+/*
+ * Radio:
+ * ::before is to style the input circle (selection indicator)
+ * ::after is to style the focus ring
*/
.spectrum-Radio {
- /* state colors for all themes */
- --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
- --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- /* focus ring all themes */
- --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- /* disabled all themes */
- --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
- --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);
-
- /* emphasized state colors selection indicator all themes */
- --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
- --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
- --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
-
- /* selection indicator all themes */
- --spectrum-radio-border-width: var(--spectrum-border-width-200);
- --spectrum-radio-button-background-color: var(--spectrum-gray-75);
-
- /* checked selection indicator */
- --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
- --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
- --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
- --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
-
- /* spacing all themes */
- --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);
-
- /* text styles all themes */
- --spectrum-radio-font-size: var(--spectrum-font-size-100);
- --spectrum-radio-line-height: var(--spectrum-line-height-100);
-
- /* animation all themes */
- --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
-
- /* CJK language support all themes */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
- }
-
- /* default radio size for no t-shirt size */
- --spectrum-radio-height: var(--spectrum-component-height-100);
- --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
-
- /* default radio spacing for no t-shirt size */
- --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
+ /* state colors for all themes */
+ --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ /* focus ring all themes */
+ --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ /* disabled all themes */
+ --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
+ --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);
+
+ /* emphasized state colors selection indicator all themes */
+ --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
+ --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
+ --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
+ --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
+
+ /* selection indicator all themes */
+ --spectrum-radio-border-width: var(--spectrum-border-width-200);
+ --spectrum-radio-button-background-color: var(--spectrum-gray-75);
+
+ /* checked selection indicator */
+ --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
+ --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
+ --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
+ --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
+
+ /* spacing all themes */
+ --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);
+
+ /* text styles all themes */
+ --spectrum-radio-font-size: var(--spectrum-font-size-100);
+ --spectrum-radio-line-height: var(--spectrum-line-height-100);
+
+ /* animation all themes */
+ --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
+
+ /* CJK language support all themes */
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
+ }
+
+ /* default radio size for no t-shirt size */
+ --spectrum-radio-height: var(--spectrum-component-height-100);
+ --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
+
+ /* default radio spacing for no t-shirt size */
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
}
.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-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--sizeM {
- --spectrum-radio-height: var(--spectrum-component-height-100);
- --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
+ --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--sizeL {
- --spectrum-radio-height: var(--spectrum-component-height-200);
- --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large);
+ --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-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);
}
-
-
/* windows high contrast mode */
@media (forced-colors: active) {
- .spectrum-Radio {
- /* high contrast text */
- --highcontrast-radio-neutral-content-color: CanvasText;
- --highcontrast-radio-neutral-content-color-hover: CanvasText;
- --highcontrast-radio-neutral-content-color-down: CanvasText;
- --highcontrast-radio-neutral-content-color-focus: CanvasText;
-
- /* high contrast selector */
- --highcontrast-radio-button-border-color-default: ButtonText;
- --highcontrast-radio-button-border-color-hover: Highlight;
- --highcontrast-radio-button-border-color-down: ButtonText;
- --highcontrast-radio-button-border-color-focus: Highlight;
-
- /* high contrast emphasized selector */
- --highcontrast-radio-emphasized-accent-color: ButtonText;
- --highcontrast-radio-emphasized-accent-color-hover: Highlight;
- --highcontrast-radio-emphasized-accent-color-down: ButtonText;
- --highcontrast-radio-emphasized-accent-color-focus: Highlight;
-
- /* high contrast checked selector */
- --highcontrast-radio-button-checked-border-color-default: Highlight;
- --highcontrast-radio-button-checked-border-color-hover: Highlight;
- --highcontrast-radio-button-checked-border-color-down: Highlight;
- --highcontrast-radio-button-checked-border-color-focus: Highlight;
-
- /* high contrast disabled text */
- --highcontrast-radio-disabled-content-color: GrayText;
-
- /* high contrast disabled selector */
- --highcontrast-radio-disabled-border-color: GrayText;
-
- /* high contrast focus ring */
- --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 {
+ /* high contrast text */
+ --highcontrast-radio-neutral-content-color: CanvasText;
+ --highcontrast-radio-neutral-content-color-hover: CanvasText;
+ --highcontrast-radio-neutral-content-color-down: CanvasText;
+ --highcontrast-radio-neutral-content-color-focus: CanvasText;
+
+ /* high contrast selector */
+ --highcontrast-radio-button-border-color-default: ButtonText;
+ --highcontrast-radio-button-border-color-hover: Highlight;
+ --highcontrast-radio-button-border-color-down: ButtonText;
+ --highcontrast-radio-button-border-color-focus: Highlight;
+
+ /* high contrast emphasized selector */
+ --highcontrast-radio-emphasized-accent-color: ButtonText;
+ --highcontrast-radio-emphasized-accent-color-hover: Highlight;
+ --highcontrast-radio-emphasized-accent-color-down: ButtonText;
+ --highcontrast-radio-emphasized-accent-color-focus: Highlight;
+
+ /* high contrast checked selector */
+ --highcontrast-radio-button-checked-border-color-default: Highlight;
+ --highcontrast-radio-button-checked-border-color-hover: Highlight;
+ --highcontrast-radio-button-checked-border-color-down: Highlight;
+ --highcontrast-radio-button-checked-border-color-focus: Highlight;
+
+ /* high contrast disabled text */
+ --highcontrast-radio-disabled-content-color: GrayText;
+
+ /* high contrast disabled selector */
+ --highcontrast-radio-disabled-border-color: GrayText;
+
+ /* high contrast focus ring */
+ --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 {
- display: inline-flex;
- align-items: flex-start;
- position: relative;
- vertical-align: top;
-
- min-block-size: var(--mod-radio-height, var(--spectrum-radio-height));
- max-inline-size: 100%;
-
- &:hover {
- /* selection indicator hover */
- .spectrum-Radio-button::before {
- border-color: var(--highcontrast-radio-button-border-color-hover,
- var(--mod-radio-button-border-color-hover,
- var(--spectrum-radio-button-border-color-hover)));
- }
-
- /* checked selection indicator hover */
- .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
- border-color: var(--highcontrast-radio-button-checked-border-color-hover,
- var(--mod-radio-button-checked-border-color-hover,
- var(--spectrum-radio-button-checked-border-color-hover)));
- }
-
- .spectrum-Radio-label {
- color: var(--highcontrast-radio-neutral-content-color-hover,
- var(--mod-radio-neutral-content-color-hover,
- var(--spectrum-radio-neutral-content-color-hover)));
- }
- }
-
- &:active {
- /* selection indicator active */
- .spectrum-Radio-button::before {
- border-color: var(--highcontrast-radio-button-border-color-down,
- var(--mod-radio-button-border-color-down,
- var(--spectrum-radio-button-border-color-down)));
- }
-
- /* checked selection indicator active */
- .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
- border-color: var(--highcontrast-radio-button-checked-border-color-down,
- var(--mod-radio-button-checked-border-color-down,
- var(--spectrum-radio-button-checked-border-color-down)));
- }
-
- .spectrum-Radio-label {
- color: var(--highcontrast-radio-neutral-content-color-down,
- var(--mod-radio-neutral-content-color-down,
- var(--spectrum-radio-neutral-content-color-down)));
- }
- }
-
- &:focus {
- /* selection indicator is focused state */
- .spectrum-Radio-button::before {
- border-color: var(--highcontrast-radio-button-border-color-focus,
- var(--mod-radio-button-border-color-focus,
- var(--spectrum-radio-button-border-color-focus)));
- }
-
- /* focus ring is focused state */
- .spectrum-Radio-button::after {
- border-style: solid;
- border-color: var(--highcontrast-radio-focus-indicator-color,
- var(--mod-radio-focus-indicator-color,
- var(--spectrum-radio-focus-indicator-color)));
- border-width: var(--mod-radio-focus-indicator-thickness,
- var(--spectrum-radio-focus-indicator-thickness));
-
- 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));
- }
-
- /* selected selection indicator is focused state */
- .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
- border-color: var(--highcontrast-radio-button-checked-border-color-focus,
- var(--mod-radio-button-checked-border-color-focus,
- var(--spectrum-radio-button-checked-border-color-focus)));
- }
-
- .spectrum-Radio-label {
- color: var(--highcontrast-radio-neutral-content-color-focus,
- var(--mod-radio-neutral-content-color-focus,
- var(--spectrum-radio-neutral-content-color-focus)));
- }
- }
-
- &.is-readOnly {
- .spectrum-Radio-input:read-only {
- cursor: initial;
- }
-
- /* hide selection indicator */
- & .spectrum-Radio-button {
- position: fixed;
- inset-inline-end: 100%;
- inset-block-end: 100%;
- clip: rect(1px, 1px, 1px, 1px);
- clip-path: inset(50%);
- }
-
- .spectrum-Radio-label,
+ display: inline-flex;
+ align-items: flex-start;
+ position: relative;
+ vertical-align: top;
+
+ min-block-size: var(--mod-radio-height, var(--spectrum-radio-height));
+ max-inline-size: 100%;
+
+ &:hover {
+ /* selection indicator hover */
+ .spectrum-Radio-button::before {
+ border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover)));
+ }
+
+ /* checked selection indicator hover */
+ .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+ border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover)));
+ }
+
+ .spectrum-Radio-label {
+ color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover)));
+ }
+ }
+
+ &:active {
+ /* selection indicator active */
+ .spectrum-Radio-button::before {
+ border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down)));
+ }
+
+ /* checked selection indicator active */
+ .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+ border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down)));
+ }
+
+ .spectrum-Radio-label {
+ color: var(--highcontrast-radio-neutral-content-color-down, var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down)));
+ }
+ }
+
+ &:focus {
+ /* selection indicator is focused state */
+ .spectrum-Radio-button::before {
+ border-color: var(--highcontrast-radio-button-border-color-focus, var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus)));
+ }
+
+ /* focus ring is focused state */
+ .spectrum-Radio-button::after {
+ border-style: solid;
+ border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)));
+ border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness));
+
+ 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));
+ }
+
+ /* selected selection indicator is focused state */
+ .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+ border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus)));
+ }
+
+ .spectrum-Radio-label {
+ color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus)));
+ }
+ }
+
+ &.is-readOnly {
+ .spectrum-Radio-input:read-only {
+ cursor: initial;
+ }
+
+ /* hide selection indicator */
+ & .spectrum-Radio-button {
+ position: fixed;
+ inset-inline-end: 100%;
+ inset-block-end: 100%;
+ clip: rect(1px, 1px, 1px, 1px);
+ clip-path: inset(50%);
+ }
+
+ .spectrum-Radio-label,
/* ensure disabled readonly has normal text color */
& .spectrum-Radio-input:disabled ~ .spectrum-Radio-label,
& .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label {
- margin-inline-start: auto;
- color: inherit;
- }
- }
+ margin-inline-start: auto;
+ color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
+ }
+ }
}
.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)));
- }
+ /* 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)));
+ }
}
-/* selection indicator disabled */
-.spectrum-Radio .spectrum-Radio-input,
-.spectrum-Radio .spectrum-Radio-input:checked {
- &:disabled + .spectrum-Radio-button {
- &::before {
- border-color: var(--highcontrast-radio-disabled-border-color,
- var(--mod-radio-disabled-border-color,
- var(--spectrum-radio-disabled-border-color)));
- }
- }
-
- /* label disabled */
- &:disabled ~ .spectrum-Radio-label {
- color: var(--highcontrast-radio-disabled-content-color,
- var(--mod-radio-disabled-content-color,
- var(--spectrum-radio-disabled-content-color)));
- }
+/* 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;
- font-size: 100%;
- line-height: var(--mod-radio-line-height,
- var(--spectrum-radio-line-height));
-
- /* Remove the margin for input in Firefox and Safari. */
- margin: 0;
-
- /* Show the overflow for input in Edge. */
- overflow: visible;
-
- /* Add the correct box sizing for [type="radio"] in IE 10-. */
- box-sizing: border-box;
-
- /* Remove the padding for [type="radio"] in IE 10-. */
- padding: 0;
-
- position: absolute;
- inline-size: 100%;
- block-size: 100%;
-
- opacity: 0;
- z-index: 1;
-
- cursor: pointer;
-
- &:disabled {
- cursor: default;
- }
-
- /* 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)));
- }
- }
-
- /* 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;
-
- 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));
- }
- }
+ /* Change the font styles in all browsers for input. */
+ font-family: inherit;
+ font-size: 100%;
+ line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
+
+ /* Remove the margin for input in Firefox and Safari. */
+ margin: 0;
+
+ /* Show the overflow for input in Edge. */
+ overflow: visible;
+
+ /* Add the correct box sizing for [type="radio"] in IE 10-. */
+ box-sizing: border-box;
+
+ /* Remove the padding for [type="radio"] in IE 10-. */
+ padding: 0;
+
+ position: absolute;
+ inline-size: 100%;
+ block-size: 100%;
+
+ opacity: 0;
+ z-index: 1;
+
+ cursor: pointer;
+
+ &:disabled {
+ cursor: default;
+ }
+
+ /* 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)));
+ }
+ }
+
+ /* 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;
+
+ 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));
+ }
+ }
}
.spectrum-Radio-label {
- text-align: start;
- margin-inline-start: var(--mod-radio-text-to-control,
- var(--spectrum-radio-text-to-control));
- margin-block-start: var(--spectrum-radio-label-top-to-text);
- margin-block-end: var(--spectrum-radio-label-bottom-to-text);
-
- font-size: var(--mod-radio-font-size,
- var(--spectrum-radio-font-size));
-
- /* TODO: font weight and style tokens */
- /* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/
- /* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/
- color: var(--highcontrast-radio-neutral-content-color,
- var(--mod-radio-neutral-content-color,
- var(--spectrum-radio-neutral-content-color)));
- line-height: var(--mod-radio-line-height,
- var(--spectrum-radio-line-height));
-
- transition: color var(--mod-radio-animation-duration,
- var(--spectrum-radio-animation-duration)) ease-in-out;
-
- /* CJK language support */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk));
- }
+ text-align: start;
+ margin-inline-start: var(--mod-radio-text-to-control, var(--spectrum-radio-text-to-control));
+ margin-block-start: var(--spectrum-radio-label-top-to-text);
+ margin-block-end: var(--spectrum-radio-label-bottom-to-text);
+
+ font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size));
+
+ /* TODO: font weight and style tokens */
+ /* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/
+ /* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/
+ color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
+ line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
+
+ transition: color var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;
+
+ /* CJK language support */
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk));
+ }
}
.spectrum-Radio-button {
- position: relative;
- box-sizing: border-box;
- inline-size: var(--mod-radio-button-control-size,
- var(--spectrum-radio-button-control-size));
- block-size: var(--mod-radio-button-control-size,
- var(--spectrum-radio-button-control-size));
- margin-block-start: var(--mod-radio-button-top-to-control,
- var(--spectrum-radio-button-top-to-control));
-
- flex-grow: 0;
- flex-shrink: 0;
-
- /* selection indicator unchecked */
- &::before {
- display: block;
- z-index: 0;
- content: "";
- box-sizing: border-box;
- position: absolute;
-
- inline-size: var(--mod-radio-button-control-size,
- var(--spectrum-radio-button-control-size));
- block-size: var(--mod-radio-button-control-size,
- var(--spectrum-radio-button-control-size));
-
- background-color: var(--highcontrast-radio-button-background-color,
- var(--mod-radio-button-background-color,
- var(--spectrum-radio-button-background-color)));
-
- border-radius: 50%;
- border-width: var(--mod-radio-border-width,
- var(--spectrum-radio-border-width));
- border-color: var(--highcontrast-radio-button-border-color-default,
- var(--mod-radio-button-border-color-default,
- var(--spectrum-radio-button-border-color-default)));
- border-style: solid;
-
- transition: border var(--mod-radio-animation-duration,
- var(--spectrum-radio-animation-duration)) ease-in-out,
- box-shadow var(--mod-radio-animation-duration,
- var(--spectrum-radio-animation-duration)) ease-in-out;
- }
-
- /* focus ring is not focused state */
- &::after {
- border-radius: 50%;
-
- content: "";
- display: block;
- position: absolute;
- inset-inline-start: 50%;
- inset-block-start: 50%;
- transform: translateX(-50%) translateY(-50%);
-
- transition: opacity var(--mod-radio-animation-duration,
- var(--spectrum-radio-animation-duration)) ease-out,
- margin var(--mod-radio-animation-duration,
- var(--spectrum-radio-animation-duration)) ease-out;
-
- &:dir(rtl) {
- transform: translateX(50%) translateY(-50%);
- }
- }
+ position: relative;
+ box-sizing: border-box;
+ inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
+ block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
+ margin-block-start: var(--mod-radio-button-top-to-control, var(--spectrum-radio-button-top-to-control));
+
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ /* selection indicator unchecked */
+ &::before {
+ display: block;
+ z-index: 0;
+ content: "";
+ box-sizing: border-box;
+ position: absolute;
+
+ inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
+ block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
+
+ background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)));
+
+ border-radius: 50%;
+ border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width));
+ border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default)));
+ border-style: solid;
+
+ transition:
+ border var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out,
+ box-shadow var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;
+ }
+
+ /* focus ring is not focused state */
+ &::after {
+ border-radius: 50%;
+
+ content: "";
+ display: block;
+ position: absolute;
+ inset-inline-start: 50%;
+ inset-block-start: 50%;
+ transform: translateX(-50%) translateY(-50%);
+
+ transition:
+ opacity var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out,
+ margin var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out;
+
+ &:dir(rtl) {
+ transform: translateX(50%) translateY(-50%);
+ }
+ }
}
diff --git a/components/slider/index.css b/components/slider/index.css
index 81fe996c63..93efc28d54 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -13,18 +13,18 @@ governing permissions and limitations under the License.
@import "./themes/express.css";
.spectrum-Slider {
- /* default sizing, matches t-shirt size M */
- --spectrum-slider-font-size: var(--spectrum-font-size-75);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
- --spectrum-slider-control-height: var(--spectrum-component-height-100);
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-
- /* TODO: placeholder value for sideLabel variant value width */
- --spectrum-slider-value-inline-size: 18px;
+ /* default sizing, matches t-shirt size M */
+ --spectrum-slider-font-size: var(--spectrum-font-size-75);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
+ --spectrum-slider-control-height: var(--spectrum-component-height-100);
+ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+
+ /* TODO: placeholder value for sideLabel variant value width */
+ --spectrum-slider-value-inline-size: 18px;
&:dir(rtl),
&:dir(rtl) {
@@ -32,756 +32,732 @@ governing permissions and limitations under the License.
}
}
-
.spectrum-Slider--sizeS {
- --spectrum-slider-font-size: var(--spectrum-font-size-75);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
- --spectrum-slider-control-height: var(--spectrum-component-height-75);
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
+ --spectrum-slider-font-size: var(--spectrum-font-size-75);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
+ --spectrum-slider-control-height: var(--spectrum-component-height-75);
+ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
}
.spectrum-Slider--sizeL {
- --spectrum-slider-font-size: var(--spectrum-font-size-100);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
- --spectrum-slider-control-height: var(--spectrum-component-height-200);
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+ --spectrum-slider-font-size: var(--spectrum-font-size-100);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
+ --spectrum-slider-control-height: var(--spectrum-component-height-200);
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
- /* TODO: placeholder value for sideLabel variant value width */
- --spectrum-slider-value-inline-size: 18px;
+ /* TODO: placeholder value for sideLabel variant value width */
+ --spectrum-slider-value-inline-size: 18px;
}
.spectrum-Slider--sizeXL {
- --spectrum-slider-font-size: var(--spectrum-font-size-200);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
- --spectrum-slider-control-height: var(--spectrum-component-height-300);
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+ --spectrum-slider-font-size: var(--spectrum-font-size-200);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
+ --spectrum-slider-control-height: var(--spectrum-component-height-300);
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
- /* TODO: placeholder value for sideLabel variant value width */
- --spectrum-slider-value-inline-size: 22px;
+ /* TODO: placeholder value for sideLabel variant value width */
+ --spectrum-slider-value-inline-size: 22px;
}
.spectrum-Slider {
- --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
-
- --spectrum-slider-min-size: var(--spectrum-spacing-900);
-
- --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
- --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
- --spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
- --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
- --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
- --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
- --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2));
- --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
- --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
- --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
- --spectrum-slider-tick-mark-border-radius: 2px;
- --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
-
- /* colors */
- --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
- --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
-
- /* values */
- --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
- --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
-
- --spectrum-slider-range-track-reset: 0;
+ --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
+
+ --spectrum-slider-min-size: var(--spectrum-spacing-900);
+
+ --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
+ --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
+ --spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
+ --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
+ --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
+ --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
+ --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2));
+ --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
+ --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
+ --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
+ --spectrum-slider-tick-mark-border-radius: 2px;
+ --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
+
+ /* colors */
+ --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
+
+ /* values */
+ --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
+ --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
+
+ --spectrum-slider-range-track-reset: 0;
}
.spectrum-Slider {
- position: relative;
+ position: relative;
- /* Don't let z-index'd child elements float above other things on the page */
- z-index: 1;
- display: block;
- min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
+ /* Don't let z-index'd child elements float above other things on the page */
+ z-index: 1;
+ display: block;
+ min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
- user-select: none;
+ user-select: none;
}
.spectrum-Slider--sideLabel {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
- .spectrum-Slider-labelContainer {
- margin-block-start: 0;
- }
+ .spectrum-Slider-labelContainer {
+ margin-block-start: 0;
+ }
- .spectrum-Slider-labelContainer + .spectrum-Slider-controls {
- margin-block-start: 0;
- }
+ .spectrum-Slider-labelContainer + .spectrum-Slider-controls {
+ margin-block-start: 0;
+ }
- .spectrum-Slider-controls {
- margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
- }
+ .spectrum-Slider-controls {
+ margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
+ }
- .spectrum-Slider-value {
- margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
- inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size));
- text-align: start;
- }
+ .spectrum-Slider-value {
+ margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
+ inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size));
+ text-align: start;
+ }
}
.spectrum-Slider-controls {
- display: inline-block;
- box-sizing: border-box;
- cursor: pointer;
- position: relative;
- z-index: auto;
+ display: inline-block;
+ box-sizing: border-box;
+ cursor: pointer;
+ position: relative;
+ z-index: auto;
- /* These calculations prevent the track from spilling outside of the control */
- inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2);
- margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
+ /* These calculations prevent the track from spilling outside of the control */
+ inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2);
+ margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
- block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
- vertical-align: top;
+ block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+ vertical-align: top;
}
.spectrum-Slider-labelContainer + .spectrum-Slider-controls {
- margin-block-start: calc(-1 * var(--spectrum-slider-control-to-field-label));
+ margin-block-start: calc(-1 * var(--spectrum-slider-control-to-field-label));
}
/* TODO: Sliders with ticks + tick mark labels require more margin-block-end.
As of February 2023 we do not have tokens yet tokens for Ramp and Tick variants,
using control-height here instead. */
.spectrum-Slider--tick {
- margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+ margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
}
.spectrum-Slider-track,
.spectrum-Slider-fill {
- block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness));
- box-sizing: border-box;
-
- position: absolute;
- z-index: 1;
- inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2);
- inset-inline-start: 0;
- inset-inline-end: auto;
- pointer-events: none;
-
- padding-block: 0;
- padding-inline-start: 0;
- padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
- margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-
- &::before {
- content: "";
- display: block;
- block-size: 100%;
-
- /* reset all border radii */
- border-start-start-radius: 0;
- border-end-start-radius: 0;
- border-start-end-radius: 0;
- border-end-end-radius: 0;
- }
+ block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness));
+ box-sizing: border-box;
+
+ position: absolute;
+ z-index: 1;
+ inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2);
+ inset-inline-start: 0;
+ inset-inline-end: auto;
+ pointer-events: none;
+
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
+ margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+
+ &::before {
+ content: "";
+ display: block;
+ block-size: 100%;
+
+ /* reset all border radii */
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+ }
}
.spectrum-Slider-track {
- &:first-of-type {
- &::before {
- border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
- border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
- }
- }
+ &:first-of-type {
+ &::before {
+ border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+ border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+ }
+ }
- &:last-of-type {
- &::before {
- border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
- border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
- }
- }
+ &:last-of-type {
+ &::before {
+ border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+ border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+ }
+ }
}
.spectrum-Slider-track ~ .spectrum-Slider-track {
- inset-inline-start: auto;
- inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
- padding-block: 0;
- padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
- padding-inline-end: 0;
- margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
- margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+ inset-inline-start: auto;
+ inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+ padding-block: 0;
+ padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
+ padding-inline-end: 0;
+ margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+ margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
}
-
/* over-write for Range, without the LTR RTL post-css hack */
.spectrum-Slider--range {
- .spectrum-Slider-track ~ .spectrum-Slider-track {
- padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset));
- inset-inline: auto;
- margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
- }
+ .spectrum-Slider-track ~ .spectrum-Slider-track {
+ padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset));
+ inset-inline: auto;
+ margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+ }
}
.spectrum-Slider-fill {
- margin-inline-start: 0;
- padding-block: 0;
- padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
- padding-inline-end: 0;
+ margin-inline-start: 0;
+ padding-block: 0;
+ padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
+ padding-inline-end: 0;
}
.spectrum-Slider-fill--right {
- padding-block: 0;
- padding-inline-start: 0;
- padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
}
.spectrum-Slider--range {
- .spectrum-Slider-value {
- user-select: text;
- }
-
- .spectrum-Slider-track {
- &:first-of-type {
- padding-inline-start: 0;
- padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
- inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
- inset-inline-end: auto;
- margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
- }
-
- &:first-of-type::before {
- border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
- border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
- }
-
- &:last-of-type {
- padding-inline-start: var(--spectrum-slider-track-handleoffset);
- padding-inline-end: 0;
- inset-inline-start: auto;
- inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
- margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
- }
-
- &:last-of-type::before {
- border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
- border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
- }
- }
+ .spectrum-Slider-value {
+ user-select: text;
+ }
+
+ .spectrum-Slider-track {
+ &:first-of-type {
+ padding-inline-start: 0;
+ padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
+ inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+ inset-inline-end: auto;
+ margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+ }
+
+ &:first-of-type::before {
+ border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+ border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+ }
+
+ &:last-of-type {
+ padding-inline-start: var(--spectrum-slider-track-handleoffset);
+ padding-inline-end: 0;
+ inset-inline-start: auto;
+ inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+ margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+ }
+
+ &:last-of-type::before {
+ border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+ border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+ }
+ }
}
.spectrum-Slider-ramp {
- margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
- block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
+ margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
+ block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
- position: absolute;
- inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
- inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+ position: absolute;
+ inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+ inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
- svg {
- inline-size: 100%;
- block-size: 100%;
+ svg {
+ inline-size: 100%;
+ block-size: 100%;
- /* Flip the ramp automatically for RTL */
- transform: var(--spectrum-logical-rotation);
- }
+ /* Flip the ramp automatically for RTL */
+ transform: var(--spectrum-logical-rotation);
+ }
}
.spectrum-Slider-handle {
- position: absolute;
- inset-inline-start: 0;
- z-index: 2;
- display: inline-block;
- box-sizing: border-box;
-
- inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
- block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-
- inset-block-start: calc(
- var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2
- );
- margin-block: 0;
- margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
- border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
- border-style: solid;
-
- border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius));
-
- transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
-
- outline: none;
-
- &:active,
- &.is-dragged {
- border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
- }
-
- &:active,
- &.is-focused,
- &.is-dragged,
- &.is-tophandle {
- z-index: 3;
- }
-
- /* Focus indicator. */
- &::before {
- content: "";
- display: block;
- position: absolute;
- inset-inline-start: 50%;
- inset-block-start: 50%;
-
- transition: box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
- inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
- block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
-
- inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
- block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
- border-radius: 100%;
-
- transform: translate(-50%, -50%);
-
- &:dir(rtl) {
- transform: translate(50%, -50%);
- }
- }
-
- /* Keyboard focused */
- &.is-focused {
- &::before {
- inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
- block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
- }
- }
-}
+ position: absolute;
+ inset-inline-start: 0;
+ z-index: 2;
+ display: inline-block;
+ box-sizing: border-box;
-.spectrum-Slider-input {
- /* Remove the margin for input in Firefox and Safari. */
- margin: 0;
+ inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+ block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+
+ inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
+ margin-block: 0;
+ margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
+ border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
+ border-style: solid;
+
+ border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius));
+
+ transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
+
+ outline: none;
+
+ &:active,
+ &.is-dragged {
+ border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
+ }
+
+ &:active,
+ &.is-focused,
+ &.is-dragged,
+ &.is-tophandle {
+ z-index: 3;
+ }
- inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
- block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
- padding: 0;
- position: absolute;
+ /* Focus indicator. */
+ &::before {
+ content: "";
+ display: block;
+ position: absolute;
+ inset-inline-start: 50%;
+ inset-block-start: 50%;
- inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size));
- inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left));
- overflow: hidden;
- opacity: 0.000001; /* stylelint-disable-line number-max-precision */
- cursor: default;
- appearance: none;
- border: 0;
- pointer-events: none;
+ transition:
+ box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+ inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+ block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
- &:focus {
- outline: none;
- }
+ inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+ block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+ border-radius: 100%;
+
+ transform: translate(-50%, -50%);
+
+ &:dir(rtl) {
+ transform: translate(50%, -50%);
+ }
+ }
+
+ /* Keyboard focused */
+ &.is-focused {
+ &::before {
+ inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
+ block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
+ }
+ }
+}
+
+.spectrum-Slider-input {
+ /* Remove the margin for input in Firefox and Safari. */
+ margin: 0;
+
+ inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+ block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+ padding: 0;
+ position: absolute;
+
+ inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size));
+ inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left));
+ overflow: hidden;
+ opacity: 0.000001; /* stylelint-disable-line number-max-precision */
+ cursor: default;
+ appearance: none;
+ border: 0;
+ pointer-events: none;
+
+ &:focus {
+ outline: none;
+ }
}
.spectrum-Slider-labelContainer {
- display: flex;
- align-items: center;
- position: relative;
- inline-size: auto;
+ display: flex;
+ align-items: center;
+ position: relative;
+ inline-size: auto;
- font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
- line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
+ font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
+ line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
- margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
+ margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
- /* international support */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height));
- }
+ /* international support */
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height));
+ }
}
.spectrum-Slider-label {
- padding-inline-start: 0;
- flex-grow: 1;
- font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
+ padding-inline-start: 0;
+ flex-grow: 1;
+ font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
}
.spectrum-Slider-value {
- flex-grow: 0;
- padding-inline-end: 0;
- cursor: default;
- font-feature-settings: "tnum";
- text-align: end;
+ flex-grow: 0;
+ padding-inline-end: 0;
+ cursor: default;
+ font-feature-settings: "tnum";
+ text-align: end;
}
.spectrum-Slider-value {
- margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
+ margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
}
-
/* setting tick marks in relation to label */
.spectrum-Slider--tick {
- .spectrum-Slider-handle {
- background-color: var(--highcontrast-slider-tick-handle-background-color, var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color)));
- }
-
- .spectrum-Slider-controls {
- margin-block-start:
- calc(
- var(--spectrum-text-to-visual-75)
- - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
- - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
- );
- }
-
- .spectrum-Slider-tickLabel {
- margin-block-start:
- calc(
- var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75)
- );
- }
+ .spectrum-Slider-handle {
+ background-color: var(--highcontrast-slider-tick-handle-background-color, var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color)));
+ }
+
+ .spectrum-Slider-controls {
+ margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2);
+ }
+
+ .spectrum-Slider-tickLabel {
+ margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75));
+ }
}
/* TODO: missing core-tokens for tick variant */
.spectrum-Slider-ticks {
- display: flex;
- justify-content: space-between;
-
- z-index: 0;
-
- margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-
- /* TODO: missing core-token for handle fill-color */
- &~.spectrum-Slider-handleContainer {
- .spectrum-Slider-handle {
- background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color));
- }
- }
+ display: flex;
+ justify-content: space-between;
+ z-index: 0;
+ margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+
+ /* TODO: missing core-token for handle fill-color */
+ & ~ .spectrum-Slider-handleContainer {
+ .spectrum-Slider-handle {
+ background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color));
+ }
+ }
}
.spectrum-Slider-tick {
- position: relative;
-
- inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
-
- /* tick marks are centered half based on slider control height and tick height */
- inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 -
- var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
- );
-
-
- &::after {
- display: block;
- position: absolute;
- inset-block-start: 0;
- inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2));
- content: "";
- inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
- block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height));
-
- border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius));
- }
-
- .spectrum-Slider-tickLabel {
- display: flex;
- align-items: center;
- justify-content: center;
-
+ position: relative;
+ inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
+
+ /* tick marks are centered half based on slider control height and tick height */
+ inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2);
+
+ &::after {
+ display: block;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2));
+ content: "";
+ inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
+ block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height));
+ border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius));
+ }
- font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
- line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
- }
+ .spectrum-Slider-tickLabel {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
+ line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
+ color: var(--highcontrast-slider-label-text-color, var(--mod-slider-tick-label-color, var(--spectrum-slider-tick-label-color)));
+ }
- &:first-of-type,
- &:last-of-type {
- .spectrum-Slider-tickLabel {
- display: block;
- position: absolute;
- margin-inline: 0;
- }
- }
+ &:first-of-type,
+ &:last-of-type {
+ .spectrum-Slider-tickLabel {
+ display: block;
+ position: absolute;
+ margin-inline: 0;
+ }
+ }
- &:first-of-type {
- /* fix off-by-one alignment */
- inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
+ &:first-of-type {
+ /* fix off-by-one alignment */
+ inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
- .spectrum-Slider-tickLabel {
- inset-inline-start: 0;
- }
- }
+ .spectrum-Slider-tickLabel {
+ inset-inline-start: 0;
+ }
+ }
- &:last-of-type {
- /* fix off-by-one alignment */
- inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
+ &:last-of-type {
+ /* fix off-by-one alignment */
+ inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
- .spectrum-Slider-tickLabel {
- inset-inline-end: 0;
- }
- }
+ .spectrum-Slider-tickLabel {
+ inset-inline-end: 0;
+ }
+ }
}
/* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
.spectrum-Slider-handleContainer,
.spectrum-Slider-trackContainer {
- inline-size: calc(100% + var(--spectrum-slider-handle-size));
-
- position: absolute;
- inset-block-start: 0;
-
- margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
+ inline-size: calc(100% + var(--spectrum-slider-handle-size));
+ position: absolute;
+ inset-block-start: 0;
+ margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
}
.spectrum-Slider-trackContainer {
- block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+ block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
- /* stop edges from peeking out */
- overflow: hidden;
+ /* stop edges from peeking out */
+ overflow: hidden;
}
/* Applies to the filled-offset variant to keep track the same color for highcontrast mode */
.spectrum-Slider-track {
- &::before {
- background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
- }
+ &::before {
+ background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
+ }
}
/* All variants other than filled-offset get a new track color for highcontrast mode */
.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)) {
- &::before {
- background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
- }
+ &::before {
+ background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
+ }
}
.spectrum-Slider-labelContainer {
- color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color)));
+ color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color)));
}
-
.spectrum-Slider--filled {
- .spectrum-Slider-track:first-child {
- &::before {
- background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
- }
- }
+ .spectrum-Slider-track:first-child {
+ &::before {
+ background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+ }
+ }
}
.spectrum-Slider-fill {
- &::before {
- background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
- }
+ &::before {
+ background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+ }
}
.spectrum-Slider-ramp {
- path {
- fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
- }
+ path {
+ fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
+ }
}
.spectrum-Slider-handle {
- border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
- background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
+ border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
+ background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
- &:hover {
- border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover)));
- }
+ &:hover {
+ border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover)));
+ }
- /* Keyboard focused with focus indicator. */
- &.is-focused {
- border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus)));
+ /* Keyboard focused with focus indicator. */
+ &.is-focused {
+ border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus)));
- &::before {
- box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus)));
- }
- }
+ &::before {
+ box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus)));
+ }
+ }
- &:active,
- &.is-dragged {
- border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
- }
+ &:active,
+ &.is-dragged {
+ border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
+ }
}
-
.spectrum-Slider--ramp {
- .spectrum-Slider-handle {
- box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
- background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color)));
- }
+ .spectrum-Slider-handle {
+ box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
+ background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color)));
+ }
}
.spectrum-Slider-input {
- background: transparent;
+ background: transparent;
}
.spectrum-Slider-tick {
- &::after {
- background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
- }
+ &::after {
+ background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
+ }
}
.spectrum-Slider-handle {
- &.is-dragged {
- border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
- background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
- }
+ &.is-dragged {
+ border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
+ background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
+ }
}
-
.spectrum-Slider--range {
- .spectrum-Slider-track {
- &:not(:first-of-type, :last-of-type)::before {
- background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
- }
- }
+ .spectrum-Slider-track {
+ &:not(:first-of-type, :last-of-type)::before {
+ background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+ }
+ }
}
.spectrum-Slider.is-disabled {
- cursor: default;
-
- .spectrum-Slider-controls {
- cursor: default;
- }
-
- .spectrum-Slider-tickLabel {
- color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
- }
-
- .spectrum-Slider-labelContainer {
- color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
- }
-
- .spectrum-Slider-handle {
- border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
- background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
- cursor: default;
- pointer-events: none;
-
- &:hover,
- &:active {
- border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
- background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled)));
- }
- }
-
- .spectrum-Slider-track {
- &::before {
- background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
- }
- }
-
- &.spectrum-Slider--filled {
- .spectrum-Slider-track:first-child::before {
- background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
- }
- }
-
- .spectrum-Slider-fill {
- &::before {
- background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
- }
- }
-
- .spectrum-Slider-ramp {
- path {
- fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
- }
- }
-
- .spectrum-Slider-tick {
- &::after {
- background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled)));
- }
- }
-
- &.spectrum-Slider--range {
- .spectrum-Slider-track:not(:first-of-type, :last-of-type)::before {
- background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
- }
- }
+ cursor: default;
+
+ .spectrum-Slider-controls {
+ cursor: default;
+ }
+
+ .spectrum-Slider-tickLabel {
+ color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+ }
+
+ .spectrum-Slider-labelContainer {
+ color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+ }
+
+ .spectrum-Slider-handle {
+ border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
+ background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
+ cursor: default;
+ pointer-events: none;
+
+ &:hover,
+ &:active {
+ border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
+ background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled)));
+ }
+ }
+
+ .spectrum-Slider-track {
+ &::before {
+ background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
+ }
+ }
+
+ &.spectrum-Slider--filled {
+ .spectrum-Slider-track:first-child::before {
+ background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
+ }
+ }
+
+ .spectrum-Slider-fill {
+ &::before {
+ background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
+ }
+ }
+
+ .spectrum-Slider-ramp {
+ path {
+ fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
+ }
+ }
+
+ .spectrum-Slider-tick {
+ &::after {
+ background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled)));
+ }
+ }
+
+ &.spectrum-Slider--range {
+ .spectrum-Slider-track:not(:first-of-type, :last-of-type)::before {
+ background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
+ }
+ }
}
@media (forced-colors: active) {
- .spectrum-Slider {
- /* over-writes */
- --highcontrast-slider-track-color: ButtonText;
- --highcontrast-slider-track-color-static: ButtonText;
- --highcontrast-slider-track-fill-color: ButtonText;
- --highcontrast-slider-filled-track-fill-color: Highlight;
- --highcontrast-slider-ramp-track-color: ButtonText;
- --highcontrast-slider-ramp-track-color-disabled: GrayText;
- --highcontrast-slider-tick-mark-color: ButtonText;
- --highcontrast-slider-handle-border-color: ButtonText;
- --highcontrast-slider-handle-border-color-hover: Highlight;
- --highcontrast-slider-handle-border-color-down: Highlight;
- --highcontrast-slider-handle-border-color-key-focus: Highlight;
- --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText;
- --highcontrast-slider-handle-background-color: ButtonFace;
- --highcontrast-slider-ramp-handle-border-color-active: ButtonFace;
- --highcontrast-slider-ramp-handle-background-color: ButtonFace;
-
- --spectrum-slider-track-color: ButtonText;
- --spectrum-slider-track-fill-color: ButtonText;
- --spectrum-slider-ramp-track-color: ButtonText;
- --spectrum-slider-ramp-track-color-disabled: GrayText;
-
- --spectrum-slider-handle-background-color: ButtonFace;
- --spectrum-slider-handle-background-color-disabled: GrayText;
- --spectrum-slider-handle-border-color: ButtonText;
- --spectrum-slider-handle-disabled-background-color: GrayText;
-
- --spectrum-slider-tick-mark-color: ButtonText;
- --spectrum-slider-tick-mark-color-disabled: GrayText;
-
- --spectrum-slider-handle-border-color-hover: Highlight;
- --spectrum-slider-handle-border-color-down: Highlight;
- --spectrum-slider-handle-border-color-key-focus: Highlight;
- --spectrum-slider-handle-focus-ring-color-key-focus: Highlight;
-
- --spectrum-slider-track-color-disabled: GrayText;
- --spectrum-slider-track-fill-color-disabled: GrayText;
-
- --spectrum-slider-handle-border-color-disabled: GrayText;
-
- --spectrum-slider-label-text-color: CanvasText;
- --spectrum-slider-label-text-color-disabled: GrayText;
-
- --spectrum-slider-ramp-handle-border-color-active: ButtonText;
-
- .spectrum-Slider-handle.is-focused::before {
- forced-color-adjust: none;
- }
-
- .spectrum-Slider--ramp .spectrum-Slider-handle {
- /* forced-color-adjust required to ensure the "circle" around the handle is transparent */
- forced-color-adjust: none;
- }
-
- /* Slider control hover and focus colors for high contrast mode */
- /* Filled and range variants are excluded since the filled portion of the track uses Highlight */
- &:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) {
- .spectrum-Slider-controls:hover,
- .spectrum-Slider-controls:active,
- .spectrum-Slider-controls:focus-within,
- .spectrum-Slider-controls.is-focused {
- --highcontrast-slider-track-fill-color: Highlight;
- --highcontrast-slider-track-color: Highlight;
- --highcontrast-slider-handle-border-color: Highlight;
- --highcontrast-slider-ramp-track-color: Highlight;
- --highcontrast-slider-tick-mark-color: Highlight;
- }
- }
-
- /* Slider handle turns transparent in high contrast mode for ramp */
- &.is-disabled {
- .spectrum-Slider-ramp + .spectrum-Slider-handle {
- fill: ButtonFace;
- background-color: ButtonFace;
- }
- }
- }
+ .spectrum-Slider {
+ /* over-writes */
+ --highcontrast-slider-track-color: ButtonText;
+ --highcontrast-slider-track-color-static: ButtonText;
+ --highcontrast-slider-track-fill-color: ButtonText;
+ --highcontrast-slider-filled-track-fill-color: Highlight;
+ --highcontrast-slider-ramp-track-color: ButtonText;
+ --highcontrast-slider-ramp-track-color-disabled: GrayText;
+ --highcontrast-slider-tick-mark-color: ButtonText;
+ --highcontrast-slider-handle-border-color: ButtonText;
+ --highcontrast-slider-handle-border-color-hover: Highlight;
+ --highcontrast-slider-handle-border-color-down: Highlight;
+ --highcontrast-slider-handle-border-color-key-focus: Highlight;
+ --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText;
+ --highcontrast-slider-handle-background-color: ButtonFace;
+ --highcontrast-slider-ramp-handle-border-color-active: ButtonFace;
+ --highcontrast-slider-ramp-handle-background-color: ButtonFace;
+
+ --spectrum-slider-track-color: ButtonText;
+ --spectrum-slider-track-fill-color: ButtonText;
+ --spectrum-slider-ramp-track-color: ButtonText;
+ --spectrum-slider-ramp-track-color-disabled: GrayText;
+
+ --spectrum-slider-handle-background-color: ButtonFace;
+ --spectrum-slider-handle-background-color-disabled: GrayText;
+ --spectrum-slider-handle-border-color: ButtonText;
+ --spectrum-slider-handle-disabled-background-color: GrayText;
+
+ --spectrum-slider-tick-mark-color: ButtonText;
+ --spectrum-slider-tick-mark-color-disabled: GrayText;
+
+ --spectrum-slider-handle-border-color-hover: Highlight;
+ --spectrum-slider-handle-border-color-down: Highlight;
+ --spectrum-slider-handle-border-color-key-focus: Highlight;
+ --spectrum-slider-handle-focus-ring-color-key-focus: Highlight;
+
+ --spectrum-slider-track-color-disabled: GrayText;
+ --spectrum-slider-track-fill-color-disabled: GrayText;
+
+ --spectrum-slider-handle-border-color-disabled: GrayText;
+
+ --spectrum-slider-label-text-color: CanvasText;
+ --spectrum-slider-label-text-color-disabled: GrayText;
+
+ --spectrum-slider-ramp-handle-border-color-active: ButtonText;
+
+ .spectrum-Slider-handle.is-focused::before {
+ forced-color-adjust: none;
+ }
+
+ .spectrum-Slider--ramp .spectrum-Slider-handle {
+ /* forced-color-adjust required to ensure the "circle" around the handle is transparent */
+ forced-color-adjust: none;
+ }
+
+ /* Slider control hover and focus colors for high contrast mode */
+ /* Filled and range variants are excluded since the filled portion of the track uses Highlight */
+ &:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) {
+ .spectrum-Slider-controls:hover,
+ .spectrum-Slider-controls:active,
+ .spectrum-Slider-controls:focus-within,
+ .spectrum-Slider-controls.is-focused {
+ --highcontrast-slider-track-fill-color: Highlight;
+ --highcontrast-slider-track-color: Highlight;
+ --highcontrast-slider-handle-border-color: Highlight;
+ --highcontrast-slider-ramp-track-color: Highlight;
+ --highcontrast-slider-tick-mark-color: Highlight;
+ }
+ }
+
+ /* Slider handle turns transparent in high contrast mode for ramp */
+ &.is-disabled {
+ .spectrum-Slider-ramp + .spectrum-Slider-handle {
+ fill: ButtonFace;
+ background-color: ButtonFace;
+ }
+ }
+ }
}
diff --git a/components/slider/metadata/mods.md b/components/slider/metadata/mods.md
index 5a6c0b1d96..0c6f4dfe93 100644
--- a/components/slider/metadata/mods.md
+++ b/components/slider/metadata/mods.md
@@ -37,6 +37,7 @@
| `--mod-slider-ramp-track-height` |
| `--mod-slider-range-track-reset` |
| `--mod-slider-tick-handle-background-color` |
+| `--mod-slider-tick-label-color` |
| `--mod-slider-tick-mark-border-radius` |
| `--mod-slider-tick-mark-color` |
| `--mod-slider-tick-mark-color-disabled` |
diff --git a/components/splitview/index.css b/components/splitview/index.css
index f40bd050a9..9ef968840d 100644
--- a/components/splitview/index.css
+++ b/components/splitview/index.css
@@ -11,236 +11,213 @@ governing permissions and limitations under the License.
*/
.spectrum-SplitView {
- --spectrum-splitview-vertical-width: 100%;
- --spectrum-splitview-vertical-gripper-width: 50%;
- --spectrum-splitview-vertical-gripper-outer-width: 100%;
- --spectrum-splitview-vertical-gripper-reset: 0;
-
- --spectrum-splitview-background-color: var(--spectrum-gray-100);
- --spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
- --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
- --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
- --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
- --spectrum-splitview-handle-width: var(--spectrum-border-width-200);
-
- --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
- --spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
- --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
- --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
- --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
-
+ --spectrum-splitview-vertical-width: 100%;
+ --spectrum-splitview-vertical-gripper-width: 50%;
+ --spectrum-splitview-vertical-gripper-outer-width: 100%;
+ --spectrum-splitview-vertical-gripper-reset: 0;
+
+ --spectrum-splitview-background-color: var(--spectrum-gray-100);
+ --spectrum-splitview-content-color: var(--spectrum-body-color);
+
+ --spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
+ --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
+ --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
+ --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
+ --spectrum-splitview-handle-width: var(--spectrum-border-width-200);
+
+ --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
+ --spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
+ --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
+ --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
+ --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
}
-
.spectrum-SplitView {
- display: flex;
- overflow: hidden;
+ display: flex;
+ overflow: hidden;
}
.spectrum-SplitView-pane {
- block-size: 100%;
- background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
+ block-size: 100%;
+ background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
+ color: var(--mod-splitview-content-color, var(--spectrum-splitview-content-color));
}
.spectrum-SplitView-gripper {
- content: "";
- display: block;
- position: absolute;
- border-style: solid;
- border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
- border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
-
- inset-block-start: 50%;
- transform: translate(0, -50%);
-
- /* Prevent touch-action on handle */
- touch-action: none;
-
- /* half of (width + horizontal border - handle width) * -1 (for negative opposite) */
- inset-inline-start: calc(
- (
- (
- var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
- (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
- var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
- ) / 2
- ) * -1
- );
- inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
- block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
- border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
- border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
-
- &::before {
- background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
- }
+ content: "";
+ display: block;
+ position: absolute;
+ border-style: solid;
+ border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
+ border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
+
+ inset-block-start: 50%;
+ transform: translate(0, -50%);
+
+ /* Prevent touch-action on handle */
+ touch-action: none;
+
+ /* half of (width + horizontal border - handle width) * -1 (for negative opposite) */
+ inset-inline-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1);
+ inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
+ block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
+ border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
+ border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
+
+ &::before {
+ background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
+ }
}
.spectrum-SplitView-splitter {
- /* Contains the gripper */
- position: relative;
-
- background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
-
- /* Prevent text selection while dragging */
- user-select: none;
-
- inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
- block-size: 100%;
- z-index: 1;
-
- &.is-collapsed-start,
- &.is-collapsed-end {
- /* make the center line of the gripper */
- .spectrum-SplitView-gripper::before {
- content: "";
- position: absolute;
-
- inset-block-start: 0;
- inset-inline-start: calc(
- 50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
- );
- inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
- block-size: 100%;
- }
- }
-
- &.is-collapsed-start {
- .spectrum-SplitView-gripper {
- inset-inline-start: 0;
- }
- }
-
- &.is-collapsed-end {
- .spectrum-SplitView-gripper {
- inset-inline-end: 0;
- inset-inline-start: auto;
- }
- }
+ /* Contains the gripper */
+ position: relative;
+
+ background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
+
+ /* Prevent text selection while dragging */
+ user-select: none;
+
+ inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
+ block-size: 100%;
+ z-index: 1;
+
+ &.is-collapsed-start,
+ &.is-collapsed-end {
+ /* make the center line of the gripper */
+ .spectrum-SplitView-gripper::before {
+ content: "";
+ position: absolute;
+
+ inset-block-start: 0;
+ inset-inline-start: calc(50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2));
+ inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
+ block-size: 100%;
+ }
+ }
+
+ &.is-collapsed-start {
+ .spectrum-SplitView-gripper {
+ inset-inline-start: 0;
+ }
+ }
+
+ &.is-collapsed-end {
+ .spectrum-SplitView-gripper {
+ inset-inline-end: 0;
+ inset-inline-start: auto;
+ }
+ }
}
.spectrum-SplitView-splitter.is-draggable {
- &:hover,
- &.is-hovered {
- background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-
- .spectrum-SplitView-gripper {
- border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
- }
-
- .spectrum-SplitView-gripper::before {
- background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
- }
- }
-
- &:active,
- &.is-active {
- background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
-
- .spectrum-SplitView-gripper {
- border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
- }
-
- /* Center line of gripper */
- .spectrum-SplitView-gripper::before {
- background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
- }
- }
-
- &:focus {
- outline: none;
- }
-
- &:focus-visible {
- outline: none;
- background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
-
- .spectrum-SplitView-gripper {
- border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
- box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
- }
-
- .spectrum-SplitView-gripper::before {
- background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
- }
- }
+ &:hover,
+ &.is-hovered {
+ background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+
+ .spectrum-SplitView-gripper {
+ border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+ }
+
+ .spectrum-SplitView-gripper::before {
+ background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+ }
+ }
+
+ &:active,
+ &.is-active {
+ background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+
+ .spectrum-SplitView-gripper {
+ border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+ }
+
+ /* Center line of gripper */
+ .spectrum-SplitView-gripper::before {
+ background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+ }
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ &:focus-visible {
+ outline: none;
+ background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+
+ .spectrum-SplitView-gripper {
+ border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+ box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+ }
+
+ .spectrum-SplitView-gripper::before {
+ background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+ }
+ }
}
.spectrum-SplitView--vertical {
- flex-direction: column;
-
- .spectrum-SplitView-pane {
- block-size: auto;
- inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
- }
-
- .spectrum-SplitView-gripper {
- /* half of (height + vertical border - handle width) * -1 (for negative opposite) */
- inset-block-start: calc(
- (
- (
- var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
- (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
- var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
- ) / 2
- ) * -1
- );
-
- transform: translate(
- calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))),
- 0
- );
- inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
- inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
- block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
-
- /* opposite of default border-width */
- border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
- border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
- }
-
- .spectrum-SplitView-splitter {
- inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
- block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
- }
-
- .spectrum-SplitView-splitter.is-collapsed-start,
- .spectrum-SplitView-splitter.is-collapsed-end {
- .spectrum-SplitView-gripper {
- inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
- }
-
- /* make the center line of the gripper */
- .spectrum-SplitView-gripper::before {
- inset-block-start: calc(
- var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) -
- calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
- );
- inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
- inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
- block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
- }
- }
-
- .spectrum-SplitView-splitter.is-collapsed-start {
- .spectrum-SplitView-gripper {
- inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
- }
- }
-
- .spectrum-SplitView-splitter.is-collapsed-end {
- .spectrum-SplitView-gripper {
- inset-block-start: auto;
- inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
- }
- }
+ flex-direction: column;
+
+ .spectrum-SplitView-pane {
+ block-size: auto;
+ inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
+ }
+
+ .spectrum-SplitView-gripper {
+ /* half of (height + vertical border - handle width) * -1 (for negative opposite) */
+ inset-block-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1);
+
+ transform: translate(calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))), 0);
+ inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
+ inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
+ block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
+
+ /* opposite of default border-width */
+ border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
+ border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
+ }
+
+ .spectrum-SplitView-splitter {
+ inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
+ block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
+ }
+
+ .spectrum-SplitView-splitter.is-collapsed-start,
+ .spectrum-SplitView-splitter.is-collapsed-end {
+ .spectrum-SplitView-gripper {
+ inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
+ }
+
+ /* make the center line of the gripper */
+ .spectrum-SplitView-gripper::before {
+ inset-block-start: calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2));
+ inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
+ inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
+ block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
+ }
+ }
+
+ .spectrum-SplitView-splitter.is-collapsed-start {
+ .spectrum-SplitView-gripper {
+ inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
+ }
+ }
+
+ .spectrum-SplitView-splitter.is-collapsed-end {
+ .spectrum-SplitView-gripper {
+ inset-block-start: auto;
+ inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
+ }
+ }
}
@media (forced-colors: active) {
- .spectrum-SplitView {
- --highcontrast-splitview-handle-background-color: CanvasText;
- --highcontrast-splitview-handle-background-color-hover: CanvasText;
- --highcontrast-splitview-handle-background-color-down: CanvasText;
- --highcontrast-splitview-handle-background-color-focus: Highlight;
- }
+ .spectrum-SplitView {
+ --highcontrast-splitview-handle-background-color: CanvasText;
+ --highcontrast-splitview-handle-background-color-hover: CanvasText;
+ --highcontrast-splitview-handle-background-color-down: CanvasText;
+ --highcontrast-splitview-handle-background-color-focus: Highlight;
+ }
}
diff --git a/components/splitview/metadata/mods.md b/components/splitview/metadata/mods.md
index 9bd25ae992..4bc870ef41 100644
--- a/components/splitview/metadata/mods.md
+++ b/components/splitview/metadata/mods.md
@@ -1,6 +1,7 @@
| Modifiable custom properties |
| ------------------------------------------------- |
| `--mod-splitview-background-color` |
+| `--mod-splitview-content-color` |
| `--mod-splitview-gripper-border-radius` |
| `--mod-splitview-gripper-border-width-horizontal` |
| `--mod-splitview-gripper-border-width-vertical` |
diff --git a/components/treeview/index.css b/components/treeview/index.css
index 26b23eef66..dc0ec39c98 100644
--- a/components/treeview/index.css
+++ b/components/treeview/index.css
@@ -11,51 +11,52 @@ governing permissions and limitations under the License.
*/
.spectrum-TreeView {
- --spectrum-treeview-line-height: var(--spectrum-line-height-200);
- --spectrum-treeview-margin-block: 1.0em;
- --spectrum-treeview-font-size: var(--spectrum-font-size-100);
+ --spectrum-treeview-line-height: var(--spectrum-line-height-200);
+ --spectrum-treeview-margin-block: 1em;
+ --spectrum-treeview-font-size: var(--spectrum-font-size-100);
- --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100);
- --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium);
+ --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100);
+ --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium);
- --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100);
- --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100);
+ --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100);
+ --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100);
- --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium);
- --spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100);
+ --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium);
+ --spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100);
+ --spectrum-treeview-heading-color: var(--spectrum-heading-color);
- --spectrum-treeview-item-border-size: var(--spectrum-border-width-200);
- --spectrum-treeview-item-border-size-selected: 1px;
- --spectrum-treeview-item-border-radius: 0px;
+ --spectrum-treeview-item-border-size: var(--spectrum-border-width-200);
+ --spectrum-treeview-item-border-size-selected: 1px;
+ --spectrum-treeview-item-border-radius: 0px;
- --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800);
- --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700);
+ --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800);
+ --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700);
- --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200);
- --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200);
+ --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200);
+ --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200);
- --spectrum-treeview-item-border-color-quiet-selected: transparent;
+ --spectrum-treeview-item-border-color-quiet-selected: transparent;
- --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75);
- --spectrum-treeview-item-icon-color: var(--spectrum-gray-700);
- --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900);
- --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900);
- --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900);
- --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75);
+ --spectrum-treeview-item-icon-color: var(--spectrum-gray-700);
+ --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900);
+ --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900);
+ --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900);
+ --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default);
- --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900);
- --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500);
- --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900);
- --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900);
+ --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900);
+ --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500);
+ --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900);
+ --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900);
- --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100));
- --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium);
+ --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100));
+ --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium);
- --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px);
+ --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px);
- --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100);
&:dir(rtl) {
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
@@ -63,351 +64,349 @@ governing permissions and limitations under the License.
}
.spectrum-TreeView--sizeS {
- --spectrum-treeview-font-size: var(--spectrum-font-size-75);
+ --spectrum-treeview-font-size: var(--spectrum-font-size-75);
- --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-75);
- --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-small);
- --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75);
+ --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-75);
+ --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-small);
+ --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75);
- --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75);
- --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75));
- --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75);
- --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small);
+ --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75);
+ --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75));
+ --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75);
+ --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small);
- --spectrum-treeview-item-min-block-size-thumbnail-offset: 6px;
+ --spectrum-treeview-item-min-block-size-thumbnail-offset: 6px;
}
.spectrum-TreeView--sizeL {
- --spectrum-treeview-font-size: var(--spectrum-font-size-200);
+ --spectrum-treeview-font-size: var(--spectrum-font-size-200);
- --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-large);
- --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-200);
- --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200);
+ --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-large);
+ --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-200);
+ --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200);
- --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200);
- --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200));
- --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200);
- --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large);
+ --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200);
+ --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200));
+ --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200);
+ --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large);
- --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
+ --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
}
.spectrum-TreeView--sizeXL {
- --spectrum-treeview-font-size: var(--spectrum-font-size-300);
+ --spectrum-treeview-font-size: var(--spectrum-font-size-300);
- --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-extra-large);
- --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-300);
- --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300);
+ --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-extra-large);
+ --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-300);
+ --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300);
- --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300);
- --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300));
- --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300);
- --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large);
+ --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300);
+ --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300));
+ --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300);
+ --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large);
- --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
+ --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
}
.spectrum-TreeView--quiet {
- --mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected)));
- --mod-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent));
+ --mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected)));
+ --mod-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent));
}
.spectrum-TreeView--thumbnail {
- --mod-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(
- var(--spectrum-treeview-item-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)
- ));
+ --mod-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)));
}
.spectrum-TreeView--detached {
- --mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100));
+ --mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100));
}
-@media (forced-colors: active){
- .spectrum-TreeView {
- --highcontrast-treeview-item-background-color-selected: Highlight;
- --highcontrast-treeview-item-border-color-selected: Highlight;
- --highcontrast-treeview-item-text-color-selected: HighlightText;
- --highcontrast-treeview-item-icon-color-selected: HighlightText;
-
- --highcontrast-treeview-item-icon-color: LinkText;
- --highcontrast-treeview-item-text-color: LinkText;
-
- --highcontrast-treeview-item-background-color-focus: Highlight;
- --highcontrast-treeview-item-text-color-focus: HighlightText;
- --highcontrast-treeview-item-border-color-focus: CanvasText;
- --highcontrast-treeview-item-icon-color-focus: HighlightText;
-
- --highcontrast-treeview-item-background-color-disabled: Canvas;
- --highcontrast-treeview-item-text-color-disabled: GrayText;
- --highcontrast-treeview-item-icon-color-disabled: GrayText;
-
- --highcontrast-treeview-heading-color: CanvasText;
- }
-
- @supports (color: SelectedItem) {
- .spectrum-TreeView {
- --highcontrast-treeview-item-background-color-selected: SelectedItem;
- --highcontrast-treeview-item-border-color-selected: SelectedItem;
- --highcontrast-treeview-item-text-color-selected: SelectedItemText;
- --highcontrast-treeview-item-icon-color-selected: SelectedItemText;
- }
- }
-
- .spectrum-TreeView-itemLabel {
- forced-color-adjust: none;
- background: transparent;
- }
-
- .spectrum-TreeView-itemLink::before {
- forced-color-adjust: none;
- }
+@media (forced-colors: active) {
+ .spectrum-TreeView {
+ --highcontrast-treeview-item-background-color-selected: Highlight;
+ --highcontrast-treeview-item-border-color-selected: Highlight;
+ --highcontrast-treeview-item-text-color-selected: HighlightText;
+ --highcontrast-treeview-item-icon-color-selected: HighlightText;
+
+ --highcontrast-treeview-item-icon-color: LinkText;
+ --highcontrast-treeview-item-text-color: LinkText;
+
+ --highcontrast-treeview-item-background-color-focus: Highlight;
+ --highcontrast-treeview-item-text-color-focus: HighlightText;
+ --highcontrast-treeview-item-border-color-focus: CanvasText;
+ --highcontrast-treeview-item-icon-color-focus: HighlightText;
+
+ --highcontrast-treeview-item-background-color-disabled: Canvas;
+ --highcontrast-treeview-item-text-color-disabled: GrayText;
+ --highcontrast-treeview-item-icon-color-disabled: GrayText;
+
+ --highcontrast-treeview-heading-color: CanvasText;
+ }
+
+ @supports (color: SelectedItem) {
+ .spectrum-TreeView {
+ --highcontrast-treeview-item-background-color-selected: SelectedItem;
+ --highcontrast-treeview-item-border-color-selected: SelectedItem;
+ --highcontrast-treeview-item-text-color-selected: SelectedItemText;
+ --highcontrast-treeview-item-icon-color-selected: SelectedItemText;
+ }
+ }
+
+ .spectrum-TreeView-itemLabel {
+ forced-color-adjust: none;
+ background: transparent;
+ }
+
+ .spectrum-TreeView-itemLink::before {
+ forced-color-adjust: none;
+ }
}
.spectrum-TreeView {
- display: block;
- position: relative;
- padding: 0;
- list-style: none;
- outline: none;
- user-select: none;
- line-height: var(--mod-treeview-line-height, var(--spectrum-treeview-line-height));
- margin-block: var(--mod-treeview-margin-block, var(--spectrum-treeview-margin-block));
- font-size: var(--mod-treeview-font-size, var(--spectrum-treeview-font-size));
-
- /* Close (hide) nested treeviews by default. */
- .spectrum-TreeView {
- position: static;
- block-size: 0;
- display: none;
- padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
- margin-block: 0;
- }
+ display: block;
+ position: relative;
+ padding: 0;
+ list-style: none;
+ outline: none;
+ user-select: none;
+ line-height: var(--mod-treeview-line-height, var(--spectrum-treeview-line-height));
+ margin-block: var(--mod-treeview-margin-block, var(--spectrum-treeview-margin-block));
+ font-size: var(--mod-treeview-font-size, var(--spectrum-treeview-font-size));
+
+ /* Close (hide) nested treeviews by default. */
+ .spectrum-TreeView {
+ position: static;
+ block-size: 0;
+ display: none;
+ padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
+ margin-block: 0;
+ }
}
.spectrum-TreeView-item {
- /* Don't let child treeviews that are open spill out */
- overflow: hidden;
-
- &.is-open {
- > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator {
- /* Rotate the chevron */
- transform: var(--spectrum-logical-rotation,) rotate(90deg);
- }
-
- > .spectrum-TreeView {
- /* Open the treeview */
- block-size: auto;
- display: block;
- }
- }
-
- &.is-selected,
- &.is-drop-target {
- > .spectrum-TreeView-itemLink {
- color: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-treeview-item-text-color-selected)));
-
- &::before {
- background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected)));
- }
-
- .spectrum-TreeView-itemIcon {
- color: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-treeview-item-icon-color-selected)));
- }
- }
-
- > .spectrum-TreeView-itemLink:not(:focus-visible) {
- &::before {
- border-color: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-treeview-item-border-color-selected)));
- }
- }
- }
-
- &.is-selected {
- > .spectrum-TreeView-itemLink:not(:focus-visible) {
- &::before {
- border-width: var(--mod-treeview-item-border-size-selected, var(--spectrum-treeview-item-border-size-selected));
- }
- }
- }
-
- &.is-drop-target {
- > .spectrum-TreeView-itemLink {
- &::before {
- border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
- }
- }
- }
-
- &.is-disabled {
- > .spectrum-TreeView-itemLink {
- color: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-treeview-item-text-color-disabled)));
-
- &::before {
- background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent);
- }
-
- .spectrum-Icon {
- color: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-treeview-item-icon-color-disabled)));
- }
- }
- }
+ /* Don't let child treeviews that are open spill out */
+ overflow: hidden;
+
+ &.is-open {
+ > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator {
+ /* Rotate the chevron */
+ transform: var(--spectrum-logical-rotation,) rotate(90deg);
+ }
+
+ > .spectrum-TreeView {
+ /* Open the treeview */
+ block-size: auto;
+ display: block;
+ }
+ }
+
+ &.is-selected,
+ &.is-drop-target {
+ > .spectrum-TreeView-itemLink {
+ color: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-treeview-item-text-color-selected)));
+
+ &::before {
+ background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected)));
+ }
+
+ .spectrum-TreeView-itemIcon {
+ color: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-treeview-item-icon-color-selected)));
+ }
+ }
+
+ > .spectrum-TreeView-itemLink:not(:focus-visible) {
+ &::before {
+ border-color: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-treeview-item-border-color-selected)));
+ }
+ }
+ }
+
+ &.is-selected {
+ > .spectrum-TreeView-itemLink:not(:focus-visible) {
+ &::before {
+ border-width: var(--mod-treeview-item-border-size-selected, var(--spectrum-treeview-item-border-size-selected));
+ }
+ }
+ }
+
+ &.is-drop-target {
+ > .spectrum-TreeView-itemLink {
+ &::before {
+ border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
+ }
+ }
+ }
+
+ &.is-disabled {
+ > .spectrum-TreeView-itemLink {
+ color: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-treeview-item-text-color-disabled)));
+
+ &::before {
+ background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent);
+ }
+
+ .spectrum-Icon {
+ color: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-treeview-item-icon-color-disabled)));
+ }
+ }
+ }
}
.spectrum-TreeView-itemLabel {
- overflow: hidden;
- text-overflow: ellipsis;
- position: relative;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ position: relative;
}
.spectrum-TreeView-itemLink {
- box-sizing: border-box;
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
-
- min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
- padding-inline: var(--mod-treeview-item-padding-inline-start, var(--spectrum-treeview-item-padding-inline-start)) var(--mod-treeview-item-padding-inline-end, var(--spectrum-treeview-item-padding-inline-end));
-
- color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-treeview-item-text-color)));
-
- text-decoration: none;
- outline: none;
- cursor: pointer;
-
- /* Prevent weirdness that can cause the vertical bar to fall down. */
- white-space: nowrap;
- overflow: hidden;
-
- /* Background for hover, focus, and selection, that extends the full width of the list. */
- &::before {
- content: '\00a0';
- box-sizing: border-box;
- position: absolute;
- inset-inline: 0;
- min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
-
- border-style: solid;
- border-color: transparent;
- border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)) 0;
- background-color: transparent;
- color: transparent;
- }
-
- &:focus-visible {
- color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-treeview-item-text-color-focus)));
-
- &::before {
- background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus)));
- border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
- border-color: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-treeview-item-border-color-focus)));
- }
-
- .spectrum-TreeView-itemIcon {
- color: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-treeview-item-icon-color-focus)));
- }
- }
-
- &:hover {
- color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-treeview-item-text-color-hover)));
-
- &::before {
- background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover)));
- }
-
- .spectrum-TreeView-itemIcon {
- color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-treeview-item-icon-color-hover)));
- }
- }
+ box-sizing: border-box;
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+
+ min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
+ padding-inline: var(--mod-treeview-item-padding-inline-start, var(--spectrum-treeview-item-padding-inline-start)) var(--mod-treeview-item-padding-inline-end, var(--spectrum-treeview-item-padding-inline-end));
+
+ color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-treeview-item-text-color)));
+
+ text-decoration: none;
+ outline: none;
+ cursor: pointer;
+
+ /* Prevent weirdness that can cause the vertical bar to fall down. */
+ white-space: nowrap;
+ overflow: hidden;
+
+ /* Background for hover, focus, and selection, that extends the full width of the list. */
+ &::before {
+ content: "\00a0";
+ box-sizing: border-box;
+ position: absolute;
+ inset-inline: 0;
+ min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
+
+ border-style: solid;
+ border-color: transparent;
+ border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)) 0;
+ background-color: transparent;
+ color: transparent;
+ }
+
+ &:focus-visible {
+ color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-treeview-item-text-color-focus)));
+
+ &::before {
+ background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus)));
+ border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
+ border-color: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-treeview-item-border-color-focus)));
+ }
+
+ .spectrum-TreeView-itemIcon {
+ color: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-treeview-item-icon-color-focus)));
+ }
+ }
+
+ &:hover {
+ color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-treeview-item-text-color-hover)));
+
+ &::before {
+ background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover)));
+ }
+
+ .spectrum-TreeView-itemIcon {
+ color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-treeview-item-icon-color-hover)));
+ }
+ }
}
.spectrum-TreeView-itemIcon {
- position: relative;
- vertical-align: top;
- flex-shrink: 0;
- margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
- color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-treeview-item-icon-color)));
+ position: relative;
+ vertical-align: top;
+ flex-shrink: 0;
+ margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
+ color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-treeview-item-icon-color)));
}
.spectrum-TreeView-itemIndicator {
- display: block;
- box-sizing: content-box;
- position: relative;
- flex-shrink: 0;
+ display: block;
+ box-sizing: content-box;
+ position: relative;
+ flex-shrink: 0;
- /* Make sure the hover background pseudo element doesn't block clicks on the chevron. */
- z-index: 1;
+ /* Make sure the hover background pseudo element doesn't block clicks on the chevron. */
+ z-index: 1;
- padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding));
- padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding));
- margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start));
+ padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding));
+ padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding));
+ margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start));
- transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration));
- pointer-events: all;
- transform: var(--spectrum-logical-rotation);
+ transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration));
+ pointer-events: all;
+ transform: var(--spectrum-logical-rotation);
}
/* Section headings */
.spectrum-TreeView-section > .spectrum-TreeView {
- display: block;
- block-size: auto;
- padding-inline-start: 0;
+ display: block;
+ block-size: auto;
+ padding-inline-start: 0;
}
.spectrum-TreeView-section:not(:first-child) {
- margin-block-start: var(--mod-treeview-section-spacing, var(--spectrum-treeview-section-spacing));
+ margin-block-start: var(--mod-treeview-section-spacing, var(--spectrum-treeview-section-spacing));
}
.spectrum-TreeView-heading {
- padding-block-end: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-treeview-heading-bottom-to-text));
- font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-treeview-heading-font-weight));
- color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, inherit));
+ padding-block-end: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-treeview-heading-bottom-to-text));
+ font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-treeview-heading-font-weight));
+ color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-treeview-heading-color)));
}
/* Indentation levels used with Flat structure variant. */
.spectrum-TreeView-item--indent1 {
- padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
+ padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
}
.spectrum-TreeView-item--indent2 {
- padding-inline-start: calc(2 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+ padding-inline-start: calc(2 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
}
.spectrum-TreeView-item--indent3 {
- padding-inline-start: calc(3 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+ padding-inline-start: calc(3 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
}
.spectrum-TreeView-item--indent4 {
- padding-inline-start: calc(4 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+ padding-inline-start: calc(4 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
}
.spectrum-TreeView-item--indent5 {
- padding-inline-start: calc(5 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+ padding-inline-start: calc(5 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
}
.spectrum-TreeView-item--indent6 {
- padding-inline-start: calc(6 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+ padding-inline-start: calc(6 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
}
.spectrum-TreeView-item--indent7 {
- padding-inline-start: calc(7 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+ padding-inline-start: calc(7 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
}
.spectrum-TreeView-item--indent8 {
- padding-inline-start: calc(8 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+ padding-inline-start: calc(8 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
}
.spectrum-TreeView-item--indent9 {
- padding-inline-start: calc(9 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+ padding-inline-start: calc(9 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
}
.spectrum-TreeView-item--indent10 {
- padding-inline-start: calc(10 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+ padding-inline-start: calc(10 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
}
/* ***** VARIANTS ***** */
.spectrum-TreeView--thumbnail {
- .spectrum-TreeView-itemThumbnail {
- flex-shrink: 0;
- margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
- }
+ .spectrum-TreeView-itemThumbnail {
+ flex-shrink: 0;
+ margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
+ }
}
diff --git a/components/well/index.css b/components/well/index.css
index 5637577003..8ee05edc52 100644
--- a/components/well/index.css
+++ b/components/well/index.css
@@ -11,18 +11,20 @@ governing permissions and limitations under the License.
*/
.spectrum-Well {
- --spectrum-well-border-width: var(--spectrum-border-width-100);
+ --spectrum-well-border-width: var(--spectrum-border-width-100);
+ --spectrum-well-content-color: var(--spectrum-body-color);
}
.spectrum-Well {
- text-align: start;
- display: block;
- min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width));
- padding: var(--mod-well-padding, var(--spectrum-well-padding));
- margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top));
- border-width: var(--mod-well-border-width, var(--spectrum-well-border-width));
- border-style: solid;
- border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius));
- background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02));
- border-color: var(--mod-well-border-color, var(--spectrum-well-border-color));
+ text-align: start;
+ display: block;
+ min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width));
+ padding: var(--mod-well-padding, var(--spectrum-well-padding));
+ margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top));
+ border-width: var(--mod-well-border-width, var(--spectrum-well-border-width));
+ border-style: solid;
+ border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius));
+ background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02));
+ border-color: var(--mod-well-border-color, var(--spectrum-well-border-color));
+ color: var(--mod-well-content-color, var(--spectrum-well-content-color));
}
diff --git a/components/well/metadata/mods.md b/components/well/metadata/mods.md
index 91e6f136d7..99f96fddca 100644
--- a/components/well/metadata/mods.md
+++ b/components/well/metadata/mods.md
@@ -4,6 +4,7 @@
| `--mod-well-border-color` |
| `--mod-well-border-radius` |
| `--mod-well-border-width` |
+| `--mod-well-content-color` |
| `--mod-well-margin-top` |
| `--mod-well-min-width` |
| `--mod-well-padding` |