diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js
index 444a4e2ff8..396d9a1b32 100644
--- a/.storybook/decorators/utilities.js
+++ b/.storybook/decorators/utilities.js
@@ -331,10 +331,12 @@ export const ArgGrid = ({
export const Sizes = ({
withHeading = true,
withBorder = false,
+ withWrapperBorder = true,
...args
} = {}, context = {}) => {
return ArgGrid({
withBorder,
+ withWrapperBorder,
heading: withHeading ? "Sizing" : undefined,
argKey: "size",
labels: {
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 046f3192f1..befa453149 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -248,7 +248,7 @@
position: relative;
- min-inline-size: var(--mod-actionbutton-min-width, calc((var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)) * 2 + var(--spectrum-actionbutton-icon-size)));
+ min-inline-size: var(--mod-actionbutton-min-width, calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size)));
block-size: var(--spectrum-actionbutton-height);
border-radius: var(--spectrum-actionbutton-border-radius);
@@ -294,6 +294,7 @@ a.spectrum-ActionButton {
@extend %spectrum-AnchorButton;
}
+/* Nested sub-component: Icon */
.spectrum-ActionButton-icon {
@extend %spectrum-ButtonIcon;
diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
index 2e3d368b69..14997eb905 100644
--- a/components/actiongroup/index.css
+++ b/components/actiongroup/index.css
@@ -72,7 +72,7 @@
z-index: 0;
&:first-child {
- /* Action button passthrough styling */
+ /* @passthrough -- Action button styling */
--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -81,7 +81,7 @@
}
& + .spectrum-ActionGroup-item {
- /* Action button passthrough styling */
+ /* @passthrough -- Action button styling */
--mod-actionbutton-focus-indicator-border-radius: 0px;
margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
@@ -89,7 +89,7 @@
}
&:last-child {
- /* Action button passthrough styling */
+ /* @passthrough -- Action button styling */
--mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -124,7 +124,7 @@
border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
&:first-child {
- /* Action button passthrough styling */
+ /* @passthrough -- Action button styling */
--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px;
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -142,7 +142,7 @@
}
&:last-child {
- /* Action button passthrough styling */
+ /* @passthrough -- Action button styling */
--mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
diff --git a/components/button/index.css b/components/button/index.css
index c26975c0d8..a7f4a6d036 100644
--- a/components/button/index.css
+++ b/components/button/index.css
@@ -14,61 +14,6 @@
@import "@spectrum-css/commons/basebutton.css";
@import "./themes/spectrum-two.css";
-/* Windows High Contrast Mode */
-@media (forced-colors: active) {
- .spectrum-Button {
- --highcontrast-button-content-color-default: ButtonText;
- --highcontrast-button-content-color-hover: ButtonText;
- --highcontrast-button-content-color-focus: ButtonText;
- --highcontrast-button-content-color-down: ButtonText;
- --highcontrast-button-content-color-disabled: GrayText;
-
- --highcontrast-button-border-color-default: ButtonBorder;
- --highcontrast-button-border-color-hover: ButtonBorder;
- --highcontrast-button-border-color-focus: ButtonBorder;
- --highcontrast-button-border-color-down: ButtonBorder;
- --highcontrast-button-border-color-disabled: GrayText;
-
- --highcontrast-button-background-color-default: ButtonFace;
- --highcontrast-button-background-color-hover: ButtonFace;
- --highcontrast-button-background-color-down: ButtonFace;
- --highcontrast-button-background-color-focus: ButtonFace;
- --highcontrast-button-background-color-disabled: ButtonFace;
-
- --mod-progress-circle-track-border-color: ButtonText;
- --mod-progress-circle-track-border-color-over-background: ButtonText;
- --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
- --mod-button-animation-duration: 0s;
-
- .spectrum-Button-label {
- forced-color-adjust: none;
- }
-
- &:focus-visible::after {
- forced-color-adjust: none;
- box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) ButtonText;
- }
-
- &.spectrum-Button--accent.spectrum-Button--fill {
- --highcontrast-button-background-color-default: ButtonText;
- --highcontrast-button-background-color-hover: Highlight;
- --highcontrast-button-background-color-down: Highlight;
- --highcontrast-button-background-color-focus: Highlight;
- --highcontrast-button-background-color-disabled: ButtonFace;
-
- --highcontrast-button-content-color-default: ButtonFace;
- --highcontrast-button-content-color-hover: HighlightText;
- --highcontrast-button-content-color-down: HighlightText;
- --highcontrast-button-content-color-focus: HighlightText;
-
- --highcontrast-button-border-color-default: ButtonText;
- --highcontrast-button-border-color-hover: Highlight;
- --highcontrast-button-border-color-focus: Highlight;
- --highcontrast-button-border-color-down: Highlight;
- }
- }
-}
-
.spectrum-Button,
.spectrum-Button--sizeM {
--spectrum-button-sized-height: var(--spectrum-component-height-100);
@@ -128,222 +73,190 @@
/* default for all buttons */
.spectrum-Button {
- --spectrum-button-height: var(--mod-button-height, var(--spectrum-button-sized-height));
- --spectrum-button-min-width: var(--mod-button-min-width, calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier)));
-
- --spectrum-button-line-height: var(--mod-button-line-height, 1.2); /* Hack to keep buttons at 32px */
- --spectrum-button-font-size: var(--mod-button-font-size, var(--spectrum-button-sized-font-size));
- --spectrum-button-padding-label-to-icon: var(--mod-button-padding-label-to-icon, var(--spectrum-button-sized-padding-label-to-icon));
-
- --spectrum-button-edge-to-visual: var(--mod-button-edge-to-visual, var(--spectrum-button-sized-edge-to-visual));
- --spectrum-button-edge-to-visual-only: var(--mod-button-edge-to-visual-only, var(--spectrum-button-sized-edge-to-visual-only));
- --spectrum-button-edge-to-text: var(--mod-button-edge-to-text, var(--spectrum-button-sized-edge-to-text));
-
- --spectrum-button-top-to-text: var(--mod-button-top-to-text, var(--spectrum-button-sized-top-to-text));
- --spectrum-button-bottom-to-text: var(--mod-button-bottom-to-text, var(--spectrum-button-sized-bottom-to-text));
- --spectrum-button-top-to-icon: var(--mod-button-top-to-icon, var(--spectrum-button-sized-top-to-icon));
-
- --spectrum-button-focus-ring-thickness: var(--mod-button-focus-ring-thickness, var(--spectrum-focus-indicator-thickness));
- --spectrum-button-focus-indicator-color: var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-focus-indicator-color)));
-
- --spectrum-button-animation-duration: var(--mod-button-animation-duration, var(--spectrum-animation-duration-100));
- --spectrum-button-border-width: var(--mod-button-border-width, var(--spectrum-border-width-200));
-
- --spectrum-button-focus-ring-gap: var(--mod-focus-indicator-gap, var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap)));
- --spectrum-button-border-radius: var(--mod-button-border-radius, calc(var(--spectrum-button-height) / 2));
-
- --spectrum-button-focus-ring-border-radius: var(--mod-button-focus-ring-border-radius, calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap)));
-
- --spectrum-button-content-color-default: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-neutral-content-color-default)));
- --spectrum-button-content-color-hover: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-neutral-content-color-hover)));
- --spectrum-button-content-color-down: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-neutral-content-color-down)));
- --spectrum-button-content-color-focus: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-neutral-content-color-key-focus)));
- --spectrum-button-content-color-disabled: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-disabled-content-color)));
-
- /* @passthrough -- align the progress circle in the button */
- --mod-progress-circle-position: absolute;
-
&.is-selected {
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
+ --mod-button-border-color-default: transparent;
+ --mod-button-border-color-hover: transparent;
+ --mod-button-border-color-down: transparent;
+ --mod-button-border-color-focus: transparent;
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
+ --mod-button-content-color-default: var(--spectrum-white);
+ --mod-button-content-color-hover: var(--spectrum-white);
+ --mod-button-content-color-down: var(--spectrum-white);
+ --mod-button-content-color-focus: var(--spectrum-white);
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
+ --mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --mod-button-border-color-disabled: transparent;
&.spectrum-Button--emphasized {
- --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+ --mod-button-background-color-default: var(--spectrum-accent-background-color-default);
+ --mod-button-background-color-hover: var(--spectrum-accent-background-color-hover);
+ --mod-button-background-color-down: var(--spectrum-accent-background-color-down);
+ --mod-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
}
}
- &.spectrum-Button--outline {
- --mod-button-background-color-default: transparent;
- --mod-button-background-color-disabled: transparent;
- }
-
&.spectrum-Button--accent {
- --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
- --spectrum-button-border-color-disabled: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
+ --mod-button-background-color-default: var(--spectrum-accent-background-color-default);
+ --mod-button-background-color-hover: var(--spectrum-accent-background-color-hover);
+ --mod-button-background-color-down: var(--spectrum-accent-background-color-down);
+ --mod-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+ --mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+
+ --mod-button-border-color-default: transparent;
+ --mod-button-border-color-hover: transparent;
+ --mod-button-border-color-down: transparent;
+ --mod-button-border-color-focus: transparent;
+ --mod-button-border-color-disabled: transparent;
+
+ --mod-button-content-color-default: var(--spectrum-white);
+ --mod-button-content-color-hover: var(--spectrum-white);
+ --mod-button-content-color-down: var(--spectrum-white);
+ --mod-button-content-color-focus: var(--spectrum-white);
&.spectrum-Button--outline {
- --spectrum-button-background-color-hover: var(--spectrum-accent-color-200);
- --spectrum-button-background-color-down: var(--spectrum-accent-color-300);
- --spectrum-button-background-color-focus: var(--spectrum-accent-color-200);
-
- --spectrum-button-border-color-default: var(--spectrum-accent-color-900);
- --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-button-border-color-down: var(--spectrum-accent-color-1100);
- --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000);
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
-
- --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ --mod-button-background-color-hover: var(--spectrum-accent-color-200);
+ --mod-button-background-color-down: var(--spectrum-accent-color-300);
+ --mod-button-background-color-focus: var(--spectrum-accent-color-200);
+
+ --mod-button-border-color-default: var(--spectrum-accent-color-900);
+ --mod-button-border-color-hover: var(--spectrum-accent-color-1000);
+ --mod-button-border-color-down: var(--spectrum-accent-color-1100);
+ --mod-button-border-color-focus: var(--spectrum-accent-color-1000);
+ --mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
+
+ --mod-button-content-color-default: var(--spectrum-accent-content-color-default);
+ --mod-button-content-color-hover: var(--spectrum-accent-content-color-hover);
+ --mod-button-content-color-down: var(--spectrum-accent-content-color-down);
+ --mod-button-content-color-focus: var(--spectrum-accent-content-color-key-focus);
+ --mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
}
}
&.spectrum-Button--negative {
- --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus);
+ --mod-button-background-color-default: var(--spectrum-negative-background-color-default);
+ --mod-button-background-color-hover: var(--spectrum-negative-background-color-hover);
+ --mod-button-background-color-down: var(--spectrum-negative-background-color-down);
+ --mod-button-background-color-focus: var(--spectrum-negative-background-color-key-focus);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
+ --mod-button-border-color-default: transparent;
+ --mod-button-border-color-hover: transparent;
+ --mod-button-border-color-down: transparent;
+ --mod-button-border-color-focus: transparent;
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
+ --mod-button-content-color-default: var(--spectrum-white);
+ --mod-button-content-color-hover: var(--spectrum-white);
+ --mod-button-content-color-down: var(--spectrum-white);
+ --mod-button-content-color-focus: var(--spectrum-white);
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ --mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --mod-button-border-color-disabled: transparent;
+ --mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
&.spectrum-Button--outline {
- --spectrum-button-background-color-hover: var(--spectrum-negative-color-200);
- --spectrum-button-background-color-down: var(--spectrum-negative-color-300);
- --spectrum-button-background-color-focus: var(--spectrum-negative-color-200);
-
- --spectrum-button-border-color-default: var(--spectrum-negative-color-900);
- --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000);
- --spectrum-button-border-color-down: var(--spectrum-negative-color-1100);
- --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000);
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
-
- --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ --mod-button-background-color-hover: var(--spectrum-negative-color-200);
+ --mod-button-background-color-down: var(--spectrum-negative-color-300);
+ --mod-button-background-color-focus: var(--spectrum-negative-color-200);
+
+ --mod-button-border-color-default: var(--spectrum-negative-color-900);
+ --mod-button-border-color-hover: var(--spectrum-negative-color-1000);
+ --mod-button-border-color-down: var(--spectrum-negative-color-1100);
+ --mod-button-border-color-focus: var(--spectrum-negative-color-1000);
+ --mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
+
+ --mod-button-content-color-default: var(--spectrum-negative-content-color-default);
+ --mod-button-content-color-hover: var(--spectrum-negative-content-color-hover);
+ --mod-button-content-color-down: var(--spectrum-negative-content-color-down);
+ --mod-button-content-color-focus: var(--spectrum-negative-content-color-key-focus);
+ --mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
}
}
&.spectrum-Button--primary {
- --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
- --spectrum-button-border-color-disabled: transparent;
+ --mod-button-background-color-default: var(--spectrum-neutral-background-color-default);
+ --mod-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
+ --mod-button-background-color-down: var(--spectrum-neutral-background-color-down);
+ --mod-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
+ --mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+
+ --mod-button-content-color-default: var(--spectrum-white);
+ --mod-button-content-color-hover: var(--spectrum-white);
+ --mod-button-content-color-down: var(--spectrum-white);
+ --mod-button-content-color-focus: var(--spectrum-white);
+
+ --mod-button-border-color-default: transparent;
+ --mod-button-border-color-hover: transparent;
+ --mod-button-border-color-down: transparent;
+ --mod-button-border-color-focus: transparent;
+ --mod-button-border-color-disabled: transparent;
&.spectrum-Button--outline {
- --spectrum-button-border-color-default: var(--spectrum-gray-800);
- --spectrum-button-border-color-hover: var(--spectrum-gray-900);
- --spectrum-button-border-color-down: var(--spectrum-gray-900);
- --spectrum-button-border-color-focus: var(--spectrum-gray-900);
-
- --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ --mod-button-border-color-default: var(--spectrum-gray-800);
+ --mod-button-border-color-hover: var(--spectrum-gray-900);
+ --mod-button-border-color-down: var(--spectrum-gray-900);
+ --mod-button-border-color-focus: var(--spectrum-gray-900);
+
+ --mod-button-content-color-default: var(--spectrum-neutral-content-color-default);
+ --mod-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --mod-button-content-color-down: var(--spectrum-neutral-content-color-down);
+ --mod-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
}
}
&.spectrum-Button--secondary {
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
- --spectrum-button-border-color-disabled: transparent;
+ --mod-button-border-color-default: transparent;
+ --mod-button-border-color-hover: transparent;
+ --mod-button-border-color-down: transparent;
+ --mod-button-border-color-focus: transparent;
+ --mod-button-border-color-disabled: transparent;
- --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ --mod-button-content-color-default: var(--spectrum-neutral-content-color-default);
+ --mod-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --mod-button-content-color-down: var(--spectrum-neutral-content-color-down);
+ --mod-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+ --mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
&.spectrum-Button--outline {
- --spectrum-button-background-color-down: var(--spectrum-gray-400);
-
- --spectrum-button-border-color-default: var(--spectrum-gray-300);
- --spectrum-button-border-color-hover: var(--spectrum-gray-400);
- --spectrum-button-border-color-down: var(--spectrum-gray-500);
- --spectrum-button-border-color-focus: var(--spectrum-gray-400);
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
-
- --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ --mod-button-background-color-down: var(--spectrum-gray-400);
+
+ --mod-button-border-color-default: var(--spectrum-gray-300);
+ --mod-button-border-color-hover: var(--spectrum-gray-400);
+ --mod-button-border-color-down: var(--spectrum-gray-500);
+ --mod-button-border-color-focus: var(--spectrum-gray-400);
+ --mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
+
+ --mod-button-content-color-default: var(--spectrum-neutral-content-color-default);
+ --mod-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --mod-button-content-color-down: var(--spectrum-neutral-content-color-down);
+ --mod-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+ --mod-button-content-color-disabled: var(--spectrum-disabled-content-color);
}
}
&.spectrum-Button--quiet {
- --spectrum-button-background-color-default: transparent;
- --spectrum-button-background-color-hover: var(--spectrum-gray-200);
- --spectrum-button-background-color-down: var(--spectrum-gray-300);
- --spectrum-button-background-color-focus: var(--spectrum-gray-200);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: transparent;
+ --mod-button-background-color-hover: var(--spectrum-gray-200);
+ --mod-button-background-color-down: var(--spectrum-gray-300);
+ --mod-button-background-color-focus: var(--spectrum-gray-200);
+
+ --mod-button-border-color-default: transparent;
+ --mod-button-border-color-hover: transparent;
+ --mod-button-border-color-down: transparent;
+ --mod-button-border-color-focus: transparent;
+ --mod-button-border-color-disabled: transparent;
}
&.spectrum-Button--staticBlack,
&.spectrum-Button--staticWhite {
+ --mod-button-border-color-default: transparent;
+ --mod-button-border-color-hover: transparent;
+ --mod-button-border-color-down: transparent;
+ --mod-button-border-color-focus: transparent;
+ --mod-button-border-color-disabled: transparent;
+
&.is-selected {
/* @deprecated previous mapping for --mod-button-static-content-color was applied to the is-selected state */
--mod-button-content-color-default: var(--mod-button-static-content-color);
@@ -351,85 +264,97 @@
--mod-button-content-color-down: var(--mod-button-static-content-color);
--mod-button-content-color-focus: var(--mod-button-static-content-color);
- --spectrum-button-border-color-disabled: transparent;
- }
-
- &.spectrum-Button--quiet {
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-border-color-disabled: transparent;
+ --mod-button-border-color-disabled: transparent;
}
- &,
&.spectrum-Button--secondary {
--mod-button-border-color-default: transparent;
--mod-button-border-color-hover: transparent;
--mod-button-border-color-down: transparent;
--mod-button-border-color-focus: transparent;
--mod-button-border-color-disabled: transparent;
+ }
- &.spectrum-Button--outline {
- --mod-button-background-color-default: transparent;
- --mod-button-background-color-disabled: transparent;
- }
+ &.spectrum-Button--quiet {
+ --mod-button-border-color-default: transparent;
+ --mod-button-border-color-hover: transparent;
+ --mod-button-border-color-down: transparent;
+ --mod-button-border-color-focus: transparent;
+
+ --mod-button-border-color-disabled: transparent;
}
}
&.spectrum-Button--staticWhite {
- &,
- &.spectrum-Button--primary {
- /* background colors _not_ disabled served via the theme layer */
+ --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+ --mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+ --mod-button-focus-ring-color: var(--spectrum-static-white-focus-indicator-color);
+
+ &.spectrum-Button--secondary:not(.spectrum-Button--outline) {
--mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
- --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
- --mod-button-focus-ring-color: var(--mod-static-white-focus-indicator-color, var(--spectrum-static-white-focus-indicator-color));
}
&.spectrum-Button--outline {
+ --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
--mod-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
}
-
- &.spectrum-Button--secondary {
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
-
- &,
- &.spectrum-Button--outline {
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
- }
-
- &.spectrum-Button--outline {
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
- }
- }
}
&.spectrum-Button--staticBlack {
- &,
- &.spectrum-Button--primary {
+ --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+ --mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+ --mod-button-focus-ring-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
+
+ &.spectrum-Button--secondary:not(.spectrum-Button--outline) {
--mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
- --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
- --mod-button-focus-ring-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
}
&.spectrum-Button--outline {
+ --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
--mod-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
}
+ }
- &.spectrum-Button--secondary {
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+ &.spectrum-Button--quiet,
+ &.spectrum-Button--outline {
+ --mod-button-background-color-default: transparent;
+ --mod-button-background-color-disabled: transparent;
+ }
+}
- &,
- &.spectrum-Button--outline {
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
- }
+.spectrum-Button {
+ --spectrum-button-height: var(--mod-button-height, var(--spectrum-button-sized-height));
+ --spectrum-button-min-width: var(--mod-button-min-width, calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier)));
- &.spectrum-Button--outline {
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
- }
- }
- }
+ --spectrum-button-line-height: var(--mod-button-line-height, 1.2); /* Hack to keep buttons at 32px */
+ --spectrum-button-font-size: var(--mod-button-font-size, var(--spectrum-button-sized-font-size));
+ --spectrum-button-padding-label-to-icon: var(--mod-button-padding-label-to-icon, var(--spectrum-button-sized-padding-label-to-icon));
+
+ --spectrum-button-edge-to-visual: var(--mod-button-edge-to-visual, var(--spectrum-button-sized-edge-to-visual));
+ --spectrum-button-edge-to-visual-only: var(--mod-button-edge-to-visual-only, var(--spectrum-button-sized-edge-to-visual-only));
+ --spectrum-button-edge-to-text: var(--mod-button-edge-to-text, var(--spectrum-button-sized-edge-to-text));
+
+ --spectrum-button-top-to-text: var(--mod-button-top-to-text, var(--spectrum-button-sized-top-to-text));
+ --spectrum-button-bottom-to-text: var(--mod-button-bottom-to-text, var(--spectrum-button-sized-bottom-to-text));
+ --spectrum-button-top-to-icon: var(--mod-button-top-to-icon, var(--spectrum-button-sized-top-to-icon));
+
+ --spectrum-button-focus-ring-thickness: var(--mod-button-focus-ring-thickness, var(--spectrum-focus-indicator-thickness));
+ --spectrum-button-focus-indicator-color: var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-focus-indicator-color)));
+
+ --spectrum-button-animation-duration: var(--mod-button-animation-duration, var(--spectrum-animation-duration-100));
+ --spectrum-button-border-width: var(--mod-button-border-width, var(--spectrum-border-width-200));
+
+ --spectrum-button-focus-ring-gap: var(--mod-focus-indicator-gap, var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap)));
+ --spectrum-button-border-radius: var(--mod-button-border-radius, calc(var(--spectrum-button-height) / 2));
+
+ --spectrum-button-content-color-default: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-neutral-content-color-default)));
+ --spectrum-button-content-color-hover: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-neutral-content-color-hover)));
+ --spectrum-button-content-color-down: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-neutral-content-color-down)));
+ --spectrum-button-content-color-focus: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-neutral-content-color-key-focus)));
+ --spectrum-button-content-color-disabled: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-disabled-content-color)));
+
+ /* @passthrough -- align the progress circle in the button */
+ --mod-progress-circle-position: absolute;
@extend %spectrum-BaseButton;
@extend %spectrum-ButtonWithFocusRing;
@@ -456,126 +381,63 @@
margin-inline-end: var(--mod-button-margin-right);
margin-inline-start: var(--mod-button-margin-left);
- &:hover,
- &:active {
- box-shadow: none;
- }
-
- .spectrum-Icon {
- /* Any block-size difference between the intended workflow icon size and actual icon used.
- Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
- --_icon-size-difference: max(0px, calc(var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))));
-
- margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, calc(var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + (var(--_icon-size-difference, 0px) / 2))));
-
- margin-inline-start: calc(var(--spectrum-button-edge-to-visual) - var(--spectrum-button-edge-to-text));
- color: inherit;
- flex-shrink: 0;
- align-self: flex-start;
- }
-
- /* correct focus indicator radius for t-shirt sizing */
- &::after {
- border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-focus-indicator-gap));
- }
-
- &.spectrum-Button--iconOnly {
- min-inline-size: unset;
- padding: calc(var(--spectrum-button-edge-to-visual-only) - var(--spectrum-button-border-width));
- border-radius: 50%;
-
- .spectrum-Icon {
- align-self: center;
- margin-inline-start: 0;
- margin-block-start: 0;
- }
-
- &::after {
- border-radius: 50%;
- }
- }
-}
-
-a.spectrum-Button {
- @extend %spectrum-AnchorButton;
-}
-
-.spectrum-Button-label {
- @extend %spectrum-ButtonLabel;
- padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width));
- padding-block-end: calc(var(--spectrum-button-bottom-to-text) - var(--spectrum-button-border-width));
- line-height: var(--spectrum-button-line-height);
- align-self: start;
- text-align: var(--mod-button-text-align, center);
-}
-
-.spectrum-Button .spectrum-Icon + .spectrum-Button-label {
- text-align: var(--mod-button-text-align-with-icon, start);
-}
+ background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
+ border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
+ color: var(--spectrum-button-content-color-default);
+ transition:
+ border var(--spectrum-button-animation-duration, 130ms) linear,
+ color var(--spectrum-button-animation-duration, 130ms) linear,
+ background-color var(--spectrum-button-animation-duration, 130ms) linear;
-.spectrum-Button {
- &:focus-visible,
- &.is-focused {
- &::after {
- box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color);
- }
+ &.spectrum-Button--outline {
+ background-color: transparent;
}
-}
-
-/* Special cases for focus indicator */
-.spectrum-Button {
- transition: border-color var(--spectrum-button-animation-duration) ease-in-out;
&::after {
position: absolute;
inset: 0;
- margin: calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1);
- border-radius: var(--spectrum-button-focus-ring-border-radius);
+ margin: var(--mod-button-focus-ring-border-radius, calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1));
transition: box-shadow var(--spectrum-button-animation-duration) ease-in-out;
pointer-events: none;
content: "";
- }
-
- &:focus-visible {
- /* Remove the default focus outline */
- box-shadow: none;
- outline: none;
- &::after {
- box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color);
- }
+ /* correct focus indicator radius for t-shirt sizing */
+ border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-focus-indicator-gap));
}
-}
-
-/* Core Token Theming */
-/* former skin.css, applied / copied from actionbutton/index.css */
-.spectrum-Button {
- @extend %spectrum-BaseButton;
-
- background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
- border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
- color: var(--spectrum-button-content-color-default);
- transition:
- border var(--spectrum-button-animation-duration, 130ms) linear,
- color var(--spectrum-button-animation-duration, 130ms) linear,
- background-color var(--spectrum-button-animation-duration, 130ms) linear;
&:hover {
background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover)));
border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover)));
color: var(--spectrum-button-content-color-hover);
+ box-shadow: none;
}
&:focus-visible {
background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus)));
border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus)));
color: var(--spectrum-button-content-color-focus);
+
+ /* Remove the default focus outline */
+ box-shadow: none;
+ outline: none;
+
+ &::after {
+ box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color);
+ }
+ }
+
+ &:focus-visible,
+ &.is-focused {
+ &::after {
+ box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color);
+ }
}
&:active {
background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down)));
border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down)));
color: var(--spectrum-button-content-color-down);
+ box-shadow: none;
}
&:disabled,
@@ -621,13 +483,116 @@ a.spectrum-Button {
transition: opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out;
}
}
+
+ .spectrum-Icon {
+ /* Any block-size difference between the intended workflow icon size and actual icon used.
+ Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
+ --_icon-size-difference: max(0px, calc(var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))));
+
+ margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, calc(var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + (var(--_icon-size-difference, 0px) / 2))));
+
+ margin-inline-start: calc(var(--spectrum-button-edge-to-visual) - var(--spectrum-button-edge-to-text));
+ color: inherit;
+ flex-shrink: 0;
+ align-self: flex-start;
+ }
+
+ &.spectrum-Button--iconOnly {
+ min-inline-size: unset;
+ padding: calc(var(--spectrum-button-edge-to-visual-only) - var(--spectrum-button-border-width));
+ border-radius: 50%;
+
+ .spectrum-Icon {
+ align-self: center;
+ margin-inline-start: 0;
+ margin-block-start: 0;
+ }
+
+ &::after {
+ border-radius: 50%;
+ }
+ }
+
+ .spectrum-Icon + .spectrum-Button-label {
+ text-align: var(--mod-button-text-align-with-icon, start);
+ }
}
-/* Disable button label wrap */
-.spectrum-Button--noWrap {
- .spectrum-Button-label {
+a.spectrum-Button {
+ @extend %spectrum-AnchorButton;
+}
+
+.spectrum-Button-label {
+ @extend %spectrum-ButtonLabel;
+ padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width));
+ padding-block-end: calc(var(--spectrum-button-bottom-to-text) - var(--spectrum-button-border-width));
+ line-height: var(--spectrum-button-line-height);
+ align-self: start;
+ text-align: var(--mod-button-text-align, center);
+
+ /* Disable button label wrap */
+ .spectrum-Button--noWrap & {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
+
+/* Windows High Contrast Mode */
+@media (forced-colors: active) {
+ .spectrum-Button {
+ --highcontrast-button-content-color-default: ButtonText;
+ --highcontrast-button-content-color-hover: ButtonText;
+ --highcontrast-button-content-color-focus: ButtonText;
+ --highcontrast-button-content-color-down: ButtonText;
+ --highcontrast-button-content-color-disabled: GrayText;
+
+ --highcontrast-button-border-color-default: ButtonBorder;
+ --highcontrast-button-border-color-hover: ButtonBorder;
+ --highcontrast-button-border-color-focus: ButtonBorder;
+ --highcontrast-button-border-color-down: ButtonBorder;
+ --highcontrast-button-border-color-disabled: GrayText;
+
+ --highcontrast-button-background-color-default: ButtonFace;
+ --highcontrast-button-background-color-hover: ButtonFace;
+ --highcontrast-button-background-color-down: ButtonFace;
+ --highcontrast-button-background-color-focus: ButtonFace;
+ --highcontrast-button-background-color-disabled: ButtonFace;
+
+ --mod-progress-circle-track-border-color: ButtonText;
+ --mod-progress-circle-track-border-color-over-background: ButtonText;
+ --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
+ --mod-button-animation-duration: 0s;
+
+ .spectrum-Button-label {
+ forced-color-adjust: none;
+ }
+
+ &:focus-visible::after {
+ forced-color-adjust: none;
+ box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) ButtonText;
+ }
+
+ &.spectrum-Button--staticWhite.spectrum-Button--accent {
+ --highcontrast-button-content-color-disabled: GrayText;
+ }
+
+ &.spectrum-Button--accent.spectrum-Button--fill {
+ --highcontrast-button-background-color-default: ButtonText;
+ --highcontrast-button-background-color-hover: Highlight;
+ --highcontrast-button-background-color-down: Highlight;
+ --highcontrast-button-background-color-focus: Highlight;
+ --highcontrast-button-background-color-disabled: ButtonFace;
+
+ --highcontrast-button-content-color-default: ButtonFace;
+ --highcontrast-button-content-color-hover: HighlightText;
+ --highcontrast-button-content-color-down: HighlightText;
+ --highcontrast-button-content-color-focus: HighlightText;
+
+ --highcontrast-button-border-color-default: ButtonText;
+ --highcontrast-button-border-color-hover: Highlight;
+ --highcontrast-button-border-color-focus: Highlight;
+ --highcontrast-button-border-color-down: Highlight;
+ }
+ }
+}
diff --git a/components/button/metadata/metadata.json b/components/button/metadata/metadata.json
index 1c4a9ca8d1..93182c30e1 100644
--- a/components/button/metadata/metadata.json
+++ b/components/button/metadata/metadata.json
@@ -35,21 +35,25 @@
".spectrum-Button.spectrum-Button--quiet",
".spectrum-Button.spectrum-Button--secondary",
".spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline",
+ ".spectrum-Button.spectrum-Button--secondary:not(.spectrum-Button--outline)",
".spectrum-Button.spectrum-Button--staticBlack",
".spectrum-Button.spectrum-Button--staticBlack.is-selected",
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline",
- ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--primary",
+ ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary)",
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet",
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary",
".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline",
+ ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary:not(.spectrum-Button--outline)",
".spectrum-Button.spectrum-Button--staticWhite",
".spectrum-Button.spectrum-Button--staticWhite.is-selected",
+ ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--accent",
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline",
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary",
- ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--primary",
+ ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary)",
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet",
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary",
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline",
+ ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary:not(.spectrum-Button--outline)",
".spectrum-Button::-moz-focus-inner",
".spectrum-Button:active",
".spectrum-Button:after",
@@ -113,8 +117,7 @@
"--mod-focus-indicator-gap",
"--mod-line-height-100",
"--mod-sans-font-family-stack",
- "--mod-static-black-focus-indicator-color",
- "--mod-static-white-focus-indicator-color"
+ "--mod-static-black-focus-indicator-color"
],
"component": [
"--spectrum-button-animation-duration",
@@ -144,7 +147,6 @@
"--spectrum-button-edge-to-visual",
"--spectrum-button-edge-to-visual-only",
"--spectrum-button-focus-indicator-color",
- "--spectrum-button-focus-ring-border-radius",
"--spectrum-button-focus-ring-gap",
"--spectrum-button-focus-ring-thickness",
"--spectrum-button-font-size",
@@ -298,17 +300,13 @@
"--system-button-border-color-down",
"--system-button-border-color-focus",
"--system-button-border-color-hover",
- "--system-button-primary-content-color-default",
- "--system-button-primary-content-color-down",
- "--system-button-primary-content-color-focus",
- "--system-button-primary-content-color-hover",
"--system-button-primary-outline-background-color-down",
"--system-button-primary-outline-background-color-focus",
"--system-button-primary-outline-background-color-hover",
"--system-button-secondary-background-color-default",
- "--system-button-secondary-background-color-down",
- "--system-button-secondary-background-color-focus",
- "--system-button-secondary-background-color-hover",
+ "--system-button-secondary-not-outline-background-color-down",
+ "--system-button-secondary-not-outline-background-color-focus",
+ "--system-button-secondary-not-outline-background-color-hover",
"--system-button-secondary-outline-background-color-down",
"--system-button-secondary-outline-background-color-focus",
"--system-button-secondary-outline-background-color-hover",
@@ -325,25 +323,17 @@
"--system-button-static-black-content-color-down",
"--system-button-static-black-content-color-focus",
"--system-button-static-black-content-color-hover",
- "--system-button-static-black-outline-background-color-down",
- "--system-button-static-black-outline-background-color-focus",
- "--system-button-static-black-outline-background-color-hover",
- "--system-button-static-black-outline-border-color-default",
- "--system-button-static-black-outline-border-color-down",
- "--system-button-static-black-outline-border-color-focus",
- "--system-button-static-black-outline-border-color-hover",
- "--system-button-static-black-outline-content-color-default",
- "--system-button-static-black-outline-content-color-down",
- "--system-button-static-black-outline-content-color-focus",
- "--system-button-static-black-outline-content-color-hover",
- "--system-button-static-black-primary-background-color-default",
- "--system-button-static-black-primary-background-color-down",
- "--system-button-static-black-primary-background-color-focus",
- "--system-button-static-black-primary-background-color-hover",
- "--system-button-static-black-primary-content-color-default",
- "--system-button-static-black-primary-content-color-down",
- "--system-button-static-black-primary-content-color-focus",
- "--system-button-static-black-primary-content-color-hover",
+ "--system-button-static-black-outline-not-secondary-background-color-down",
+ "--system-button-static-black-outline-not-secondary-background-color-focus",
+ "--system-button-static-black-outline-not-secondary-background-color-hover",
+ "--system-button-static-black-outline-not-secondary-border-color-default",
+ "--system-button-static-black-outline-not-secondary-border-color-down",
+ "--system-button-static-black-outline-not-secondary-border-color-focus",
+ "--system-button-static-black-outline-not-secondary-border-color-hover",
+ "--system-button-static-black-outline-not-secondary-content-color-default",
+ "--system-button-static-black-outline-not-secondary-content-color-down",
+ "--system-button-static-black-outline-not-secondary-content-color-focus",
+ "--system-button-static-black-outline-not-secondary-content-color-hover",
"--system-button-static-black-secondary-background-color-default",
"--system-button-static-black-secondary-background-color-down",
"--system-button-static-black-secondary-background-color-focus",
@@ -359,14 +349,6 @@
"--system-button-static-black-secondary-outline-border-color-down",
"--system-button-static-black-secondary-outline-border-color-focus",
"--system-button-static-black-secondary-outline-border-color-hover",
- "--system-button-static-black-selected-background-color-default",
- "--system-button-static-black-selected-background-color-down",
- "--system-button-static-black-selected-background-color-focus",
- "--system-button-static-black-selected-background-color-hover",
- "--system-button-static-black-selected-content-color-default",
- "--system-button-static-black-selected-content-color-down",
- "--system-button-static-black-selected-content-color-focus",
- "--system-button-static-black-selected-content-color-hover",
"--system-button-static-white-background-color-default",
"--system-button-static-white-background-color-down",
"--system-button-static-white-background-color-focus",
@@ -375,28 +357,20 @@
"--system-button-static-white-content-color-down",
"--system-button-static-white-content-color-focus",
"--system-button-static-white-content-color-hover",
- "--system-button-static-white-outline-background-color-down",
- "--system-button-static-white-outline-background-color-focus",
- "--system-button-static-white-outline-background-color-hover",
- "--system-button-static-white-outline-border-color-default",
- "--system-button-static-white-outline-border-color-down",
- "--system-button-static-white-outline-border-color-focus",
- "--system-button-static-white-outline-border-color-hover",
- "--system-button-static-white-outline-content-color-default",
- "--system-button-static-white-outline-content-color-down",
- "--system-button-static-white-outline-content-color-focus",
- "--system-button-static-white-outline-content-color-hover",
+ "--system-button-static-white-outline-not-secondary-background-color-down",
+ "--system-button-static-white-outline-not-secondary-background-color-focus",
+ "--system-button-static-white-outline-not-secondary-background-color-hover",
+ "--system-button-static-white-outline-not-secondary-border-color-default",
+ "--system-button-static-white-outline-not-secondary-border-color-down",
+ "--system-button-static-white-outline-not-secondary-border-color-focus",
+ "--system-button-static-white-outline-not-secondary-border-color-hover",
+ "--system-button-static-white-outline-not-secondary-content-color-default",
+ "--system-button-static-white-outline-not-secondary-content-color-down",
+ "--system-button-static-white-outline-not-secondary-content-color-focus",
+ "--system-button-static-white-outline-not-secondary-content-color-hover",
"--system-button-static-white-outline-secondary-background-color-down",
"--system-button-static-white-outline-secondary-background-color-focus",
"--system-button-static-white-outline-secondary-background-color-hover",
- "--system-button-static-white-primary-background-color-default",
- "--system-button-static-white-primary-background-color-down",
- "--system-button-static-white-primary-background-color-focus",
- "--system-button-static-white-primary-background-color-hover",
- "--system-button-static-white-primary-content-color-default",
- "--system-button-static-white-primary-content-color-down",
- "--system-button-static-white-primary-content-color-focus",
- "--system-button-static-white-primary-content-color-hover",
"--system-button-static-white-secondary-background-color-default",
"--system-button-static-white-secondary-background-color-down",
"--system-button-static-white-secondary-background-color-focus",
@@ -408,15 +382,7 @@
"--system-button-static-white-secondary-outline-border-color-default",
"--system-button-static-white-secondary-outline-border-color-down",
"--system-button-static-white-secondary-outline-border-color-focus",
- "--system-button-static-white-secondary-outline-border-color-hover",
- "--system-button-static-white-selected-background-color-default",
- "--system-button-static-white-selected-background-color-down",
- "--system-button-static-white-selected-background-color-focus",
- "--system-button-static-white-selected-background-color-hover",
- "--system-button-static-white-selected-content-color-default",
- "--system-button-static-white-selected-content-color-down",
- "--system-button-static-white-selected-content-color-focus",
- "--system-button-static-white-selected-content-color-hover"
+ "--system-button-static-white-secondary-outline-border-color-hover"
],
"passthroughs": [
"--mod-progress-circle-position",
diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md
index 961fd06cc1..4acffa25f9 100644
--- a/components/button/metadata/mods.md
+++ b/components/button/metadata/mods.md
@@ -49,4 +49,3 @@
| `--mod-line-height-100` |
| `--mod-sans-font-family-stack` |
| `--mod-static-black-focus-indicator-color` |
-| `--mod-static-white-focus-indicator-color` |
diff --git a/components/button/themes/express.css b/components/button/themes/express.css
index 43064e2958..10a996d37e 100644
--- a/components/button/themes/express.css
+++ b/components/button/themes/express.css
@@ -17,24 +17,24 @@
@container style(--system: express) {
.spectrum-Button {
- --spectrum-button-background-color-default: var(--spectrum-gray-200);
- --spectrum-button-background-color-hover: var(--spectrum-gray-300);
- --spectrum-button-background-color-down: var(--spectrum-gray-400);
- --spectrum-button-background-color-focus: var(--spectrum-gray-300);
+ --mod-button-background-color-default: var(--spectrum-gray-200);
+ --mod-button-background-color-hover: var(--spectrum-gray-300);
+ --mod-button-background-color-down: var(--spectrum-gray-400);
+ --mod-button-background-color-focus: var(--spectrum-gray-300);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
+ --mod-button-border-color-default: transparent;
+ --mod-button-border-color-hover: transparent;
+ --mod-button-border-color-down: transparent;
+ --mod-button-border-color-focus: transparent;
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
+ --mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --mod-button-border-color-disabled: transparent;
&.is-selected {
- --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
+ --mod-button-background-color-default: var(--spectrum-neutral-background-color-default);
+ --mod-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
+ --mod-button-background-color-down: var(--spectrum-neutral-background-color-down);
+ --mod-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
}
}
}
diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css
index 29a103996d..460a563c24 100644
--- a/components/button/themes/spectrum-two.css
+++ b/components/button/themes/spectrum-two.css
@@ -27,74 +27,47 @@
--spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
&.is-selected {
- --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
+ --mod-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+ --mod-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
+ --mod-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
+ --mod-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
}
- &.spectrum-Button--primary {
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- &.spectrum-Button--outline {
- --spectrum-button-background-color-hover: var(--spectrum-gray-200);
- --spectrum-button-background-color-down: var(--spectrum-gray-400);
- --spectrum-button-background-color-focus: var(--spectrum-gray-200);
- }
+ &.spectrum-Button--primary.spectrum-Button--outline {
+ --mod-button-background-color-hover: var(--spectrum-gray-200);
+ --mod-button-background-color-down: var(--spectrum-gray-400);
+ --mod-button-background-color-focus: var(--spectrum-gray-200);
}
&.spectrum-Button--secondary {
- --spectrum-button-background-color-default: var(--spectrum-gray-100);
- --spectrum-button-background-color-hover: var(--spectrum-gray-200);
- --spectrum-button-background-color-down: var(--spectrum-gray-400);
- --spectrum-button-background-color-focus: var(--spectrum-gray-200);
+ --mod-button-background-color-default: var(--spectrum-gray-100);
+
+ &:not(.spectrum-Button--outline) {
+ --mod-button-background-color-hover: var(--spectrum-gray-200);
+ --mod-button-background-color-down: var(--spectrum-gray-400);
+ --mod-button-background-color-focus: var(--spectrum-gray-200);
+ }
&.spectrum-Button--outline {
- --spectrum-button-background-color-hover: var(--spectrum-gray-200);
- --spectrum-button-background-color-down: var(--spectrum-gray-400);
- --spectrum-button-background-color-focus: var(--spectrum-gray-200);
+ --mod-button-background-color-hover: var(--spectrum-gray-200);
+ --mod-button-background-color-down: var(--spectrum-gray-400);
+ --mod-button-background-color-focus: var(--spectrum-gray-200);
- --spectrum-button-border-color-default: var(--spectrum-gray-200);
+ --mod-button-border-color-default: var(--spectrum-gray-200);
}
}
- /* static white */
+ /* static white: double the selector, double the fun (specificity...) */
&.spectrum-Button--staticWhite {
- &,
- &.spectrum-Button--primary,
- &.is-selected {
- --mod-button-background-color-default: var(--spectrum-transparent-white-900);
- --mod-button-background-color-hover: var(--spectrum-transparent-white-1000);
- --mod-button-background-color-down: var(--spectrum-transparent-white-1000);
- --mod-button-background-color-focus: var(--spectrum-transparent-white-1000);
-
- --mod-button-content-color-default: var(--spectrum-black);
- --mod-button-content-color-hover: var(--spectrum-black);
- --mod-button-content-color-down: var(--spectrum-black);
- --mod-button-content-color-focus: var(--spectrum-black);
- }
-
- &.spectrum-Button--outline {
- --mod-button-content-color-default: var(--spectrum-white);
- --mod-button-content-color-hover: var(--spectrum-white);
- --mod-button-content-color-down: var(--spectrum-white);
- --mod-button-content-color-focus: var(--spectrum-white);
+ --mod-button-background-color-default: var(--spectrum-transparent-white-900);
+ --mod-button-background-color-hover: var(--spectrum-transparent-white-1000);
+ --mod-button-background-color-down: var(--spectrum-transparent-white-1000);
+ --mod-button-background-color-focus: var(--spectrum-transparent-white-1000);
- --mod-button-border-color-default: var(--spectrum-transparent-white-900);
- --mod-button-border-color-hover: var(--spectrum-transparent-white-1000);
- --mod-button-border-color-down: var(--spectrum-transparent-white-1000);
- --mod-button-border-color-focus: var(--spectrum-transparent-white-1000);
-
- &,
- &.spectrum-Button--secondary {
- --mod-button-background-color-hover: var(--spectrum-transparent-white-400);
- --mod-button-background-color-down: var(--spectrum-transparent-white-500);
- --mod-button-background-color-focus: var(--spectrum-transparent-white-400);
- }
- }
+ --mod-button-content-color-default: var(--spectrum-black);
+ --mod-button-content-color-hover: var(--spectrum-black);
+ --mod-button-content-color-down: var(--spectrum-black);
+ --mod-button-content-color-focus: var(--spectrum-black);
&.spectrum-Button--secondary {
--mod-button-background-color-default: var(--spectrum-transparent-white-300);
@@ -114,39 +87,43 @@
--mod-button-border-color-focus: var(--spectrum-transparent-white-500);
}
}
- }
-
- /* static black */
- &.spectrum-Button--staticBlack {
- &,
- &.spectrum-Button--primary,
- &.is-selected {
- --mod-button-background-color-default: var(--spectrum-transparent-black-900);
- --mod-button-background-color-hover: var(--spectrum-transparent-black-1000);
- --mod-button-background-color-down: var(--spectrum-transparent-black-1000);
- --mod-button-background-color-focus: var(--spectrum-transparent-black-1000);
-
- --mod-button-content-color-default: var(--spectrum-white);
- --mod-button-content-color-hover: var(--spectrum-white);
- --mod-button-content-color-down: var(--spectrum-white);
- --mod-button-content-color-focus: var(--spectrum-white);
- }
&.spectrum-Button--outline {
- --mod-button-background-color-hover: var(--spectrum-transparent-black-400);
- --mod-button-background-color-down: var(--spectrum-transparent-black-500);
- --mod-button-background-color-focus: var(--spectrum-transparent-black-400);
+ &:not(.spectrum-Button--secondary) {
+ --mod-button-background-color-hover: var(--spectrum-transparent-white-400);
+ --mod-button-background-color-down: var(--spectrum-transparent-white-500);
+ --mod-button-background-color-focus: var(--spectrum-transparent-white-400);
- --mod-button-content-color-default: var(--spectrum-black);
- --mod-button-content-color-hover: var(--spectrum-black);
- --mod-button-content-color-down: var(--spectrum-black);
- --mod-button-content-color-focus: var(--spectrum-black);
+ --mod-button-content-color-default: var(--spectrum-white);
+ --mod-button-content-color-hover: var(--spectrum-white);
+ --mod-button-content-color-down: var(--spectrum-white);
+ --mod-button-content-color-focus: var(--spectrum-white);
+
+ --mod-button-border-color-default: var(--spectrum-transparent-white-900);
+ --mod-button-border-color-hover: var(--spectrum-transparent-white-1000);
+ --mod-button-border-color-down: var(--spectrum-transparent-white-1000);
+ --mod-button-border-color-focus: var(--spectrum-transparent-white-1000);
+ }
- --mod-button-border-color-default: var(--spectrum-transparent-black-500);
- --mod-button-border-color-hover: var(--spectrum-transparent-black-600);
- --mod-button-border-color-down: var(--spectrum-transparent-black-700);
- --mod-button-border-color-focus: var(--spectrum-transparent-black-600);
+ &.spectrum-Button--secondary {
+ --mod-button-background-color-hover: var(--spectrum-transparent-white-400);
+ --mod-button-background-color-down: var(--spectrum-transparent-white-500);
+ --mod-button-background-color-focus: var(--spectrum-transparent-white-400);
+ }
}
+ }
+
+ /* static black */
+ &.spectrum-Button--staticBlack {
+ --mod-button-background-color-default: var(--spectrum-transparent-black-900);
+ --mod-button-background-color-hover: var(--spectrum-transparent-black-1000);
+ --mod-button-background-color-down: var(--spectrum-transparent-black-1000);
+ --mod-button-background-color-focus: var(--spectrum-transparent-black-1000);
+
+ --mod-button-content-color-default: var(--spectrum-white);
+ --mod-button-content-color-hover: var(--spectrum-white);
+ --mod-button-content-color-down: var(--spectrum-white);
+ --mod-button-content-color-focus: var(--spectrum-white);
&.spectrum-Button--secondary {
--mod-button-background-color-default: var(--spectrum-transparent-black-300);
@@ -170,6 +147,24 @@
--mod-button-border-color-focus: var(--spectrum-transparent-black-500);
}
}
+
+ &.spectrum-Button--outline {
+ &:not(.spectrum-Button--secondary) {
+ --mod-button-background-color-hover: var(--spectrum-transparent-black-400);
+ --mod-button-background-color-down: var(--spectrum-transparent-black-500);
+ --mod-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+ --mod-button-content-color-default: var(--spectrum-black);
+ --mod-button-content-color-hover: var(--spectrum-black);
+ --mod-button-content-color-down: var(--spectrum-black);
+ --mod-button-content-color-focus: var(--spectrum-black);
+
+ --mod-button-border-color-default: var(--spectrum-transparent-black-500);
+ --mod-button-border-color-hover: var(--spectrum-transparent-black-600);
+ --mod-button-border-color-down: var(--spectrum-transparent-black-700);
+ --mod-button-border-color-focus: var(--spectrum-transparent-black-600);
+ }
+ }
}
}
}
diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css
index 9725ae36c6..72893c4810 100644
--- a/components/button/themes/spectrum.css
+++ b/components/button/themes/spectrum.css
@@ -17,54 +17,37 @@
@container style(--system: legacy) {
.spectrum-Button {
- --spectrum-button-background-color-default: var(--spectrum-gray-75);
- --spectrum-button-background-color-hover: var(--spectrum-gray-200);
- --spectrum-button-background-color-down: var(--spectrum-gray-300);
- --spectrum-button-background-color-focus: var(--spectrum-gray-200);
-
- &.spectrum-Button--primary {
- &.spectrum-Button--outline {
- --spectrum-button-background-color-hover: var(--spectrum-gray-300);
- --spectrum-button-background-color-focus: var(--spectrum-gray-300);
- }
+ --mod-button-background-color-default: var(--spectrum-gray-75);
+ --mod-button-background-color-hover: var(--spectrum-gray-200);
+ --mod-button-background-color-down: var(--spectrum-gray-300);
+ --mod-button-background-color-focus: var(--spectrum-gray-200);
+
+ &.spectrum-Button--primary.spectrum-Button--outline {
+ --mod-button-background-color-hover: var(--spectrum-gray-300);
+ --mod-button-background-color-focus: var(--spectrum-gray-300);
}
&.spectrum-Button--secondary {
- --spectrum-button-background-color-default: var(--spectrum-gray-200);
- --spectrum-button-background-color-hover: var(--spectrum-gray-300);
- --spectrum-button-background-color-focus: var(--spectrum-gray-300);
+ --mod-button-background-color-default: var(--spectrum-gray-200);
+
+ &:not(.spectrum-Button--outline) {
+ --mod-button-background-color-hover: var(--spectrum-gray-300);
+ --mod-button-background-color-focus: var(--spectrum-gray-300);
+ }
&.spectrum-Button--outline {
- --spectrum-button-background-color-hover: var(--spectrum-gray-300);
- --spectrum-button-background-color-focus: var(--spectrum-gray-300);
+ --mod-button-background-color-hover: var(--spectrum-gray-300);
+ --mod-button-background-color-focus: var(--spectrum-gray-300);
- --spectrum-button-border-color-default: var(--spectrum-gray-300);
+ --mod-button-border-color-default: var(--spectrum-gray-300);
}
}
&.spectrum-Button--staticWhite {
- &,
- &.spectrum-Button--primary,
- &.is-selected {
- --mod-button-background-color-default: var(--spectrum-transparent-white-800);
- --mod-button-background-color-hover: var(--spectrum-transparent-white-900);
- --mod-button-background-color-down: var(--spectrum-transparent-white-900);
- --mod-button-background-color-focus: var(--spectrum-transparent-white-900);
- }
-
- &.spectrum-Button--outline {
- --mod-button-border-color-default: var(--spectrum-transparent-white-800);
- --mod-button-border-color-hover: var(--spectrum-transparent-white-900);
- --mod-button-border-color-down: var(--spectrum-transparent-white-900);
- --mod-button-border-color-focus: var(--spectrum-transparent-white-900);
-
- &,
- &.spectrum-Button--secondary {
- --mod-button-background-color-hover: var(--spectrum-transparent-white-300);
- --mod-button-background-color-down: var(--spectrum-transparent-white-400);
- --mod-button-background-color-focus: var(--spectrum-transparent-white-300);
- }
- }
+ --mod-button-background-color-default: var(--spectrum-transparent-white-800);
+ --mod-button-background-color-hover: var(--spectrum-transparent-white-900);
+ --mod-button-background-color-down: var(--spectrum-transparent-white-900);
+ --mod-button-background-color-focus: var(--spectrum-transparent-white-900);
&.spectrum-Button--secondary {
--mod-button-background-color-default: var(--spectrum-transparent-white-200);
@@ -79,31 +62,32 @@
--mod-button-border-color-focus: var(--spectrum-transparent-white-400);
}
}
- }
-
- &.spectrum-Button--staticBlack {
- &,
- &.spectrum-Button--primary,
- &.is-selected {
- --mod-button-background-color-default: var(--spectrum-transparent-black-800);
- --mod-button-background-color-hover: var(--spectrum-transparent-black-900);
- --mod-button-background-color-down: var(--spectrum-transparent-black-900);
- --mod-button-background-color-focus: var(--spectrum-transparent-black-900);
- }
&.spectrum-Button--outline {
- --mod-button-border-color-default: var(--spectrum-transparent-black-400);
- --mod-button-border-color-hover: var(--spectrum-transparent-black-500);
- --mod-button-border-color-down: var(--spectrum-transparent-black-600);
- --mod-button-border-color-focus: var(--spectrum-transparent-black-500);
+ &:not(.spectrum-Button--secondary) {
+ --mod-button-background-color-hover: var(--spectrum-transparent-white-300);
+ --mod-button-background-color-down: var(--spectrum-transparent-white-400);
+ --mod-button-background-color-focus: var(--spectrum-transparent-white-300);
+
+ --mod-button-border-color-default: var(--spectrum-transparent-white-800);
+ --mod-button-border-color-hover: var(--spectrum-transparent-white-900);
+ --mod-button-border-color-down: var(--spectrum-transparent-white-900);
+ --mod-button-border-color-focus: var(--spectrum-transparent-white-900);
+ }
- &,
&.spectrum-Button--secondary {
- --mod-button-background-color-hover: var(--spectrum-transparent-black-300);
- --mod-button-background-color-down: var(--spectrum-transparent-black-400);
- --mod-button-background-color-focus: var(--spectrum-transparent-black-300);
+ --mod-button-background-color-hover: var(--spectrum-transparent-white-300);
+ --mod-button-background-color-down: var(--spectrum-transparent-white-400);
+ --mod-button-background-color-focus: var(--spectrum-transparent-white-300);
}
}
+ }
+
+ &.spectrum-Button--staticBlack {
+ --mod-button-background-color-default: var(--spectrum-transparent-black-800);
+ --mod-button-background-color-hover: var(--spectrum-transparent-black-900);
+ --mod-button-background-color-down: var(--spectrum-transparent-black-900);
+ --mod-button-background-color-focus: var(--spectrum-transparent-black-900);
&.spectrum-Button--secondary {
--mod-button-background-color-default: var(--spectrum-transparent-black-200);
@@ -118,6 +102,25 @@
--mod-button-border-color-focus: var(--spectrum-transparent-black-400);
}
}
+
+ &.spectrum-Button--outline {
+ &:not(.spectrum-Button--secondary) {
+ --mod-button-background-color-hover: var(--spectrum-transparent-black-300);
+ --mod-button-background-color-down: var(--spectrum-transparent-black-400);
+ --mod-button-background-color-focus: var(--spectrum-transparent-black-300);
+
+ --mod-button-border-color-default: var(--spectrum-transparent-black-400);
+ --mod-button-border-color-hover: var(--spectrum-transparent-black-500);
+ --mod-button-border-color-down: var(--spectrum-transparent-black-600);
+ --mod-button-border-color-focus: var(--spectrum-transparent-black-500);
+ }
+
+ &.spectrum-Button--secondary {
+ --mod-button-background-color-hover: var(--spectrum-transparent-black-300);
+ --mod-button-background-color-down: var(--spectrum-transparent-black-400);
+ --mod-button-background-color-focus: var(--spectrum-transparent-black-300);
+ }
+ }
}
}
}
diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css
index cfa352552c..80ee75de0a 100644
--- a/components/buttongroup/index.css
+++ b/components/buttongroup/index.css
@@ -13,25 +13,36 @@
@import "./themes/spectrum-two.css";
-.spectrum-ButtonGroup--sizeS {
- --spectrum-buttongroup-spacing: var(--spectrum-spacing-200);
+.spectrum-ButtonGroup {
+ /* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */
+ --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-300)));
+ --spectrum-buttongroup-display: flex;
+ --spectrum-buttongroup-flex-direction: row;
+ --spectrum-buttongroup-justify-content: var(--mod-buttongroup-justify-content, normal);
+
+ &.spectrum-ButtonGroup--sizeS {
+ /* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */
+ --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200)));
+ }
+
+ &.spectrum-ButtonGroup--vertical {
+ /* @deprecated --mod-buttongroup-spacing-vertical -- replaced by generic --mod-buttongroup-spacing */
+ --mod-buttongroup-spacing: var(--mod-buttongroup-spacing-vertical);
+
+ --spectrum-buttongroup-display: inline-flex;
+ --spectrum-buttongroup-flex-direction: column;
+ }
}
.spectrum-ButtonGroup {
- display: var(--mod-buttongroup-display, flex);
- flex-direction: var(--mod-buttongroup-flex-direction, row);
+ display: var(--spectrum-buttongroup-display);
+ flex-direction: var(--spectrum-buttongroup-flex-direction);
flex-wrap: wrap;
- gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing, var(--spectrum-spacing-300)));
- justify-content: var(--mod-buttongroup-justify-content, normal);
-
- .spectrum-ButtonGroup-item {
- flex-shrink: 0;
- }
+ gap: var(--spectrum-buttongroup-spacing);
+ justify-content: var(--spectrum-buttongroup-justify-content);
}
-.spectrum-ButtonGroup--vertical {
- --mod-buttongroup-display: inline-flex;
- --mod-buttongroup-spacing-horizontal: var(--mod-buttongroup-spacing-vertical);
- --mod-buttongroup-flex-direction: column;
+.spectrum-ButtonGroup-item {
+ flex-shrink: 0;
}
diff --git a/components/buttongroup/metadata/metadata.json b/components/buttongroup/metadata/metadata.json
index ffdfadfbed..38d29f26e3 100644
--- a/components/buttongroup/metadata/metadata.json
+++ b/components/buttongroup/metadata/metadata.json
@@ -2,18 +2,22 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-ButtonGroup",
- ".spectrum-ButtonGroup .spectrum-ButtonGroup-item",
- ".spectrum-ButtonGroup--sizeS",
- ".spectrum-ButtonGroup--vertical"
+ ".spectrum-ButtonGroup-item",
+ ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS",
+ ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical"
],
"modifiers": [
- "--mod-buttongroup-display",
- "--mod-buttongroup-flex-direction",
"--mod-buttongroup-justify-content",
+ "--mod-buttongroup-spacing",
"--mod-buttongroup-spacing-horizontal",
"--mod-buttongroup-spacing-vertical"
],
- "component": ["--spectrum-buttongroup-spacing"],
+ "component": [
+ "--spectrum-buttongroup-display",
+ "--spectrum-buttongroup-flex-direction",
+ "--spectrum-buttongroup-justify-content",
+ "--spectrum-buttongroup-spacing"
+ ],
"global": ["--spectrum-spacing-200", "--spectrum-spacing-300"],
"system-theme": [],
"passthroughs": [],
diff --git a/components/buttongroup/metadata/mods.md b/components/buttongroup/metadata/mods.md
index f4150ba8d0..e5e692aadf 100644
--- a/components/buttongroup/metadata/mods.md
+++ b/components/buttongroup/metadata/mods.md
@@ -1,7 +1,6 @@
| Modifiable custom properties |
| -------------------------------------- |
-| `--mod-buttongroup-display` |
-| `--mod-buttongroup-flex-direction` |
| `--mod-buttongroup-justify-content` |
+| `--mod-buttongroup-spacing` |
| `--mod-buttongroup-spacing-horizontal` |
| `--mod-buttongroup-spacing-vertical` |
diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js
index 9c4f40486c..b7d9353544 100644
--- a/components/buttongroup/stories/buttongroup.stories.js
+++ b/components/buttongroup/stories/buttongroup.stories.js
@@ -4,6 +4,7 @@ import { size } from "@spectrum-css/preview/types";
import metadata from "../metadata/metadata.json";
import packageJson from "../package.json";
import { ButtonGroup } from "./buttongroup.test.js";
+import { Template } from "./template.js";
/**
* A button group is a grouping of buttons whose actions are related to each other.
@@ -75,16 +76,22 @@ Default.tags = ["!autodocs"];
/**
* Default spacing for Medium, Large, and Extra Large t-shirt sizes.
*/
-export const Horizontal = ButtonGroup.bind({});
+export const Horizontal = Template.bind({});
Horizontal.tags = ["!dev"];
+Horizontal.parameters = {
+ chromatic: { disableSnapshot: true },
+};
Horizontal.args = Default.args;
/**
* Spacing for the Small t-shirt size.
*/
-export const HorizontalSmall = ButtonGroup.bind({});
+export const HorizontalSmall = Template.bind({});
HorizontalSmall.tags = ["!dev"];
+HorizontalSmall.parameters = {
+ chromatic: { disableSnapshot: true },
+};
HorizontalSmall.args = {
size: "s"
};
@@ -94,6 +101,9 @@ HorizontalSmall.args = {
*/
export const Vertical = ButtonGroup.bind({});
Vertical.tags = ["!dev"];
+Vertical.parameters = {
+ chromatic: { disableSnapshot: true },
+};
Vertical.args = {
vertical: true,
};
@@ -101,8 +111,11 @@ Vertical.args = {
/**
* Spacing for the Small t-shirt size.
*/
-export const VerticalSmall = ButtonGroup.bind({});
+export const VerticalSmall = Template.bind({});
VerticalSmall.tags = ["!dev"];
+VerticalSmall.parameters = {
+ chromatic: { disableSnapshot: true },
+};
VerticalSmall.args = {
vertical: true,
size: "s"
@@ -112,8 +125,11 @@ VerticalSmall.args = {
* A button group in a disabled state shows that the buttons within the group exist, but are not available in that circumstance. This state can be used to maintain layout continuity and to communicate that a button group may become available later.
*/
-export const Disabled = ButtonGroup.bind({});
+export const Disabled = Template.bind({});
Disabled.tags = ["!dev"];
+Disabled.parameters = {
+ chromatic: { disableSnapshot: true },
+};
Disabled.args = {
items: [
{
diff --git a/components/buttongroup/stories/buttongroup.test.js b/components/buttongroup/stories/buttongroup.test.js
index 0a51ed2974..9b2d0e11c7 100644
--- a/components/buttongroup/stories/buttongroup.test.js
+++ b/components/buttongroup/stories/buttongroup.test.js
@@ -1,4 +1,4 @@
-import { Variants } from "@spectrum-css/preview/decorators";
+import { Sizes, Variants } from "@spectrum-css/preview/decorators";
import { Template } from "./template.js";
export const ButtonGroup = Variants({
@@ -7,10 +7,6 @@ export const ButtonGroup = Variants({
{
testHeading: "Default",
},
- {
- testHeading: "Vertical",
- vertical: true,
- },
{
testHeading: "Disabled",
items: [
@@ -27,6 +23,20 @@ export const ButtonGroup = Variants({
isDisabled: true,
},
]
- }
+ },
+ {
+ testHeading: "Vertical",
+ vertical: true,
+ },
+ {
+ Template: (args, context) => Sizes({
+ Template,
+ withHeading: false,
+ withWrapperBorder: false,
+ ...args
+ }, context),
+ testHeading: "Vertical sizing",
+ vertical: true,
+ },
],
});
diff --git a/components/calendar/index.css b/components/calendar/index.css
index 956ce0dfde..2ca1bc289a 100644
--- a/components/calendar/index.css
+++ b/components/calendar/index.css
@@ -11,60 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-@media (forced-colors: active) {
- .spectrum-Calendar-prevMonth,
- .spectrum-Calendar-nextMonth {
- --highcontrast-calendar-button-icon-color: ButtonText;
- }
-
- .spectrum-Calendar-date {
- --highcontrast-calendar-day-background-color-cap-selected: Highlight;
- --highcontrast-calendar-day-background-color-down: ButtonFace;
- --highcontrast-calendar-day-background-color-hover: Transparent;
- --highcontrast-calendar-day-background-color-key-focus: ButtonFace;
- --highcontrast-calendar-day-background-color-selected-hover: Transparent;
- --highcontrast-calendar-day-background-color-selected: Highlight;
- --highcontrast-calendar-day-border-color-key-focus: ButtonText;
- --highcontrast-calendar-day-text-color-cap-selected: HighlightText;
- --highcontrast-calendar-day-text-color-disabled: GrayText;
- --highcontrast-calendar-day-text-color-hover: ButtonText;
- --highcontrast-calendar-day-text-color-key-focus: ButtonText;
- --highcontrast-calendar-day-text-color-selected: HighlightText;
- --highcontrast-calendar-day-title-text-color: CanvasText;
- --highcontrast-calendar-day-today-background-color-selected-hover: Highlight;
- --highcontrast-calendar-day-today-border-color-disabled: GrayText;
- --highcontrast-calendar-day-today-border-color: ButtonText;
- --highcontrast-calendar-day-today-text-color-disabled: GrayText;
- --highcontrast-calendar-day-today-text-color: ButtonText;
-
- forced-color-adjust: none;
-
- &.is-range-selection {
- &.is-today {
- color: HighlightText;
- }
-
- &.is-selection-start::after,
- &.is-selection-end::after {
- content: none;
- }
- }
-
- &.is-disabled {
- &.is-range-selection {
- background: Highlight;
- color: HighlightText;
- }
-
- &.is-selected {
- background: Highlight;
- color: HighlightText;
- }
- }
- }
-}
+@import "./themes/spectrum-two.css";
.spectrum-Calendar {
--spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100));
@@ -77,40 +24,120 @@
--spectrum-calendar-margin-y: var(--mod-calendar-margin-y, 24px);
--spectrum-calendar-margin-x: var(--mod-calendar-margin-x, 32px);
+ /* combines (day-width and day-padding x 2) x 7 days a week */
+ --spectrum-calendar-width: var(--mod-calendar-width, calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7));
+
/* Add letter spacing of 0.66px from Typography > Detail issue #407 */
--spectrum-calendar-title-text-letter-spacing: var(--mod-calendar-title-text-letter-spacing, 0.06em);
--spectrum-calendar-title-height: var(--mod-calendar-title-height, 32px);
--spectrum-calendar-title-text-size: var(--mod-calendar-title-text-size, var(--spectrum-font-size-300));
- --spectrum-calendar-day-title-text-font-weight: var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight));
- --spectrum-calendar-day-title-text-color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-gray-700)));
- --spectrum-calendar-day-title-text-size: var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50));
+ --spectrum-calendar-title-text-font-weight: var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight));
+ --spectrum-calendar-title-text-color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default)));
+
+ --spectrum-calendar-heading-text-size: var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50));
+
+ --spectrum-calendar-button-icon-color: var(--mod-calendar-button-icon-color, var(--spectrum-neutral-subdued-content-color-default));
+
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
+}
+
+.spectrum-Calendar-date {
+ --spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent);
+ --spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
+ --spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
+ --spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
+ --spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)));
+ --spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)));
+ --spectrum-calendar-day-background-down: var(--highcontrast-calendar-day-background-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)));
+
+ --spectrum-calendar-day-background-layer-color: var(--mod-calendar-day-background-layer-color, transparent);
+
+ --spectrum-calendar-day-border-color: var(--mod-calendar-day-border-color, transparent);
+ --spectrum-calendar-day-border-color-focus: var(--highcontrast-calendar-day-border-color-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
--spectrum-calendar-day-text-size: var(--mod-calendar-day-text-size, var(--spectrum-font-size-100));
- --spectrum-calendar-day-text-size-han: var(--mod-calendar-day-text-size-han, var(--spectrum-font-size-50));
- --spectrum-calendar-day-text-color-selected: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-gray-900)));
- --spectrum-calendar-day-text-color-hover: var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-gray-900)));
- --spectrum-calendar-day-text-color-key-focus: var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-gray-900)));
- --spectrum-calendar-day-text-color-disabled: var(--highcontrast-calendar-day-text-color-disabled, var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color)));
- --spectrum-calendar-day-text-color-cap-selected: var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-gray-900)));
+ --spectrum-calendar-day-text-font-weight: var(--mod-calendar-day-text-font-weight, var(--spectrum-regular-font-weight));
--spectrum-calendar-day-text-font-weight-selected: var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-bold-font-weight));
--spectrum-calendar-day-text-font-weight-cap-selected: var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-bold-font-weight));
+ /* Styles specific to the today identifier */
+ --spectrum-calendar-day-today-background-selected-hover: var(--highcontrast-calendar-day-today-background-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)));
--spectrum-calendar-day-today-text-font-weight: var(--mod-calendar-day-today-text-font-weight, var(--spectrum-bold-font-weight));
- --spectrum-calendar-day-today-text-color: var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-gray-800)));
- --spectrum-calendar-day-today-text-color-disabled: var(--highcontrast-calendar-day-today-text-color-disabled, var(--mod-calendar-day-today-text-color-disabled, var(--spectrum-gray-500)));
+ --spectrum-calendar-day-today-text-color: var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default)));
+ /* @todo There's not a good semantic alias to map this to */
--spectrum-calendar-day-today-border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800)));
- --spectrum-calendar-day-today-border-color-disabled: var(--highcontrast-calendar-day-today-border-color-disabled, var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-gray-400)));
- --spectrum-calendar-button-icon-color: var(--highcontrast-calendar-button-icon-color, var(--mod-calendar-button-icon-color, var(--spectrum-gray-700)));
+ /* Applied to both title-text-color and today-text-color */
+ --spectrum-calendar-day-text-color: var(--mod-calendar-day-text-color, var(--spectrum-neutral-subdued-content-color-default));
+ --spectrum-calendar-day-text-color-selected: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down)));
+ --spectrum-calendar-day-text-color-cap-selected: var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down)));
+ --spectrum-calendar-day-text-color-hover: var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover)));
+ --spectrum-calendar-day-text-color-key-focus: var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus)));
- /* combines (day-width and day-padding x 2) x 7 days a week */
- --spectrum-calendar-width: var(--mod-calendar-width, calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7));
+ /* Disabled state */
+ --spectrum-calendar-day-text-color-disabled: var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color));
+ --spectrum-calendar-day-today-border-color-disabled: var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-disabled-border-color));
- &:dir(rtl) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-calendar-day-text-size: var(--mod-calendar-day-text-size-han, var(--spectrum-font-size-50));
}
+}
+@media (forced-colors: active) {
+ .spectrum-Calendar-date {
+ --highcontrast-calendar-day-title-text-color: CanvasText;
+
+ --highcontrast-calendar-day-text-color-selected: HighlightText;
+ --highcontrast-calendar-day-text-color-cap-selected: HighlightText;
+ --highcontrast-calendar-day-text-color-hover: HighlightText;
+ --highcontrast-calendar-day-text-color-key-focus: ButtonText;
+
+ --highcontrast-calendar-day-background-selected: Highlight;
+ --highcontrast-calendar-day-background-selected-hover: Highlight;
+ --highcontrast-calendar-day-background-cap-selected: Highlight;
+ --highcontrast-calendar-day-background-hover: Highlight;
+ --highcontrast-calendar-day-background-focus: ButtonFace;
+ --highcontrast-calendar-day-background-down: ButtonFace;
+
+ --highcontrast-calendar-day-today-border-color: ButtonText;
+ --highcontrast-calendar-day-border-color-focus: ButtonText;
+
+ --highcontrast-calendar-day-today-text-color: ButtonText;
+ --highcontrast-calendar-day-today-background-selected-hover: Highlight;
+
+ forced-color-adjust: none;
+
+ &::before {
+ background: Transparent !important;
+ }
+
+ &.is-selected {
+ background: Highlight;
+ }
+
+ &.is-disabled {
+ --highcontrast-calendar-day-title-text-color: GrayText;
+
+ --highcontrast-calendar-day-text-color-hover: GrayText;
+ --highcontrast-calendar-day-text-color-key-focus: GrayText;
+
+ --highcontrast-calendar-day-today-text-color: HighlightText;
+ --highcontrast-calendar-day-today-border-color: HighlightText;
+ }
+
+ &.is-range-selection.is-selection-start,
+ &.is-range-selection.is-selection-end {
+ --mod-calendar-day-fill-content: none;
+ }
+ }
+}
+
+.spectrum-Calendar {
display: inline-block;
inline-size: var(--spectrum-calendar-width);
}
@@ -126,9 +153,9 @@
}
.spectrum-Calendar-title {
- color: var(--spectrum-calendar-day-title-text-color);
+ color: var(--spectrum-calendar-title-text-color);
font-size: var(--spectrum-calendar-title-text-size);
- font-weight: bold;
+ font-weight: var(--spectrum-calendar-title-text-font-weight);
line-height: var(--spectrum-calendar-title-height);
margin: 0;
@@ -143,11 +170,14 @@
.spectrum-Calendar-prevMonth,
.spectrum-Calendar-nextMonth {
- transform: var(--spectrum-logical-rotation,);
+ /* @passthrough start */
+ /* Mimic the placement and sizing of the dates in the grid below */
+ --mod-actionbutton-edge-to-text: var(--spectrum-calendar-day-padding);
+ --mod-actionbutton-min-width: var(--spectrum-calendar-day-width);
+ --mod-actionbutton-content-color-default: var(--spectrum-calendar-button-icon-color);
+ /* @passthrough end */
- &:not([disabled]) {
- color: var(--spectrum-calendar-button-icon-color);
- }
+ transform: var(--spectrum-logical-rotation,);
}
.spectrum-Calendar-prevMonth {
@@ -168,9 +198,9 @@
border-block-end: none !important; /* override abbr styling from normalize.css */
- color: var(--spectrum-calendar-day-title-text-color);
- font-size: var(--spectrum-calendar-day-title-text-size);
- font-weight: var(--spectrum-calendar-day-title-text-font-weight);
+ color: var(--spectrum-calendar-title-text-color);
+ font-size: var(--spectrum-calendar-heading-text-size);
+ font-weight: var(--spectrum-calendar-title-text-font-weight);
text-transform: uppercase;
text-decoration: none !important; /* override abbr styling from normalize.css */
@@ -196,8 +226,6 @@
.spectrum-Calendar-table {
table-layout: fixed;
- /* width: 100%; */
-
border-collapse: collapse;
border-spacing: 0;
@@ -206,8 +234,10 @@
.spectrum-Calendar-tableCell {
text-align: center;
+
position: relative;
box-sizing: content-box;
+
block-size: var(--spectrum-calendar-day-height);
inline-size: var(--spectrum-calendar-day-width);
padding: var(--spectrum-calendar-day-padding);
@@ -220,7 +250,7 @@
.spectrum-Calendar-date {
/* This is fun, but we need to trick the table so it doesn't size itself in a weird way */
position: absolute;
- display: block;
+ display: var(--mod-calendar-day-visibility, block);
inset-block-start: 0;
inset-inline-start: 0;
@@ -230,95 +260,116 @@
inline-size: var(--spectrum-calendar-day-width);
margin: var(--spectrum-calendar-day-padding);
+ border-width: var(--spectrum-calendar-day-border-size);
+ border-style: solid;
+ border-color: var(--spectrum-calendar-day-border-color);
border-radius: var(--spectrum-calendar-day-width);
- border: var(--spectrum-calendar-day-border-size) solid transparent;
font-size: var(--spectrum-calendar-day-text-size);
- color: var(--spectrum-calendar-day-title-text-color);
+ font-weight: var(--spectrum-calendar-day-text-font-weight);
line-height: calc(var(--spectrum-calendar-day-width) - var(--spectrum-calendar-day-border-size) * 2);
white-space: nowrap;
- cursor: pointer;
-
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- font-size: var(--spectrum-calendar-day-text-size-han);
- }
-
- &.is-disabled {
- cursor: default;
- pointer-events: none;
- }
+ color: var(--spectrum-calendar-day-text-color);
+ background: var(--spectrum-calendar-day-background-layer-color);
- &.is-outsideMonth {
- display: none;
- }
+ cursor: pointer;
&::before {
content: "";
position: absolute;
inset-block-start: calc(50% - var(--spectrum-calendar-day-width) / 2);
inset-inline-start: calc(50% - var(--spectrum-calendar-day-width) / 2);
+
box-sizing: border-box;
inline-size: var(--spectrum-calendar-day-width);
block-size: var(--spectrum-calendar-day-height);
+
+ background: var(--spectrum-calendar-day-background);
+
+ border-width: var(--spectrum-calendar-day-border-size);
+ border-style: solid;
+ border-color: var(--mod-calendar-day-border-color, transparent);
+
border-radius: var(--spectrum-calendar-day-width);
- border: var(--spectrum-calendar-day-border-size) solid transparent;
}
- &.is-selected:not(.is-range-selection) {
- font-weight: var(--spectrum-calendar-day-text-font-weight-selected);
+ &::after {
+ position: absolute;
+ inset-block-start: 0;
- &::before {
- /* No highlight for lone selections */
- display: none;
+ display: var(--mod-calendar-day-fill-display, none);
+
+ block-size: var(--spectrum-calendar-day-height);
+ inline-size: var(--spectrum-calendar-day-width);
+
+ border-radius: var(--spectrum-calendar-day-width);
+ background: transparent;
+
+ content: var(--mod-calendar-day-fill-content, "");
+ }
+
+ &:hover {
+ --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-hover);
+
+ &:not(.is-selection-end, .is-selection-start) {
+ --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-hover);
+ }
+
+ &.is-selected:not(.is-selection-end, .is-selection-start),
+ &.is-range-selection {
+ --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-selected-hover);
}
}
- &.is-today {
- font-weight: var(--spectrum-calendar-day-today-text-font-weight);
+ &:active {
+ /* Applied behind the selected circle around the date */
+ --mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-down);
+ }
+
+ &.is-focused {
+ --mod-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus);
+
+ &.is-selected,
+ &.is-range-selection {
+ --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-selected);
+ }
+ }
+
+ &.is-outsideMonth {
+ --mod-calendar-day-visibility: none;
}
&.is-range-selection {
+ inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2);
+
/* overrides to make the cells appear connected */
margin: var(--spectrum-calendar-day-padding) 0;
+
border-width: var(--spectrum-calendar-border-width-reset);
- line-height: var(--spectrum-calendar-day-height);
border-radius: var(--spectrum-calendar-border-radius-reset);
- inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2);
+ line-height: var(--spectrum-calendar-day-height);
- &.is-range-start,
- &.is-range-end,
&.is-selection-start,
- &.is-selection-end {
+ &.is-selection-end,
+ &.is-range-start,
+ &.is-selection-start {
inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
}
&.is-selection-start,
&.is-selection-end {
- font-weight: var(--spectrum-calendar-day-text-font-weight-cap-selected);
-
- &::after {
- position: absolute;
- inset-block-start: 0;
-
- display: block;
-
- block-size: var(--spectrum-calendar-day-height);
- inline-size: var(--spectrum-calendar-day-width);
-
- border-radius: var(--spectrum-calendar-day-width);
-
- content: "";
- }
+ --mod-calendar-day-fill-display: block;
+ --mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-selected);
+ --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected);
}
&.is-range-start,
&.is-selection-start {
padding-inline-end: var(--spectrum-calendar-day-padding);
margin-inline-start: var(--spectrum-calendar-day-padding);
+
border-start-start-radius: var(--spectrum-calendar-day-width);
border-end-start-radius: var(--spectrum-calendar-day-width);
@@ -330,8 +381,10 @@
&.is-range-end,
&.is-selection-end {
+ inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
padding-inline-start: var(--spectrum-calendar-day-padding);
margin-inline-end: var(--spectrum-calendar-day-padding);
+
border-start-end-radius: var(--spectrum-calendar-day-width);
border-end-end-radius: var(--spectrum-calendar-day-width);
@@ -342,6 +395,7 @@
}
}
+ /* dates that are both start & end */
&.is-selection-start.is-selection-end,
&.is-selection-start.is-range-end,
&.is-selection-end.is-range-start,
@@ -351,103 +405,71 @@
}
}
- &:hover {
- color: var(--spectrum-calendar-day-text-color-hover);
-
- &:not(.is-selection-end, .is-selection-start)::before {
- background: var(--highcontrast-calendar-day-background-color-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)));
- }
-
- &.is-selected:not(.is-selection-end, .is-selection-start)::before,
- &.is-range-selection::before {
- background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
- }
- }
-
- &:active {
- background-color: var(--highcontrast-calendar-day-background-color-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)));
- }
-
- &.is-selected {
- color: var(--spectrum-calendar-day-text-color-selected);
- background: var(--highcontrast-calendar-day-background-color-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
- }
-
- &.is-selected:not(.is-range-selection) {
- background: var(--highcontrast-calendar-day-background-color-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
- }
-
- &.is-today {
- color: var(--spectrum-calendar-day-today-text-color);
-
- &,
- &::before {
- border-color: var(--spectrum-calendar-day-today-border-color);
- }
-
- &.is-selected:not(.is-range-selection):hover::before {
- background: var(--highcontrast-calendar-day-today-background-color-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)));
+ &:not(.is-range-selection) {
+ &.is-focused:active,
+ &.is-focused.is-selected {
+ --mod-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-cap-selected);
+ --mod-calendar-day-background-color-key-focus: var(--spectrum-calendar-day-background-cap-selected);
}
- &.is-disabled {
- color: var(--spectrum-calendar-day-today-text-color-disabled);
-
- &,
- &::before {
- border-color: var(--spectrum-calendar-day-today-border-color-disabled);
- }
+ &.is-focused {
+ --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-key-focus);
+ --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-focus);
+ --mod-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus);
}
- }
-
- &.is-focused:not(.is-range-selection) {
- background: var(--highcontrast-calendar-day-background-color-key-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)));
- border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
- color: var(--spectrum-calendar-day-text-color-key-focus);
- &.is-today {
- border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
+ &.is-today.is-selected {
+ --mod-calendar-day-background-color-hover: var(--spectrum-calendar-day-today-background-selected-hover);
}
- &:active,
&.is-selected {
- color: var(--spectrum-calendar-day-text-color-selected);
- background: var(--highcontrast-calendar-day-background-color-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
- border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
+ --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected);
+ --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-cap-selected);
+ --mod-calendar-day-background-layer-color: transparent;
+ --mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-cap-selected);
}
}
- &.is-focused {
- &.is-selected {
- &::before {
- background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
- }
- }
-
- &.is-range-selection {
- &::before {
- background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
- }
- }
+ &.is-selected {
+ --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-selected);
- &::before {
- border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));
- }
+ /* Applied behind the selected circle around the date */
+ --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-cap-selected);
+ --mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected);
}
- &.is-disabled {
- color: var(--spectrum-calendar-day-text-color-disabled);
+ &.is-today {
+ --mod-calendar-day-text-color: var(--spectrum-calendar-day-today-text-color);
+ --mod-calendar-day-border-color: var(--spectrum-calendar-day-today-border-color);
+ --mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-today-text-font-weight);
}
- &.is-selection-start,
- &.is-selection-end {
- color: var(--spectrum-calendar-day-text-color-cap-selected);
+ &.is-disabled {
+ --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-disabled);
+ --mod-calendar-day-text-color-selected: var(--spectrum-calendar-day-text-color-disabled);
+ --mod-calendar-day-text-color-cap-selected: var(--spectrum-calendar-day-text-color-disabled);
+ --mod-calendar-day-text-color-hover: var(--spectrum-calendar-day-text-color-disabled);
+ --mod-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-disabled);
+
+ --mod-calendar-day-today-border-color: var(--spectrum-calendar-day-today-border-color-disabled);
+ --mod-calendar-day-border-color-key-focus: transparent;
+
+ --mod-calendar-day-background-color-selected: var(--spectrum-calendar-day-background-color-selected-disabled);
+ --mod-calendar-day-background-color-selected-hover: transparent;
+ --mod-calendar-day-background-color-cap-selected: transparent;
+ --mod-calendar-day-background-color-hover: transparent;
+ --mod-calendar-day-background-color-focus: transparent;
+ --mod-calendar-day-background-color-down: transparent;
+
+ --mod-calendar-day-text-font-weight: normal;
+ --mod-calendar-day-text-font-weight-selected: normal;
+ --mod-calendar-day-text-font-weight-cap-selected: normal;
- &::after {
- background-color: var(--highcontrast-calendar-day-background-color-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
- }
+ pointer-events: none;
- &.is-disabled {
- color: var(--spectrum-calendar-day-text-color-disabled);
+ /* @todo sync with design on these colors and states for disabled calendars */
+ &.is-selected {
+ --mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected);
}
}
}
diff --git a/components/calendar/metadata/metadata.json b/components/calendar/metadata/metadata.json
index cf05ecda76..676c81a041 100644
--- a/components/calendar/metadata/metadata.json
+++ b/components/calendar/metadata/metadata.json
@@ -1,18 +1,89 @@
{
"sourceFile": "index.css",
- "selectors": [".spectrum.spectrum--express"],
+ "selectors": [
+ ".spectrum-Calendar",
+ ".spectrum-Calendar--padded",
+ ".spectrum-Calendar-body",
+ ".spectrum-Calendar-date",
+ ".spectrum-Calendar-date.is-disabled",
+ ".spectrum-Calendar-date.is-disabled.is-selected",
+ ".spectrum-Calendar-date.is-focused",
+ ".spectrum-Calendar-date.is-focused.is-range-selection",
+ ".spectrum-Calendar-date.is-focused.is-selected",
+ ".spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection)",
+ ".spectrum-Calendar-date.is-focused:not(.is-range-selection)",
+ ".spectrum-Calendar-date.is-focused:not(.is-range-selection):active",
+ ".spectrum-Calendar-date.is-outsideMonth",
+ ".spectrum-Calendar-date.is-range-selection",
+ ".spectrum-Calendar-date.is-range-selection.is-range-end",
+ ".spectrum-Calendar-date.is-range-selection.is-range-end:after",
+ ".spectrum-Calendar-date.is-range-selection.is-range-end:before",
+ ".spectrum-Calendar-date.is-range-selection.is-range-start",
+ ".spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end",
+ ".spectrum-Calendar-date.is-range-selection.is-range-start:after",
+ ".spectrum-Calendar-date.is-range-selection.is-range-start:before",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-end",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-end:after",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-end:before",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-start",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-start:after",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-start:before",
+ ".spectrum-Calendar-date.is-range-selection:hover",
+ ".spectrum-Calendar-date.is-selected",
+ ".spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)",
+ ".spectrum-Calendar-date.is-selected:not(.is-range-selection)",
+ ".spectrum-Calendar-date.is-today",
+ ".spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection)",
+ ".spectrum-Calendar-date:active",
+ ".spectrum-Calendar-date:after",
+ ".spectrum-Calendar-date:before",
+ ".spectrum-Calendar-date:hover",
+ ".spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)",
+ ".spectrum-Calendar-date:lang(ja)",
+ ".spectrum-Calendar-date:lang(ko)",
+ ".spectrum-Calendar-date:lang(zh)",
+ ".spectrum-Calendar-dayOfWeek",
+ ".spectrum-Calendar-dayOfWeek[title]",
+ ".spectrum-Calendar-header",
+ ".spectrum-Calendar-nextMonth",
+ ".spectrum-Calendar-prevMonth",
+ ".spectrum-Calendar-table",
+ ".spectrum-Calendar-tableCell",
+ ".spectrum-Calendar-tableCell:focus",
+ ".spectrum-Calendar-title",
+ ".spectrum-Calendar:dir(rtl)",
+ "[dir=\"rtl\"] .spectrum-Calendar"
+ ],
"modifiers": [
"--mod-calendar-border-radius-reset",
"--mod-calendar-border-width-reset",
"--mod-calendar-button-icon-color",
+ "--mod-calendar-day-background-color",
+ "--mod-calendar-day-background-color-cap-selected",
+ "--mod-calendar-day-background-color-down",
+ "--mod-calendar-day-background-color-focus",
+ "--mod-calendar-day-background-color-hover",
+ "--mod-calendar-day-background-color-key-focus",
+ "--mod-calendar-day-background-color-selected",
+ "--mod-calendar-day-background-color-selected-hover",
+ "--mod-calendar-day-background-layer-color",
+ "--mod-calendar-day-border-color",
+ "--mod-calendar-day-border-color-key-focus",
"--mod-calendar-day-border-size",
+ "--mod-calendar-day-fill-content",
+ "--mod-calendar-day-fill-display",
"--mod-calendar-day-height",
"--mod-calendar-day-padding",
+ "--mod-calendar-day-text-color",
"--mod-calendar-day-text-color-cap-selected",
"--mod-calendar-day-text-color-disabled",
"--mod-calendar-day-text-color-hover",
"--mod-calendar-day-text-color-key-focus",
"--mod-calendar-day-text-color-selected",
+ "--mod-calendar-day-text-font-weight",
"--mod-calendar-day-text-font-weight-cap-selected",
"--mod-calendar-day-text-font-weight-selected",
"--mod-calendar-day-text-size",
@@ -20,11 +91,12 @@
"--mod-calendar-day-title-text-color",
"--mod-calendar-day-title-text-font-weight",
"--mod-calendar-day-title-text-size",
+ "--mod-calendar-day-today-background-color-selected-hover",
"--mod-calendar-day-today-border-color",
"--mod-calendar-day-today-border-color-disabled",
"--mod-calendar-day-today-text-color",
- "--mod-calendar-day-today-text-color-disabled",
"--mod-calendar-day-today-text-font-weight",
+ "--mod-calendar-day-visibility",
"--mod-calendar-day-width",
"--mod-calendar-margin-x",
"--mod-calendar-margin-y",
@@ -37,30 +109,50 @@
"--spectrum-calendar-border-radius-reset",
"--spectrum-calendar-border-width-reset",
"--spectrum-calendar-button-icon-color",
+ "--spectrum-calendar-day-background",
+ "--spectrum-calendar-day-background-cap-selected",
+ "--spectrum-calendar-day-background-color-cap-selected",
+ "--spectrum-calendar-day-background-color-down",
+ "--spectrum-calendar-day-background-color-hover",
+ "--spectrum-calendar-day-background-color-key-focus",
+ "--spectrum-calendar-day-background-color-selected",
+ "--spectrum-calendar-day-background-color-selected-disabled",
+ "--spectrum-calendar-day-background-color-selected-hover",
+ "--spectrum-calendar-day-background-down",
+ "--spectrum-calendar-day-background-focus",
+ "--spectrum-calendar-day-background-hover",
+ "--spectrum-calendar-day-background-layer-color",
+ "--spectrum-calendar-day-background-selected",
+ "--spectrum-calendar-day-background-selected-hover",
+ "--spectrum-calendar-day-border-color",
+ "--spectrum-calendar-day-border-color-focus",
+ "--spectrum-calendar-day-border-color-key-focus",
"--spectrum-calendar-day-border-size",
"--spectrum-calendar-day-height",
"--spectrum-calendar-day-padding",
+ "--spectrum-calendar-day-text-color",
"--spectrum-calendar-day-text-color-cap-selected",
"--spectrum-calendar-day-text-color-disabled",
"--spectrum-calendar-day-text-color-hover",
"--spectrum-calendar-day-text-color-key-focus",
"--spectrum-calendar-day-text-color-selected",
+ "--spectrum-calendar-day-text-font-weight",
"--spectrum-calendar-day-text-font-weight-cap-selected",
"--spectrum-calendar-day-text-font-weight-selected",
"--spectrum-calendar-day-text-size",
- "--spectrum-calendar-day-text-size-han",
- "--spectrum-calendar-day-title-text-color",
- "--spectrum-calendar-day-title-text-font-weight",
- "--spectrum-calendar-day-title-text-size",
+ "--spectrum-calendar-day-today-background-color-selected-hover",
+ "--spectrum-calendar-day-today-background-selected-hover",
"--spectrum-calendar-day-today-border-color",
"--spectrum-calendar-day-today-border-color-disabled",
"--spectrum-calendar-day-today-text-color",
- "--spectrum-calendar-day-today-text-color-disabled",
"--spectrum-calendar-day-today-text-font-weight",
"--spectrum-calendar-day-width",
+ "--spectrum-calendar-heading-text-size",
"--spectrum-calendar-margin-x",
"--spectrum-calendar-margin-y",
"--spectrum-calendar-title-height",
+ "--spectrum-calendar-title-text-color",
+ "--spectrum-calendar-title-text-font-weight",
"--spectrum-calendar-title-text-letter-spacing",
"--spectrum-calendar-title-text-size",
"--spectrum-calendar-width"
@@ -69,38 +161,42 @@
"--spectrum-bold-font-weight",
"--spectrum-border-width-200",
"--spectrum-component-height-100",
+ "--spectrum-disabled-border-color",
"--spectrum-disabled-content-color",
"--spectrum-font-size-100",
"--spectrum-font-size-300",
"--spectrum-font-size-50",
- "--spectrum-gray-400",
- "--spectrum-gray-500",
- "--spectrum-gray-700",
+ "--spectrum-gray-100-rgb",
"--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-logical-rotation"
+ "--spectrum-logical-rotation",
+ "--spectrum-neutral-content-color-default",
+ "--spectrum-neutral-content-color-down",
+ "--spectrum-neutral-content-color-hover",
+ "--spectrum-neutral-content-color-key-focus",
+ "--spectrum-neutral-subdued-content-color-default",
+ "--spectrum-regular-font-weight"
+ ],
+ "system-theme": ["--system-calendar-day-background-color-selected-disabled"],
+ "passthroughs": [
+ "--mod-actionbutton-content-color-default",
+ "--mod-actionbutton-edge-to-text",
+ "--mod-actionbutton-min-width"
],
- "system-theme": [],
- "passthroughs": [],
"high-contrast": [
- "--highcontrast-calendar-button-icon-color",
- "--highcontrast-calendar-day-background-color-cap-selected",
- "--highcontrast-calendar-day-background-color-down",
- "--highcontrast-calendar-day-background-color-hover",
- "--highcontrast-calendar-day-background-color-key-focus",
- "--highcontrast-calendar-day-background-color-selected",
- "--highcontrast-calendar-day-background-color-selected-hover",
- "--highcontrast-calendar-day-border-color-key-focus",
+ "--highcontrast-calendar-day-background-cap-selected",
+ "--highcontrast-calendar-day-background-down",
+ "--highcontrast-calendar-day-background-focus",
+ "--highcontrast-calendar-day-background-hover",
+ "--highcontrast-calendar-day-background-selected",
+ "--highcontrast-calendar-day-background-selected-hover",
+ "--highcontrast-calendar-day-border-color-focus",
"--highcontrast-calendar-day-text-color-cap-selected",
- "--highcontrast-calendar-day-text-color-disabled",
"--highcontrast-calendar-day-text-color-hover",
"--highcontrast-calendar-day-text-color-key-focus",
"--highcontrast-calendar-day-text-color-selected",
"--highcontrast-calendar-day-title-text-color",
- "--highcontrast-calendar-day-today-background-color-selected-hover",
+ "--highcontrast-calendar-day-today-background-selected-hover",
"--highcontrast-calendar-day-today-border-color",
- "--highcontrast-calendar-day-today-border-color-disabled",
- "--highcontrast-calendar-day-today-text-color",
- "--highcontrast-calendar-day-today-text-color-disabled"
+ "--highcontrast-calendar-day-today-text-color"
]
}
diff --git a/components/calendar/metadata/mods.md b/components/calendar/metadata/mods.md
index 4fbf4935d5..837d557472 100644
--- a/components/calendar/metadata/mods.md
+++ b/components/calendar/metadata/mods.md
@@ -1,32 +1,48 @@
-| Modifiable custom properties |
-| -------------------------------------------------- |
-| `--mod-calendar-border-radius-reset` |
-| `--mod-calendar-border-width-reset` |
-| `--mod-calendar-button-icon-color` |
-| `--mod-calendar-day-border-size` |
-| `--mod-calendar-day-height` |
-| `--mod-calendar-day-padding` |
-| `--mod-calendar-day-text-color-cap-selected` |
-| `--mod-calendar-day-text-color-disabled` |
-| `--mod-calendar-day-text-color-hover` |
-| `--mod-calendar-day-text-color-key-focus` |
-| `--mod-calendar-day-text-color-selected` |
-| `--mod-calendar-day-text-font-weight-cap-selected` |
-| `--mod-calendar-day-text-font-weight-selected` |
-| `--mod-calendar-day-text-size` |
-| `--mod-calendar-day-text-size-han` |
-| `--mod-calendar-day-title-text-color` |
-| `--mod-calendar-day-title-text-font-weight` |
-| `--mod-calendar-day-title-text-size` |
-| `--mod-calendar-day-today-border-color` |
-| `--mod-calendar-day-today-border-color-disabled` |
-| `--mod-calendar-day-today-text-color` |
-| `--mod-calendar-day-today-text-color-disabled` |
-| `--mod-calendar-day-today-text-font-weight` |
-| `--mod-calendar-day-width` |
-| `--mod-calendar-margin-x` |
-| `--mod-calendar-margin-y` |
-| `--mod-calendar-title-height` |
-| `--mod-calendar-title-text-letter-spacing` |
-| `--mod-calendar-title-text-size` |
-| `--mod-calendar-width` |
+| Modifiable custom properties |
+| ---------------------------------------------------------- |
+| `--mod-calendar-border-radius-reset` |
+| `--mod-calendar-border-width-reset` |
+| `--mod-calendar-button-icon-color` |
+| `--mod-calendar-day-background-color` |
+| `--mod-calendar-day-background-color-cap-selected` |
+| `--mod-calendar-day-background-color-down` |
+| `--mod-calendar-day-background-color-focus` |
+| `--mod-calendar-day-background-color-hover` |
+| `--mod-calendar-day-background-color-key-focus` |
+| `--mod-calendar-day-background-color-selected` |
+| `--mod-calendar-day-background-color-selected-hover` |
+| `--mod-calendar-day-background-layer-color` |
+| `--mod-calendar-day-border-color` |
+| `--mod-calendar-day-border-color-key-focus` |
+| `--mod-calendar-day-border-size` |
+| `--mod-calendar-day-fill-content` |
+| `--mod-calendar-day-fill-display` |
+| `--mod-calendar-day-height` |
+| `--mod-calendar-day-padding` |
+| `--mod-calendar-day-text-color` |
+| `--mod-calendar-day-text-color-cap-selected` |
+| `--mod-calendar-day-text-color-disabled` |
+| `--mod-calendar-day-text-color-hover` |
+| `--mod-calendar-day-text-color-key-focus` |
+| `--mod-calendar-day-text-color-selected` |
+| `--mod-calendar-day-text-font-weight` |
+| `--mod-calendar-day-text-font-weight-cap-selected` |
+| `--mod-calendar-day-text-font-weight-selected` |
+| `--mod-calendar-day-text-size` |
+| `--mod-calendar-day-text-size-han` |
+| `--mod-calendar-day-title-text-color` |
+| `--mod-calendar-day-title-text-font-weight` |
+| `--mod-calendar-day-title-text-size` |
+| `--mod-calendar-day-today-background-color-selected-hover` |
+| `--mod-calendar-day-today-border-color` |
+| `--mod-calendar-day-today-border-color-disabled` |
+| `--mod-calendar-day-today-text-color` |
+| `--mod-calendar-day-today-text-font-weight` |
+| `--mod-calendar-day-visibility` |
+| `--mod-calendar-day-width` |
+| `--mod-calendar-margin-x` |
+| `--mod-calendar-margin-y` |
+| `--mod-calendar-title-height` |
+| `--mod-calendar-title-text-letter-spacing` |
+| `--mod-calendar-title-text-size` |
+| `--mod-calendar-width` |
diff --git a/components/calendar/themes/spectrum-two.css b/components/calendar/themes/spectrum-two.css
index 3b48a570c2..8d0df48367 100644
--- a/components/calendar/themes/spectrum-two.css
+++ b/components/calendar/themes/spectrum-two.css
@@ -10,3 +10,9 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+@container style(--system: spectrum) {
+ .spectrum-Calendar {
+ --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4);
+ }
+}
diff --git a/components/calendar/themes/spectrum.css b/components/calendar/themes/spectrum.css
index 3d81bc564b..605b802fd2 100644
--- a/components/calendar/themes/spectrum.css
+++ b/components/calendar/themes/spectrum.css
@@ -14,3 +14,9 @@
/* @combine .spectrum.spectrum--legacy */
@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Calendar {
+ --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-200-rgb), 0.4);
+ }
+}
diff --git a/components/card/index.css b/components/card/index.css
index 2b2ec46bb9..48569741bf 100644
--- a/components/card/index.css
+++ b/components/card/index.css
@@ -53,7 +53,7 @@
--spectrum-card-actions-background-color-opacity: var(--mod-card-actions-background-color-opacity, var(--spectrum-card-selection-background-color-opacity));
--spectrum-card-actions-drop-shadow-color: var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color));
--spectrum-card-actions-drop-shadow-x: var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x));
- --spectrum-card-actions-drop-shadow-y: var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-y));
+ --spectrum-card-actions-drop-shadow-y: var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y));
--spectrum-card-actions-drop-shadow-blur: var(--mod-card-actions-drop-shadow-blur, var(--spectrum-drop-shadow-blur));
/* Focus */
@@ -301,9 +301,6 @@
}
.spectrum-Card-actionButton {
- align-self: center;
- display: flex;
- justify-content: flex-end;
z-index: 1;
}
diff --git a/components/card/metadata/metadata.json b/components/card/metadata/metadata.json
index b1d309a476..09d6a163df 100644
--- a/components/card/metadata/metadata.json
+++ b/components/card/metadata/metadata.json
@@ -83,6 +83,7 @@
"--mod-card-actions-drop-shadow-blur",
"--mod-card-actions-drop-shadow-color",
"--mod-card-actions-drop-shadow-x",
+ "--mod-card-actions-drop-shadow-y",
"--mod-card-actions-size",
"--mod-card-actions-spacing",
"--mod-card-animation-duration",
diff --git a/components/card/metadata/mods.md b/components/card/metadata/mods.md
index e94a5c1491..0e6a740ffa 100644
--- a/components/card/metadata/mods.md
+++ b/components/card/metadata/mods.md
@@ -7,6 +7,7 @@
| `--mod-card-actions-drop-shadow-blur` |
| `--mod-card-actions-drop-shadow-color` |
| `--mod-card-actions-drop-shadow-x` |
+| `--mod-card-actions-drop-shadow-y` |
| `--mod-card-actions-size` |
| `--mod-card-actions-spacing` |
| `--mod-card-animation-duration` |
diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js
index 18cae14daf..2f35525d04 100644
--- a/components/coachindicator/stories/coachindicator.stories.js
+++ b/components/coachindicator/stories/coachindicator.stories.js
@@ -3,7 +3,7 @@ import { isQuiet, staticColor } from "@spectrum-css/preview/types";
import metadata from "../metadata/metadata.json";
import packageJson from "../package.json";
import { CoachIndicatorGroup } from "./coachindicator.test.js";
-import { AllVariantsCoachIndicatorGroup, Template } from "./template.js";
+import { Template } from "./template.js";
/**
* The coach indicator component can be used to bring added attention to specific parts of a page.
@@ -63,14 +63,14 @@ Default.parameters = {
};
Default.tags = ["!autodocs"];
-export const DefaultVariants = AllVariantsCoachIndicatorGroup.bind({});
+export const DefaultVariants = Template.bind({});
DefaultVariants.tags = ["!dev"];
DefaultVariants.storyName = "Default";
DefaultVariants.parameters = {
chromatic: { disableSnapshot: true }
};
-export const QuietVariants = AllVariantsCoachIndicatorGroup.bind({});
+export const QuietVariants = Template.bind({});
QuietVariants.tags = ["!dev"];
QuietVariants.storyName = "Quiet";
QuietVariants.args = {
diff --git a/components/coachindicator/stories/coachindicator.test.js b/components/coachindicator/stories/coachindicator.test.js
index b1e10ea89b..2843e3e795 100644
--- a/components/coachindicator/stories/coachindicator.test.js
+++ b/components/coachindicator/stories/coachindicator.test.js
@@ -9,22 +9,6 @@ export const CoachIndicatorGroup = Variants({
testHeading: "Default",
variant: "default",
},
- {
- testHeading: "Dark",
- variant: "dark",
- wrapperStyles: {
- "background-color": "rgba(248 248 248 / 80%)",
- "border-radius": "4px",
- },
- },
- {
- testHeading: "Light",
- variant: "light",
- wrapperStyles: {
- "background-color": "rgba(0 0 0 / 80%)",
- "border-radius": "4px",
- },
- },
{
testHeading: "Static White",
staticColor: "white"
diff --git a/components/coachindicator/stories/template.js b/components/coachindicator/stories/template.js
index e5d53ec2dd..c71d94497c 100644
--- a/components/coachindicator/stories/template.js
+++ b/components/coachindicator/stories/template.js
@@ -1,4 +1,3 @@
-import { Container } from "@spectrum-css/preview/decorators";
import { html } from "lit-html";
import { classMap } from "lit-html/directives/class-map.js";
import { styleMap } from "lit-html/directives/style-map.js";
@@ -22,7 +21,6 @@ export const Template = ({
[`${rootClass}`]: true,
[`${rootClass}--quiet`]: isQuiet,
[`${rootClass}--${variant}`]: typeof variant !== "undefined" || variant !== "default",
- [`${rootClass}--overBackground`]: staticColor === "white",
[`${rootClass}--staticWhite`]: staticColor === "white",
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
@@ -34,29 +32,3 @@ export const Template = ({
`;
};
-
-/* This template group showcases multiple coach indicator variants at once. */
-export const AllVariantsCoachIndicatorGroup = (args, context) => Container({
- withBorder: false,
- content: html`
- ${Container({
- direction: "column",
- withBorder: false,
- heading: "Default",
- content: Template({ ...args, variant: "default" }, context)
- }, context)}
- ${Container({
- direction: "column",
- withBorder: false,
- heading: "Dark",
- content: Template({ ...args, variant: "dark" }, context)
- }, context)}
- ${Container({
- direction: "column",
- withBorder: false,
- heading: "Light",
- content: Template({ ...args, variant: "light" }, context)
-
- }, context)}
- `
-}, context);
diff --git a/components/coachmark/index.css b/components/coachmark/index.css
index 98430a2a66..384d90ca93 100644
--- a/components/coachmark/index.css
+++ b/components/coachmark/index.css
@@ -31,35 +31,20 @@
inline-size: var(--mod-coachmark-width, var(--spectrum-coach-mark-width));
}
-.spectrum-CoachMark-buttongroup {
- display: var(--spectrum-coachmark-buttongroup-display);
-}
-
-.spectrum-CoachMark-buttongroup--mobile {
- --spectrum-coachmark-buttongroup-display: var(--spectrum-coachmark-buttongroup-mobile-display);
-
- /* @passthrough -- ButtonGroup */
- --mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
-}
-
-.spectrum-CoachMark-menu {
- display: var(--spectrum-coachmark-menu-display);
-}
-
-.spectrum-CoachMark-menu--mobile {
- --spectrum-coachmark-menu-display: var(--spectrum-coachmark-menu-mobile-display);
-}
-
+/* Used when the coachmark has an image */
.spectrum-CoachMark-image-wrapper {
block-size: var(--mod-coachmark-media-height, var(--spectrum-coach-mark-media-height));
min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coach-mark-media-minimum-height));
inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coach-mark-width)) - (var(--spectrum-coachmark-border-size) * 2));
+
object-fit: cover;
object-position: center;
+
border-start-start-radius: inherit;
border-start-end-radius: inherit;
}
+/* Class for the image; nested inside image-wrapper */
.spectrum-CoachMark-image {
display: block;
inline-size: 100%;
@@ -69,6 +54,7 @@
border-start-end-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size));
}
+/* Shared content styles */
.spectrum-CoachMark-header,
.spectrum-CoachMark-content,
.spectrum-CoachMark-footer {
@@ -76,6 +62,7 @@
padding-inline: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
}
+/* Wrapper contains title, action-menu */
.spectrum-CoachMark-header {
padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
display: flex;
@@ -84,12 +71,35 @@
margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-spacing-200));
}
+/* Text wrapper for the title content; sides besdie action menu if present */
+.spectrum-CoachMark-title {
+ color: var(--mod-coachmark-title-color, var(--spectrum-heading-color));
+ font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coach-mark-title-size));
+ font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-heading-sans-serif-font-weight));
+ font-family: var(--mod-coachmark-title-font-family, var(--spectrum-sans-serif-font));
+ font-style: var(--mod-coachmark-title-font-style, var(--spectrum-heading-serif-font-style));
+ line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-heading-line-height));
+ margin-block-end: 0;
+}
+
+/* Wrapper element around the nested action menu sub-component */
.spectrum-CoachMark-action-menu {
white-space: nowrap;
z-index: 1;
margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-spacing-300));
}
+/* @deprecated not used currently in demos or by SWC */
+.spectrum-CoachMark-menu {
+ display: var(--spectrum-coachmark-menu-display);
+}
+
+/* @deprecated not used currently in demos or by SWC */
+.spectrum-CoachMark-menu--mobile {
+ --spectrum-coachmark-menu-display: var(--spectrum-coachmark-menu-mobile-display);
+}
+
+/* Text wrapper for the content */
.spectrum-CoachMark-content {
margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-spacing-300));
color: var(--mod-coachmark-content-font-color, var(--spectrum-body-color));
@@ -100,29 +110,19 @@
line-height: var(--mod-coachmark-content-line-height, var(--spectrum-body-line-height));
}
+/* Footer wrapper for the pagination and button group sub-components */
.spectrum-CoachMark-footer {
display: grid;
align-items: end;
margin-block-start: 0;
padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
-
- .spectrum-ButtonGroup {
- grid-column-start: 2;
- }
-}
-
-.spectrum-CoachMark-title {
- color: var(--mod-coachmark-title-color, var(--spectrum-heading-color));
- font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coach-mark-title-size));
- font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-heading-sans-serif-font-weight));
- font-family: var(--mod-coachmark-title-font-family, var(--spectrum-sans-serif-font));
- font-style: var(--mod-coachmark-title-font-style, var(--spectrum-heading-serif-font-style));
- line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-heading-line-height));
- margin-block-end: 0;
}
+/* Text wrapper for the step count */
.spectrum-CoachMark-step {
justify-self: start;
+ margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coach-mark-pagination-text-to-bottom-edge)) - var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)));
+
color: var(--mod-coachmark-step-color, var(--spectrum-coach-mark-pagination-color));
font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coach-mark-pagination-body-size));
font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-body-sans-serif-font-weight));
@@ -130,5 +130,19 @@
font-style: var(--mod-coachmark-step-font-style, var(--spectrum-body-sans-serif-font-style));
line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-body-line-height));
white-space: nowrap;
- margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coach-mark-pagination-text-to-bottom-edge)) - var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)));
+}
+
+/* Class attached to the ButtonGroup sub-component */
+.spectrum-CoachMark-buttongroup {
+ display: var(--spectrum-coachmark-buttongroup-display);
+ grid-column-start: 2;
+}
+
+/* Variant for mobile */
+/* @todo can we use a media query here or base this on scale? */
+.spectrum-CoachMark-buttongroup--mobile {
+ --spectrum-coachmark-buttongroup-display: var(--spectrum-coachmark-buttongroup-mobile-display);
+
+ /* @passthrough -- ButtonGroup */
+ --mod-buttongroup-spacing: var(--spectrum-spacing-100);
}
diff --git a/components/coachmark/metadata/metadata.json b/components/coachmark/metadata/metadata.json
index c63a0a3ea9..8bc036d5fc 100644
--- a/components/coachmark/metadata/metadata.json
+++ b/components/coachmark/metadata/metadata.json
@@ -7,7 +7,6 @@
".spectrum-CoachMark-buttongroup--mobile",
".spectrum-CoachMark-content",
".spectrum-CoachMark-footer",
- ".spectrum-CoachMark-footer .spectrum-ButtonGroup",
".spectrum-CoachMark-header",
".spectrum-CoachMark-image",
".spectrum-CoachMark-image-wrapper",
@@ -86,7 +85,7 @@
"passthroughs": [
"--mod-button-edge-to-visual-only",
"--mod-buttongroup-justify-content",
- "--mod-buttongroup-spacing-horizontal",
+ "--mod-buttongroup-spacing",
"--mod-popover-border-width",
"--mod-popover-content-area-spacing-vertical",
"--mod-popover-corner-radius"
diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
index dc3d1971ed..69e0cca466 100644
--- a/components/coachmark/stories/coachmark.stories.js
+++ b/components/coachmark/stories/coachmark.stories.js
@@ -70,6 +70,7 @@ export default {
};
export const Default = CoachMarkGroup.bind({});
+Default.title = "Standard";
Default.args = {};
export const WithMedia = Template.bind({});
diff --git a/components/coachmark/stories/template.js b/components/coachmark/stories/template.js
index 3ff1f79f88..e7283a9ab3 100644
--- a/components/coachmark/stories/template.js
+++ b/components/coachmark/stories/template.js
@@ -17,6 +17,10 @@ export const CoachContainer = ({
hasActionMenu = false,
hasPagination,
hasImage,
+ title = "Try playing with a pixel brush",
+ content = "Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.",
+ currentStep = 2,
+ totalStepCount = 8,
isOpen = false,
} = {}, context = {}) => {
const { globals = {} } = context;
@@ -33,12 +37,10 @@ export const CoachContainer = ({
`)}
+ ${content}