+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-ActionBar {
+ /* colors - applied to popover */
+ --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25);
+ --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
+ }
+}
diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css
index 3b48a570c21..27971810d3d 100644
--- a/components/actionbar/themes/spectrum.css
+++ b/components/actionbar/themes/spectrum.css
@@ -10,3 +10,14 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-ActionBar {
+ --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50);
+ --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
+ }
+}
diff --git a/components/actionbutton/CHANGELOG.md b/components/actionbutton/CHANGELOG.md
index 4429fa2de80..17d8ae5ae50 100644
--- a/components/actionbutton/CHANGELOG.md
+++ b/components/actionbutton/CHANGELOG.md
@@ -1,5 +1,268 @@
# Change Log
+## 7.0.0-s2-foundations.23
+
+### Patch Changes
+
+- [#3256](https://github.com/adobe/spectrum-css/pull/3256) [`b84b93e`](https://github.com/adobe/spectrum-css/commit/b84b93e64157c7a8288a3ed19f1a637ee609251c) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Adds line-height on `.spectrum-ActionButton-label` in order to accommodate text with diacritics that may be cut off vertically.
+
+## 7.0.0-s2-foundations.22
+
+### Minor Changes
+
+- [#3268](https://github.com/adobe/spectrum-css/pull/3268) [`4f881f0`](https://github.com/adobe/spectrum-css/commit/4f881f07b52c3761f5b77d03cb563f6a11807ec4) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - Sets --spectrum-actionbutton-content-color-hover, --spectrum-actionbutton-content-color-down, --spectrum-actionbutton-content-color-focus for selected static action button
+
+## 7.0.0-s2-foundations.21
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 7.0.0-s2-foundations.20
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.19
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0) Thanks [@pfulton](https://github.com/pfulton)! - ActionButton:
+
+ - Correct --spectrum-actionbutton-background-color-selected-disabled to be --spectrum-actionbutton-(background|border)-color-disabled-selected
+
+ Combobox:
+
+ - Move --spectrum-combobox-min-inline-size and --spectrum-combobox-button-width to the index.css
+
+ FieldGroup:
+
+ - Swap gap back to margin-inline-end on FieldGroup
+
+ Typography:
+
+ - Remap body size to xs if xxs provided
+
+## 7.0.0-s2-foundations.18
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1252094`](https://github.com/adobe/spectrum-css/commit/1252094e476eb60b51d33c3ec574b843b005ef82) Thanks [@pfulton](https://github.com/pfulton)! - Right-side padding fix
+
+## 7.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f15243a`](https://github.com/adobe/spectrum-css/commit/f15243adaa633531e82edbb61b2e4444517af64e) Thanks [@pfulton](https://github.com/pfulton)! - fix(actionbutton): migrate --mods to index.css
+
+## 7.0.0-s2-foundations.15
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0e08995`](https://github.com/adobe/spectrum-css/commit/0e08995cfd43f7d4495df4e3403106ced7760381) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-248]: Selected, static black actionbutton content color should be white, not black
+
+## 7.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`58a89ea`](https://github.com/adobe/spectrum-css/commit/58a89ea464c387111511271a5f5afce044f11042) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-248] Action button selected static black state overrides not working
+
+### Patch Changes
+
+- Updated dependencies [[`58a89ea`](https://github.com/adobe/spectrum-css/commit/58a89ea464c387111511271a5f5afce044f11042)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.15
+
+## 7.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.12
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.11
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4265d20`](https://github.com/adobe/spectrum-css/commit/4265d208b6eb2db923e558fca100b4532b964e45) Thanks [@pfulton](https://github.com/pfulton)! - Fix unsupported variables created in components/actionbutton/themes/spectrum.css
+
+- Updated dependencies [[`4265d20`](https://github.com/adobe/spectrum-css/commit/4265d208b6eb2db923e558fca100b4532b964e45)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.11
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 2eb2fad0014..3212746608f 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -12,7 +12,7 @@
*/
@import "@spectrum-css/commons/basebutton.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-ActionButton {
--spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
@@ -56,6 +56,20 @@
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white));
}
}
+
+ &.spectrum-ActionButon--staticBlack {
+ --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color);
+ --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color);
+ --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color);
+ --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color);
+ }
+
+ &.spectrum-ActionButon--staticWhite {
+ --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color);
+ --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color);
+ --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color);
+ --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color);
+ }
}
.spectrum-ActionButton--sizeXS {
@@ -165,6 +179,7 @@
.spectrum-ActionButton {
@extend %spectrum-BaseButton;
+
position: relative;
min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
diff --git a/components/actionbutton/metadata/metadata.json b/components/actionbutton/metadata/metadata.json
index ad24ea1b5b6..64673f7c225 100644
--- a/components/actionbutton/metadata/metadata.json
+++ b/components/actionbutton/metadata/metadata.json
@@ -19,6 +19,8 @@
".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
+ ".spectrum-ActionButton.spectrum-ActionButon--staticBlack",
+ ".spectrum-ActionButton.spectrum-ActionButon--staticWhite",
".spectrum-ActionButton.spectrum-ActionButton--quiet",
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected",
@@ -162,10 +164,8 @@
"--spectrum-disabled-background-color",
"--spectrum-disabled-border-color",
"--spectrum-disabled-content-color",
- "--spectrum-disabled-static-black-background-color",
"--spectrum-disabled-static-black-border-color",
"--spectrum-disabled-static-black-content-color",
- "--spectrum-disabled-static-white-background-color",
"--spectrum-disabled-static-white-border-color",
"--spectrum-disabled-static-white-content-color",
"--spectrum-focus-indicator-color",
@@ -176,13 +176,12 @@
"--spectrum-font-size-300",
"--spectrum-font-size-50",
"--spectrum-font-size-75",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
"--spectrum-gray-400",
"--spectrum-gray-50",
"--spectrum-gray-500",
"--spectrum-gray-600",
- "--spectrum-gray-75",
"--spectrum-line-height-100",
"--spectrum-logical-rotation",
"--spectrum-neutral-background-color-selected-default",
@@ -201,19 +200,18 @@
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-50",
"--spectrum-text-to-visual-75",
- "--spectrum-transparent-black-200",
+ "--spectrum-transparent-black-1000",
"--spectrum-transparent-black-300",
"--spectrum-transparent-black-400",
"--spectrum-transparent-black-500",
"--spectrum-transparent-black-600",
- "--spectrum-transparent-black-800",
- "--spectrum-transparent-black-900",
- "--spectrum-transparent-white-200",
+ "--spectrum-transparent-black-700",
+ "--spectrum-transparent-white-1000",
"--spectrum-transparent-white-300",
"--spectrum-transparent-white-400",
"--spectrum-transparent-white-500",
"--spectrum-transparent-white-600",
- "--spectrum-transparent-white-800",
+ "--spectrum-transparent-white-700",
"--spectrum-transparent-white-900",
"--spectrum-white",
"--spectrum-workflow-icon-size-100",
@@ -223,95 +221,94 @@
"--spectrum-workflow-icon-size-75"
],
"system-theme": [
- "--system-spectrum-actionbutton-background-color-default",
- "--system-spectrum-actionbutton-background-color-disabled",
- "--system-spectrum-actionbutton-background-color-down",
- "--system-spectrum-actionbutton-background-color-focus",
- "--system-spectrum-actionbutton-background-color-hover",
- "--system-spectrum-actionbutton-border-color-default",
- "--system-spectrum-actionbutton-border-color-disabled",
- "--system-spectrum-actionbutton-border-color-down",
- "--system-spectrum-actionbutton-border-color-focus",
- "--system-spectrum-actionbutton-border-color-hover",
- "--system-spectrum-actionbutton-content-color-disabled",
- "--system-spectrum-actionbutton-quiet-background-color-default",
- "--system-spectrum-actionbutton-quiet-background-color-disabled",
- "--system-spectrum-actionbutton-quiet-background-color-down",
- "--system-spectrum-actionbutton-quiet-background-color-focus",
- "--system-spectrum-actionbutton-quiet-background-color-hover",
- "--system-spectrum-actionbutton-quiet-border-color-default",
- "--system-spectrum-actionbutton-quiet-border-color-disabled",
- "--system-spectrum-actionbutton-quiet-border-color-down",
- "--system-spectrum-actionbutton-quiet-border-color-focus",
- "--system-spectrum-actionbutton-quiet-border-color-hover",
- "--system-spectrum-actionbutton-selected-background-color-disabled",
- "--system-spectrum-actionbutton-selected-border-color-default",
- "--system-spectrum-actionbutton-selected-border-color-disabled",
- "--system-spectrum-actionbutton-selected-border-color-down",
- "--system-spectrum-actionbutton-selected-border-color-focus",
- "--system-spectrum-actionbutton-selected-border-color-hover",
- "--system-spectrum-actionbutton-staticblack-background-color-default",
- "--system-spectrum-actionbutton-staticblack-background-color-disabled",
- "--system-spectrum-actionbutton-staticblack-background-color-down",
- "--system-spectrum-actionbutton-staticblack-background-color-focus",
- "--system-spectrum-actionbutton-staticblack-background-color-hover",
- "--system-spectrum-actionbutton-staticblack-border-color-default",
- "--system-spectrum-actionbutton-staticblack-border-color-disabled",
- "--system-spectrum-actionbutton-staticblack-border-color-down",
- "--system-spectrum-actionbutton-staticblack-border-color-focus",
- "--system-spectrum-actionbutton-staticblack-border-color-hover",
- "--system-spectrum-actionbutton-staticblack-content-color-default",
- "--system-spectrum-actionbutton-staticblack-content-color-disabled",
- "--system-spectrum-actionbutton-staticblack-content-color-down",
- "--system-spectrum-actionbutton-staticblack-content-color-focus",
- "--system-spectrum-actionbutton-staticblack-content-color-hover",
- "--system-spectrum-actionbutton-staticblack-focus-indicator-color",
- "--system-spectrum-actionbutton-staticblack-quiet-border-color-default",
- "--system-spectrum-actionbutton-staticblack-quiet-border-color-disabled",
- "--system-spectrum-actionbutton-staticblack-quiet-border-color-down",
- "--system-spectrum-actionbutton-staticblack-quiet-border-color-focus",
- "--system-spectrum-actionbutton-staticblack-quiet-border-color-hover",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus",
- "--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover",
- "--system-spectrum-actionbutton-staticwhite-background-color-default",
- "--system-spectrum-actionbutton-staticwhite-background-color-disabled",
- "--system-spectrum-actionbutton-staticwhite-background-color-down",
- "--system-spectrum-actionbutton-staticwhite-background-color-focus",
- "--system-spectrum-actionbutton-staticwhite-background-color-hover",
- "--system-spectrum-actionbutton-staticwhite-border-color-default",
- "--system-spectrum-actionbutton-staticwhite-border-color-disabled",
- "--system-spectrum-actionbutton-staticwhite-border-color-down",
- "--system-spectrum-actionbutton-staticwhite-border-color-focus",
- "--system-spectrum-actionbutton-staticwhite-border-color-hover",
- "--system-spectrum-actionbutton-staticwhite-content-color-default",
- "--system-spectrum-actionbutton-staticwhite-content-color-disabled",
- "--system-spectrum-actionbutton-staticwhite-content-color-down",
- "--system-spectrum-actionbutton-staticwhite-content-color-focus",
- "--system-spectrum-actionbutton-staticwhite-content-color-hover",
- "--system-spectrum-actionbutton-staticwhite-focus-indicator-color",
- "--system-spectrum-actionbutton-staticwhite-quiet-border-color-default",
- "--system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled",
- "--system-spectrum-actionbutton-staticwhite-quiet-border-color-down",
- "--system-spectrum-actionbutton-staticwhite-quiet-border-color-focus",
- "--system-spectrum-actionbutton-staticwhite-quiet-border-color-hover",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus",
- "--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover"
+ "--system-action-button-background-color-default",
+ "--system-action-button-background-color-disabled",
+ "--system-action-button-background-color-down",
+ "--system-action-button-background-color-focus",
+ "--system-action-button-background-color-hover",
+ "--system-action-button-border-color-default",
+ "--system-action-button-border-color-disabled",
+ "--system-action-button-border-color-down",
+ "--system-action-button-border-color-focus",
+ "--system-action-button-border-color-hover",
+ "--system-action-button-content-color-disabled",
+ "--system-action-button-quiet-background-color-default",
+ "--system-action-button-quiet-background-color-down",
+ "--system-action-button-quiet-background-color-focus",
+ "--system-action-button-quiet-background-color-hover",
+ "--system-action-button-quiet-border-color-default",
+ "--system-action-button-quiet-border-color-disabled",
+ "--system-action-button-quiet-border-color-down",
+ "--system-action-button-quiet-border-color-focus",
+ "--system-action-button-quiet-border-color-hover",
+ "--system-action-button-selected-background-color-disabled",
+ "--system-action-button-selected-border-color-default",
+ "--system-action-button-selected-border-color-disabled",
+ "--system-action-button-selected-border-color-down",
+ "--system-action-button-selected-border-color-focus",
+ "--system-action-button-selected-border-color-hover",
+ "--system-action-button-static-black-background-color-default",
+ "--system-action-button-static-black-background-color-disabled",
+ "--system-action-button-static-black-background-color-down",
+ "--system-action-button-static-black-background-color-focus",
+ "--system-action-button-static-black-background-color-hover",
+ "--system-action-button-static-black-border-color-default",
+ "--system-action-button-static-black-border-color-disabled",
+ "--system-action-button-static-black-border-color-down",
+ "--system-action-button-static-black-border-color-focus",
+ "--system-action-button-static-black-border-color-hover",
+ "--system-action-button-static-black-content-color-default",
+ "--system-action-button-static-black-content-color-disabled",
+ "--system-action-button-static-black-content-color-down",
+ "--system-action-button-static-black-content-color-focus",
+ "--system-action-button-static-black-content-color-hover",
+ "--system-action-button-static-black-focus-indicator-color",
+ "--system-action-button-static-black-quiet-border-color-default",
+ "--system-action-button-static-black-quiet-border-color-disabled",
+ "--system-action-button-static-black-quiet-border-color-down",
+ "--system-action-button-static-black-quiet-border-color-focus",
+ "--system-action-button-static-black-quiet-border-color-hover",
+ "--system-action-button-static-black-selected-background-color-default",
+ "--system-action-button-static-black-selected-background-color-disabled",
+ "--system-action-button-static-black-selected-background-color-down",
+ "--system-action-button-static-black-selected-background-color-focus",
+ "--system-action-button-static-black-selected-background-color-hover",
+ "--system-action-button-static-black-selected-border-color-disabled",
+ "--system-action-button-static-black-selected-content-color-default",
+ "--system-action-button-static-black-selected-content-color-down",
+ "--system-action-button-static-black-selected-content-color-focus",
+ "--system-action-button-static-black-selected-content-color-hover",
+ "--system-action-button-static-white-background-color-default",
+ "--system-action-button-static-white-background-color-disabled",
+ "--system-action-button-static-white-background-color-down",
+ "--system-action-button-static-white-background-color-focus",
+ "--system-action-button-static-white-background-color-hover",
+ "--system-action-button-static-white-border-color-default",
+ "--system-action-button-static-white-border-color-disabled",
+ "--system-action-button-static-white-border-color-down",
+ "--system-action-button-static-white-border-color-focus",
+ "--system-action-button-static-white-border-color-hover",
+ "--system-action-button-static-white-content-color-default",
+ "--system-action-button-static-white-content-color-disabled",
+ "--system-action-button-static-white-content-color-down",
+ "--system-action-button-static-white-content-color-focus",
+ "--system-action-button-static-white-content-color-hover",
+ "--system-action-button-static-white-focus-indicator-color",
+ "--system-action-button-static-white-quiet-border-color-default",
+ "--system-action-button-static-white-quiet-border-color-disabled",
+ "--system-action-button-static-white-quiet-border-color-down",
+ "--system-action-button-static-white-quiet-border-color-focus",
+ "--system-action-button-static-white-quiet-border-color-hover",
+ "--system-action-button-static-white-selected-background-color-default",
+ "--system-action-button-static-white-selected-background-color-disabled",
+ "--system-action-button-static-white-selected-background-color-down",
+ "--system-action-button-static-white-selected-background-color-focus",
+ "--system-action-button-static-white-selected-background-color-hover",
+ "--system-action-button-static-white-selected-border-color-disabled",
+ "--system-action-button-static-white-selected-content-color-default",
+ "--system-action-button-static-white-selected-content-color-down",
+ "--system-action-button-static-white-selected-content-color-focus",
+ "--system-action-button-static-white-selected-content-color-hover"
],
"passthroughs": [
"--mod-button-animation-duration",
diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json
index 328f105a476..43c2d626cca 100644
--- a/components/actionbutton/package.json
+++ b/components/actionbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/actionbutton",
- "version": "6.2.0",
+ "version": "7.0.0-s2-foundations.23",
"description": "The Spectrum CSS action button component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index 39fa2613221..cc39a7fbce5 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -84,6 +84,10 @@ export default {
actions: {
handles: ["click .spectrum-ActionButton:not([disabled])"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=702-2877",
+ },
packageJson,
metadata,
docs: {
diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
index 2a9f4672831..7a606dc38de 100644
--- a/components/actionbutton/stories/template.js
+++ b/components/actionbutton/stories/template.js
@@ -7,6 +7,9 @@ import { when } from "lit/directives/when.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
/**
* @todo load order should not influence the icon size but it is; fix this
@@ -67,6 +70,7 @@ export const Template = ({
role = "button",
} = {}, context = {}) => {
const { updateArgs } = context;
+
return html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-ActionButton {
+ --spectrum-actionbutton-background-color-default: var(--spectrum-gray-50);
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
+
+ --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
+ --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
+ --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
+ --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
+
+ --spectrum-actionbutton-background-color-disabled: transparent;
+ --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-ActionButton--quiet {
+ --spectrum-actionbutton-background-color-default: transparent;
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
+
+ --spectrum-actionbutton-border-color-default: transparent;
+ --spectrum-actionbutton-border-color-hover: transparent;
+ --spectrum-actionbutton-border-color-down: transparent;
+ --spectrum-actionbutton-border-color-focus: transparent;
+
+ --spectrum-actionbutton-border-color-disabled: transparent;
+ }
+
+ &.is-selected {
+ --spectrum-actionbutton-border-color-default: transparent;
+ --spectrum-actionbutton-border-color-hover: transparent;
+ --spectrum-actionbutton-border-color-down: transparent;
+ --spectrum-actionbutton-border-color-focus: transparent;
+
+ --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-actionbutton-border-color-disabled: transparent;
+ }
+
+ &.spectrum-ActionButton--staticBlack,
+ &.spectrum-ActionButton--staticWhite {
+ &.spectrum-ActionButton--quiet {
+ --spectrum-actionbutton-border-color-default: transparent;
+ --spectrum-actionbutton-border-color-hover: transparent;
+ --spectrum-actionbutton-border-color-down: transparent;
+ --spectrum-actionbutton-border-color-focus: transparent;
+
+ --spectrum-actionbutton-border-color-disabled: transparent;
+ }
+ }
+
+ &.spectrum-ActionButton--staticBlack {
+ --spectrum-actionbutton-background-color-default: transparent;
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
+
+ --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
+ --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
+ --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
+ --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
+
+ --spectrum-actionbutton-content-color-default: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-down: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
+
+ --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ --spectrum-actionbutton-background-color-disabled: transparent;
+ --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+ --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+
+ &.is-selected {
+ --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-1000);
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-1000);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-1000);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-1000);
+
+ --spectrum-actionbutton-content-color-default: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-down: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+
+ --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-black-300);
+ --spectrum-actionbutton-border-color-disabled: transparent;
+ }
+ }
+
+ &.spectrum-ActionButton--staticWhite {
+ --spectrum-actionbutton-background-color-default: transparent;
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
+
+ --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
+ --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
+ --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
+ --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
+
+ --spectrum-actionbutton-content-color-default: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-down: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+
+ --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ --spectrum-actionbutton-background-color-disabled: transparent;
+ --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+ --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+
+ &.is-selected {
+ --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-900);
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-1000);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-1000);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-1000);
+
+ --spectrum-actionbutton-content-color-default: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-down: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
+
+ --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-white-300);
+ --spectrum-actionbutton-border-color-disabled: transparent;
+ }
+ }
+ }
+}
diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css
index dac5a200cf0..81db7273ed5 100644
--- a/components/actionbutton/themes/spectrum.css
+++ b/components/actionbutton/themes/spectrum.css
@@ -11,61 +11,28 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+ @import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-ActionButton {
--spectrum-actionbutton-background-color-default: var(--spectrum-gray-75);
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
- --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
- --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
- --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
- --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
-
- --spectrum-actionbutton-background-color-disabled: transparent;
- --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
-
&.spectrum-ActionButton--quiet {
- --spectrum-actionbutton-background-color-default: transparent;
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
- --spectrum-actionbutton-border-color-default: transparent;
- --spectrum-actionbutton-border-color-hover: transparent;
- --spectrum-actionbutton-border-color-down: transparent;
- --spectrum-actionbutton-border-color-focus: transparent;
-
- --spectrum-actionbutton-background-color-disabled: transparent;
- --spectrum-actionbutton-border-color-disabled: transparent;
- }
-
- &.is-selected {
- --spectrum-actionbutton-border-color-default: transparent;
- --spectrum-actionbutton-border-color-hover: transparent;
- --spectrum-actionbutton-border-color-down: transparent;
- --spectrum-actionbutton-border-color-focus: transparent;
-
- --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-actionbutton-border-color-disabled: transparent;
- }
-
- &.spectrum-ActionButton--staticBlack,
- &.spectrum-ActionButton--staticWhite {
- &.spectrum-ActionButton--quiet {
- --spectrum-actionbutton-border-color-default: transparent;
- --spectrum-actionbutton-border-color-hover: transparent;
- --spectrum-actionbutton-border-color-down: transparent;
- --spectrum-actionbutton-border-color-focus: transparent;
-
- --spectrum-actionbutton-border-color-disabled: transparent;
+ &.is-selected {
+ --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
}
}
&.spectrum-ActionButton--staticBlack {
- --spectrum-actionbutton-background-color-default: transparent;
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
@@ -75,30 +42,13 @@
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600);
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500);
- --spectrum-actionbutton-content-color-default: var(--spectrum-black);
- --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
- --spectrum-actionbutton-content-color-down: var(--spectrum-black);
- --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
-
- --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
- --spectrum-actionbutton-background-color-disabled: transparent;
- --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
- --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-
&.is-selected {
- --mod-actionbutton-background-color-default: var(--spectrum-transparent-black-800);
- --mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-900);
- --mod-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
- --mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
+ --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-900);
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
- --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
- --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
- --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
- --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
-
- --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
- --mod-actionbutton-border-color-disabled: transparent;
+ --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-black-200);
}
}
@@ -113,30 +63,13 @@
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600);
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500);
- --spectrum-actionbutton-content-color-default: var(--spectrum-white);
- --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
- --spectrum-actionbutton-content-color-down: var(--spectrum-white);
- --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
-
- --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-actionbutton-background-color-disabled: transparent;
- --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
- --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-
&.is-selected {
- --mod-actionbutton-background-color-default: var(--spectrum-transparent-white-800);
- --mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-900);
- --mod-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
- --mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
-
- --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
- --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
- --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
- --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
+ --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800);
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
- --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
- --mod-actionbutton-border-color-disabled: transparent;
+ --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-white-200);
}
}
}
diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md
index 4384dc2cb44..8abbf166028 100644
--- a/components/actiongroup/CHANGELOG.md
+++ b/components/actiongroup/CHANGELOG.md
@@ -1,5 +1,209 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Patch Changes
+
+- [#3256](https://github.com/adobe/spectrum-css/pull/3256) [`b84b93e`](https://github.com/adobe/spectrum-css/commit/b84b93e64157c7a8288a3ed19f1a637ee609251c) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Action group
+
+ `flex: 1` has now changed to `flex-grow: 1` in the `.spectrum-ActionGroup--justified .spectrum-ActionGroup-item` selector to specify the desired behavior of justified action groups.
+
+- Updated dependencies [[`b84b93e`](https://github.com/adobe/spectrum-css/commit/b84b93e64157c7a8288a3ed19f1a637ee609251c)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.23
+
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.20
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
index 4d10ad3193f..84d45052f54 100644
--- a/components/actiongroup/index.css
+++ b/components/actiongroup/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-ActionGroup {
--spectrum-actiongroup-button-spacing-reset: 0;
diff --git a/components/actiongroup/metadata/metadata.json b/components/actiongroup/metadata/metadata.json
index 8ed65cac3a8..a21ae470df7 100644
--- a/components/actiongroup/metadata/metadata.json
+++ b/components/actiongroup/metadata/metadata.json
@@ -51,13 +51,12 @@
"global": [
"--spectrum-corner-radius-100",
"--spectrum-spacing-100",
- "--spectrum-spacing-50",
"--spectrum-spacing-75"
],
"system-theme": [
- "--system-spectrum-actiongroup-gap-size-compact",
- "--system-spectrum-actiongroup-horizontal-spacing-compact",
- "--system-spectrum-actiongroup-vertical-spacing-compact"
+ "--system-action-group-gap-size-compact",
+ "--system-action-group-horizontal-spacing-compact",
+ "--system-action-group-vertical-spacing-compact"
],
"passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"],
"high-contrast": []
diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json
index 457bcb4ab6d..979e4386cc4 100644
--- a/components/actiongroup/package.json
+++ b/components/actiongroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/actiongroup",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS actiongroup component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js
index 4eff36dcccc..9a7e896117a 100644
--- a/components/actiongroup/stories/actiongroup.stories.js
+++ b/components/actiongroup/stories/actiongroup.stories.js
@@ -93,6 +93,10 @@ export default {
...(ActionButton?.parameters?.actions?.handles ?? []),
],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=19083-360",
+ },
packageJson,
metadata,
},
diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js
index 25d8f25f4e0..d13cdac64aa 100644
--- a/components/actiongroup/stories/template.js
+++ b/components/actiongroup/stories/template.js
@@ -6,6 +6,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ActionGroup",
diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css
index 7beafcda729..3fd8de9cdbb 100644
--- a/components/actiongroup/themes/express.css
+++ b/components/actiongroup/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-ActionGroup {
--spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50);
diff --git a/components/actiongroup/themes/spectrum-two.css b/components/actiongroup/themes/spectrum-two.css
new file mode 100644
index 00000000000..b25c0f945b2
--- /dev/null
+++ b/components/actiongroup/themes/spectrum-two.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-ActionGroup {
+ --spectrum-actiongroup-gap-size-compact: 0;
+
+ /* account for button border */
+ --spectrum-actiongroup-horizontal-spacing-compact: -1px;
+ --spectrum-actiongroup-vertical-spacing-compact: -1px;
+ }
+}
diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css
index ff6e1cab39d..3d81bc564b5 100644
--- a/components/actiongroup/themes/spectrum.css
+++ b/components/actiongroup/themes/spectrum.css
@@ -11,12 +11,6 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-ActionGroup {
- --spectrum-actiongroup-gap-size-compact: 0;
+/* @combine .spectrum.spectrum--legacy */
- /* account for button border */
- --spectrum-actiongroup-horizontal-spacing-compact: -1px;
- --spectrum-actiongroup-vertical-spacing-compact: -1px;
- }
-}
+@import "./spectrum-two.css";
diff --git a/components/actionmenu/CHANGELOG.md b/components/actionmenu/CHANGELOG.md
index 78f38e2b23e..395bef2f308 100644
--- a/components/actionmenu/CHANGELOG.md
+++ b/components/actionmenu/CHANGELOG.md
@@ -1,5 +1,246 @@
# Change Log
+## 7.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.21
+ - @spectrum-css/popover@8.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+ - @spectrum-css/menu@8.0.0-s2-foundations.15
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.20
+ - @spectrum-css/popover@8.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/menu@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json
index a71c7289c15..37a200b2d89 100644
--- a/components/actionmenu/package.json
+++ b/components/actionmenu/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/actionmenu",
- "version": "6.2.0",
+ "version": "7.0.0-s2-foundations.15",
"description": "The Spectrum CSS actionmenu component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/alertbanner/CHANGELOG.md b/components/alertbanner/CHANGELOG.md
index 136d123891a..b26b65899e8 100644
--- a/components/alertbanner/CHANGELOG.md
+++ b/components/alertbanner/CHANGELOG.md
@@ -1,5 +1,252 @@
# Change Log
+## 3.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.16
+ - @spectrum-css/divider@4.0.0-s2-foundations.15
+ - @spectrum-css/button@14.0.0-s2-foundations.17
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 3.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.15
+ - @spectrum-css/divider@4.0.0-s2-foundations.14
+ - @spectrum-css/button@14.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 3.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.14
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 3.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9956547`](https://github.com/adobe/spectrum-css/commit/9956547660d88ddfe77f9fc641b2036ab5b33efc) Thanks [@pfulton](https://github.com/pfulton)! - Express color updated for alert banner component
+
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.0
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 2.3.0
### Minor Changes
diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css
index af4976e1afa..4bb0c4088fb 100644
--- a/components/alertbanner/index.css
+++ b/components/alertbanner/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-AlertBanner {
--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
@@ -49,9 +49,7 @@
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
--mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
--mod-closebutton-align-self: flex-start;
-}
-.spectrum-AlertBanner {
display: none;
justify-content: space-between;
inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
diff --git a/components/alertbanner/metadata/metadata.json b/components/alertbanner/metadata/metadata.json
index fe2abd0efaa..161b075d25b 100644
--- a/components/alertbanner/metadata/metadata.json
+++ b/components/alertbanner/metadata/metadata.json
@@ -49,6 +49,7 @@
"--spectrum-alert-banner-minimum-height",
"--spectrum-alert-banner-negative-background",
"--spectrum-alert-banner-netural-background",
+ "--spectrum-alert-banner-neutral-background",
"--spectrum-alert-banner-size",
"--spectrum-alert-banner-start-edge",
"--spectrum-alert-banner-text-to-button-horizontal",
@@ -65,16 +66,13 @@
"--spectrum-font-size-100",
"--spectrum-informative-background-color-default",
"--spectrum-negative-background-color-default",
- "--spectrum-neutral-background-color-default",
"--spectrum-neutral-subdued-background-color-default",
"--spectrum-spacing-300",
"--spectrum-text-to-visual-300",
"--spectrum-white",
"--spectrum-workflow-icon-size-100"
],
- "system-theme": [
- "--system-spectrum-alertbanner-spectrum-alert-banner-netural-background"
- ],
+ "system-theme": ["--system-alert-banner-neutral-background"],
"passthroughs": [
"--mod-button-margin-block",
"--mod-button-margin-left",
diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json
index 011ddf2a6e1..d0ebc4d608b 100644
--- a/components/alertbanner/package.json
+++ b/components/alertbanner/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/alertbanner",
- "version": "2.3.0",
+ "version": "3.0.0-s2-foundations.16",
"description": "The Spectrum CSS alertbanner component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js
index d5998fa43d5..f445248ab52 100644
--- a/components/alertbanner/stories/alertbanner.stories.js
+++ b/components/alertbanner/stories/alertbanner.stories.js
@@ -69,6 +69,10 @@ export default {
actions: {
handles: ["click .spectrum-AlertBanner button"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=15963-287",
+ },
packageJson,
metadata,
},
diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js
index b564deeed0d..3eb719c0612 100644
--- a/components/alertbanner/stories/template.js
+++ b/components/alertbanner/stories/template.js
@@ -10,6 +10,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-AlertBanner",
diff --git a/components/alertbanner/themes/express.css b/components/alertbanner/themes/express.css
index ceebfffaf18..a86424d5e4b 100644
--- a/components/alertbanner/themes/express.css
+++ b/components/alertbanner/themes/express.css
@@ -11,10 +11,12 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-AlertBanner {
- --spectrum-alert-banner-netural-background: var(--spectrum-neutral-background-color-default);
+ --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default);
}
}
diff --git a/components/alertbanner/themes/spectrum-two.css b/components/alertbanner/themes/spectrum-two.css
new file mode 100644
index 00000000000..3e038dbd7a4
--- /dev/null
+++ b/components/alertbanner/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-AlertBanner {
+ --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
+ }
+}
diff --git a/components/alertbanner/themes/spectrum.css b/components/alertbanner/themes/spectrum.css
index adcf854d6cb..1bd05c8e88f 100644
--- a/components/alertbanner/themes/spectrum.css
+++ b/components/alertbanner/themes/spectrum.css
@@ -11,8 +11,12 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: spectrum) {
.spectrum-AlertBanner {
- --spectrum-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default);
+ --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
}
}
diff --git a/components/alertdialog/CHANGELOG.md b/components/alertdialog/CHANGELOG.md
index b6da1d9d8ce..dc8d5b42c7b 100644
--- a/components/alertdialog/CHANGELOG.md
+++ b/components/alertdialog/CHANGELOG.md
@@ -1,5 +1,262 @@
# Change Log
+## 3.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.15
+ - @spectrum-css/underlay@5.0.0-s2-foundations.15
+ - @spectrum-css/divider@4.0.0-s2-foundations.15
+ - @spectrum-css/modal@6.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 3.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.14
+ - @spectrum-css/underlay@5.0.0-s2-foundations.14
+ - @spectrum-css/divider@4.0.0-s2-foundations.14
+ - @spectrum-css/modal@6.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 3.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.13
+ - @spectrum-css/underlay@5.0.0-s2-foundations.13
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/modal@6.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.12
+ - @spectrum-css/underlay@5.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/modal@6.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.11
+ - @spectrum-css/underlay@5.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/modal@6.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.10
+ - @spectrum-css/underlay@5.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/modal@6.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.9
+ - @spectrum-css/underlay@5.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/modal@6.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.8
+ - @spectrum-css/underlay@5.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/modal@6.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.7
+ - @spectrum-css/underlay@5.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/modal@6.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.6
+ - @spectrum-css/underlay@5.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/modal@6.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.5
+ - @spectrum-css/underlay@5.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/modal@6.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.4
+ - @spectrum-css/underlay@5.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/modal@6.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.3
+ - @spectrum-css/underlay@5.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/modal@6.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.2
+ - @spectrum-css/underlay@5.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/modal@6.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.1
+ - @spectrum-css/underlay@5.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/modal@6.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/modal@6.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+ - @spectrum-css/underlay@5.0.0-s2-foundations.0
+
## 2.2.0
### Minor Changes
diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css
index 0816c471c40..50fd340b0c1 100644
--- a/components/alertdialog/index.css
+++ b/components/alertdialog/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-AlertDialog {
--spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json
index 0196af89c14..8a241b59855 100644
--- a/components/alertdialog/package.json
+++ b/components/alertdialog/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/alertdialog",
- "version": "2.2.0",
+ "version": "3.0.0-s2-foundations.15",
"description": "The Spectrum CSS alertdialog component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index 12674e970d9..033fd318e3d 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -45,6 +45,10 @@ export default {
actions: {
handles: ["click .spectrum-AlertDialog button"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21917-157",
+ },
docs: {
story: {
height: "300px",
diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js
index 5de1e37972c..6e1f594950a 100644
--- a/components/alertdialog/stories/template.js
+++ b/components/alertdialog/stories/template.js
@@ -10,6 +10,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Dialog = ({
rootClass = "spectrum-AlertDialog",
diff --git a/components/alertdialog/themes/express.css b/components/alertdialog/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/alertdialog/themes/express.css
+++ b/components/alertdialog/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/tokens/dist/css/express/custom-vars.css b/components/alertdialog/themes/spectrum-two.css
similarity index 93%
rename from tokens/dist/css/express/custom-vars.css
rename to components/alertdialog/themes/spectrum-two.css
index 675f4c9c61a..3b48a570c21 100644
--- a/tokens/dist/css/express/custom-vars.css
+++ b/components/alertdialog/themes/spectrum-two.css
@@ -10,7 +10,3 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
-
-.spectrum--express{
- --system:express;
-}
diff --git a/components/alertdialog/themes/spectrum.css b/components/alertdialog/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/alertdialog/themes/spectrum.css
+++ b/components/alertdialog/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/asset/CHANGELOG.md b/components/asset/CHANGELOG.md
index add24d7f894..0c68c35cb13 100644
--- a/components/asset/CHANGELOG.md
+++ b/components/asset/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/asset/index.css b/components/asset/index.css
index dea8fc9ce74..5457355b0b2 100644
--- a/components/asset/index.css
+++ b/components/asset/index.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Asset {
+ --spectrum-asset-transition-duration: var(--spectrum-animation-duration-100);
+
display: flex;
align-items: center;
justify-content: center;
diff --git a/components/asset/metadata/metadata.json b/components/asset/metadata/metadata.json
index c4dba7ecfc7..4ae12c808a9 100644
--- a/components/asset/metadata/metadata.json
+++ b/components/asset/metadata/metadata.json
@@ -18,14 +18,25 @@
"--mod-asset-icon-min-width",
"--mod-asset-icon-outline-color"
],
- "component": [],
+ "component": [
+ "--spectrum-asset-file-background-color",
+ "--spectrum-asset-folder-background-color",
+ "--spectrum-asset-icon-outline-color",
+ "--spectrum-asset-transition-duration"
+ ],
"global": [
"--spectrum-animation-duration-100",
+ "--spectrum-gray-200",
+ "--spectrum-gray-25",
"--spectrum-gray-300",
"--spectrum-gray-50",
"--spectrum-gray-500"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-asset-file-background-color",
+ "--system-asset-folder-background-color",
+ "--system-asset-icon-outline-color"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-asset-file-background-color",
diff --git a/components/asset/package.json b/components/asset/package.json
index 8b1065ab252..2b5c00678e0 100644
--- a/components/asset/package.json
+++ b/components/asset/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/asset",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS asset component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/asset/stories/template.js b/components/asset/stories/template.js
index 30bb729941a..9365bd5d4f4 100644
--- a/components/asset/stories/template.js
+++ b/components/asset/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Asset",
@@ -14,7 +17,7 @@ export const Template = ({
customClasses = [],
customStyles = {},
isCardAssetOverride = false,
-}) => {
+} = {}) => {
let visual;
if (preset === "file") {
visual = svg`
diff --git a/components/asset/themes/express.css b/components/asset/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/asset/themes/express.css
+++ b/components/asset/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/asset/themes/spectrum-two.css b/components/asset/themes/spectrum-two.css
new file mode 100644
index 00000000000..5eda732011b
--- /dev/null
+++ b/components/asset/themes/spectrum-two.css
@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Asset {
+ --spectrum-asset-folder-background-color: var(--spectrum-gray-200);
+ --spectrum-asset-file-background-color: var(--spectrum-gray-25);
+ --spectrum-asset-icon-outline-color: var(--spectrum-gray-500);
+ }
+}
diff --git a/components/asset/themes/spectrum.css b/components/asset/themes/spectrum.css
index 3b48a570c21..8b2b12ee379 100644
--- a/components/asset/themes/spectrum.css
+++ b/components/asset/themes/spectrum.css
@@ -10,3 +10,15 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Asset {
+ --spectrum-asset-folder-background-color: var(--spectrum-gray-300);
+ --spectrum-asset-file-background-color: var(--spectrum-gray-50);
+ --spectrum-asset-icon-outline-color: var(--spectrum-gray-500);
+ }
+}
diff --git a/components/assetcard/CHANGELOG.md b/components/assetcard/CHANGELOG.md
index 79cc0237757..6177512dff1 100644
--- a/components/assetcard/CHANGELOG.md
+++ b/components/assetcard/CHANGELOG.md
@@ -1,5 +1,216 @@
# Change Log
+## 5.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.18
+
+## 5.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.17
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 5.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9df688a`](https://github.com/adobe/spectrum-css/commit/9df688a6a83be5f13bc4e0e732fed294af08bf3f) Thanks [@pfulton](https://github.com/pfulton)! - Replaces raw RGB value/direct token references with abstracted custom properties in theme/spectrum-two.css files
+
+ Asset card
+
+ - removes raw rgb value for box-shadow from `index.css`
+ - creates new `--spectrum-assetcard-selectionindicator-box-shadow-color`
+ in `themes/spectrum-two.css` with previous rgb value to use instead
+
+ Well
+
+ - removes `--spectrum-gray-800-rgb` for background-color from `index.css`
+ - creates new `--spectrum-well-background-color` in `themes/spectrum-two.css`
+ with previous `--spectrum-gray-800-rgb` property to use instead
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 4.2.0
### Minor Changes
diff --git a/components/assetcard/index.css b/components/assetcard/index.css
index 3664978d933..39f9c84620d 100644
--- a/components/assetcard/index.css
+++ b/components/assetcard/index.css
@@ -11,13 +11,12 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
/* outer container, unstyled */
.spectrum-AssetCard {
/* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
--spectrum-assetcard-asset-size: 224px;
- --spectrum-assetcard-background-color: var(--spectrum-gray-200);
--spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100);
--spectrum-assetcard-asset-container-border-size: 1px;
--spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300);
@@ -31,7 +30,6 @@
--spectrum-assetcard-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
/* selection indicator - checkbox or number */
- --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9);
--spectrum-assetcard-selectionindicator-size: var(--spectrum-card-selection-background-size);
--spectrum-assetcard-selectionindicator-border-radius: var(--spectrum-corner-radius-100);
--spectrum-assetcard-selectionindicator-offset-y: 4px;
@@ -66,6 +64,16 @@
--spectrum-assetcard-content-margin-block-start: var(--spectrum-spacing-75);
+ /* contain selection indicator */
+ position: relative;
+
+ display: flex;
+ flex-direction: column;
+
+ inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));
+
+ cursor: pointer;
+
&:lang(zh),
&:lang(ja),
&:lang(ko) {
@@ -88,18 +96,6 @@
--spectrum-assetcard-content-font-style: var(--spectrum-body-cjk-font-style);
--spectrum-assetcard-content-letter-spacing: var(--spectrum-cjk-letter-spacing);
}
-}
-
-.spectrum-AssetCard {
- /* contain selection indicator */
- position: relative;
-
- display: flex;
- flex-direction: column;
-
- inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));
-
- cursor: pointer;
&.is-selected,
&:hover,
@@ -272,7 +268,7 @@
border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius));
- box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 15%);
+ box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0 0 0 / 15%);
color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)));
font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight));
diff --git a/components/assetcard/metadata/metadata.json b/components/assetcard/metadata/metadata.json
index decca789994..67bcbea1002 100644
--- a/components/assetcard/metadata/metadata.json
+++ b/components/assetcard/metadata/metadata.json
@@ -123,10 +123,13 @@
"--spectrum-assetcard-header-content-text-color",
"--spectrum-assetcard-header-margin-block-start",
"--spectrum-assetcard-overlay-background-color",
+ "--spectrum-assetcard-overlay-background-color-opacity",
+ "--spectrum-assetcard-overlay-background-color-rgb",
"--spectrum-assetcard-selectionindicator-background-color-default",
"--spectrum-assetcard-selectionindicator-background-color-ordered",
"--spectrum-assetcard-selectionindicator-blur",
"--spectrum-assetcard-selectionindicator-border-radius",
+ "--spectrum-assetcard-selectionindicator-box-shadow-color",
"--spectrum-assetcard-selectionindicator-color",
"--spectrum-assetcard-selectionindicator-font-size",
"--spectrum-assetcard-selectionindicator-font-weight",
@@ -156,11 +159,11 @@
"--spectrum-default-font-style",
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-400",
- "--spectrum-gray-100-rgb",
- "--spectrum-gray-200",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-700",
+ "--spectrum-gray-75",
+ "--spectrum-gray-75-rgb",
"--spectrum-gray-900",
"--spectrum-heading-cjk-font-style",
"--spectrum-heading-cjk-font-weight",
@@ -172,9 +175,17 @@
"--spectrum-sans-font-family-stack",
"--spectrum-spacing-300",
"--spectrum-spacing-75",
+ "--spectrum-transparent-black-300",
"--spectrum-white"
],
- "system-theme": ["--system-spectrum-assetcard-overlay-background-color"],
+ "system-theme": [
+ "--system-asset-card-background-color",
+ "--system-asset-card-overlay-background-color",
+ "--system-asset-card-overlay-background-color-opacity",
+ "--system-asset-card-overlay-background-color-rgb",
+ "--system-asset-card-selectionindicator-background-color-default",
+ "--system-asset-card-selectionindicator-box-shadow-color"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-assectcard-border-color-selected-down",
diff --git a/components/assetcard/package.json b/components/assetcard/package.json
index 2ebd8e64ea7..fc92537d57a 100644
--- a/components/assetcard/package.json
+++ b/components/assetcard/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/assetcard",
- "version": "4.2.0",
+ "version": "5.0.0-s2-foundations.16",
"description": "The Spectrum CSS asset card component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js
index 1b44be4e568..864fcd951b7 100644
--- a/components/assetcard/stories/template.js
+++ b/components/assetcard/stories/template.js
@@ -8,6 +8,9 @@ import { when } from "lit/directives/when.js";
import { camelCase } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-AssetCard",
diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css
index f208227f90e..63115538f15 100644
--- a/components/assetcard/themes/express.css
+++ b/components/assetcard/themes/express.css
@@ -11,10 +11,12 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-AssetCard {
- --spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 20%);
+ --spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%);
}
}
diff --git a/components/assetcard/themes/spectrum-two.css b/components/assetcard/themes/spectrum-two.css
new file mode 100644
index 00000000000..f38045fb758
--- /dev/null
+++ b/components/assetcard/themes/spectrum-two.css
@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-AssetCard {
+ --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
+ --spectrum-assetcard-background-color: var(--spectrum-gray-75);
+ --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9);
+ --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300);
+ }
+}
diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css
index 6104113334b..c3e7ef9e0a8 100644
--- a/components/assetcard/themes/spectrum.css
+++ b/components/assetcard/themes/spectrum.css
@@ -11,8 +11,15 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-AssetCard {
- --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%);
+ --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
+ --spectrum-assetcard-background-color: var(--spectrum-gray-200);
+ --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9);
+ --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200);
}
}
diff --git a/components/assetlist/CHANGELOG.md b/components/assetlist/CHANGELOG.md
index ee6eaac743f..77774e11bca 100644
--- a/components/assetlist/CHANGELOG.md
+++ b/components/assetlist/CHANGELOG.md
@@ -1,5 +1,214 @@
# Change Log
+## 7.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.18
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.17
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.4.0
### Minor Changes
@@ -20,6 +229,17 @@
### Patch Changes
+- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
+ - @spectrum-css/tokens@14.5.0
+
+## 6.3.0
+
+### Minor Changes
+
+- [#3264](https://github.com/adobe/spectrum-css/pull/3264) [`fc815ec`](https://github.com/adobe/spectrum-css/commit/fc815ec1eee63718e1f6441aedcfd7e25bb81c00) Thanks [@cdransf](https://github.com/cdransf)! - Resolves a linting violation in the assetlist component by moving forced-color-adjust after token declarations.
+
+### Patch Changes
+
- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
- @spectrum-css/tokens@14.5.0
diff --git a/components/assetlist/index.css b/components/assetlist/index.css
index f51b8bb04ac..7a1d12726cb 100644
--- a/components/assetlist/index.css
+++ b/components/assetlist/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-AssetList {
--spectrum-assetlist-width: 272px;
@@ -26,8 +26,6 @@
--spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100);
--spectrum-assetlist-item-font-size: var(--spectrum-font-size-100);
--spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300);
- --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200);
/* thumbnail */
--spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400);
@@ -38,15 +36,13 @@
--spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
--spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
- &:dir(rtl) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
- }
-}
-
-.spectrum-AssetList {
margin-block-start: 0;
margin-block-end: 0;
padding: 0;
+
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
}
.spectrum-AssetList-item {
diff --git a/components/assetlist/metadata/metadata.json b/components/assetlist/metadata/metadata.json
index 2de86c31204..6aa102a6dc1 100644
--- a/components/assetlist/metadata/metadata.json
+++ b/components/assetlist/metadata/metadata.json
@@ -82,8 +82,8 @@
"global": [
"--spectrum-animation-duration-100",
"--spectrum-font-size-100",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
"--spectrum-logical-rotation",
"--spectrum-neutral-content-color-default",
"--spectrum-regular-font-weight",
@@ -93,7 +93,10 @@
"--spectrum-spacing-600",
"--spectrum-spacing-75"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-asset-list-item-background-color-down",
+ "--system-asset-list-item-background-color-hover"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-assetlist-border-color-key-focus",
diff --git a/components/assetlist/package.json b/components/assetlist/package.json
index 85243216f1b..8bb9d5971be 100644
--- a/components/assetlist/package.json
+++ b/components/assetlist/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/assetlist",
- "version": "6.4.0",
+ "version": "7.0.0-s2-foundations.15",
"description": "The Spectrum CSS assetlist component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js
index e126ff1ec8a..96d8f75a80c 100644
--- a/components/assetlist/stories/template.js
+++ b/components/assetlist/stories/template.js
@@ -7,6 +7,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const AssetListItem = ({
rootClass = "spectrum-AssetList-item",
@@ -21,7 +24,7 @@ export const AssetListItem = ({
isSelected = false,
isBranch = false,
onclick = () => {},
-}) => html`
+} = {}, context = {}) => html`
html`${label} `)}
${when(!isSelectable && !isBranch, () =>
@@ -60,13 +63,13 @@ export const AssetListItem = ({
ariaLabelledby,
id: checkboxId,
customClasses: [`${rootClass}Selector`],
- }))}
+ }, context))}
${when(isBranch, () =>
Icon({
iconName: "ChevronRight100",
setName: "ui",
customClasses: [`${rootClass}ChildIndicator`],
- })
+ }, context)
)}
`;
diff --git a/components/assetlist/themes/express.css b/components/assetlist/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/assetlist/themes/express.css
+++ b/components/assetlist/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/assetlist/themes/spectrum-two.css b/components/assetlist/themes/spectrum-two.css
new file mode 100644
index 00000000000..0624623caf5
--- /dev/null
+++ b/components/assetlist/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-AssetList {
+ --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200);
+ --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100);
+ }
+}
diff --git a/components/assetlist/themes/spectrum.css b/components/assetlist/themes/spectrum.css
index 3b48a570c21..30f67757c2e 100644
--- a/components/assetlist/themes/spectrum.css
+++ b/components/assetlist/themes/spectrum.css
@@ -10,3 +10,14 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-AssetList {
+ --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300);
+ --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/avatar/CHANGELOG.md b/components/avatar/CHANGELOG.md
index cd846053522..f22cfe7ed65 100644
--- a/components/avatar/CHANGELOG.md
+++ b/components/avatar/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 8.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 8.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 7.3.0
### Minor Changes
diff --git a/components/avatar/index.css b/components/avatar/index.css
index f79c6bd27bb..74fd79f725a 100644
--- a/components/avatar/index.css
+++ b/components/avatar/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Avatar {
--spectrum-avatar-color-opacity: 1;
diff --git a/components/avatar/package.json b/components/avatar/package.json
index df70e495604..8555213f959 100644
--- a/components/avatar/package.json
+++ b/components/avatar/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/avatar",
- "version": "7.3.0",
+ "version": "8.0.0-s2-foundations.15",
"description": "The Spectrum CSS avatar component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js
index 0c40951b2a4..f07d44e149d 100644
--- a/components/avatar/stories/avatar.stories.js
+++ b/components/avatar/stories/avatar.stories.js
@@ -58,6 +58,10 @@ export default {
altText: "Shantanu",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=19100-131",
+ },
packageJson,
metadata,
},
diff --git a/components/avatar/stories/template.js b/components/avatar/stories/template.js
index ff83e599c37..e62d412d965 100644
--- a/components/avatar/stories/template.js
+++ b/components/avatar/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Avatar",
diff --git a/components/avatar/themes/express.css b/components/avatar/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/avatar/themes/express.css
+++ b/components/avatar/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/avatar/themes/spectrum-two.css b/components/avatar/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/avatar/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/avatar/themes/spectrum.css b/components/avatar/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/avatar/themes/spectrum.css
+++ b/components/avatar/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/badge/CHANGELOG.md b/components/badge/CHANGELOG.md
index 681787a9b23..ffd7d4fa264 100644
--- a/components/badge/CHANGELOG.md
+++ b/components/badge/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 5.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 5.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 5.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 4.3.0
### Minor Changes
@@ -19,6 +212,17 @@
### Patch Changes
+- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
+ - @spectrum-css/tokens@14.5.0
+
+## 4.2.0
+
+### Minor Changes
+
+- [#3265](https://github.com/adobe/spectrum-css/pull/3265) [`31fdc3b`](https://github.com/adobe/spectrum-css/commit/31fdc3b7f9d0a09baf03f8675bbf4b418744db47) Thanks [@cdransf](https://github.com/cdransf)! - Assigns CanvasText to custom property to satisfy linting requirements.
+
+### Patch Changes
+
- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
- @spectrum-css/tokens@14.5.0
diff --git a/components/badge/index.css b/components/badge/index.css
index 3057f65316d..c43f334ea3e 100644
--- a/components/badge/index.css
+++ b/components/badge/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Badge {
/* badge styling for all t-shirt sizes and all themes */
diff --git a/components/badge/package.json b/components/badge/package.json
index d34fa1d02ef..1db3292e2fc 100644
--- a/components/badge/package.json
+++ b/components/badge/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/badge",
- "version": "4.3.0",
+ "version": "5.0.0-s2-foundations.15",
"description": "The Spectrum CSS badge component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js
index 80b5abeb2ab..dc3e0d28b24 100644
--- a/components/badge/stories/badge.stories.js
+++ b/components/badge/stories/badge.stories.js
@@ -1,14 +1,12 @@
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
+import { ArgGrid } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
import metadata from "../metadata/metadata.json";
import packageJson from "../package.json";
import { BadgeGroup } from "./badge.test.js";
-import { PreviewSets } from "./template.js";
+import { Template } from "./template.js";
-const semanticOptions = ["neutral", "accent", "informative", "positive", "negative"];
-const nonSemanticOptions = ["gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"];
-const fixedOptions = ["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"];
/**
* A badge element displays a small amount of color-categorized metadata; ideal for getting a user's attention. Some notes about badge:
* - Badge t-shirt sizes correspond to icon sizes
@@ -52,7 +50,7 @@ export default {
type: { summary: "string" },
category: "Advanced",
},
- options: fixedOptions,
+ options: ["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"],
control: "select",
},
},
@@ -64,6 +62,10 @@ export default {
fixed: "none"
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551",
+ },
packageJson,
metadata,
},
@@ -77,19 +79,40 @@ Default.args = {
};
// ********* DOCS ONLY ********* //
-export const SemanticVariants = (args, context) => PreviewSets(semanticOptions, args, context);
+export const SemanticVariants = (args, context) => ArgGrid({
+ Template,
+ argKey: "variant",
+ options: ["neutral", "accent", "informative", "positive", "negative"],
+ withBorder: false,
+ ...args,
+}, context);
+SemanticVariants.args = Default.args;
SemanticVariants.tags = ["!dev"];
SemanticVariants.parameters = {
chromatic: { disableSnapshot: true },
};
-export const NonSemanticVariants = (args, context) => PreviewSets(nonSemanticOptions, args, context);
+export const NonSemanticVariants = (args, context) => ArgGrid({
+ Template,
+ argKey: "variant",
+ options: ["gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"],
+ withBorder: false,
+ ...args,
+}, context);
+NonSemanticVariants.args = Default.args;
NonSemanticVariants.tags = ["!dev"];
NonSemanticVariants.parameters = {
chromatic: { disableSnapshot: true },
};
-export const FixedVariants = (args, context) => PreviewSets(fixedOptions, args, context);
+export const FixedVariants = (args, context) => ArgGrid({
+ Template,
+ argKey: "fixed",
+ options: ["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"],
+ withBorder: false,
+ ...args,
+}, context);
+FixedVariants.args = Default.args;
FixedVariants.tags = ["!dev"];
FixedVariants.parameters = {
chromatic: { disableSnapshot: true },
diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js
index bcaba993269..0d0833020fc 100644
--- a/components/badge/stories/template.js
+++ b/components/badge/stories/template.js
@@ -5,9 +5,11 @@ import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
-import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Badge",
@@ -20,53 +22,33 @@ export const Template = ({
customStyles = {},
customClasses = [],
id = getRandomId("badge"),
-}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- id=${ifDefined(id)}
- style=${styleMap(customStyles)}
- >
- ${when(iconName, () =>
- Icon({
- iconName,
- setName: iconSet,
- customClasses: [
- ...(typeof label === "undefined"
- ? [`${rootClass}-icon--no-label`]
- : []),
- `${rootClass}-icon`,
- ],
- })
- )}
- ${when(label, () => html`
${label}
`)}
-
- ${variants.map((variant) => html`
-
- ${Template({ ...args, variant, label: capitalize(variant) }, context)}
-
- `)}
-
({ ...a, [c]: true }), {}),
+ })}
+ id=${ifDefined(id)}
+ style=${styleMap(customStyles)}
+ >
+ ${when(iconName, () =>
+ Icon({
+ iconName,
+ setName: iconSet,
+ customClasses: [
+ ...(typeof label === "undefined"
+ ? [`${rootClass}-icon--no-label`]
+ : []),
+ `${rootClass}-icon`,
+ ],
+ }, context),
+ )}
+ ${when(label, () => html`
${label}
`)}
+
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/badge/themes/spectrum.css b/components/badge/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/badge/themes/spectrum.css
+++ b/components/badge/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/breadcrumb/CHANGELOG.md b/components/breadcrumb/CHANGELOG.md
index c9868aeeadc..7551ff961af 100644
--- a/components/breadcrumb/CHANGELOG.md
+++ b/components/breadcrumb/CHANGELOG.md
@@ -1,5 +1,216 @@
# Change Log
+## 10.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.21
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 10.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.20
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 10.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2886](https://github.com/adobe/spectrum-css/pull/2886) [`a01ac07`](https://github.com/adobe/spectrum-css/commit/a01ac075ae227574628f72b4c0fe61f1f53792c5) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Ensures disabled breadrumb items behave as expected. They are conditionally left out of tab order depending on their `isDisabled` value. Uses [aria-disabled="true"] and applies `is-disabled` class to `.spectrum-Breadcrumb-itemLink`.
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 9.2.0
### Minor Changes
diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css
index cbe9f7bfcdd..22eeb22fd1f 100644
--- a/components/breadcrumb/index.css
+++ b/components/breadcrumb/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Breadcrumbs {
/* block size */
diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json
index 9571b8a06f8..5cb96c8c59a 100644
--- a/components/breadcrumb/package.json
+++ b/components/breadcrumb/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/breadcrumb",
- "version": "9.2.0",
+ "version": "10.0.0-s2-foundations.15",
"description": "The Spectrum CSS breadcrumb component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js
index 99377515b37..85672637df2 100644
--- a/components/breadcrumb/stories/breadcrumb.stories.js
+++ b/components/breadcrumb/stories/breadcrumb.stories.js
@@ -41,6 +41,10 @@ export default {
variant: "default",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=29434-6624",
+ },
packageJson,
metadata,
},
diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js
index 3ebf606e5e0..1f1670d7350 100644
--- a/components/breadcrumb/stories/template.js
+++ b/components/breadcrumb/stories/template.js
@@ -6,80 +6,84 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
-export const Template = (
- {
- rootClass = "spectrum-Breadcrumbs",
- customClasses = [],
- items = [],
- variant,
- isDragged = false,
- } = {},
- context = {},
-) => html`
-
- ({ ...a, [c]: true }), {}),
- })}
- >
- ${items.map((item, idx, arr) => {
- const { label, isDisabled, iconName, iconSet } = item;
- return html`
- ${when(
- iconName,
- () =>
- ActionButton(
+export const Template = ({
+ rootClass = "spectrum-Breadcrumbs",
+ customClasses = [],
+ items = [],
+ variant,
+ isDragged = false,
+} = {}, context = {}) => {
+ return html`
+
+ ({ ...a, [c]: true }), {}),
+ })}
+ >
+ ${items.map((item, idx, arr) => {
+ const { label, isDisabled, iconName, iconSet } = item;
+ return html`
+ ${when(
+ iconName,
+ () =>
+ ActionButton(
+ {
+ iconName,
+ iconSet,
+ isDisabled,
+ isQuiet: true,
+ customIconClasses: [`${rootClass}-folder`],
+ size: "m",
+ },
+ context,
+ ),
+ () =>
+ when(
+ idx !== arr.length - 1,
+ () =>
+ html`
+ ${label}
+
`,
+ () =>
+ html`${label} `,
+ ),
+ )}
+ ${when(idx !== arr.length - 1, () =>
+ Icon(
{
- iconName,
- iconSet,
- isDisabled,
- isQuiet: true,
- customIconClasses: [`${rootClass}-folder`],
- size: "m",
+ iconName: "ChevronRight100",
+ setName: "ui",
+ customClasses: [`${rootClass}-itemSeparator`],
},
context,
),
- () =>
- when(
- idx !== arr.length - 1,
- () =>
- html`
- ${label}
-
`,
- () =>
- html`${label} `,
- ),
- )}
- ${when(idx !== arr.length - 1, () =>
- Icon(
- {
- iconName: "ChevronRight100",
- setName: "ui",
- customClasses: [`${rootClass}-itemSeparator`],
- },
- context,
- ),
- )}
- `;
- })}
-
-
-`;
+ )}
+ `;
+ })}
+
+
+ `;
+};
diff --git a/components/breadcrumb/themes/express.css b/components/breadcrumb/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/breadcrumb/themes/express.css
+++ b/components/breadcrumb/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/breadcrumb/themes/spectrum-two.css b/components/breadcrumb/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/breadcrumb/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/breadcrumb/themes/spectrum.css b/components/breadcrumb/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/breadcrumb/themes/spectrum.css
+++ b/components/breadcrumb/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/button/CHANGELOG.md b/components/button/CHANGELOG.md
index ecb209a8315..34dccb73202 100644
--- a/components/button/CHANGELOG.md
+++ b/components/button/CHANGELOG.md
@@ -1,5 +1,237 @@
# Change Log
+## 14.0.0-s2-foundations.18
+
+### Minor Changes
+
+- [#3197](https://github.com/adobe/spectrum-css/pull/3197) [`1eac198`](https://github.com/adobe/spectrum-css/commit/1eac198754ca1e60f96a64c7cf5e7c7a4758b1f3) Thanks [@cdransf](https://github.com/cdransf)! - Replaces all of occurrences of --spectrum-component-pill-edge-to-text-_ (intended to be used as padding) in the button component with the appropriate corner-radius-_ tokens.
+
+## 14.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 14.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 14.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 14.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#3049](https://github.com/adobe/spectrum-css/pull/3049) [`db528ce`](https://github.com/adobe/spectrum-css/commit/db528ce0a6f7d817e6124604014faf9f4accfc1e) Thanks [@TarunAdobe](https://github.com/TarunAdobe)! - updated content color for button primary variant and fixes swc-342
+
+### Patch Changes
+
+- Updated dependencies [[`db528ce`](https://github.com/adobe/spectrum-css/commit/db528ce0a6f7d817e6124604014faf9f4accfc1e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.20
+
+## 14.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0da23e5`](https://github.com/adobe/spectrum-css/commit/0da23e5aee4c2f6298e9690a8c8db9bbe11243f8) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-315]: Static white button mods should be applied at component level
+
+## 14.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 14.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 14.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 14.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 14.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 14.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 14.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 14.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 14.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 14.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 14.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 14.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 14.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 13.5.0
### Minor Changes
diff --git a/components/button/index.css b/components/button/index.css
index 15863a93d42..b0bba91b2ff 100644
--- a/components/button/index.css
+++ b/components/button/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/basebutton.css";
/* default for all buttons */
@@ -27,14 +27,363 @@
--spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50);
+ --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);
+
+ /* @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;
+
+ --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-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-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);
+ }
+ }
+
+ &.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-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-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-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-accent-color-200);
+ --spectrum-button-background-color-down: var(--spectrum-accent-color-300);
+ --spectrum-button-background-color-focus: var(--spectrum-accent-color-200);
+
+ --spectrum-button-border-color-default: var(--spectrum-accent-color-900);
+ --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000);
+ --spectrum-button-border-color-down: var(--spectrum-accent-color-1100);
+ --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000);
+
+ --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ }
+ }
+
+ &.spectrum-Button--negative {
+ --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default);
+ --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover);
+ --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down);
+ --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-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-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-negative-color-200);
+ --spectrum-button-background-color-down: var(--spectrum-negative-color-300);
+ --spectrum-button-background-color-focus: var(--spectrum-negative-color-200);
+
+ --spectrum-button-border-color-default: var(--spectrum-negative-color-900);
+ --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000);
+ --spectrum-button-border-color-down: var(--spectrum-negative-color-1100);
+ --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000);
+
+ --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ }
+ }
+
+ &.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-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+
+ --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-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ }
+ }
+
+ &.spectrum-Button--secondary {
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --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-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-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;
+ }
+
+ &.spectrum-Button--staticBlack,
+ &.spectrum-Button--staticWhite {
+ &.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;
+ }
+ }
+
+ &.spectrum-Button--staticWhite {
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-black);
+ --spectrum-button-content-color-hover: var(--spectrum-black);
+ --spectrum-button-content-color-down: var(--spectrum-black);
+ --spectrum-button-content-color-focus: var(--spectrum-black);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+
+ &.is-selected {
+ --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black));
+ --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black));
+ --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black));
+ --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black));
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ }
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: 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);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+ }
+
+ &.spectrum-Button--secondary {
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-white);
+ --spectrum-button-content-color-hover: var(--spectrum-white);
+ --spectrum-button-content-color-down: var(--spectrum-white);
+ --spectrum-button-content-color-focus: var(--spectrum-white);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: 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);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+ }
+ }
+ }
+
+ &.spectrum-Button--staticBlack {
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-white);
+ --spectrum-button-content-color-hover: var(--spectrum-white);
+ --spectrum-button-content-color-down: var(--spectrum-white);
+ --spectrum-button-content-color-focus: var(--spectrum-white);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-black);
+ --spectrum-button-content-color-hover: var(--spectrum-black);
+ --spectrum-button-content-color-down: var(--spectrum-black);
+ --spectrum-button-content-color-focus: var(--spectrum-black);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+ }
+
+ &.spectrum-Button--secondary {
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-black);
+ --spectrum-button-content-color-hover: var(--spectrum-black);
+ --spectrum-button-content-color-down: var(--spectrum-black);
+ --spectrum-button-content-color-focus: var(--spectrum-black);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-black);
+ --spectrum-button-content-color-hover: var(--spectrum-black);
+ --spectrum-button-content-color-down: var(--spectrum-black);
+ --spectrum-button-content-color-focus: var(--spectrum-black);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+ }
+ }
+ }
}
.spectrum-Button--sizeS {
--spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier));
-
--spectrum-button-height: var(--spectrum-component-height-75);
-
--spectrum-button-font-size: var(--spectrum-font-size-75);
--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width));
@@ -49,9 +398,7 @@
.spectrum-Button--sizeM {
--spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier));
-
--spectrum-button-height: var(--spectrum-component-height-100);
-
--spectrum-button-font-size: var(--spectrum-font-size-100);
--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width));
@@ -66,9 +413,7 @@
.spectrum-Button--sizeL {
--spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier));
-
--spectrum-button-height: var(--spectrum-component-height-200);
-
--spectrum-button-font-size: var(--spectrum-font-size-200);
--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width));
@@ -83,9 +428,7 @@
.spectrum-Button--sizeXL {
--spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier));
-
--spectrum-button-height: var(--spectrum-component-height-300);
-
--spectrum-button-font-size: var(--spectrum-font-size-300);
--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width));
diff --git a/components/button/metadata/metadata.json b/components/button/metadata/metadata.json
index 36c9f91aca4..c56d796ded8 100644
--- a/components/button/metadata/metadata.json
+++ b/components/button/metadata/metadata.json
@@ -211,12 +211,13 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
"--spectrum-gray-300",
"--spectrum-gray-400",
+ "--spectrum-gray-50",
"--spectrum-gray-500",
"--spectrum-gray-600",
- "--spectrum-gray-75",
"--spectrum-gray-800",
"--spectrum-gray-900",
"--spectrum-icon-block-size",
@@ -254,18 +255,18 @@
"--spectrum-text-to-visual-200",
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-75",
- "--spectrum-transparent-black-200",
+ "--spectrum-transparent-black-1000",
"--spectrum-transparent-black-300",
"--spectrum-transparent-black-400",
"--spectrum-transparent-black-500",
"--spectrum-transparent-black-600",
- "--spectrum-transparent-black-800",
+ "--spectrum-transparent-black-700",
"--spectrum-transparent-black-900",
- "--spectrum-transparent-white-200",
+ "--spectrum-transparent-white-1000",
"--spectrum-transparent-white-300",
"--spectrum-transparent-white-400",
"--spectrum-transparent-white-500",
- "--spectrum-transparent-white-800",
+ "--spectrum-transparent-white-600",
"--spectrum-transparent-white-900",
"--spectrum-white",
"--spectrum-workflow-icon-size-100",
@@ -275,317 +276,83 @@
"--spectrum-workflow-icon-size-75"
],
"system-theme": [
- "--system-spectrum-button-accent-background-color-default",
- "--system-spectrum-button-accent-background-color-disabled",
- "--system-spectrum-button-accent-background-color-down",
- "--system-spectrum-button-accent-background-color-focus",
- "--system-spectrum-button-accent-background-color-hover",
- "--system-spectrum-button-accent-border-color-default",
- "--system-spectrum-button-accent-border-color-disabled",
- "--system-spectrum-button-accent-border-color-down",
- "--system-spectrum-button-accent-border-color-focus",
- "--system-spectrum-button-accent-border-color-hover",
- "--system-spectrum-button-accent-content-color-default",
- "--system-spectrum-button-accent-content-color-disabled",
- "--system-spectrum-button-accent-content-color-down",
- "--system-spectrum-button-accent-content-color-focus",
- "--system-spectrum-button-accent-content-color-hover",
- "--system-spectrum-button-accent-outline-background-color-default",
- "--system-spectrum-button-accent-outline-background-color-disabled",
- "--system-spectrum-button-accent-outline-background-color-down",
- "--system-spectrum-button-accent-outline-background-color-focus",
- "--system-spectrum-button-accent-outline-background-color-hover",
- "--system-spectrum-button-accent-outline-border-color-default",
- "--system-spectrum-button-accent-outline-border-color-disabled",
- "--system-spectrum-button-accent-outline-border-color-down",
- "--system-spectrum-button-accent-outline-border-color-focus",
- "--system-spectrum-button-accent-outline-border-color-hover",
- "--system-spectrum-button-accent-outline-content-color-default",
- "--system-spectrum-button-accent-outline-content-color-disabled",
- "--system-spectrum-button-accent-outline-content-color-down",
- "--system-spectrum-button-accent-outline-content-color-focus",
- "--system-spectrum-button-accent-outline-content-color-hover",
- "--system-spectrum-button-background-color-default",
- "--system-spectrum-button-background-color-disabled",
- "--system-spectrum-button-background-color-down",
- "--system-spectrum-button-background-color-focus",
- "--system-spectrum-button-background-color-hover",
- "--system-spectrum-button-border-color-default",
- "--system-spectrum-button-border-color-disabled",
- "--system-spectrum-button-border-color-down",
- "--system-spectrum-button-border-color-focus",
- "--system-spectrum-button-border-color-hover",
- "--system-spectrum-button-content-color-default",
- "--system-spectrum-button-content-color-disabled",
- "--system-spectrum-button-content-color-down",
- "--system-spectrum-button-content-color-focus",
- "--system-spectrum-button-content-color-hover",
- "--system-spectrum-button-negative-background-color-default",
- "--system-spectrum-button-negative-background-color-disabled",
- "--system-spectrum-button-negative-background-color-down",
- "--system-spectrum-button-negative-background-color-focus",
- "--system-spectrum-button-negative-background-color-hover",
- "--system-spectrum-button-negative-border-color-default",
- "--system-spectrum-button-negative-border-color-disabled",
- "--system-spectrum-button-negative-border-color-down",
- "--system-spectrum-button-negative-border-color-focus",
- "--system-spectrum-button-negative-border-color-hover",
- "--system-spectrum-button-negative-content-color-default",
- "--system-spectrum-button-negative-content-color-disabled",
- "--system-spectrum-button-negative-content-color-down",
- "--system-spectrum-button-negative-content-color-focus",
- "--system-spectrum-button-negative-content-color-hover",
- "--system-spectrum-button-negative-outline-background-color-default",
- "--system-spectrum-button-negative-outline-background-color-disabled",
- "--system-spectrum-button-negative-outline-background-color-down",
- "--system-spectrum-button-negative-outline-background-color-focus",
- "--system-spectrum-button-negative-outline-background-color-hover",
- "--system-spectrum-button-negative-outline-border-color-default",
- "--system-spectrum-button-negative-outline-border-color-disabled",
- "--system-spectrum-button-negative-outline-border-color-down",
- "--system-spectrum-button-negative-outline-border-color-focus",
- "--system-spectrum-button-negative-outline-border-color-hover",
- "--system-spectrum-button-negative-outline-content-color-default",
- "--system-spectrum-button-negative-outline-content-color-disabled",
- "--system-spectrum-button-negative-outline-content-color-down",
- "--system-spectrum-button-negative-outline-content-color-focus",
- "--system-spectrum-button-negative-outline-content-color-hover",
- "--system-spectrum-button-primary-background-color-default",
- "--system-spectrum-button-primary-background-color-disabled",
- "--system-spectrum-button-primary-background-color-down",
- "--system-spectrum-button-primary-background-color-focus",
- "--system-spectrum-button-primary-background-color-hover",
- "--system-spectrum-button-primary-border-color-default",
- "--system-spectrum-button-primary-border-color-disabled",
- "--system-spectrum-button-primary-border-color-down",
- "--system-spectrum-button-primary-border-color-focus",
- "--system-spectrum-button-primary-border-color-hover",
- "--system-spectrum-button-primary-content-color-default",
- "--system-spectrum-button-primary-content-color-disabled",
- "--system-spectrum-button-primary-content-color-down",
- "--system-spectrum-button-primary-content-color-focus",
- "--system-spectrum-button-primary-content-color-hover",
- "--system-spectrum-button-primary-outline-background-color-default",
- "--system-spectrum-button-primary-outline-background-color-disabled",
- "--system-spectrum-button-primary-outline-background-color-down",
- "--system-spectrum-button-primary-outline-background-color-focus",
- "--system-spectrum-button-primary-outline-background-color-hover",
- "--system-spectrum-button-primary-outline-border-color-default",
- "--system-spectrum-button-primary-outline-border-color-disabled",
- "--system-spectrum-button-primary-outline-border-color-down",
- "--system-spectrum-button-primary-outline-border-color-focus",
- "--system-spectrum-button-primary-outline-border-color-hover",
- "--system-spectrum-button-primary-outline-content-color-default",
- "--system-spectrum-button-primary-outline-content-color-disabled",
- "--system-spectrum-button-primary-outline-content-color-down",
- "--system-spectrum-button-primary-outline-content-color-focus",
- "--system-spectrum-button-primary-outline-content-color-hover",
- "--system-spectrum-button-quiet-background-color-default",
- "--system-spectrum-button-quiet-background-color-disabled",
- "--system-spectrum-button-quiet-background-color-down",
- "--system-spectrum-button-quiet-background-color-focus",
- "--system-spectrum-button-quiet-background-color-hover",
- "--system-spectrum-button-quiet-border-color-default",
- "--system-spectrum-button-quiet-border-color-disabled",
- "--system-spectrum-button-quiet-border-color-down",
- "--system-spectrum-button-quiet-border-color-focus",
- "--system-spectrum-button-quiet-border-color-hover",
- "--system-spectrum-button-secondary-background-color-default",
- "--system-spectrum-button-secondary-background-color-disabled",
- "--system-spectrum-button-secondary-background-color-down",
- "--system-spectrum-button-secondary-background-color-focus",
- "--system-spectrum-button-secondary-background-color-hover",
- "--system-spectrum-button-secondary-border-color-default",
- "--system-spectrum-button-secondary-border-color-disabled",
- "--system-spectrum-button-secondary-border-color-down",
- "--system-spectrum-button-secondary-border-color-focus",
- "--system-spectrum-button-secondary-border-color-hover",
- "--system-spectrum-button-secondary-content-color-default",
- "--system-spectrum-button-secondary-content-color-disabled",
- "--system-spectrum-button-secondary-content-color-down",
- "--system-spectrum-button-secondary-content-color-focus",
- "--system-spectrum-button-secondary-content-color-hover",
- "--system-spectrum-button-secondary-outline-background-color-default",
- "--system-spectrum-button-secondary-outline-background-color-disabled",
- "--system-spectrum-button-secondary-outline-background-color-down",
- "--system-spectrum-button-secondary-outline-background-color-focus",
- "--system-spectrum-button-secondary-outline-background-color-hover",
- "--system-spectrum-button-secondary-outline-border-color-default",
- "--system-spectrum-button-secondary-outline-border-color-disabled",
- "--system-spectrum-button-secondary-outline-border-color-down",
- "--system-spectrum-button-secondary-outline-border-color-focus",
- "--system-spectrum-button-secondary-outline-border-color-hover",
- "--system-spectrum-button-secondary-outline-content-color-default",
- "--system-spectrum-button-secondary-outline-content-color-disabled",
- "--system-spectrum-button-secondary-outline-content-color-down",
- "--system-spectrum-button-secondary-outline-content-color-focus",
- "--system-spectrum-button-secondary-outline-content-color-hover",
- "--system-spectrum-button-selected-background-color-default",
- "--system-spectrum-button-selected-background-color-disabled",
- "--system-spectrum-button-selected-background-color-down",
- "--system-spectrum-button-selected-background-color-focus",
- "--system-spectrum-button-selected-background-color-hover",
- "--system-spectrum-button-selected-border-color-default",
- "--system-spectrum-button-selected-border-color-disabled",
- "--system-spectrum-button-selected-border-color-down",
- "--system-spectrum-button-selected-border-color-focus",
- "--system-spectrum-button-selected-border-color-hover",
- "--system-spectrum-button-selected-content-color-default",
- "--system-spectrum-button-selected-content-color-down",
- "--system-spectrum-button-selected-content-color-focus",
- "--system-spectrum-button-selected-content-color-hover",
- "--system-spectrum-button-selected-emphasized-background-color-default",
- "--system-spectrum-button-selected-emphasized-background-color-down",
- "--system-spectrum-button-selected-emphasized-background-color-focus",
- "--system-spectrum-button-selected-emphasized-background-color-hover",
- "--system-spectrum-button-staticblack-background-color-default",
- "--system-spectrum-button-staticblack-background-color-disabled",
- "--system-spectrum-button-staticblack-background-color-down",
- "--system-spectrum-button-staticblack-background-color-focus",
- "--system-spectrum-button-staticblack-background-color-hover",
- "--system-spectrum-button-staticblack-border-color-default",
- "--system-spectrum-button-staticblack-border-color-disabled",
- "--system-spectrum-button-staticblack-border-color-down",
- "--system-spectrum-button-staticblack-border-color-focus",
- "--system-spectrum-button-staticblack-border-color-hover",
- "--system-spectrum-button-staticblack-content-color-default",
- "--system-spectrum-button-staticblack-content-color-disabled",
- "--system-spectrum-button-staticblack-content-color-down",
- "--system-spectrum-button-staticblack-content-color-focus",
- "--system-spectrum-button-staticblack-content-color-hover",
- "--system-spectrum-button-staticblack-focus-indicator-color",
- "--system-spectrum-button-staticblack-outline-background-color-default",
- "--system-spectrum-button-staticblack-outline-background-color-disabled",
- "--system-spectrum-button-staticblack-outline-background-color-down",
- "--system-spectrum-button-staticblack-outline-background-color-focus",
- "--system-spectrum-button-staticblack-outline-background-color-hover",
- "--system-spectrum-button-staticblack-outline-border-color-default",
- "--system-spectrum-button-staticblack-outline-border-color-disabled",
- "--system-spectrum-button-staticblack-outline-border-color-down",
- "--system-spectrum-button-staticblack-outline-border-color-focus",
- "--system-spectrum-button-staticblack-outline-border-color-hover",
- "--system-spectrum-button-staticblack-outline-content-color-default",
- "--system-spectrum-button-staticblack-outline-content-color-disabled",
- "--system-spectrum-button-staticblack-outline-content-color-down",
- "--system-spectrum-button-staticblack-outline-content-color-focus",
- "--system-spectrum-button-staticblack-outline-content-color-hover",
- "--system-spectrum-button-staticblack-outline-focus-indicator-color",
- "--system-spectrum-button-staticblack-quiet-border-color-default",
- "--system-spectrum-button-staticblack-quiet-border-color-disabled",
- "--system-spectrum-button-staticblack-quiet-border-color-down",
- "--system-spectrum-button-staticblack-quiet-border-color-focus",
- "--system-spectrum-button-staticblack-quiet-border-color-hover",
- "--system-spectrum-button-staticblack-secondary-background-color-default",
- "--system-spectrum-button-staticblack-secondary-background-color-disabled",
- "--system-spectrum-button-staticblack-secondary-background-color-down",
- "--system-spectrum-button-staticblack-secondary-background-color-focus",
- "--system-spectrum-button-staticblack-secondary-background-color-hover",
- "--system-spectrum-button-staticblack-secondary-border-color-default",
- "--system-spectrum-button-staticblack-secondary-border-color-disabled",
- "--system-spectrum-button-staticblack-secondary-border-color-down",
- "--system-spectrum-button-staticblack-secondary-border-color-focus",
- "--system-spectrum-button-staticblack-secondary-border-color-hover",
- "--system-spectrum-button-staticblack-secondary-content-color-default",
- "--system-spectrum-button-staticblack-secondary-content-color-disabled",
- "--system-spectrum-button-staticblack-secondary-content-color-down",
- "--system-spectrum-button-staticblack-secondary-content-color-focus",
- "--system-spectrum-button-staticblack-secondary-content-color-hover",
- "--system-spectrum-button-staticblack-secondary-focus-indicator-color",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-default",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-disabled",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-down",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-focus",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-hover",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-default",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-disabled",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-down",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-focus",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-hover",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-default",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-disabled",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-down",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-focus",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-hover",
- "--system-spectrum-button-staticblack-secondary-outline-focus-indicator-color",
- "--system-spectrum-button-staticwhite-background-color-default",
- "--system-spectrum-button-staticwhite-background-color-disabled",
- "--system-spectrum-button-staticwhite-background-color-down",
- "--system-spectrum-button-staticwhite-background-color-focus",
- "--system-spectrum-button-staticwhite-background-color-hover",
- "--system-spectrum-button-staticwhite-border-color-default",
- "--system-spectrum-button-staticwhite-border-color-disabled",
- "--system-spectrum-button-staticwhite-border-color-down",
- "--system-spectrum-button-staticwhite-border-color-focus",
- "--system-spectrum-button-staticwhite-border-color-hover",
- "--system-spectrum-button-staticwhite-content-color-default",
- "--system-spectrum-button-staticwhite-content-color-disabled",
- "--system-spectrum-button-staticwhite-content-color-down",
- "--system-spectrum-button-staticwhite-content-color-focus",
- "--system-spectrum-button-staticwhite-content-color-hover",
- "--system-spectrum-button-staticwhite-focus-indicator-color",
- "--system-spectrum-button-staticwhite-outline-background-color-default",
- "--system-spectrum-button-staticwhite-outline-background-color-disabled",
- "--system-spectrum-button-staticwhite-outline-background-color-down",
- "--system-spectrum-button-staticwhite-outline-background-color-focus",
- "--system-spectrum-button-staticwhite-outline-background-color-hover",
- "--system-spectrum-button-staticwhite-outline-border-color-default",
- "--system-spectrum-button-staticwhite-outline-border-color-disabled",
- "--system-spectrum-button-staticwhite-outline-border-color-down",
- "--system-spectrum-button-staticwhite-outline-border-color-focus",
- "--system-spectrum-button-staticwhite-outline-border-color-hover",
- "--system-spectrum-button-staticwhite-outline-content-color-default",
- "--system-spectrum-button-staticwhite-outline-content-color-disabled",
- "--system-spectrum-button-staticwhite-outline-content-color-down",
- "--system-spectrum-button-staticwhite-outline-content-color-focus",
- "--system-spectrum-button-staticwhite-outline-content-color-hover",
- "--system-spectrum-button-staticwhite-outline-focus-indicator-color",
- "--system-spectrum-button-staticwhite-quiet-border-color-default",
- "--system-spectrum-button-staticwhite-quiet-border-color-disabled",
- "--system-spectrum-button-staticwhite-quiet-border-color-down",
- "--system-spectrum-button-staticwhite-quiet-border-color-focus",
- "--system-spectrum-button-staticwhite-quiet-border-color-hover",
- "--system-spectrum-button-staticwhite-secondary-background-color-default",
- "--system-spectrum-button-staticwhite-secondary-background-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-background-color-down",
- "--system-spectrum-button-staticwhite-secondary-background-color-focus",
- "--system-spectrum-button-staticwhite-secondary-background-color-hover",
- "--system-spectrum-button-staticwhite-secondary-border-color-default",
- "--system-spectrum-button-staticwhite-secondary-border-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-border-color-down",
- "--system-spectrum-button-staticwhite-secondary-border-color-focus",
- "--system-spectrum-button-staticwhite-secondary-border-color-hover",
- "--system-spectrum-button-staticwhite-secondary-content-color-default",
- "--system-spectrum-button-staticwhite-secondary-content-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-content-color-down",
- "--system-spectrum-button-staticwhite-secondary-content-color-focus",
- "--system-spectrum-button-staticwhite-secondary-content-color-hover",
- "--system-spectrum-button-staticwhite-secondary-focus-indicator-color",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-default",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-down",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-focus",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-hover",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-default",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-down",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-focus",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-hover",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-default",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-down",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-focus",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-hover",
- "--system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color",
- "--system-spectrum-button-staticwhite-selected-background-color-default",
- "--system-spectrum-button-staticwhite-selected-background-color-disabled",
- "--system-spectrum-button-staticwhite-selected-background-color-down",
- "--system-spectrum-button-staticwhite-selected-background-color-focus",
- "--system-spectrum-button-staticwhite-selected-background-color-hover",
- "--system-spectrum-button-staticwhite-selected-border-color-disabled",
- "--system-spectrum-button-staticwhite-selected-content-color-default",
- "--system-spectrum-button-staticwhite-selected-content-color-down",
- "--system-spectrum-button-staticwhite-selected-content-color-focus",
- "--system-spectrum-button-staticwhite-selected-content-color-hover"
+ "--system-button-background-color-default",
+ "--system-button-background-color-disabled",
+ "--system-button-background-color-down",
+ "--system-button-background-color-focus",
+ "--system-button-background-color-hover",
+ "--system-button-border-color-default",
+ "--system-button-border-color-disabled",
+ "--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-outline-background-color-down",
+ "--system-button-secondary-outline-background-color-focus",
+ "--system-button-secondary-outline-background-color-hover",
+ "--system-button-secondary-outline-border-color-default",
+ "--system-button-selected-background-color-default",
+ "--system-button-selected-background-color-down",
+ "--system-button-selected-background-color-focus",
+ "--system-button-selected-background-color-hover",
+ "--system-button-static-black-background-color-default",
+ "--system-button-static-black-background-color-down",
+ "--system-button-static-black-background-color-focus",
+ "--system-button-static-black-background-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-secondary-background-color-default",
+ "--system-button-static-black-secondary-background-color-down",
+ "--system-button-static-black-secondary-background-color-focus",
+ "--system-button-static-black-secondary-background-color-hover",
+ "--system-button-static-black-secondary-outline-background-color-down",
+ "--system-button-static-black-secondary-outline-background-color-focus",
+ "--system-button-static-black-secondary-outline-background-color-hover",
+ "--system-button-static-black-secondary-outline-border-color-default",
+ "--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-white-background-color-default",
+ "--system-button-static-white-background-color-down",
+ "--system-button-static-white-background-color-focus",
+ "--system-button-static-white-background-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-secondary-background-color-default",
+ "--system-button-static-white-secondary-background-color-down",
+ "--system-button-static-white-secondary-background-color-focus",
+ "--system-button-static-white-secondary-background-color-hover",
+ "--system-button-static-white-secondary-outline-background-color-down",
+ "--system-button-static-white-secondary-outline-background-color-focus",
+ "--system-button-static-white-secondary-outline-background-color-hover",
+ "--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"
],
"passthroughs": [
"--mod-progress-circle-position",
diff --git a/components/button/package.json b/components/button/package.json
index fe1b973990c..45d22abd8d9 100644
--- a/components/button/package.json
+++ b/components/button/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/button",
- "version": "13.5.0",
+ "version": "14.0.0-s2-foundations.18",
"description": "The Spectrum CSS button component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
index 8eff8c2918d..a603ae70545 100644
--- a/components/button/stories/button.stories.js
+++ b/components/button/stories/button.stories.js
@@ -85,6 +85,10 @@ export default {
actions: {
handles: ["click .spectrum-Button"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=707-2774",
+ },
packageJson,
metadata,
},
diff --git a/components/button/stories/template.js b/components/button/stories/template.js
index cecada6f7a9..16e259bd86f 100644
--- a/components/button/stories/template.js
+++ b/components/button/stories/template.js
@@ -9,6 +9,9 @@ import { when } from "lit/directives/when.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Button",
diff --git a/components/button/themes/express.css b/components/button/themes/express.css
index 0aa78f6519c..43064e29580 100644
--- a/components/button/themes/express.css
+++ b/components/button/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Button {
--spectrum-button-background-color-default: var(--spectrum-gray-200);
--spectrum-button-background-color-hover: var(--spectrum-gray-300);
diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css
new file mode 100644
index 00000000000..68af009934b
--- /dev/null
+++ b/components/button/themes/spectrum-two.css
@@ -0,0 +1,145 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Button {
+ --spectrum-button-background-color-default: var(--spectrum-gray-50);
+ --spectrum-button-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-button-background-color-down: var(--spectrum-gray-200);
+ --spectrum-button-background-color-focus: var(--spectrum-gray-100);
+
+ --spectrum-button-border-color-default: var(--spectrum-gray-400);
+ --spectrum-button-border-color-hover: var(--spectrum-gray-500);
+ --spectrum-button-border-color-down: var(--spectrum-gray-600);
+ --spectrum-button-border-color-focus: var(--spectrum-gray-500);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --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);
+ }
+
+ &.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--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);
+
+ &.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-border-color-default: var(--spectrum-gray-200);
+ }
+ }
+
+ /* static white */
+ &.spectrum-Button--staticWhite {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-white-900);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-1000);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-1000);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-1000);
+
+ &.is-selected {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-white-900);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-1000);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-1000);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-1000);
+ }
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400);
+
+ --spectrum-button-border-color-default: var(--spectrum-transparent-white-900);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-white-1000);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-white-1000);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-white-1000);
+ }
+
+ &.spectrum-Button--secondary {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-white-300);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400);
+
+ --spectrum-button-border-color-default: var(--spectrum-transparent-white-400);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-white-500);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-white-600);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-white-500);
+ }
+ }
+ }
+
+ /* static black */
+ &.spectrum-Button--staticBlack {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-black-900);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-black-1000);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-black-1000);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-black-1000);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+ --spectrum-button-border-color-default: var(--spectrum-transparent-black-500);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-black-600);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-black-700);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-black-600);
+ }
+
+ &.spectrum-Button--secondary {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-black-300);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+ --spectrum-button-border-color-default: var(--spectrum-transparent-black-400);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-black-600);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500);
+ }
+ }
+ }
+ }
+}
diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css
index 851cb0efd65..859773f0ad7 100644
--- a/components/button/themes/spectrum.css
+++ b/components/button/themes/spectrum.css
@@ -11,275 +11,51 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@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-border-color-default: var(--spectrum-gray-400);
- --spectrum-button-border-color-hover: var(--spectrum-gray-500);
- --spectrum-button-border-color-down: var(--spectrum-gray-600);
- --spectrum-button-border-color-focus: var(--spectrum-gray-500);
-
- --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
- &.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-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-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-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
- &.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
- --spectrum-button-background-color-hover: var(--spectrum-accent-color-200);
- --spectrum-button-background-color-down: var(--spectrum-accent-color-300);
- --spectrum-button-background-color-focus: var(--spectrum-accent-color-200);
-
- --spectrum-button-border-color-default: var(--spectrum-accent-color-900);
- --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-button-border-color-down: var(--spectrum-accent-color-1100);
- --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000);
-
- --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
- }
- }
-
- &.spectrum-Button--negative {
- --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-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-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
- &.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
- --spectrum-button-background-color-hover: var(--spectrum-negative-color-200);
- --spectrum-button-background-color-down: var(--spectrum-negative-color-300);
- --spectrum-button-background-color-focus: var(--spectrum-negative-color-200);
-
- --spectrum-button-border-color-default: var(--spectrum-negative-color-900);
- --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000);
- --spectrum-button-border-color-down: var(--spectrum-negative-color-1100);
- --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000);
-
- --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
- }
- }
-
&.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-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-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-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--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);
-
- --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-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
}
}
&.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-down: var(--spectrum-gray-400);
--spectrum-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;
-
- --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--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);
--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-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-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;
- }
-
- &.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);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-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-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-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);
- }
- }
-
- &.spectrum-Button--staticBlack,
- &.spectrum-Button--staticWhite {
- &.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;
}
}
- /* static white */
-
&.spectrum-Button--staticWhite {
--spectrum-button-background-color-default: var(--spectrum-transparent-white-800);
--spectrum-button-background-color-hover: var(--spectrum-transparent-white-900);
--spectrum-button-background-color-down: var(--spectrum-transparent-white-900);
--spectrum-button-background-color-focus: var(--spectrum-transparent-white-900);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-black);
- --spectrum-button-content-color-hover: var(--spectrum-black);
- --spectrum-button-content-color-down: var(--spectrum-black);
- --spectrum-button-content-color-focus: var(--spectrum-black);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+ &.is-selected {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-white-800);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-900);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900);
+ }
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
@@ -288,106 +64,34 @@
--spectrum-button-border-color-hover: var(--spectrum-transparent-white-900);
--spectrum-button-border-color-down: var(--spectrum-transparent-white-900);
--spectrum-button-border-color-focus: var(--spectrum-transparent-white-900);
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
}
- &.is-selected {
- --spectrum-button-background-color-default: var(--spectrum-transparent-white-800);
- --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900);
- --spectrum-button-background-color-down: var(--spectrum-transparent-white-900);
- --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900);
-
- --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black));
- --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black));
- --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black));
- --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black));
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
- --spectrum-button-border-color-disabled: transparent;
- }
- }
-
- &.spectrum-Button--staticWhite.spectrum-Button--secondary {
- --spectrum-button-background-color-default: var(--spectrum-transparent-white-200);
- --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
- --spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
- --spectrum-button-background-color-focus: var(--spectrum-transparent-white-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;
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-
- &.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
+ &.spectrum-Button--secondary {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-white-200);
--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
- --spectrum-button-border-color-default: var(--spectrum-transparent-white-300);
- --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400);
- --spectrum-button-border-color-down: var(--spectrum-transparent-white-500);
- --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400);
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+ --spectrum-button-border-color-default: var(--spectrum-transparent-white-300);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400);
+ }
}
}
- /* static black */
&.spectrum-Button--staticBlack {
--spectrum-button-background-color-default: var(--spectrum-transparent-black-800);
--spectrum-button-background-color-hover: var(--spectrum-transparent-black-900);
--spectrum-button-background-color-down: var(--spectrum-transparent-black-900);
--spectrum-button-background-color-focus: var(--spectrum-transparent-black-900);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
@@ -396,63 +100,24 @@
--spectrum-button-border-color-hover: var(--spectrum-transparent-black-500);
--spectrum-button-border-color-down: var(--spectrum-transparent-black-600);
--spectrum-button-border-color-focus: var(--spectrum-transparent-black-500);
-
- --spectrum-button-content-color-default: var(--spectrum-black);
- --spectrum-button-content-color-hover: var(--spectrum-black);
- --spectrum-button-content-color-down: var(--spectrum-black);
- --spectrum-button-content-color-focus: var(--spectrum-black);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
}
- }
-
- &.spectrum-Button--staticBlack.spectrum-Button--secondary {
- --spectrum-button-background-color-default: var(--spectrum-transparent-black-200);
- --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
- --spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
- --spectrum-button-background-color-focus: var(--spectrum-transparent-black-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;
- --spectrum-button-content-color-default: var(--spectrum-black);
- --spectrum-button-content-color-hover: var(--spectrum-black);
- --spectrum-button-content-color-down: var(--spectrum-black);
- --spectrum-button-content-color-focus: var(--spectrum-black);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-
- &.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
+ &.spectrum-Button--secondary {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-black-200);
--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
- --spectrum-button-border-color-default: var(--spectrum-transparent-black-300);
- --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400);
- --spectrum-button-border-color-down: var(--spectrum-transparent-black-500);
- --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400);
-
- --spectrum-button-content-color-default: var(--spectrum-black);
- --spectrum-button-content-color-hover: var(--spectrum-black);
- --spectrum-button-content-color-down: var(--spectrum-black);
- --spectrum-button-content-color-focus: var(--spectrum-black);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+ --spectrum-button-border-color-default: var(--spectrum-transparent-black-300);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400);
+ }
}
}
}
diff --git a/components/buttongroup/CHANGELOG.md b/components/buttongroup/CHANGELOG.md
index 47e64198d91..23642bc53c2 100644
--- a/components/buttongroup/CHANGELOG.md
+++ b/components/buttongroup/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 8.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.17
+
+## 8.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 7.2.0
### Minor Changes
diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css
index 27d6ffb0d15..ebedcd9c2aa 100644
--- a/components/buttongroup/index.css
+++ b/components/buttongroup/index.css
@@ -11,32 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-ButtonGroup {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeS {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200);
-}
-
-.spectrum-ButtonGroup--sizeM {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeL {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeXL {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
+@import "./themes/spectrum-two.css";
.spectrum-ButtonGroup {
display: flex;
diff --git a/components/buttongroup/metadata/metadata.json b/components/buttongroup/metadata/metadata.json
index e74734f8509..149ff88f484 100644
--- a/components/buttongroup/metadata/metadata.json
+++ b/components/buttongroup/metadata/metadata.json
@@ -3,10 +3,6 @@
"selectors": [
".spectrum-ButtonGroup",
".spectrum-ButtonGroup .spectrum-ButtonGroup-item",
- ".spectrum-ButtonGroup--sizeL",
- ".spectrum-ButtonGroup--sizeM",
- ".spectrum-ButtonGroup--sizeS",
- ".spectrum-ButtonGroup--sizeXL",
".spectrum-ButtonGroup--vertical"
],
"modifiers": [
@@ -18,7 +14,7 @@
"--spectrum-buttongroup-spacing-horizontal",
"--spectrum-buttongroup-spacing-vertical"
],
- "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": []
diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json
index 67ea4f80d30..91f678395d3 100644
--- a/components/buttongroup/package.json
+++ b/components/buttongroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/buttongroup",
- "version": "7.2.0",
+ "version": "8.0.0-s2-foundations.15",
"description": "The Spectrum CSS buttongroup component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js
index 683b03266b8..9c4f40486c5 100644
--- a/components/buttongroup/stories/buttongroup.stories.js
+++ b/components/buttongroup/stories/buttongroup.stories.js
@@ -57,6 +57,10 @@ export default {
],
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13663-6530",
+ },
packageJson,
metadata,
},
diff --git a/components/buttongroup/stories/template.js b/components/buttongroup/stories/template.js
index 1d85c23d2cc..464b4908442 100644
--- a/components/buttongroup/stories/template.js
+++ b/components/buttongroup/stories/template.js
@@ -3,6 +3,9 @@ import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ButtonGroup",
@@ -15,8 +18,7 @@ export const Template = ({
({ ...a, [c]: true }), {}),
})}
diff --git a/components/buttongroup/themes/express.css b/components/buttongroup/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/buttongroup/themes/express.css
+++ b/components/buttongroup/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/buttongroup/themes/spectrum-two.css b/components/buttongroup/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/buttongroup/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/buttongroup/themes/spectrum.css b/components/buttongroup/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/buttongroup/themes/spectrum.css
+++ b/components/buttongroup/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/calendar/CHANGELOG.md b/components/calendar/CHANGELOG.md
index 7474744cc41..0efd3cb4647 100644
--- a/components/calendar/CHANGELOG.md
+++ b/components/calendar/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.20
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.3.0
### Minor Changes
diff --git a/components/calendar/index.css b/components/calendar/index.css
index 095530088c8..22af5998ba5 100644
--- a/components/calendar/index.css
+++ b/components/calendar/index.css
@@ -11,57 +11,17 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Calendar {
- --spectrum-calendar-day-width: var(--spectrum-component-height-100);
- --spectrum-calendar-day-height: var(--spectrum-component-height-100);
- --spectrum-calendar-border-radius-reset: 0;
- --spectrum-calendar-border-width-reset: 0;
- --spectrum-calendar-day-border-size: var(--spectrum-border-width-200);
- --spectrum-calendar-margin-y: 24px;
- --spectrum-calendar-margin-x: 32px;
- --spectrum-calendar-day-padding: 4px;
- --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7);
-
- --spectrum-calendar-title-text-letter-spacing: 0.06em;
- --spectrum-calendar-title-height: 32px;
- --spectrum-calendar-title-text-size: var(--spectrum-font-size-300);
-
- --spectrum-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-calendar-day-title-text-color: var(--spectrum-gray-700);
- --spectrum-calendar-day-title-text-size: var(--spectrum-font-size-50);
- --spectrum-calendar-day-text-size-han: var(--spectrum-font-size-50);
-
- --spectrum-calendar-day-text-size: var(--spectrum-font-size-100);
- --spectrum-calendar-day-text-color-selected: var(--spectrum-gray-900);
- --spectrum-calendar-day-text-color-hover: var(--spectrum-gray-900);
- --spectrum-calendar-day-text-color-cap-selected: var(--spectrum-gray-900);
- --spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight);
- --spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight);
-
- --spectrum-calendar-day-today-text-color: var(--spectrum-gray-800);
- --spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-calendar-day-today-border-color: var(--spectrum-gray-800);
-
- --spectrum-calendar-day-today-text-color-disabled: var(--spectrum-gray-500);
- --spectrum-calendar-day-today-border-color-disabled: var(--spectrum-gray-400);
- --spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color);
-
- --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900);
-
- --spectrum-calendar-button-icon-color: var(--spectrum-gray-700);
+ inline-size: var(--mod-calendar-width, var(--spectrum-calendar-width));
+ display: inline-block;
&:dir(rtl) {
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
}
}
-.spectrum-Calendar {
- inline-size: var(--mod-calendar-width, var(--spectrum-calendar-width));
- display: inline-block;
-}
-
.spectrum-Calendar--padded {
margin: var(--mod-calendar-margin-x, var(--spectrum-calendar-margin-x)) var(--mod-calendar-margin-y, var(--spectrum-calendar-margin-y));
}
@@ -134,6 +94,7 @@
/* Add letter spacing of 0.66px from Typography > Detail issue #407 */
letter-spacing: var(--mod-calendar-title-text-letter-spacing, var(--spectrum-calendar-title-text-letter-spacing));
+
}
}
@@ -438,6 +399,7 @@
--highcontrast-calendar-day-today-text-color-disabled: GrayText;
--highcontrast-calendar-day-today-text-color: ButtonText;
+ color: CanvasText;
forced-color-adjust: none;
&.is-range-selection {
diff --git a/components/calendar/metadata/metadata.json b/components/calendar/metadata/metadata.json
index be6710fa5c1..6abb2effeb7 100644
--- a/components/calendar/metadata/metadata.json
+++ b/components/calendar/metadata/metadata.json
@@ -151,21 +151,7 @@
"--spectrum-calendar-title-text-size",
"--spectrum-calendar-width"
],
- "global": [
- "--spectrum-bold-font-weight",
- "--spectrum-border-width-200",
- "--spectrum-component-height-100",
- "--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-800",
- "--spectrum-gray-900",
- "--spectrum-logical-rotation"
- ],
+ "global": ["--spectrum-logical-rotation"],
"system-theme": [],
"passthroughs": [],
"high-contrast": [
diff --git a/components/calendar/package.json b/components/calendar/package.json
index 7a7b9ea0b20..b0d7e195bf9 100644
--- a/components/calendar/package.json
+++ b/components/calendar/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/calendar",
- "version": "5.3.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS calendar component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/calendar/stories/template.js b/components/calendar/stories/template.js
index 2a739d64bcf..2180fa9cca8 100644
--- a/components/calendar/stories/template.js
+++ b/components/calendar/stories/template.js
@@ -8,6 +8,9 @@ import { repeat } from "lit/directives/repeat.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Calendar",
diff --git a/components/calendar/themes/express.css b/components/calendar/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/calendar/themes/express.css
+++ b/components/calendar/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/calendar/themes/spectrum-two.css b/components/calendar/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/calendar/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/calendar/themes/spectrum.css b/components/calendar/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/calendar/themes/spectrum.css
+++ b/components/calendar/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/card/CHANGELOG.md b/components/card/CHANGELOG.md
index f590b7e5185..384a012077f 100644
--- a/components/card/CHANGELOG.md
+++ b/components/card/CHANGELOG.md
@@ -1,5 +1,304 @@
# Change Log
+## 10.0.0-s2-foundations.20
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`085ecbc`](https://github.com/adobe/spectrum-css/commit/085ecbc739cf736e8d95377d605f2a7c4104bcc0) Thanks [@pfulton](https://github.com/pfulton)! - Pulled out _form_ from _fieldlabel_ package.
+ Pulled out _meter_ from _progressbar_ package.
+
+ [SWC-522] fix hover style regression
+
+## 10.0.0-s2-foundations.19
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.21
+ - @spectrum-css/typography@7.0.0-s2-foundations.17
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.18
+ - @spectrum-css/asset@6.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 10.0.0-s2-foundations.18
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.20
+ - @spectrum-css/typography@7.0.0-s2-foundations.16
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.17
+ - @spectrum-css/asset@6.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 10.0.0-s2-foundations.17
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`d8394c7`](https://github.com/adobe/spectrum-css/commit/d8394c7cd6e49e65928972eedaae0dbf013ea8f9) Thanks [@pfulton](https://github.com/pfulton)! - S2 preview background color mapping update
+
+- Updated dependencies [[`9ae725f`](https://github.com/adobe/spectrum-css/commit/9ae725f10ebbb78b62070c4c477cb41cfc1b1ed6), [`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.15
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.19
+
+## 10.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/typography@7.0.0-s2-foundations.14
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/asset@6.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de) Thanks [@pfulton](https://github.com/pfulton)! - Updates to custom property inheritance and properties order
+
+### Patch Changes
+
+- Updated dependencies [[`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.19
+
+## 10.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1037169`](https://github.com/adobe/spectrum-css/commit/103716919fa4e0d43c68e67e1fd3355651c02016) Thanks [@pfulton](https://github.com/pfulton)! - Move --highcontrast references out of themes; remove remaining --mods from the themes
+
+## 10.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9f8732d`](https://github.com/adobe/spectrum-css/commit/9f8732d05da8c2be2ce3d95baac4b1272a6c62bd) Thanks [@pfulton](https://github.com/pfulton)! - Migrating Card component quiet and gallery variant mods to index css file
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/typography@7.0.0-s2-foundations.13
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/asset@6.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/typography@7.0.0-s2-foundations.12
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/asset@6.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/typography@7.0.0-s2-foundations.11
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/asset@6.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/typography@7.0.0-s2-foundations.9
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/asset@6.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/typography@7.0.0-s2-foundations.8
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/asset@6.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/typography@7.0.0-s2-foundations.7
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/asset@6.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/typography@7.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/asset@6.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/typography@7.0.0-s2-foundations.5
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/asset@6.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/typography@7.0.0-s2-foundations.4
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/asset@6.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/typography@7.0.0-s2-foundations.3
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/asset@6.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/typography@7.0.0-s2-foundations.2
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/asset@6.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/typography@7.0.0-s2-foundations.1
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/asset@6.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/asset@6.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+ - @spectrum-css/typography@7.0.0-s2-foundations.0
+
## 9.3.0
### Minor Changes
@@ -23,6 +322,17 @@
### Patch Changes
+- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
+ - @spectrum-css/tokens@14.5.0
+
+## 9.2.0
+
+### Minor Changes
+
+- [#3253](https://github.com/adobe/spectrum-css/pull/3253) [`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86) Thanks [@castastrophe](https://github.com/castastrophe)! - This update removes tokens defined locally that belonged in the global scope. To ensure no regressions, please upgrade your @spectrum-css/tokens package at the same time so you will pick up the component-level definitions now in the global tokens scope. References to `.spectrum--(light|dark|darkest|medium|large)` have been removed.
+
+### Patch Changes
+
- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
- @spectrum-css/tokens@14.5.0
diff --git a/components/card/index.css b/components/card/index.css
index a39a9e85340..a762b0d35e3 100644
--- a/components/card/index.css
+++ b/components/card/index.css
@@ -11,77 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-Card {
- /* Default Layout */
- --spectrum-card-background-color: var(--spectrum-background-layer-2-color);
- --spectrum-card-body-spacing: var(--spectrum-spacing-400);
- --spectrum-card-title-padding-top: var(--spectrum-spacing-300);
- --spectrum-card-title-padding-right: var(--spectrum-spacing-400);
- --spectrum-card-content-margin-top: var(--spectrum-spacing-100);
- --spectrum-card-content-margin-bottom: var(--spectrum-spacing-300);
- --spectrum-card-footer-padding-top: var(--spectrum-spacing-100);
- --spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100);
-
- --spectrum-card-border-width: var(--spectrum-border-width-100);
- --spectrum-card-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-card-border-color: var(--spectrum-gray-200);
- --spectrum-card-border-color-hover: var(--spectrum-gray-300);
- --spectrum-card-border-color-selected: var(--spectrum-blue-700);
-
- --spectrum-card-divider-color: var(--spectrum-gray-300);
-
- /* Typography */
- --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-card-title-font-size: var(--spectrum-heading-size-xxs);
- --spectrum-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-card-title-font-style: var(--spectrum-heading-sans-serif-font-style);
- --spectrum-card-title-line-height: var(--spectrum-heading-line-height);
- --spectrum-card-title-font-color: var(--spectrum-heading-color);
-
- --spectrum-card-body-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-card-body-font-size: var(--spectrum-body-size-s);
- --spectrum-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-card-body-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-card-body-line-height: var(--spectrum-body-line-height);
- --spectrum-card-body-font-color: var(--spectrum-body-color);
-
- /* Quick Actions */
- --spectrum-card-actions-spacing: var(--spectrum-spacing-300);
- --spectrum-card-actions-size: var(--spectrum-card-selection-background-size);
- --spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100);
-
- /* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */
- --spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb);
- --spectrum-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity);
- --spectrum-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color);
- --spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x);
- --spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y);
- --spectrum-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur);
-
- /* Focus */
- --spectrum-card-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
-
- /* Selected */
- --spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */
-
- --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100);
- --spectrum-card-preview-background-color: var(--spectrum-background-base-color);
- --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
-
- /* Horizontal */
- --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300);
- --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200);
-}
-
-/* Quiet/Gallery */
-.spectrum-Card--quiet,
-.spectrum-Card--gallery {
- --mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
- --mod-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width));
-}
+@import "./themes/spectrum-two.css";
.spectrum-Card {
position: relative;
@@ -96,9 +26,7 @@
border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius));
border-color: var(--highcontrast-card-border-color, var(--mod-card-border-color, var(--spectrum-card-border-color)));
- /* @deprecation --mod-spectrum-card-background-color has been renamed to
- --mod-card-background-color. The fallback will be removed in a future version. */
- background-color: var(--highcontrast-card-background-color, var(--mod-card-background-color, var(--mod-spectrum-card-background-color, var(--spectrum-card-background-color))));
+ background-color: var(--highcontrast-card-background-color, var(--mod-card-background-color, var(--spectrum-card-background-color)));
&::before {
content: "";
@@ -158,11 +86,9 @@
}
&.is-drop-target {
- --mod-card-background-color: var(--spectrum-card-background-color-quiet, var(--spectrum-background-base-color));
-
border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));
box-shadow: 0 0 0 1px var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));
- background-color: var(--mod-card-background-color, var(--spectrum-card-background-color));
+ background-color: var(--mod-card-background-color, var(--spectrum-card-background-color-quiet));
}
&.is-focused,
@@ -171,7 +97,6 @@
&:hover {
.spectrum-Card-quickActions,
.spectrum-Card-actions {
- /* Ideally, this would simply apply is-open to the QuickActions component */
visibility: visible;
opacity: 1;
pointer-events: all;
@@ -191,6 +116,18 @@
inset-inline-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
inset-block-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+
+ /* From QuickAction component that is officially deprecated */
+ pointer-events: auto;
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ box-sizing:border-box;
+
+ transition:
+ transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+ opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+ visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
}
.spectrum-Card-actions {
@@ -338,6 +275,9 @@
.spectrum-Card--quiet,
.spectrum-Card--gallery {
+ --spectrum-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-card-content-margin-top-quiet));
+ --spectrum-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width-quiet));
+
block-size: 100%;
min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width));
border-width: 0;
@@ -425,9 +365,6 @@
.spectrum-Card-body {
margin-block-start: var(--mod-card-content-margin-top, var(--spectrum-card-content-margin-top));
- }
-
- .spectrum-Card-body {
padding: 0;
}
diff --git a/components/card/metadata/metadata.json b/components/card/metadata/metadata.json
index 51b2fb5cabe..cd8a129721e 100644
--- a/components/card/metadata/metadata.json
+++ b/components/card/metadata/metadata.json
@@ -135,7 +135,7 @@
"--mod-card-title-line-height",
"--mod-card-title-padding-right",
"--mod-card-title-padding-top",
- "--mod-spectrum-card-background-color"
+ "--mod-overlay-animation-duration"
],
"component": [
"--spectrum-card-actions-background-color-opacity",
@@ -162,6 +162,7 @@
"--spectrum-card-border-width",
"--spectrum-card-content-margin-bottom",
"--spectrum-card-content-margin-top",
+ "--spectrum-card-content-margin-top-quiet",
"--spectrum-card-corner-radius",
"--spectrum-card-divider-color",
"--spectrum-card-focus-indicator-color",
@@ -170,14 +171,13 @@
"--spectrum-card-horizontal-body-padding",
"--spectrum-card-horizontal-preview-padding",
"--spectrum-card-minimum-width",
+ "--spectrum-card-minimum-width-quiet",
"--spectrum-card-preview-background-color",
"--spectrum-card-preview-background-color-hover",
"--spectrum-card-preview-border-width-selected",
"--spectrum-card-preview-minimum-height",
"--spectrum-card-selected-background-color-rgb",
"--spectrum-card-selected-background-opacity",
- "--spectrum-card-selection-background-color-opacity",
- "--spectrum-card-selection-background-size",
"--spectrum-card-subtitle-padding-right",
"--spectrum-card-title-font-color",
"--spectrum-card-title-font-family",
@@ -190,37 +190,16 @@
],
"global": [
"--spectrum-animation-duration-100",
- "--spectrum-background-base-color",
- "--spectrum-background-layer-2-color",
- "--spectrum-blue-700",
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-body-size-s",
- "--spectrum-border-width-100",
- "--spectrum-corner-radius-100",
- "--spectrum-drop-shadow-blur",
- "--spectrum-drop-shadow-color",
- "--spectrum-drop-shadow-x",
- "--spectrum-drop-shadow-y",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-gray-100-rgb",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-style",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-heading-size-xxs",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400"
+ "--spectrum-gray-100",
+ "--spectrum-gray-200"
+ ],
+ "system-theme": [
+ "--system-card-border-color",
+ "--system-card-border-color-hover",
+ "--system-card-divider-color",
+ "--system-card-preview-background-color",
+ "--system-card-preview-background-color-hover"
],
- "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-card-background-color",
diff --git a/components/card/metadata/mods.md b/components/card/metadata/mods.md
index 69311af19ed..438f734c02c 100644
--- a/components/card/metadata/mods.md
+++ b/components/card/metadata/mods.md
@@ -61,4 +61,4 @@
| `--mod-card-title-line-height` |
| `--mod-card-title-padding-right` |
| `--mod-card-title-padding-top` |
-| `--mod-spectrum-card-background-color` |
+| `--mod-overlay-animation-duration` |
diff --git a/components/card/package.json b/components/card/package.json
index 5391f853903..7e1de1b4763 100644
--- a/components/card/package.json
+++ b/components/card/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/card",
- "version": "9.3.0",
+ "version": "10.0.0-s2-foundations.20",
"description": "The Spectrum CSS card component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -35,7 +35,6 @@
"@spectrum-css/asset": ">=5",
"@spectrum-css/checkbox": ">=9",
"@spectrum-css/icon": ">=7",
- "@spectrum-css/quickaction": ">=3",
"@spectrum-css/tokens": ">=14.5.0",
"@spectrum-css/typography": ">=6"
},
@@ -52,9 +51,6 @@
"@spectrum-css/icon": {
"optional": true
},
- "@spectrum-css/quickaction": {
- "optional": true
- },
"@spectrum-css/typography": {
"optional": true
}
@@ -64,7 +60,6 @@
"@spectrum-css/asset": "workspace:^",
"@spectrum-css/checkbox": "workspace:^",
"@spectrum-css/icon": "workspace:^",
- "@spectrum-css/quickaction": "^3.1.1",
"@spectrum-css/tokens": "workspace:^",
"@spectrum-css/typography": "workspace:^"
},
diff --git a/components/card/stories/template.js b/components/card/stories/template.js
index c6119408ab7..e6e8b215b73 100644
--- a/components/card/stories/template.js
+++ b/components/card/stories/template.js
@@ -4,7 +4,6 @@ import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js
import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
import { getRandomId } from "@spectrum-css/preview/decorators";
-import { Template as QuickAction } from "@spectrum-css/quickaction/stories/template.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
@@ -12,6 +11,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Card",
@@ -27,8 +29,8 @@ export const Template = ({
isGallery = false,
isCardAssetOverride = false,
isGrid = false,
- hasQuickAction = false,
hasActions = false,
+ hasQuickAction = false,
showAsset,
customStyles = {},
customClasses = [],
@@ -198,25 +200,23 @@ export const Template = ({
`
)}
${when(hasQuickAction && !isHorizontal, () =>
- QuickAction(
- {
- noOverlay: true,
- content: [
- Checkbox(
- {
- isChecked: isSelected,
- title: "Select",
- },
- context
- ),
- ],
- onclick: function() {
+ html`
+
+ ${Checkbox(
+ {
+ isChecked: isSelected,
+ title: "Select",
+ },
+ context
+ )}
+
`
)}
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Card {
+ --spectrum-card-border-color: var(--spectrum-gray-100);
+ --spectrum-card-border-color-hover: var(--spectrum-gray-200);
+ --spectrum-card-divider-color: var(--spectrum-gray-200);
+ --spectrum-card-preview-background-color: var(--spectrum-gray-100);
+ --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css
index 3b48a570c21..a1906d601bd 100644
--- a/components/card/themes/spectrum.css
+++ b/components/card/themes/spectrum.css
@@ -10,3 +10,17 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Card {
+ --spectrum-card-border-color: var(--spectrum-gray-200);
+ --spectrum-card-border-color-hover: var(--spectrum-gray-300);
+ --spectrum-card-divider-color: var(--spectrum-gray-300);
+ --spectrum-card-preview-background-color: var(--spectrum-background-base-color);
+ --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
+ }
+}
diff --git a/components/checkbox/CHANGELOG.md b/components/checkbox/CHANGELOG.md
index ebc785c5d51..12ab804522e 100644
--- a/components/checkbox/CHANGELOG.md
+++ b/components/checkbox/CHANGELOG.md
@@ -1,5 +1,243 @@
# Change Log
+## 10.0.0-s2-foundations.19
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e) Thanks [@pfulton](https://github.com/pfulton)! - Bring in the latest S2 foundations release including updated corner rounding approach, colors, and icon spacing. Remapped corner rounding values for the -75 token to a static 2px value for spectrum themes.
+
+### Patch Changes
+
+- Updated dependencies [[`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.25
+
+## 10.0.0-s2-foundations.18
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 10.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 10.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`be5d85f`](https://github.com/adobe/spectrum-css/commit/be5d85f36aa6f81485b02fe943c5de22922fe0ff) Thanks [@pfulton](https://github.com/pfulton)! - Fix S1 checkbox color
+
+## 10.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f38c66a`](https://github.com/adobe/spectrum-css/commit/f38c66a314c94058d7f8f084faa4967c89b20e7b) Thanks [@pfulton](https://github.com/pfulton)! - Fix icon sizing and checkbox border colors
+
+### Patch Changes
+
+- Updated dependencies [[`f38c66a`](https://github.com/adobe/spectrum-css/commit/f38c66a314c94058d7f8f084faa4967c89b20e7b)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.14
+
+## 10.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-238] t-shirt-based calc moved out of theme into base css
+
+### Patch Changes
+
+- Updated dependencies [[`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f), [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.14
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
+## 9.2.1
+
+### Patch Changes
+
+- [#3328](https://github.com/adobe/spectrum-css/pull/3328) [`a0486b3`](https://github.com/adobe/spectrum-css/commit/a0486b341581c610ebc9b3acd1837be2b66eb348) Thanks [@jawinn](https://github.com/jawinn)! - This removes some unnecessary read-only styles. Read-only just needs to override disabled styles. Otherwise it uses the normal styles (for both default and emphasized).
+
## 9.2.1
### Patch Changes
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
index f2c87f2c4db..93847cde375 100644
--- a/components/checkbox/index.css
+++ b/components/checkbox/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
/*
* .spectrum-Checkbox-box::before is the Checkbox "box"
@@ -29,7 +29,6 @@
--spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color);
--spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75);
--spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
--spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);
@@ -54,7 +53,6 @@
/* Size */
--spectrum-checkbox-height: var(--spectrum-component-height-100);
--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium);
- --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
--spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
--spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
@@ -442,6 +440,8 @@
}
.spectrum-Checkbox-box {
+ /* Fix vertical alignment when not wrapping since we're flex-start */
+ --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
display: flex;
align-items: center;
justify-content: center;
@@ -450,9 +450,6 @@
box-sizing: border-box;
inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
-
- /* Fix vertical alignment when not wrapping since we're flex-start */
- --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0;
flex-grow: 0;
diff --git a/components/checkbox/metadata/metadata.json b/components/checkbox/metadata/metadata.json
index 4ce727d04db..454899a8407 100644
--- a/components/checkbox/metadata/metadata.json
+++ b/components/checkbox/metadata/metadata.json
@@ -179,7 +179,6 @@
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-300",
"--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-75",
"--spectrum-disabled-content-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
@@ -188,11 +187,10 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-50",
"--spectrum-gray-600",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-gray-800",
- "--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-negative-color-1000",
"--spectrum-negative-color-1100",
@@ -211,10 +209,12 @@
"--spectrum-text-to-control-75"
],
"system-theme": [
- "--system-spectrum-checkbox-control-color-default",
- "--system-spectrum-checkbox-control-color-down",
- "--system-spectrum-checkbox-control-color-focus",
- "--system-spectrum-checkbox-control-color-hover"
+ "--system-checkbox-checkmark-color",
+ "--system-checkbox-control-color-default",
+ "--system-checkbox-control-color-down",
+ "--system-checkbox-control-color-focus",
+ "--system-checkbox-control-color-hover",
+ "--system-checkbox-control-corner-radius"
],
"passthroughs": [],
"high-contrast": [
diff --git a/components/checkbox/package.json b/components/checkbox/package.json
index 242eda05d6a..802461153f7 100644
--- a/components/checkbox/package.json
+++ b/components/checkbox/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/checkbox",
- "version": "9.2.1",
+ "version": "10.0.0-s2-foundations.19",
"description": "The Spectrum CSS checkbox component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js
index 07ab09a7922..3d30d357817 100644
--- a/components/checkbox/stories/checkbox.stories.js
+++ b/components/checkbox/stories/checkbox.stories.js
@@ -51,6 +51,10 @@ export default {
actions: {
handles: ["click input[type=\"checkbox\"]"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=164-16685",
+ },
packageJson,
metadata,
},
diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js
index 920b1f98b56..9c778259f7d 100644
--- a/components/checkbox/stories/template.js
+++ b/components/checkbox/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Checkbox",
diff --git a/components/checkbox/themes/express.css b/components/checkbox/themes/express.css
index 54d273354cf..1c84aa5f83b 100644
--- a/components/checkbox/themes/express.css
+++ b/components/checkbox/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Checkbox {
--spectrum-checkbox-control-color-default: var(--spectrum-gray-800);
--spectrum-checkbox-control-color-hover: var(--spectrum-gray-900);
diff --git a/components/checkbox/themes/spectrum-two.css b/components/checkbox/themes/spectrum-two.css
new file mode 100644
index 00000000000..8632f60bce8
--- /dev/null
+++ b/components/checkbox/themes/spectrum-two.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Checkbox {
+ --spectrum-checkbox-control-color-default: var(--spectrum-gray-600);
+ --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
+ --spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
+ --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
+
+ --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50);
+ --spectrum-checkbox-control-corner-radius: 2px;
+ }
+}
diff --git a/components/checkbox/themes/spectrum.css b/components/checkbox/themes/spectrum.css
index 49c95dd11a1..25ea7552d11 100644
--- a/components/checkbox/themes/spectrum.css
+++ b/components/checkbox/themes/spectrum.css
@@ -11,11 +11,13 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Checkbox {
- --spectrum-checkbox-control-color-default: var(--spectrum-gray-600);
- --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
- --spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
- --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
+ --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75);
+ --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
}
}
diff --git a/components/clearbutton/CHANGELOG.md b/components/clearbutton/CHANGELOG.md
index c888200d7b6..834473c15b9 100644
--- a/components/clearbutton/CHANGELOG.md
+++ b/components/clearbutton/CHANGELOG.md
@@ -1,5 +1,204 @@
# Change Log
+## 7.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 7.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a66241b`](https://github.com/adobe/spectrum-css/commit/a66241bc5ec06ecb81b221187db1740caf1bd8f8) Thanks [@pfulton](https://github.com/pfulton)! - Migrating Clear Button disabled variants to index.css
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.4.0
### Minor Changes
@@ -31,6 +230,17 @@
### Patch Changes
+- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
+ - @spectrum-css/tokens@14.5.0
+
+## 6.2.0
+
+### Minor Changes
+
+- [#3263](https://github.com/adobe/spectrum-css/pull/3263) [`904d5b0`](https://github.com/adobe/spectrum-css/commit/904d5b0eae5cd62dd1346a2443192aec886e613b) Thanks [@cdransf](https://github.com/cdransf)! - Removes undefined leading tokens in mods assignments for clearbutton.
+
+### Patch Changes
+
- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
- @spectrum-css/tokens@14.5.0
diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css
index 1b5357c50fd..e11998d8331 100644
--- a/components/clearbutton/index.css
+++ b/components/clearbutton/index.css
@@ -12,7 +12,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-ClearButton {
--spectrum-clear-button-height: var(--spectrum-component-height-100);
@@ -23,7 +23,7 @@
--spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
--spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
--spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
+
block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
border-radius: 100%;
@@ -57,18 +57,14 @@
--mod-clear-button-background-color-key-focus: transparent;
}
- /* @deprecated .spectrum-ClearButton--overBackground */
- &.spectrum-ClearButton--staticWhite,
- &.spectrum-ClearButton--overBackground {
+ &.spectrum-ClearButton--staticWhite {
--mod-clear-button-icon-color: var(--spectrum-white);
--mod-clear-button-icon-color-hover: var(--spectrum-white);
--mod-clear-button-icon-color-down: var(--spectrum-white);
--mod-clear-button-icon-color-key-focus: var(--spectrum-white);
+ --mod-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
--mod-clear-button-background-color: transparent;
- --mod-clear-button-background-color-hover: var(--spectrum-transparent-white-300);
- --mod-clear-button-background-color-down: var(--spectrum-transparent-white-400);
- --mod-clear-button-background-color-key-focus:var(--spectrum-transparent-white-300);
}
&:disabled,
@@ -79,10 +75,6 @@
--mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
}
- &.spectrum-ClearButton--staticWhite {
- --spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
- }
-
&:not(:disabled) {
cursor: pointer;
}
diff --git a/components/clearbutton/metadata/metadata.json b/components/clearbutton/metadata/metadata.json
index 6410450768d..0639759874c 100644
--- a/components/clearbutton/metadata/metadata.json
+++ b/components/clearbutton/metadata/metadata.json
@@ -10,7 +10,6 @@
".spectrum-ClearButton-fill",
".spectrum-ClearButton.is-disabled",
".spectrum-ClearButton.is-disabled .spectrum-ClearButton-icon",
- ".spectrum-ClearButton.spectrum-ClearButton--overBackground",
".spectrum-ClearButton.spectrum-ClearButton--quiet",
".spectrum-ClearButton.spectrum-ClearButton--sizeL",
".spectrum-ClearButton.spectrum-ClearButton--sizeS",
@@ -66,23 +65,23 @@
"--spectrum-component-height-75",
"--spectrum-disabled-content-color",
"--spectrum-disabled-static-white-content-color",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
"--spectrum-in-field-button-edge-to-fill",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus",
- "--spectrum-transparent-white-300",
"--spectrum-transparent-white-400",
+ "--spectrum-transparent-white-500",
"--spectrum-white"
],
"system-theme": [
- "--system-spectrum-clearbutton-spectrum-clear-button-background-color",
- "--system-spectrum-clearbutton-spectrum-clear-button-background-color-down",
- "--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover",
- "--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus"
+ "--system-clear-button-background-color",
+ "--system-clear-button-background-color-down",
+ "--system-clear-button-background-color-hover",
+ "--system-clear-button-background-color-key-focus",
+ "--system-clear-button-static-white-background-color-down",
+ "--system-clear-button-static-white-background-color-hover",
+ "--system-clear-button-static-white-background-color-key-focus"
],
"passthroughs": [],
"high-contrast": [
diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json
index 0f867492889..0015a18533f 100644
--- a/components/clearbutton/package.json
+++ b/components/clearbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/clearbutton",
- "version": "6.4.0",
+ "version": "7.0.0-s2-foundations.16",
"description": "The Spectrum CSS clearbutton component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js
index 3e19531b47d..cca47b24337 100644
--- a/components/clearbutton/stories/clearbutton.stories.js
+++ b/components/clearbutton/stories/clearbutton.stories.js
@@ -102,6 +102,7 @@ Sizing.args = {};
Sizing.tags = ["!dev"];
Sizing.parameters = {
chromatic: { disableSnapshot: true },
+
};
export const OverBackground = ClearButtonGroup.bind({});
diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js
index a4ce921c7aa..58e90007c04 100644
--- a/components/clearbutton/stories/template.js
+++ b/components/clearbutton/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ClearButton",
diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css
index 3d3b47cc65b..e13724e2883 100644
--- a/components/clearbutton/themes/express.css
+++ b/components/clearbutton/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-ClearButton {
--spectrum-clear-button-background-color: var(--spectrum-gray-200);
--spectrum-clear-button-background-color-hover: var(--spectrum-gray-300);
diff --git a/components/clearbutton/themes/spectrum-two.css b/components/clearbutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..abba1f78556
--- /dev/null
+++ b/components/clearbutton/themes/spectrum-two.css
@@ -0,0 +1,27 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-ClearButton {
+ --spectrum-clear-button-background-color: transparent;
+ --spectrum-clear-button-background-color-hover: transparent;
+ --spectrum-clear-button-background-color-down: transparent;
+ --spectrum-clear-button-background-color-key-focus: transparent;
+
+ &.spectrum-ClearButton--staticWhite {
+ --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400);
+ }
+ }
+}
diff --git a/components/clearbutton/themes/spectrum.css b/components/clearbutton/themes/spectrum.css
index 84194abf9ab..e4235fb3dff 100644
--- a/components/clearbutton/themes/spectrum.css
+++ b/components/clearbutton/themes/spectrum.css
@@ -11,11 +11,16 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-ClearButton {
- --spectrum-clear-button-background-color: transparent;
- --spectrum-clear-button-background-color-hover: transparent;
- --spectrum-clear-button-background-color-down: transparent;
- --spectrum-clear-button-background-color-key-focus: transparent;
+ &.spectrum-ClearButton--staticWhite {
+ --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-300);
+ --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-400);
+ --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-300);
+ }
}
}
diff --git a/components/closebutton/CHANGELOG.md b/components/closebutton/CHANGELOG.md
index d39314057a3..dc2ff9024cc 100644
--- a/components/closebutton/CHANGELOG.md
+++ b/components/closebutton/CHANGELOG.md
@@ -1,5 +1,207 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 6.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5d50b15`](https://github.com/adobe/spectrum-css/commit/5d50b1557e0d4f8236be43728cde66c9d41b16e7) Thanks [@pfulton](https://github.com/pfulton)! - Typo in CloseButton classes for sizing
+
+- Updated dependencies [[`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.19
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.3.0
### Minor Changes
@@ -21,6 +223,20 @@
### Patch Changes
+- [#3250](https://github.com/adobe/spectrum-css/pull/3250) [`2b45928`](https://github.com/adobe/spectrum-css/commit/2b45928b503c9ded173a56da65a32764f2255918) Thanks [@castastrophe](https://github.com/castastrophe)! - CloseButton
+
+ - Remove hardcoded tokens for sizing in favor of component sizing. Remove mapping to height & width separately in favor of using the existing "--spectrum-closebutton-size" property.
+
+## 5.2.2
+
+### Patch Changes
+
+- [#3270](https://github.com/adobe/spectrum-css/pull/3270) [`008bb34`](https://github.com/adobe/spectrum-css/commit/008bb34a0bbefd1abeb0d37bcdb179811dd9df3c) Thanks [@cdransf](https://github.com/cdransf)! - Removes unnecessary stylelint-disable comments now that rule is disabled in config.
+
+## 5.2.1
+
+### Patch Changes
+
- [#3250](https://github.com/adobe/spectrum-css/pull/3250) [`2b45928`](https://github.com/adobe/spectrum-css/commit/2b45928b503c9ded173a56da65a32764f2255918) Thanks [@castastrophe](https://github.com/castastrophe)! - CloseButton
- Remove hardcoded tokens for sizing in favor of component sizing. Remove mapping to height & width separately in favor of using the existing "--spectrum-closebutton-size" property.
diff --git a/components/closebutton/index.css b/components/closebutton/index.css
index 7bb4c3b3a10..8210896ac5e 100644
--- a/components/closebutton/index.css
+++ b/components/closebutton/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/basebutton.css";
.spectrum-CloseButton {
@@ -30,40 +30,30 @@
--spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
}
-/* @deprecated .spectrum-Closebutton--sizeM */
.spectrum-CloseButton,
-.spectrum-CloseButton--sizeM,
-.spectrum-Closebutton--sizeM {
+.spectrum-CloseButton--sizeM {
--spectrum-closebutton-size: var(--spectrum-component-height-100);
--spectrum-closebutton-border-radius: var(--spectrum-component-height-100);
}
-/* @deprecated .spectrum-Closebutton--sizeS */
-.spectrum-CloseButton--sizeS,
-.spectrum-Closebutton--sizeS {
+.spectrum-CloseButton--sizeS {
--spectrum-closebutton-size: var(--spectrum-component-height-75);
--spectrum-closebutton-border-radius: var(--spectrum-component-height-75);
}
-/* @deprecated .spectrum-Closebutton--sizeL */
-.spectrum-CloseButton--sizeL,
-.spectrum-Closebutton--sizeL {
+.spectrum-CloseButton--sizeL {
--spectrum-closebutton-size: var(--spectrum-component-height-200);
--spectrum-closebutton-border-radius: var(--spectrum-component-height-200);
}
-/* @deprecated .spectrum-Closebutton--sizeXL */
-.spectrum-CloseButton--sizeXL,
-.spectrum-Closebutton--sizeXL {
+.spectrum-CloseButton--sizeXL {
--spectrum-closebutton-size: var(--spectrum-component-height-300);
--spectrum-closebutton-border-radius: var(--spectrum-component-height-300);
}
.spectrum-CloseButton--staticWhite {
--spectrum-closebutton-static-background-color-default: transparent;
- --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300);
- --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400);
- --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300);
+
--spectrum-closebutton-icon-color-default: var(--spectrum-white);
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
@@ -71,9 +61,7 @@
.spectrum-CloseButton--staticBlack {
--spectrum-closebutton-static-background-color-default: transparent;
- --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300);
- --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400);
- --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300);
+
--spectrum-closebutton-icon-color-default: var(--spectrum-black);
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
diff --git a/components/closebutton/metadata/metadata.json b/components/closebutton/metadata/metadata.json
index 6944b5d3956..acff1c6e58b 100644
--- a/components/closebutton/metadata/metadata.json
+++ b/components/closebutton/metadata/metadata.json
@@ -39,6 +39,8 @@
".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton.is-keyboardFocused:not(:disabled)",
".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
+ ".spectrum-CloseButton.spectrum-CloseButton--staticBlack",
+ ".spectrum-CloseButton.spectrum-CloseButton--staticWhite",
".spectrum-CloseButton::-moz-focus-inner",
".spectrum-CloseButton:after",
".spectrum-CloseButton:disabled",
@@ -55,10 +57,6 @@
".spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton:not(:disabled):hover",
".spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon",
- ".spectrum-Closebutton--sizeL",
- ".spectrum-Closebutton--sizeM",
- ".spectrum-Closebutton--sizeS",
- ".spectrum-Closebutton--sizeXL",
"a.spectrum-CloseButton"
],
"modifiers": [
@@ -125,9 +123,8 @@
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
"--spectrum-line-height-100",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
@@ -136,17 +133,23 @@
"--spectrum-sans-font-family-stack",
"--spectrum-static-black-focus-indicator-color",
"--spectrum-static-white-focus-indicator-color",
- "--spectrum-transparent-black-300",
"--spectrum-transparent-black-400",
- "--spectrum-transparent-white-300",
+ "--spectrum-transparent-black-500",
"--spectrum-transparent-white-400",
+ "--spectrum-transparent-white-500",
"--spectrum-white"
],
"system-theme": [
- "--system-spectrum-closebutton-background-color-default",
- "--system-spectrum-closebutton-background-color-down",
- "--system-spectrum-closebutton-background-color-focus",
- "--system-spectrum-closebutton-background-color-hover"
+ "--system-close-button-background-color-default",
+ "--system-close-button-background-color-down",
+ "--system-close-button-background-color-focus",
+ "--system-close-button-background-color-hover",
+ "--system-close-button-static-black-static-background-color-down",
+ "--system-close-button-static-black-static-background-color-focus",
+ "--system-close-button-static-black-static-background-color-hover",
+ "--system-close-button-static-white-static-background-color-down",
+ "--system-close-button-static-white-static-background-color-focus",
+ "--system-close-button-static-white-static-background-color-hover"
],
"passthroughs": [
"--mod-button-animation-duration",
diff --git a/components/closebutton/package.json b/components/closebutton/package.json
index 956935c2e2a..d59459fc3b2 100644
--- a/components/closebutton/package.json
+++ b/components/closebutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/closebutton",
- "version": "5.3.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS close button component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js
index c2950377b68..4bc1f005e21 100644
--- a/components/closebutton/stories/closebutton.stories.js
+++ b/components/closebutton/stories/closebutton.stories.js
@@ -46,6 +46,10 @@ export default {
actions: {
handles: ["click .spectrum-CloseButton"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13601-149",
+ },
packageJson,
metadata,
},
diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js
index 4e730b8529c..644ce705f62 100644
--- a/components/closebutton/stories/template.js
+++ b/components/closebutton/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { capitalize, upperCase } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-CloseButton",
diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css
index 5ade53f9b28..06a90e4fee9 100644
--- a/components/closebutton/themes/express.css
+++ b/components/closebutton/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-CloseButton {
--spectrum-closebutton-background-color-default: transparent;
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-300);
diff --git a/components/closebutton/themes/spectrum-two.css b/components/closebutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..01479c42fd4
--- /dev/null
+++ b/components/closebutton/themes/spectrum-two.css
@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-CloseButton {
+ --spectrum-closebutton-background-color-default: transparent;
+ --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-closebutton-background-color-down: var(--spectrum-gray-200);
+ --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100);
+
+ &.spectrum-CloseButton--staticWhite {
+ --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400);
+ }
+
+ &.spectrum-CloseButton--staticBlack {
+ --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400);
+ }
+ }
+}
diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css
index 84b1402f85c..62e907bae8a 100644
--- a/components/closebutton/themes/spectrum.css
+++ b/components/closebutton/themes/spectrum.css
@@ -11,11 +11,26 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-CloseButton {
- --spectrum-closebutton-background-color-default: transparent;
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-200);
--spectrum-closebutton-background-color-down: var(--spectrum-gray-300);
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-200);
+
+ &.spectrum-CloseButton--staticWhite {
+ --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300);
+ --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400);
+ --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300);
+ }
+
+ &.spectrum-CloseButton--staticBlack {
+ --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300);
+ --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400);
+ --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300);
+ }
}
}
diff --git a/components/coachindicator/CHANGELOG.md b/components/coachindicator/CHANGELOG.md
index a04bde7c1b0..c9f2a5fb72e 100644
--- a/components/coachindicator/CHANGELOG.md
+++ b/components/coachindicator/CHANGELOG.md
@@ -1,5 +1,184 @@
# Change Log
+## 3.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 3.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 3.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 3.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3041](https://github.com/adobe/spectrum-css/pull/3041) [`7be40c3`](https://github.com/adobe/spectrum-css/commit/7be40c334748f3e1064c614af793117f06146475) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - --mod properties were moved out of `coachindicator/themes/spectrum-two.css` into `coachindicator/index.css` so --mods can be applied at the component level.
+
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 2.2.0
### Minor Changes
@@ -12,6 +191,15 @@
- [#3266](https://github.com/adobe/spectrum-css/pull/3266) [`4b818e1`](https://github.com/adobe/spectrum-css/commit/4b818e1062202e404de1350938ce2a19146aa0b0) Thanks [@5t3ph](https://github.com/5t3ph)! - For Coach indicator, marks "light" and "dark" variants for deprecation going into S2, and adds "static white" per direction from design.
+- Updated dependencies [[`4b818e1`](https://github.com/adobe/spectrum-css/commit/4b818e1062202e404de1350938ce2a19146aa0b0)]:
+ - @spectrum-css/tokens@14.6.0
+
+## 2.1.5
+
+### Patch Changes
+
+- [#3266](https://github.com/adobe/spectrum-css/pull/3266) [`4b818e1`](https://github.com/adobe/spectrum-css/commit/4b818e1062202e404de1350938ce2a19146aa0b0) Thanks [@5t3ph](https://github.com/5t3ph)! - For Coach indicator, marks "light" and "dark" variants for deprecation going into S2, and adds "static white" per direction from design.
+
- Updated dependencies [[`4b818e1`](https://github.com/adobe/spectrum-css/commit/4b818e1062202e404de1350938ce2a19146aa0b0)]:
- @spectrum-css/tokens@14.6.0
@@ -35,6 +223,12 @@
- [#2842](https://github.com/adobe/spectrum-css/pull/2842) [`4cd3a15`](https://github.com/adobe/spectrum-css/commit/4cd3a15db914b667f5d606388051ecd2cd318134) Thanks [@castastrophe](https://github.com/castastrophe)! - Updated CSSNano plugin to toggle reduceIdent off to prevent invalid abstractions from breaking named grid templates.
+## 2.1.2
+
+### Patch Changes
+
+- [#2842](https://github.com/adobe/spectrum-css/pull/2842) [`4cd3a15`](https://github.com/adobe/spectrum-css/commit/4cd3a15db914b667f5d606388051ecd2cd318134) Thanks [@castastrophe](https://github.com/castastrophe)! - Updated CSSNano plugin to toggle reduceIdent off to prevent invalid abstractions from breaking named grid templates.
+
## 2.1.1
### Patch Changes
diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css
index 8ddc414d482..33e04d7a259 100644
--- a/components/coachindicator/index.css
+++ b/components/coachindicator/index.css
@@ -11,46 +11,11 @@
* governing permissions and limitations under the License.
*/
-@import "./animation.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-CoachIndicator {
- --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
- --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
- --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
- --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size);
- --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size);
- --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter);
- --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter);
-
- --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
- --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
-
- /* animation */
- --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
- --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
- --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66;
- --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1;
- --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
- --spectrum-coach-indicator-animation-name: pulse;
- --spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple);
-}
-
-.spectrum-CoachIndicator--quiet {
- --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
- --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
- --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
- --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
- --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
- --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
-
- --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
- --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
- --mod-coach-indicator-animation-name: pulse-quiet;
- --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple));
-}
+ --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white);
-.spectrum-CoachIndicator {
position: relative;
margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap));
@@ -61,6 +26,19 @@
block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size));
}
+.spectrum-CoachIndicator--quiet {
+ --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
+ --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
+ --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
+ --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
+ --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
+ --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
+
+ --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
+ --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
+ --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple));
+}
+
.spectrum-CoachIndicator-ring {
display: block;
position: absolute;
@@ -109,3 +87,37 @@
animation: none;
}
}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
+ }
+
+ 50% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
+ }
+
+ 100% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
+ }
+}
+
+@keyframes pulse-quiet {
+ 0% {
+ transform: scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
+ }
+
+ 50% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
+ }
+
+ 100% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
+ }
+}
diff --git a/components/coachindicator/metadata/metadata.json b/components/coachindicator/metadata/metadata.json
index 91af3d8616b..8798a870439 100644
--- a/components/coachindicator/metadata/metadata.json
+++ b/components/coachindicator/metadata/metadata.json
@@ -53,26 +53,24 @@
"--spectrum-coach-indicator-min-inline-size",
"--spectrum-coach-indicator-quiet-animation-keyframe-0-scale",
"--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple",
- "--spectrum-coach-indicator-quiet-ring-diameter",
+ "--spectrum-coach-indicator-quiet-ring-diameter-size",
"--spectrum-coach-indicator-ring-block-size",
"--spectrum-coach-indicator-ring-border-size",
"--spectrum-coach-indicator-ring-dark-color",
"--spectrum-coach-indicator-ring-default-color",
- "--spectrum-coach-indicator-ring-diameter",
"--spectrum-coach-indicator-ring-inline-size",
"--spectrum-coach-indicator-ring-light-color",
"--spectrum-coach-indicator-ring-static-white-color",
"--spectrum-coach-indicator-top"
],
"global": [
- "--spectrum-animation-duration-6000",
- "--spectrum-border-width-200",
"--spectrum-coach-animation-indicator-ring-center-delay-multiple",
"--spectrum-coach-animation-indicator-ring-duration",
- "--spectrum-coach-animation-indicator-ring-inner-delay-multiple",
- "--spectrum-coach-animation-indicator-ring-outer-delay-multiple"
+ "--spectrum-coach-animation-indicator-ring-outer-delay-multiple",
+ "--spectrum-gray-25",
+ "--spectrum-white"
],
- "system-theme": [],
+ "system-theme": ["--system-coach-indicator-ring-light-color"],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json
index 133a5c22db4..e4156311c2f 100644
--- a/components/coachindicator/package.json
+++ b/components/coachindicator/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/coachindicator",
- "version": "2.2.0",
+ "version": "3.0.0-s2-foundations.16",
"description": "The Spectrum CSS Coach Indicator component ",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js
index bef438a0f55..18cae14dafd 100644
--- a/components/coachindicator/stories/coachindicator.stories.js
+++ b/components/coachindicator/stories/coachindicator.stories.js
@@ -38,6 +38,10 @@ export default {
variant: "default",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=48600-896",
+ },
packageJson,
metadata,
},
diff --git a/components/coachindicator/stories/template.js b/components/coachindicator/stories/template.js
index db6af34db76..e5d53ec2dd6 100644
--- a/components/coachindicator/stories/template.js
+++ b/components/coachindicator/stories/template.js
@@ -4,6 +4,9 @@ import { classMap } from "lit-html/directives/class-map.js";
import { styleMap } from "lit-html/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-CoachIndicator",
@@ -12,23 +15,25 @@ export const Template = ({
variant,
customClasses = [],
customStyles = {},
-}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- style=${styleMap(customStyles)}
- >
- ${Array.from({ length: 3 }).map(() => html`
-
- `)}
-
({ ...a, [c]: true }), {}),
+ })}
+ style=${styleMap(customStyles)}
+ >
+ ${Array.from({ length: 3 }).map(() => html`
+
+ `)}
+
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-CoachIndicator {
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25);
+}
+}
diff --git a/components/coachindicator/themes/spectrum.css b/components/coachindicator/themes/spectrum.css
index 3b48a570c21..5ce7071197a 100644
--- a/components/coachindicator/themes/spectrum.css
+++ b/components/coachindicator/themes/spectrum.css
@@ -10,3 +10,13 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-CoachIndicator {
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
+ }
+}
diff --git a/components/coachmark/CHANGELOG.md b/components/coachmark/CHANGELOG.md
index 8f210092715..bba10ad458c 100644
--- a/components/coachmark/CHANGELOG.md
+++ b/components/coachmark/CHANGELOG.md
@@ -1,5 +1,300 @@
# Change Log
+## 8.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.21
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.15
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.15
+ - @spectrum-css/popover@8.0.0-s2-foundations.16
+ - @spectrum-css/button@14.0.0-s2-foundations.17
+ - @spectrum-css/menu@8.0.0-s2-foundations.15
+
+## 8.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.20
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.14
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.14
+ - @spectrum-css/popover@8.0.0-s2-foundations.15
+ - @spectrum-css/button@14.0.0-s2-foundations.16
+ - @spectrum-css/menu@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.13
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#3015](https://github.com/adobe/spectrum-css/pull/3015) [`db6f93d`](https://github.com/adobe/spectrum-css/commit/db6f93d6cb4b745a53a03a363284ac9e4f9cd46a) Thanks [@cdransf](https://github.com/cdransf)! - Move the coachmark modifiers out of the theme to the base index.css.
+
+### Patch Changes
+
+- Updated dependencies [[`f15243a`](https://github.com/adobe/spectrum-css/commit/f15243adaa633531e82edbb61b2e4444517af64e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.16
+
+## 8.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-239] passthroughs referencing global token values in index.css abstracted to define alias' in the coach mark theme file
+
+### Patch Changes
+
+- Updated dependencies [[`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f), [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.14
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.12
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.11
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.11
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.10
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.9
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.8
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.7
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.6
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.5
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.4
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.3
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.2
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.1
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.0
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.0
+
## 7.3.0
### Minor Changes
diff --git a/components/coachmark/index.css b/components/coachmark/index.css
index a987bc6984e..f4e44a80256 100644
--- a/components/coachmark/index.css
+++ b/components/coachmark/index.css
@@ -11,54 +11,19 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-CoachMark {
- --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width);
- --spectrum-coachmark-width: var(--spectrum-coach-mark-width);
- --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width);
-
- --spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height);
- --spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
-
- --spectrum-coachmark-border-size: var(--mod-popover-border-width);
- --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
-
- /* layout */
- --spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content);
- --spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300);
- --spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
- --spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);
-
- /* font */
- --spectrum-coachmark-title-color: var(--spectrum-heading-color);
- --spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font);
- --spectrum-coachmark-title-font-style: var(--spectrum-heading-serif-font-style);
- --spectrum-coachmark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-size);
- --spectrum-coachmark-title-text-line-height: var(--spectrum-heading-line-height);
-
- --spectrum-coachmark-content-font-color: var(--spectrum-body-color);
- --spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-coachmark-content-font-family: var(--spectrum-sans-serif-font);
- --spectrum-coachmark-content-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-coachmark-content-line-height: var(--spectrum-body-line-height);
- --spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-size);
-
- --spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color);
- --spectrum-coachmark-step-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-coachmark-step-font-family: var(--spectrum-sans-serif-font);
- --spectrum-coachmark-step-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-coachmark-step-line-height: var(--spectrum-body-line-height);
- --spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-size);
- --spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
-
- /* mods */
+ /* @passthrough start */
--mod-buttongroup-justify-content: flex-end;
- --mod-popover-border-width: var(--spectrum-border-width-100);
- --mod-popover-corner-radius: var(--spectrum-corner-radius-100);
+ --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width);
+ --mod-popover-corner-radius: var(--spectrum-coachmark-popover-corner-radius);
--mod-popover-content-area-spacing-vertical: 0;
--mod-button-edge-to-visual-only: 9px;
+ /* @passthrough end */
+
+ --spectrum-coachmark-border-size: var(--mod-popover-border-width);
+ --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
position: relative;
min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width));
@@ -71,7 +36,9 @@
}
.spectrum-CoachMark-buttongroup--mobile {
- --mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
+ /* @passthrough -- ButtonGroup */
+ --mod-buttongroup-spacing-horizontal: var(--spectrum-coachmark-buttongroup-spacing-horizontal);
+
display: var(--spectrum-coachmark-buttongroup-mobile-display);
}
diff --git a/components/coachmark/metadata/metadata.json b/components/coachmark/metadata/metadata.json
index c8f2d013465..f39743e1d57 100644
--- a/components/coachmark/metadata/metadata.json
+++ b/components/coachmark/metadata/metadata.json
@@ -48,22 +48,12 @@
"--mod-coachmark-width"
],
"component": [
- "--spectrum-coach-mark-body-size",
- "--spectrum-coach-mark-edge-to-content",
- "--spectrum-coach-mark-maximum-width",
- "--spectrum-coach-mark-media-height",
- "--spectrum-coach-mark-media-minimum-height",
- "--spectrum-coach-mark-minimum-width",
- "--spectrum-coach-mark-pagination-body-size",
- "--spectrum-coach-mark-pagination-color",
- "--spectrum-coach-mark-pagination-text-to-bottom-edge",
- "--spectrum-coach-mark-title-size",
- "--spectrum-coach-mark-width",
"--spectrum-coachmark-body-to-footer",
"--spectrum-coachmark-border-radius",
"--spectrum-coachmark-border-size",
"--spectrum-coachmark-buttongroup-display",
"--spectrum-coachmark-buttongroup-mobile-display",
+ "--spectrum-coachmark-buttongroup-spacing-horizontal",
"--spectrum-coachmark-content-font-color",
"--spectrum-coachmark-content-font-family",
"--spectrum-coachmark-content-font-size",
@@ -79,6 +69,8 @@
"--spectrum-coachmark-menu-mobile-display",
"--spectrum-coachmark-min-width",
"--spectrum-coachmark-padding",
+ "--spectrum-coachmark-popover-border-width",
+ "--spectrum-coachmark-popover-corner-radius",
"--spectrum-coachmark-step-color",
"--spectrum-coachmark-step-font-family",
"--spectrum-coachmark-step-font-size",
@@ -94,22 +86,7 @@
"--spectrum-coachmark-title-text-line-height",
"--spectrum-coachmark-width"
],
- "global": [
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-border-width-100",
- "--spectrum-corner-radius-100",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-heading-serif-font-style",
- "--spectrum-sans-serif-font",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300"
- ],
+ "global": [],
"system-theme": [],
"passthroughs": [
"--mod-button-edge-to-visual-only",
diff --git a/components/coachmark/package.json b/components/coachmark/package.json
index d9f385b5e20..c632093e2fe 100644
--- a/components/coachmark/package.json
+++ b/components/coachmark/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/coachmark",
- "version": "7.3.0",
+ "version": "8.0.0-s2-foundations.17",
"description": "The Spectrum CSS coachmark component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
index d488a335989..dc3d1971ed2 100644
--- a/components/coachmark/stories/coachmark.stories.js
+++ b/components/coachmark/stories/coachmark.stories.js
@@ -54,6 +54,10 @@ export default {
...(Menu.parameters?.actions?.handles ?? []),
],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=37804-254",
+ },
packageJson,
metadata,
docs: {
diff --git a/components/coachmark/stories/template.js b/components/coachmark/stories/template.js
index 0fe3760e017..3ff1f79f888 100644
--- a/components/coachmark/stories/template.js
+++ b/components/coachmark/stories/template.js
@@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const CoachContainer = ({
rootClass = "spectrum-CoachMark",
@@ -17,6 +20,7 @@ export const CoachContainer = ({
isOpen = false,
} = {}, context = {}) => {
const { globals = {} } = context;
+
const scale = globals.scale ?? "medium";
return html`
diff --git a/components/coachmark/themes/express.css b/components/coachmark/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/coachmark/themes/express.css
+++ b/components/coachmark/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/coachmark/themes/spectrum-two.css b/components/coachmark/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/coachmark/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/coachmark/themes/spectrum.css b/components/coachmark/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/coachmark/themes/spectrum.css
+++ b/components/coachmark/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorarea/CHANGELOG.md b/components/colorarea/CHANGELOG.md
index dd373046ceb..65a117be959 100644
--- a/components/colorarea/CHANGELOG.md
+++ b/components/colorarea/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.16
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/colorarea/index.css b/components/colorarea/index.css
index 3c83d4b484d..83594a02b5b 100644
--- a/components/colorarea/index.css
+++ b/components/colorarea/index.css
@@ -11,18 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-ColorArea {
- --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
- --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
- --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
- --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
- --spectrum-colorarea-height: var(--spectrum-color-area-height);
- --spectrum-colorarea-width: var(--spectrum-color-area-width);
- --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
- --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
-}
+@import "./themes/spectrum-two.css";
/* Windows High Contrast Mode */
@media (forced-colors: active) {
diff --git a/components/colorarea/metadata/metadata.json b/components/colorarea/metadata/metadata.json
index 700f0f3caf3..8e061d12d56 100644
--- a/components/colorarea/metadata/metadata.json
+++ b/components/colorarea/metadata/metadata.json
@@ -23,12 +23,6 @@
"--mod-colorarea-width"
],
"component": [
- "--spectrum-color-area-border-rounding",
- "--spectrum-color-area-border-width",
- "--spectrum-color-area-height",
- "--spectrum-color-area-minimum-height",
- "--spectrum-color-area-minimum-width",
- "--spectrum-color-area-width",
"--spectrum-colorarea-border-color",
"--spectrum-colorarea-border-radius",
"--spectrum-colorarea-border-width",
@@ -38,7 +32,7 @@
"--spectrum-colorarea-min-width",
"--spectrum-colorarea-width"
],
- "global": ["--spectrum-disabled-background-color"],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": [
diff --git a/components/colorarea/package.json b/components/colorarea/package.json
index 1fa61f7fe6e..5e16d37d8aa 100644
--- a/components/colorarea/package.json
+++ b/components/colorarea/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/colorarea",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS Color Area component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js
index 7b60fa3c46a..42cfccfc8f6 100644
--- a/components/colorarea/stories/colorarea.stories.js
+++ b/components/colorarea/stories/colorarea.stories.js
@@ -41,6 +41,10 @@ export default {
selectedColor: "rgba(255, 0, 0, 1)",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36734-2573",
+ },
packageJson,
metadata,
},
diff --git a/components/colorarea/stories/template.js b/components/colorarea/stories/template.js
index 35a66e3cc69..541357db203 100644
--- a/components/colorarea/stories/template.js
+++ b/components/colorarea/stories/template.js
@@ -4,6 +4,9 @@ import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ColorArea",
@@ -16,6 +19,7 @@ export const Template = ({
selectedColor = "rgba(255, 0, 0, 1)",
} = {}, context = {}) => {
const { updateArgs } = context;
+
return html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/colorarea/themes/spectrum.css b/components/colorarea/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/colorarea/themes/spectrum.css
+++ b/components/colorarea/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorhandle/CHANGELOG.md b/components/colorhandle/CHANGELOG.md
index 48c13f14659..8accf730025 100644
--- a/components/colorhandle/CHANGELOG.md
+++ b/components/colorhandle/CHANGELOG.md
@@ -1,5 +1,220 @@
# Change Log
+## 9.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.15
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.15
+
+## 9.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.14
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 9.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 9.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3016](https://github.com/adobe/spectrum-css/pull/3016) [`9dd8558`](https://github.com/adobe/spectrum-css/commit/9dd85581dff69b051a16a3b71054fa65334d106b) Thanks [@cdransf](https://github.com/cdransf)! - Move the color handle passthrough modifiers out of the theme to the base index.css.
+
+## 9.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.12
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 9.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.11
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 9.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.10
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 9.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.9
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 9.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.8
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 9.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.7
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 9.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.6
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.6
+
+## 9.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.5
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 9.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.4
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 9.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.3
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 9.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.2
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.1
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 9.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.0
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.0
+
## 8.2.0
### Minor Changes
@@ -18,6 +233,15 @@
- [#3271](https://github.com/adobe/spectrum-css/pull/3271) [`055906c`](https://github.com/adobe/spectrum-css/commit/055906cddb04bdf34ac64125d95a63697b922760) Thanks [@cdransf](https://github.com/cdransf)! - Disables lint violation and moves comment to stylelint-disable description.
+- Updated dependencies [[`a354b16`](https://github.com/adobe/spectrum-css/commit/a354b166727fb34b17300bcd3a6118a00034e344)]:
+ - @spectrum-css/colorloupe@5.1.4
+
+## 8.1.4
+
+### Patch Changes
+
+- [#3271](https://github.com/adobe/spectrum-css/pull/3271) [`055906c`](https://github.com/adobe/spectrum-css/commit/055906cddb04bdf34ac64125d95a63697b922760) Thanks [@cdransf](https://github.com/cdransf)! - Disables lint violation and moves comment to stylelint-disable description.
+
- Updated dependencies [[`a354b16`](https://github.com/adobe/spectrum-css/commit/a354b166727fb34b17300bcd3a6118a00034e344)]:
- @spectrum-css/colorloupe@5.1.4
diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css
index dc1b901bfe7..79e9f3858a6 100644
--- a/components/colorhandle/index.css
+++ b/components/colorhandle/index.css
@@ -11,34 +11,12 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-ColorHandle {
- --spectrum-colorhandle-size: var(--spectrum-color-handle-size);
- --spectrum-colorhandle-focused-size: var(--spectrum-color-handle-size-key-focus);
- --spectrum-colorhandle-hitarea-size: var(--spectrum-color-control-track-width);
-
- --spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-colorhandle-animation-easing: ease-in-out;
-
- /* outer border as box shadow on the colorhandle */
- --spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
- --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);
-
- /* inner border as inset boxshadow on the colorhandle-inner */
- --spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */
- --spectrum-colorhandle-inner-border-width: var(--spectrum-color-handle-inner-border-width);
-
- /* primary border on color handle */
- --spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width);
- --spectrum-colorhandle-border-color: var(--spectrum-white);
-
- --spectrum-colorhandle-border-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-colorhandle-fill-color-disabled: var(--spectrum-disabled-background-color);
+ /* @passthrough -- opacity checkerboard customization */
--mod-opacity-checkerboard-position: 50%;
-}
-.spectrum-ColorHandle {
display: block;
position: absolute;
z-index: 1; /* Be above */
@@ -57,6 +35,8 @@
border-radius: 100%;
+ transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing));
+
&::after {
content: "";
inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2));
@@ -68,8 +48,6 @@
border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%);
}
- transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing));
-
&.is-focused,
&:focus-visible {
/* Bigger handle when focused */
diff --git a/components/colorhandle/metadata/metadata.json b/components/colorhandle/metadata/metadata.json
index 93493517b91..c6995853964 100644
--- a/components/colorhandle/metadata/metadata.json
+++ b/components/colorhandle/metadata/metadata.json
@@ -26,13 +26,6 @@
"--mod-colorhandle-size"
],
"component": [
- "--spectrum-color-handle-border-width",
- "--spectrum-color-handle-inner-border-opacity",
- "--spectrum-color-handle-inner-border-width",
- "--spectrum-color-handle-outer-border-opacity",
- "--spectrum-color-handle-outer-border-width",
- "--spectrum-color-handle-size",
- "--spectrum-color-handle-size-key-focus",
"--spectrum-colorhandle-animation-duration",
"--spectrum-colorhandle-animation-easing",
"--spectrum-colorhandle-border-color",
@@ -47,15 +40,7 @@
"--spectrum-colorhandle-outer-border-width",
"--spectrum-colorhandle-size"
],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-black-rgb",
- "--spectrum-color-control-track-width",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-picked-color",
- "--spectrum-white"
- ],
+ "global": ["--spectrum-picked-color"],
"system-theme": [],
"passthroughs": ["--mod-opacity-checkerboard-position"],
"high-contrast": [
diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json
index a68a5f24382..dc9849f358a 100644
--- a/components/colorhandle/package.json
+++ b/components/colorhandle/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/colorhandle",
- "version": "8.2.0",
+ "version": "9.0.0-s2-foundations.16",
"description": "The Spectrum CSS Color Handle component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js
index cf7efb835fa..ca40a79fc5d 100644
--- a/components/colorhandle/stories/colorhandle.stories.js
+++ b/components/colorhandle/stories/colorhandle.stories.js
@@ -46,6 +46,10 @@ export default {
}
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13065-162",
+ },
packageJson,
metadata,
},
diff --git a/components/colorhandle/stories/template.js b/components/colorhandle/stories/template.js
index 12bb5cdb7dc..bc97938bbd8 100644
--- a/components/colorhandle/stories/template.js
+++ b/components/colorhandle/stories/template.js
@@ -5,6 +5,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ColorHandle",
diff --git a/components/colorhandle/themes/express.css b/components/colorhandle/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/colorhandle/themes/express.css
+++ b/components/colorhandle/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/colorhandle/themes/spectrum-two.css b/components/colorhandle/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/colorhandle/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/colorhandle/themes/spectrum.css b/components/colorhandle/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/colorhandle/themes/spectrum.css
+++ b/components/colorhandle/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorloupe/CHANGELOG.md b/components/colorloupe/CHANGELOG.md
index f911d4dc104..c8712286181 100644
--- a/components/colorloupe/CHANGELOG.md
+++ b/components/colorloupe/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
@@ -12,6 +185,12 @@
- [#3272](https://github.com/adobe/spectrum-css/pull/3272) [`a354b16`](https://github.com/adobe/spectrum-css/commit/a354b166727fb34b17300bcd3a6118a00034e344) Thanks [@cdransf](https://github.com/cdransf)! - Disables lint violation and moves comment to stylelint-disable description.
+## 5.1.4
+
+### Patch Changes
+
+- [#3272](https://github.com/adobe/spectrum-css/pull/3272) [`a354b16`](https://github.com/adobe/spectrum-css/commit/a354b166727fb34b17300bcd3a6118a00034e344) Thanks [@cdransf](https://github.com/cdransf)! - Disables lint violation and moves comment to stylelint-disable description.
+
## 5.1.3
### Patch Changes
diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css
index 019f406aace..779d85c3ce0 100644
--- a/components/colorloupe/index.css
+++ b/components/colorloupe/index.css
@@ -11,28 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-ColorLoupe {
- --spectrum-colorloupe-width: var(--spectrum-color-loupe-width);
- --spectrum-colorloupe-height: var(--spectrum-color-loupe-height);
-
- --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle);
- --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */
-
- --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x);
- --spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y);
- --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur);
- --spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color);
-
- --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width);
- --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width);
- --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border);
- --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border);
-
- --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
- --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
-}
+@import "./themes/spectrum-two.css";
.spectrum-ColorLoupe {
inline-size: var(--spectrum-colorloupe-width);
@@ -45,9 +24,7 @@
inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)));
inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2));
- transition:
- transform 100ms ease-in-out,
- opacity 125ms ease-in-out;
+ transition: transform 100ms ease-in-out, opacity 125ms ease-in-out;
pointer-events: none;
filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color)));
diff --git a/components/colorloupe/metadata/metadata.json b/components/colorloupe/metadata/metadata.json
index 4b3ff629453..eb7707805bc 100644
--- a/components/colorloupe/metadata/metadata.json
+++ b/components/colorloupe/metadata/metadata.json
@@ -24,16 +24,6 @@
"--mod-colorloupe-outer-border-width"
],
"component": [
- "--spectrum-color-loupe-bottom-to-color-handle",
- "--spectrum-color-loupe-drop-shadow-blur",
- "--spectrum-color-loupe-drop-shadow-color",
- "--spectrum-color-loupe-drop-shadow-y",
- "--spectrum-color-loupe-height",
- "--spectrum-color-loupe-inner-border",
- "--spectrum-color-loupe-inner-border-width",
- "--spectrum-color-loupe-outer-border",
- "--spectrum-color-loupe-outer-border-width",
- "--spectrum-color-loupe-width",
"--spectrum-colorloupe-animation-distance",
"--spectrum-colorloupe-checkerboard-dark-color",
"--spectrum-colorloupe-checkerboard-fill",
@@ -53,9 +43,6 @@
"global": [
"--spectrum-color-handle-outer-border-width",
"--spectrum-color-handle-size",
- "--spectrum-drop-shadow-x",
- "--spectrum-opacity-checkerboard-square-dark",
- "--spectrum-opacity-checkerboard-square-light",
"--spectrum-picked-color"
],
"system-theme": [],
diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json
index 5873ba621c0..cc45d6ec3fc 100644
--- a/components/colorloupe/package.json
+++ b/components/colorloupe/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/colorloupe",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS Color Loupe component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/colorloupe/stories/template.js b/components/colorloupe/stories/template.js
index 0205238614a..8f3a3989b48 100644
--- a/components/colorloupe/stories/template.js
+++ b/components/colorloupe/stories/template.js
@@ -3,6 +3,9 @@ import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ColorLoupe",
@@ -11,7 +14,8 @@ export const Template = ({
customStyles = {},
customClasses = [],
selectedColor = "rgba(255, 0, 0, 0.5)",
-} = {}) => svg`
+} = {}) => {
+ return svg`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/colorloupe/themes/spectrum.css b/components/colorloupe/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/colorloupe/themes/spectrum.css
+++ b/components/colorloupe/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorslider/CHANGELOG.md b/components/colorslider/CHANGELOG.md
index 7106737fee3..4eead34fc02 100644
--- a/components/colorslider/CHANGELOG.md
+++ b/components/colorslider/CHANGELOG.md
@@ -1,5 +1,225 @@
# Change Log
+## 7.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.15
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.16
+
+## 7.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.14
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3017](https://github.com/adobe/spectrum-css/pull/3017) [`2715979`](https://github.com/adobe/spectrum-css/commit/2715979ffef5eda39cf2701d0cccd18efd94136c) Thanks [@cdransf](https://github.com/cdransf)! - Move the color slider passthrough modifiers out of the theme to the base index.css.
+
+### Patch Changes
+
+- Updated dependencies [[`9dd8558`](https://github.com/adobe/spectrum-css/commit/9dd85581dff69b051a16a3b71054fa65334d106b)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.12
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.11
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.10
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.9
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.8
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.7
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.6
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.5
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.4
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.3
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.2
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.1
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.0
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
@@ -24,6 +244,18 @@
- [#3284](https://github.com/adobe/spectrum-css/pull/3284) [`cc9afaa`](https://github.com/adobe/spectrum-css/commit/cc9afaaf4ac1aa9311028307c0a18c25d12c0193) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violations by removing unused custom properties.
+## 6.1.5
+
+### Patch Changes
+
+- [#3300](https://github.com/adobe/spectrum-css/pull/3300) [`89797d0`](https://github.com/adobe/spectrum-css/commit/89797d0324bcbf2195a28840ce87ed6959da24a5) Thanks [@castastrophe](https://github.com/castastrophe)! - Remove duplicate references
+
+## 6.1.4
+
+### Patch Changes
+
+- [#3284](https://github.com/adobe/spectrum-css/pull/3284) [`cc9afaa`](https://github.com/adobe/spectrum-css/commit/cc9afaaf4ac1aa9311028307c0a18c25d12c0193) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violations by removing unused custom properties.
+
## 6.1.3
### Patch Changes
diff --git a/components/colorslider/index.css b/components/colorslider/index.css
index b9ed2d5598c..4089af516a6 100644
--- a/components/colorslider/index.css
+++ b/components/colorslider/index.css
@@ -11,9 +11,9 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
- @media (forced-colors: active) {
+@media (forced-colors: active) {
.spectrum-ColorSlider {
--highcontrast-color-slider-border-color: CanvasText;
--highcontrast-color-slider-border-color-disabled: GrayText;
@@ -23,10 +23,7 @@
}
.spectrum-ColorSlider {
- /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
- --spectrum-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
-
- /* Settings for nested Color handle */
+ /* @passthrough -- settings for nested color handle */
--mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
position: relative;
diff --git a/components/colorslider/metadata/metadata.json b/components/colorslider/metadata/metadata.json
index c28f43e96de..5d4e8050bd5 100644
--- a/components/colorslider/metadata/metadata.json
+++ b/components/colorslider/metadata/metadata.json
@@ -34,7 +34,6 @@
"component": [
"--spectrum-color-slider-border-color-local",
"--spectrum-color-slider-border-color-rgba",
- "--spectrum-color-slider-border-opacity",
"--spectrum-color-slider-border-rounding",
"--spectrum-color-slider-border-width",
"--spectrum-color-slider-length",
@@ -42,8 +41,7 @@
],
"global": [
"--spectrum-color-control-track-width",
- "--spectrum-disabled-background-color",
- "--spectrum-gray-900-rgb"
+ "--spectrum-disabled-background-color"
],
"system-theme": [],
"passthroughs": ["--mod-colorhandle-hitarea-border-radius"],
diff --git a/components/colorslider/package.json b/components/colorslider/package.json
index 889c092b831..792bd36f347 100644
--- a/components/colorslider/package.json
+++ b/components/colorslider/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/colorslider",
- "version": "6.2.0",
+ "version": "7.0.0-s2-foundations.16",
"description": "The Spectrum CSS Color slider component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js
index 9a700339f4a..3b0f296c566 100644
--- a/components/colorslider/stories/colorslider.stories.js
+++ b/components/colorslider/stories/colorslider.stories.js
@@ -50,6 +50,10 @@ export default {
selectedColor: "rgba(255, 0, 0, 1)",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36740-137",
+ },
packageJson,
metadata,
},
diff --git a/components/colorslider/stories/template.js b/components/colorslider/stories/template.js
index 821f05c9839..b3bfb4bf4c5 100644
--- a/components/colorslider/stories/template.js
+++ b/components/colorslider/stories/template.js
@@ -6,6 +6,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ColorSlider",
@@ -28,6 +31,7 @@ export const Template = ({
colorHandleStyle = {},
} = {}, context = {}) => {
const { updateArgs } = context;
+
return html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/colorslider/themes/spectrum.css b/components/colorslider/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/colorslider/themes/spectrum.css
+++ b/components/colorslider/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorwheel/CHANGELOG.md b/components/colorwheel/CHANGELOG.md
index a9a9c3a50ea..6328e917cee 100644
--- a/components/colorwheel/CHANGELOG.md
+++ b/components/colorwheel/CHANGELOG.md
@@ -1,5 +1,230 @@
# Change Log
+## 5.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.16
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.15
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.15
+
+## 5.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.15
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.14
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 5.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.14
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.13
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.12
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.12
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.11
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.11
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.10
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.10
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.9
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.9
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.8
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.8
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.7
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.7
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.6
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.6
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.5
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.5
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.4
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.4
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.3
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.3
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.2
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.2
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.1
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.1
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.0
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.0
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.0
+
## 4.2.0
### Minor Changes
@@ -19,6 +244,16 @@
- [#3273](https://github.com/adobe/spectrum-css/pull/3273) [`c6205bb`](https://github.com/adobe/spectrum-css/commit/c6205bb247c9c56bb3d7cf8bd52c032fe3b9486f) Thanks [@cdransf](https://github.com/cdransf)! - Moves custom properties to resolve declaration order lint violation. Disable unused property violation and add comment as disable statement description.
+- Updated dependencies [[`055906c`](https://github.com/adobe/spectrum-css/commit/055906cddb04bdf34ac64125d95a63697b922760), [`a354b16`](https://github.com/adobe/spectrum-css/commit/a354b166727fb34b17300bcd3a6118a00034e344)]:
+ - @spectrum-css/colorhandle@8.1.4
+ - @spectrum-css/colorloupe@5.1.4
+
+## 4.1.4
+
+### Patch Changes
+
+- [#3273](https://github.com/adobe/spectrum-css/pull/3273) [`c6205bb`](https://github.com/adobe/spectrum-css/commit/c6205bb247c9c56bb3d7cf8bd52c032fe3b9486f) Thanks [@cdransf](https://github.com/cdransf)! - Moves custom properties to resolve declaration order lint violation. Disable unused property violation and add comment as disable statement description.
+
- Updated dependencies [[`055906c`](https://github.com/adobe/spectrum-css/commit/055906cddb04bdf34ac64125d95a63697b922760), [`a354b16`](https://github.com/adobe/spectrum-css/commit/a354b166727fb34b17300bcd3a6118a00034e344)]:
- @spectrum-css/colorhandle@8.1.4
- @spectrum-css/colorloupe@5.1.4
diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css
index 6a69e250074..0a1326191b7 100644
--- a/components/colorwheel/index.css
+++ b/components/colorwheel/index.css
@@ -11,36 +11,23 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-ColorWheel {
- --spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
- --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
- --spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
- --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200);
- --spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
- --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
- --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
- --spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2));
-}
+@import "./themes/spectrum-two.css";
/* Windows High Contrast Mode */
@media (forced-colors: active) {
.spectrum-ColorWheel {
--highcontrast-colorwheel-border-color-disabled: GrayText;
--highcontrast-colorwheel-fill-color-disabled: Canvas;
- }
- .spectrum-ColorWheel {
forced-color-adjust: none;
}
}
.spectrum-ColorWheel {
- /* stylelint-disable spectrum-tools/no-unused-custom-properties, custom-property-pattern -- --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */
- --track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
- --border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));
+ /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
+ --_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
+ /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
+ --_border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));
position: relative;
display: block;
diff --git a/components/colorwheel/metadata/metadata.json b/components/colorwheel/metadata/metadata.json
index 1be9fe86c07..587bf28580c 100644
--- a/components/colorwheel/metadata/metadata.json
+++ b/components/colorwheel/metadata/metadata.json
@@ -31,9 +31,6 @@
"--mod-colorwheel-width"
],
"component": [
- "--spectrum-color-wheel-color-area-margin",
- "--spectrum-color-wheel-minimum-width",
- "--spectrum-color-wheel-width",
"--spectrum-colorwheel-border-color",
"--spectrum-colorwheel-border-width",
"--spectrum-colorwheel-colorarea-container-size",
@@ -47,12 +44,7 @@
"--spectrum-colorwheel-track-width",
"--spectrum-colorwheel-width"
],
- "global": [
- "--spectrum-border-width-100",
- "--spectrum-color-control-track-width",
- "--spectrum-disabled-background-color",
- "--spectrum-transparent-black-200"
- ],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": [
diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json
index 71e4df7db54..be87ca46116 100644
--- a/components/colorwheel/package.json
+++ b/components/colorwheel/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/colorwheel",
- "version": "4.2.0",
+ "version": "5.0.0-s2-foundations.15",
"description": "The Spectrum CSS Color Area component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js
index fad4aa97461..9d21a4388a5 100644
--- a/components/colorwheel/stories/colorwheel.stories.js
+++ b/components/colorwheel/stories/colorwheel.stories.js
@@ -42,6 +42,10 @@ export default {
selectedColor: "rgba(255, 0, 0, 50%)",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=20606-73",
+ },
packageJson,
metadata,
},
diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js
index 1d02f5e7823..851150ffd37 100644
--- a/components/colorwheel/stories/template.js
+++ b/components/colorwheel/stories/template.js
@@ -5,6 +5,9 @@ import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ColorWheel",
diff --git a/components/colorwheel/themes/express.css b/components/colorwheel/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/colorwheel/themes/express.css
+++ b/components/colorwheel/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/colorwheel/themes/spectrum-two.css b/components/colorwheel/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/colorwheel/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/colorwheel/themes/spectrum.css b/components/colorwheel/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/colorwheel/themes/spectrum.css
+++ b/components/colorwheel/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/combobox/CHANGELOG.md b/components/combobox/CHANGELOG.md
index f496906900d..87f264b298f 100644
--- a/components/combobox/CHANGELOG.md
+++ b/components/combobox/CHANGELOG.md
@@ -1,5 +1,307 @@
# Change Log
+## 4.0.0-s2-foundations.18
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.15
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.16
+ - @spectrum-css/textfield@8.0.0-s2-foundations.16
+ - @spectrum-css/popover@8.0.0-s2-foundations.16
+ - @spectrum-css/menu@8.0.0-s2-foundations.15
+
+## 4.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.14
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.15
+ - @spectrum-css/textfield@8.0.0-s2-foundations.15
+ - @spectrum-css/popover@8.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 4.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0) Thanks [@pfulton](https://github.com/pfulton)! - ActionButton:
+
+ - Correct --spectrum-actionbutton-background-color-selected-disabled to be --spectrum-actionbutton-(background|border)-color-disabled-selected
+
+ Combobox:
+
+ - Move --spectrum-combobox-min-inline-size and --spectrum-combobox-button-width to the index.css
+
+ FieldGroup:
+
+ - Swap gap back to margin-inline-end on FieldGroup
+
+ Typography:
+
+ - Remap body size to xs if xxs provided
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9ae725f`](https://github.com/adobe/spectrum-css/commit/9ae725f10ebbb78b62070c4c477cb41cfc1b1ed6) Thanks [@pfulton](https://github.com/pfulton)! - Combobox moved the quiet min-inline-size property to index.css from theme to pick up the t-shirt sizing for the calc.
+
+ Typography increases specificity for the t-shirt sizing.
+
+ Stepper fixes for the disabled + hovered states as well as regressions fixed for the quiet variant.
+
+## 4.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.13
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.14
+ - @spectrum-css/textfield@8.0.0-s2-foundations.14
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#3036](https://github.com/adobe/spectrum-css/pull/3036) [`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - [CSS-890]: adjusts --mods to be applied inside of index.css
+
+### Patch Changes
+
+- Updated dependencies [[`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.18
+
+## 4.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a0d6de4`](https://github.com/adobe/spectrum-css/commit/a0d6de45845c9158ca30da1a34e30461a9d0af31) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-240] Quiet combobox picker button should have transparent borders
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.12
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.12
+ - @spectrum-css/textfield@8.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.11
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.11
+ - @spectrum-css/textfield@8.0.0-s2-foundations.11
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.10
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.10
+ - @spectrum-css/textfield@8.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.9
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.9
+ - @spectrum-css/textfield@8.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.8
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.8
+ - @spectrum-css/textfield@8.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.7
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.7
+ - @spectrum-css/textfield@8.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.6
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.6
+ - @spectrum-css/textfield@8.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.5
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.5
+ - @spectrum-css/textfield@8.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.4
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.4
+ - @spectrum-css/textfield@8.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.3
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.3
+ - @spectrum-css/textfield@8.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.2
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.2
+ - @spectrum-css/textfield@8.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.1
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.1
+ - @spectrum-css/textfield@8.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.0
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.0
+ - @spectrum-css/textfield@8.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.2.0
### Minor Changes
diff --git a/components/combobox/index.css b/components/combobox/index.css
index 4a7c2ae3906..25d1cf0f785 100644
--- a/components/combobox/index.css
+++ b/components/combobox/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Combobox {
--spectrum-combobox-inline-size: var(--spectrum-field-width);
diff --git a/components/combobox/metadata/metadata.json b/components/combobox/metadata/metadata.json
index 1d540154453..497d826492f 100644
--- a/components/combobox/metadata/metadata.json
+++ b/components/combobox/metadata/metadata.json
@@ -231,12 +231,9 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-400",
"--spectrum-gray-50",
"--spectrum-gray-500",
"--spectrum-gray-600",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-negative-border-color-default",
"--spectrum-negative-border-color-focus",
@@ -249,11 +246,11 @@
"--spectrum-workflow-icon-size-75"
],
"system-theme": [
- "--system-spectrum-combobox-border-color-default",
- "--system-spectrum-combobox-border-color-focus",
- "--system-spectrum-combobox-border-color-focus-hover",
- "--system-spectrum-combobox-border-color-hover",
- "--system-spectrum-combobox-border-color-key-focus"
+ "--system-combobox-border-color-default",
+ "--system-combobox-border-color-focus",
+ "--system-combobox-border-color-focus-hover",
+ "--system-combobox-border-color-hover",
+ "--system-combobox-border-color-key-focus"
],
"passthroughs": [
"--mod-picker-button-background-color",
diff --git a/components/combobox/package.json b/components/combobox/package.json
index b4accea6424..ca06d40da05 100644
--- a/components/combobox/package.json
+++ b/components/combobox/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/combobox",
- "version": "3.2.0",
+ "version": "4.0.0-s2-foundations.18",
"description": "The Spectrum CSS combobox component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js
index 11e8123be01..73bafe45e9d 100644
--- a/components/combobox/stories/combobox.stories.js
+++ b/components/combobox/stories/combobox.stories.js
@@ -137,6 +137,10 @@ export default {
],
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=727-2550",
+ },
packageJson,
metadata,
},
diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js
index 58550951fb0..cee730595a4 100644
--- a/components/combobox/stories/template.js
+++ b/components/combobox/stories/template.js
@@ -10,6 +10,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
const Combobox = ({
rootClass = "spectrum-Combobox",
diff --git a/components/combobox/themes/express.css b/components/combobox/themes/express.css
index 96606718a8c..4b554c207db 100644
--- a/components/combobox/themes/express.css
+++ b/components/combobox/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Combobox {
--spectrum-combobox-border-color-default: var(--spectrum-gray-400);
--spectrum-combobox-border-color-hover: var(--spectrum-gray-500);
diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css
new file mode 100644
index 00000000000..c7323724a51
--- /dev/null
+++ b/components/combobox/themes/spectrum-two.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Combobox {
+ --spectrum-combobox-border-color-default: var(--spectrum-gray-500);
+ --spectrum-combobox-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-combobox-border-color-focus: var(--spectrum-gray-500);
+ --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600);
+ --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600);
+ }
+}
diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css
index 31c5e848d42..3d81bc564b5 100644
--- a/components/combobox/themes/spectrum.css
+++ b/components/combobox/themes/spectrum.css
@@ -11,12 +11,6 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Combobox {
- --spectrum-combobox-border-color-default: var(--spectrum-gray-500);
- --spectrum-combobox-border-color-hover: var(--spectrum-gray-600);
- --spectrum-combobox-border-color-focus: var(--spectrum-gray-500);
- --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600);
- --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600);
- }
-}
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/commons/CHANGELOG.md b/components/commons/CHANGELOG.md
index a1221c1b9b1..7726ef23a9b 100644
--- a/components/commons/CHANGELOG.md
+++ b/components/commons/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 11.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 11.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 11.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 11.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 11.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 11.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 11.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 11.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 11.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 11.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 11.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 11.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 11.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 11.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 11.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 11.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 10.1.0
### Minor Changes
diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css
index 4d16c2fac24..3d64ab574e0 100644
--- a/components/commons/basebutton.css
+++ b/components/commons/basebutton.css
@@ -32,6 +32,11 @@
/* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
+ -webkit-font-smoothing: antialiased;
+
+ /* Font smoothing for Firefox */
+ -moz-osx-font-smoothing: grayscale;
+
/* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
text-decoration: none;
@@ -53,10 +58,7 @@
color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- /* Remove the inner border and padding in Firefox (normalize). */
+ /* Fix Firefox */
&::-moz-focus-inner {
border-style: none;
padding: 0;
@@ -89,13 +91,11 @@
display: block;
- /* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */
- margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1);
+ margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)));
- /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
transition:
- opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out,
- margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out;
+ opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out,
+ margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out;
}
&:focus-visible::after {
diff --git a/components/commons/overlay.css b/components/commons/overlay.css
index c3a57da85dd..fc40b564b05 100644
--- a/components/commons/overlay.css
+++ b/components/commons/overlay.css
@@ -13,7 +13,7 @@
/* TODO: replace legacy animation variables with core tokens when available */
-/** @note used in modal, popover, quickaction, tooltip, underlay */
+/** @note used in modal, tooltip, underlay */
%spectrum-overlay {
pointer-events: none;
visibility: hidden;
@@ -24,30 +24,10 @@
visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
}
-/** @note used in modal, popover, quickaction, tooltip, underlay */
+/** @note used in modal, tooltip, underlay */
%spectrum-overlay--open {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0ms));
}
-
-/** @note currently unused */
-%spectrum-overlay--bottom--open {
- transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
-}
-
-/** @note currently unused */
-%spectrum-overlay--top--open {
- transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
-}
-
-/** @note used in quickaction */
-%spectrum-overlay--right--open {
- transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
-}
-
-/** @note used in quickaction */
-%spectrum-overlay--left--open {
- transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
-}
diff --git a/components/commons/package.json b/components/commons/package.json
index 2e480bf4bb2..41b3cc2b2fa 100644
--- a/components/commons/package.json
+++ b/components/commons/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/commons",
- "version": "10.1.0",
+ "version": "11.0.0-s2-foundations.15",
"description": "Common mixins for Spectrum CSS components",
"license": "Apache-2.0",
"author": "Adobe",
@@ -14,6 +14,13 @@
"url": "https://github.com/adobe/spectrum-css/issues"
},
"main": "index.css",
+ "exports": {
+ ".": "./index.css",
+ "./CHANGELOG.md": "./CHANGELOG.md",
+ "./README.md": "./README.md",
+ "./*.css": "./*.css",
+ "./package.json": "./package.json"
+ },
"peerDependencies": {
"@spectrum-css/tokens": ">=14"
},
diff --git a/components/contextualhelp/CHANGELOG.md b/components/contextualhelp/CHANGELOG.md
index 81f65ec8e02..967cf94587c 100644
--- a/components/contextualhelp/CHANGELOG.md
+++ b/components/contextualhelp/CHANGELOG.md
@@ -1,5 +1,241 @@
# Change Log
+## 4.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1da2494`](https://github.com/adobe/spectrum-css/commit/1da249479a0014287a6124dc0f900ee99ab6b946) Thanks [@pfulton](https://github.com/pfulton)! - added contextual-help-content-spacing custom property definition
+
+### Patch Changes
+
+- Updated dependencies [[`1da2494`](https://github.com/adobe/spectrum-css/commit/1da249479a0014287a6124dc0f900ee99ab6b946)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.23
+
+## 4.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.21
+ - @spectrum-css/popover@8.0.0-s2-foundations.16
+ - @spectrum-css/link@6.0.0-s2-foundations.15
+
+## 4.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.20
+ - @spectrum-css/popover@8.0.0-s2-foundations.15
+ - @spectrum-css/link@6.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/link@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/link@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/link@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/link@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/link@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/link@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/link@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/link@6.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/link@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/link@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/link@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/link@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/link@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/link@6.0.0-s2-foundations.0
+
## 3.3.0
### Minor Changes
@@ -21,6 +257,17 @@
### Patch Changes
+- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
+ - @spectrum-css/tokens@14.5.0
+
+## 3.2.0
+
+### Minor Changes
+
+- [#3253](https://github.com/adobe/spectrum-css/pull/3253) [`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86) Thanks [@castastrophe](https://github.com/castastrophe)! - This update removes tokens defined locally that belonged in the global scope. To ensure no regressions, please upgrade your @spectrum-css/tokens package at the same time so you will pick up the component-level definitions now in the global tokens scope. References to `.spectrum--(light|dark|darkest|medium|large)` have been removed.
+
+### Patch Changes
+
- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
- @spectrum-css/tokens@14.5.0
diff --git a/components/contextualhelp/index.css b/components/contextualhelp/index.css
index 21cdfa4c8be..943e81dc845 100644
--- a/components/contextualhelp/index.css
+++ b/components/contextualhelp/index.css
@@ -11,18 +11,9 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-ContextualHelp {
- /* Layout Variables */
- --spectrum-contextual-help-padding: var(--spectrum-spacing-400);
- --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300);
-
- /* Typography Variables */
- --spectrum-contextual-help-heading-size: var(--spectrum-contextual-help-title-size);
- --spectrum-contextual-help-heading-color: var(--spectrum-heading-color);
- --spectrum-contextual-help-body-color: var(--spectrum-body-color);
-
position: relative;
min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width));
}
diff --git a/components/contextualhelp/metadata/metadata.json b/components/contextualhelp/metadata/metadata.json
index e3952ec7081..4adb359dac1 100644
--- a/components/contextualhelp/metadata/metadata.json
+++ b/components/contextualhelp/metadata/metadata.json
@@ -26,15 +26,9 @@
"--spectrum-contextual-help-heading-size",
"--spectrum-contextual-help-link-spacing",
"--spectrum-contextual-help-minimum-width",
- "--spectrum-contextual-help-padding",
- "--spectrum-contextual-help-title-size"
- ],
- "global": [
- "--spectrum-body-color",
- "--spectrum-heading-color",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400"
+ "--spectrum-contextual-help-padding"
],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": [
diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json
index 40e540604aa..b279c223ccc 100644
--- a/components/contextualhelp/package.json
+++ b/components/contextualhelp/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/contextualhelp",
- "version": "3.3.0",
+ "version": "4.0.0-s2-foundations.16",
"description": "The Spectrum CSS contextualhelp component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js
index 43805455df4..ee940507b82 100644
--- a/components/contextualhelp/stories/contextualhelp.stories.js
+++ b/components/contextualhelp/stories/contextualhelp.stories.js
@@ -93,6 +93,10 @@ export default {
...(ActionButtonStories?.parameters?.actions?.handles ?? [])
],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=49480-1934",
+ },
packageJson,
metadata,
docs: {
diff --git a/components/contextualhelp/stories/template.js b/components/contextualhelp/stories/template.js
index aaeac140d32..a8dbb79a195 100644
--- a/components/contextualhelp/stories/template.js
+++ b/components/contextualhelp/stories/template.js
@@ -8,6 +8,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ContextualHelp",
diff --git a/components/contextualhelp/themes/express.css b/components/contextualhelp/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/contextualhelp/themes/express.css
+++ b/components/contextualhelp/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/contextualhelp/themes/spectrum-two.css b/components/contextualhelp/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/contextualhelp/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/contextualhelp/themes/spectrum.css b/components/contextualhelp/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/contextualhelp/themes/spectrum.css
+++ b/components/contextualhelp/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/datepicker/CHANGELOG.md b/components/datepicker/CHANGELOG.md
index 09af8dfa683..22af4135f26 100644
--- a/components/datepicker/CHANGELOG.md
+++ b/components/datepicker/CHANGELOG.md
@@ -1,5 +1,255 @@
# Change Log
+## 4.0.0-s2-foundations.16
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57e187f`](https://github.com/adobe/spectrum-css/commit/57e187f5a52e9782e8573defc825cef0399b99e4) Thanks [@pfulton](https://github.com/pfulton)! - Minor bug fixes for datepicker and radio; tokens released for alignment
+
+- Updated dependencies [[`57e187f`](https://github.com/adobe/spectrum-css/commit/57e187f5a52e9782e8573defc825cef0399b99e4)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.26
+
+## 4.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.16
+ - @spectrum-css/textfield@8.0.0-s2-foundations.16
+ - @spectrum-css/calendar@6.0.0-s2-foundations.15
+ - @spectrum-css/popover@8.0.0-s2-foundations.16
+
+## 4.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.15
+ - @spectrum-css/textfield@8.0.0-s2-foundations.15
+ - @spectrum-css/calendar@6.0.0-s2-foundations.14
+ - @spectrum-css/popover@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.14
+ - @spectrum-css/textfield@8.0.0-s2-foundations.14
+ - @spectrum-css/calendar@6.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.12
+ - @spectrum-css/textfield@8.0.0-s2-foundations.12
+ - @spectrum-css/calendar@6.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.11
+ - @spectrum-css/textfield@8.0.0-s2-foundations.11
+ - @spectrum-css/calendar@6.0.0-s2-foundations.11
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.10
+ - @spectrum-css/textfield@8.0.0-s2-foundations.10
+ - @spectrum-css/calendar@6.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.9
+ - @spectrum-css/textfield@8.0.0-s2-foundations.9
+ - @spectrum-css/calendar@6.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.8
+ - @spectrum-css/textfield@8.0.0-s2-foundations.8
+ - @spectrum-css/calendar@6.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.7
+ - @spectrum-css/textfield@8.0.0-s2-foundations.7
+ - @spectrum-css/calendar@6.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.6
+ - @spectrum-css/textfield@8.0.0-s2-foundations.6
+ - @spectrum-css/calendar@6.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.5
+ - @spectrum-css/textfield@8.0.0-s2-foundations.5
+ - @spectrum-css/calendar@6.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.4
+ - @spectrum-css/textfield@8.0.0-s2-foundations.4
+ - @spectrum-css/calendar@6.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.3
+ - @spectrum-css/textfield@8.0.0-s2-foundations.3
+ - @spectrum-css/calendar@6.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.2
+ - @spectrum-css/textfield@8.0.0-s2-foundations.2
+ - @spectrum-css/calendar@6.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.1
+ - @spectrum-css/textfield@8.0.0-s2-foundations.1
+ - @spectrum-css/calendar@6.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.0
+ - @spectrum-css/textfield@8.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/calendar@6.0.0-s2-foundations.0
+
## 3.3.0
### Minor Changes
@@ -26,6 +276,18 @@
- [#3285](https://github.com/adobe/spectrum-css/pull/3285) [`727ccd0`](https://github.com/adobe/spectrum-css/commit/727ccd0eda8ef6f975cda52c7ef4e3516818e383) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violation in datepicker by adjusting nesting depth.
+## 3.2.5
+
+### Patch Changes
+
+- [#3300](https://github.com/adobe/spectrum-css/pull/3300) [`89797d0`](https://github.com/adobe/spectrum-css/commit/89797d0324bcbf2195a28840ce87ed6959da24a5) Thanks [@castastrophe](https://github.com/castastrophe)! - Add passthrough markers to prevent unnecessary warnings about unused custom properties
+
+## 3.2.4
+
+### Patch Changes
+
+- [#3285](https://github.com/adobe/spectrum-css/pull/3285) [`727ccd0`](https://github.com/adobe/spectrum-css/commit/727ccd0eda8ef6f975cda52c7ef4e3516818e383) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violation in datepicker by adjusting nesting depth.
+
## 3.2.3
### Patch Changes
diff --git a/components/datepicker/index.css b/components/datepicker/index.css
index 84845e4d18a..5af2054d715 100644
--- a/components/datepicker/index.css
+++ b/components/datepicker/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-DatePicker {
--spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100);
@@ -68,9 +68,7 @@
--spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset));
--spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2));
--spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
-}
-.spectrum-DatePicker {
position: relative;
display: inline-flex;
flex-direction: row;
@@ -88,15 +86,15 @@
--mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button));
--mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet));
}
-}
-.spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled) {
- /* @passthrough -- ensures picker button border color matches the textfield border color */
- --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color)));
+ &:not(.spectrum-DatePicker--quiet, .is-disabled) {
+ /* @passthrough -- ensures picker button border color matches the textfield border color */
+ --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color)));
- &.is-invalid {
- /* @passthrough */
- --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid)));
+ &.is-invalid {
+ /* @passthrough */
+ --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid)));
+ }
}
}
diff --git a/components/datepicker/metadata/metadata.json b/components/datepicker/metadata/metadata.json
index 35711fc2d3d..f9a88252cba 100644
--- a/components/datepicker/metadata/metadata.json
+++ b/components/datepicker/metadata/metadata.json
@@ -133,7 +133,6 @@
"--spectrum-border-width-100",
"--spectrum-component-edge-to-text-100",
"--spectrum-component-height-100",
- "--spectrum-component-height-75",
"--spectrum-corner-radius-100",
"--spectrum-disabled-border-color",
"--spectrum-disabled-content-color",
@@ -150,7 +149,7 @@
"--spectrum-text-to-visual-100",
"--spectrum-workflow-icon-size-100"
],
- "system-theme": ["--system-spectrum-datepicker-initial-height"],
+ "system-theme": ["--system-date-picker-initial-height"],
"passthroughs": [
"--mod-picker-button-border-color",
"--mod-textfield-icon-spacing-inline-end-invalid",
diff --git a/components/datepicker/package.json b/components/datepicker/package.json
index 15d38b0963d..32155cb425e 100644
--- a/components/datepicker/package.json
+++ b/components/datepicker/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/datepicker",
- "version": "3.3.0",
+ "version": "4.0.0-s2-foundations.16",
"description": "The Spectrum CSS datepicker component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js
index 5b60505789f..6edb1ae0839 100644
--- a/components/datepicker/stories/datepicker.stories.js
+++ b/components/datepicker/stories/datepicker.stories.js
@@ -105,7 +105,6 @@ Quiet.parameters = {
};
export const Range = Template.bind({});
-Range.tags = ["!dev"];
Range.args = {
lastDay: 3,
isRange: true,
diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js
index 73311e7f022..8425f1b7029 100644
--- a/components/datepicker/stories/template.js
+++ b/components/datepicker/stories/template.js
@@ -9,6 +9,9 @@ import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const DatePicker = ({
rootClass = "spectrum-DatePicker",
@@ -27,6 +30,7 @@ export const DatePicker = ({
lastDay,
} = {}, context = {}) => {
const { globals = {}, updateArgs } = context;
+
const lang = globals.lang ?? "en-US";
const triggerId = getRandomId("datepicker-trigger");
@@ -72,15 +76,16 @@ export const DatePicker = ({
size: "m",
isQuiet,
isDisabled,
- isInvalid,
isReadOnly,
+ isInvalid,
customClasses: [`${rootClass}-textfield`],
customInputClasses: [`${rootClass}-input`, `${rootClass}-endField`],
placeholder: "Choose a date",
name: "field",
- value: lastDay
- ? new Date(lastDay).toLocaleDateString(lang)
- : undefined,
+ value: lastDay ? new Date(lastDay).toLocaleDateString(lang) : undefined,
+ onclick: function () {
+ if (!isOpen) updateArgs({ isOpen: true });
+ },
}, context))}
${PickerButton({
customClasses: [`${rootClass}-button`],
diff --git a/components/datepicker/themes/express.css b/components/datepicker/themes/express.css
index 76f792cc5cf..ead071e6f18 100644
--- a/components/datepicker/themes/express.css
+++ b/components/datepicker/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-DatePicker {
--spectrum-datepicker-initial-height: var(--spectrum-component-height-75);
}
diff --git a/components/datepicker/themes/spectrum-two.css b/components/datepicker/themes/spectrum-two.css
new file mode 100644
index 00000000000..05b3ca88ae4
--- /dev/null
+++ b/components/datepicker/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-DatePicker {
+ --spectrum-datepicker-initial-height: var(--spectrum-component-height-100);
+ }
+}
diff --git a/components/datepicker/themes/spectrum.css b/components/datepicker/themes/spectrum.css
index c409dbd2e9a..3d81bc564b5 100644
--- a/components/datepicker/themes/spectrum.css
+++ b/components/datepicker/themes/spectrum.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-DatePicker {
- --spectrum-datepicker-initial-height: var(--spectrum-component-height-100);
- }
-}
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/dial/CHANGELOG.md b/components/dial/CHANGELOG.md
index b79901aae5a..9176a88323d 100644
--- a/components/dial/CHANGELOG.md
+++ b/components/dial/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 4.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 4.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.2.0
### Minor Changes
@@ -12,6 +185,12 @@
- [#3286](https://github.com/adobe/spectrum-css/pull/3286) [`3d5c39a`](https://github.com/adobe/spectrum-css/commit/3d5c39ab4b79316563f9659eb4b19afe81f9debf) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violations for dial by removing unused properties and moving todo comment into stylelint-disable description.
+## 3.1.4
+
+### Patch Changes
+
+- [#3286](https://github.com/adobe/spectrum-css/pull/3286) [`3d5c39a`](https://github.com/adobe/spectrum-css/commit/3d5c39ab4b79316563f9659eb4b19afe81f9debf) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violations for dial by removing unused properties and moving todo comment into stylelint-disable description.
+
## 3.1.3
### Patch Changes
diff --git a/components/dial/index.css b/components/dial/index.css
index 4fe71ce612a..3648d227593 100644
--- a/components/dial/index.css
+++ b/components/dial/index.css
@@ -11,52 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-Dial {
- --spectrum-dial-background-color-default: var(--spectrum-gray-100);
-
- --spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
- --spectrum-dial-border-color: var(--spectrum-gray-700);
-
- --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
- --spectrum-dial-border-color-hover: var(--spectrum-gray-800);
-
- --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
-
- --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
-
- --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
-
- --spectrum-dial-label-text-color: var(--spectrum-gray-700);
- --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
- --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
-
- --spectrum-dial-container-width: 48px;
-
- --spectrum-dial-handle-marker-width: 12px;
- --spectrum-dial-handle-marker-height: 2px;
-
- --spectrum-dial-handle-marker-border-radius: 1px;
-
- --spectrum-dial-handle-size: 100%;
- --spectrum-dial-min-height: 0;
- --spectrum-dial-controls-min-height: 0;
-
- --spectrum-dial-min-max-tick-angles: 45deg;
-
- --spectrum-dial-width: 32px;
- --spectrum-dial-height: 32px;
-
- --spectrum-dial-handle-border-size: var(--spectrum-border-width-200);
- --spectrum-dial-label-text-size: var(--spectrum-font-size-75);
- --spectrum-dial-label-line-height: var(--spectrum-line-height-200);
-}
-
-.spectrum-Dial--small {
- --spectrum-dial-width: 24px;
- --spectrum-dial-height: 24px;
-}
+@import "./themes/spectrum-two.css";
.spectrum-Dial {
position: relative;
@@ -70,6 +25,30 @@
min-inline-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
min-block-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
inline-size: var(--mod-dial-container-width, var(--spectrum-dial-container-width));
+
+ &.is-disabled {
+ .spectrum-Dial-labelContainer {
+ color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled)));
+ }
+
+ .spectrum-Dial-controls {
+ &::after,
+ &::before {
+ background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
+ }
+ }
+
+ .spectrum-Dial-handle {
+ cursor: default;
+ border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
+ background: var(--highcontrast-dial-background-color-default, var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default)));
+
+ &::after,
+ &::before {
+ background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
+ }
+ }
+ }
}
.spectrum-Dial-label {
@@ -247,32 +226,7 @@
}
}
-.spectrum-Dial {
- &.is-disabled {
- .spectrum-Dial-labelContainer {
- color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled)));
- }
-
- .spectrum-Dial-controls {
- &::after,
- &::before {
- background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
- }
- }
-
- .spectrum-Dial-handle {
- cursor: default;
- border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
- background: var(--highcontrast-dial-background-color-default, var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default)));
-
- &::after,
- &::before {
- background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
- }
- }
- }
-}
-
+/* stylelint-disable-next-line selector-class-pattern -- u prefixed states are a legacy implementation still supported */
.u-isGrabbing {
cursor: ns-resize;
/* stylelint-disable-next-line -- required for webkit cursor grab/grabbing support */
diff --git a/components/dial/metadata/metadata.json b/components/dial/metadata/metadata.json
index e137edbe349..613f11d8100 100644
--- a/components/dial/metadata/metadata.json
+++ b/components/dial/metadata/metadata.json
@@ -4,7 +4,6 @@
".js-focus-within .spectrum-Dial-handle[focus-within]",
".js-focus-within .spectrum-Dial-handle[focus-within]:after",
".spectrum-Dial",
- ".spectrum-Dial--small",
".spectrum-Dial-controls",
".spectrum-Dial-controls:after",
".spectrum-Dial-controls:before",
@@ -105,18 +104,11 @@
"--spectrum-dial-min-max-tick-color",
"--spectrum-dial-width"
],
- "global": [
- "--spectrum-border-width-200",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-400",
- "--spectrum-gray-50",
- "--spectrum-gray-600",
- "--spectrum-gray-700",
- "--spectrum-gray-800",
- "--spectrum-line-height-200"
+ "global": ["--spectrum-gray-25", "--spectrum-gray-75"],
+ "system-theme": [
+ "--system-dial-background-color-default",
+ "--system-dial-handle-marker-color-key-focus"
],
- "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-dial-background-color-default",
diff --git a/components/dial/package.json b/components/dial/package.json
index 0ba00453d5e..cef6cb0d8e1 100644
--- a/components/dial/package.json
+++ b/components/dial/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/dial",
- "version": "3.2.0",
+ "version": "4.0.0-s2-foundations.15",
"description": "The Spectrum CSS dial component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/dial/stories/template.js b/components/dial/stories/template.js
index 547fb97f661..c8f25c2175b 100644
--- a/components/dial/stories/template.js
+++ b/components/dial/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Dial",
diff --git a/components/dial/themes/express.css b/components/dial/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/dial/themes/express.css
+++ b/components/dial/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css
new file mode 100644
index 00000000000..410196c3916
--- /dev/null
+++ b/components/dial/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Dial {
+ --spectrum-dial-background-color-default: var(--spectrum-gray-75);
+ --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25);
+ }
+}
diff --git a/components/dial/themes/spectrum.css b/components/dial/themes/spectrum.css
index 3b48a570c21..8c633b2a7bd 100644
--- a/components/dial/themes/spectrum.css
+++ b/components/dial/themes/spectrum.css
@@ -10,3 +10,17 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Dial {
+ --spectrum-dial-background-color-default: var(--spectrum-gray-100);
+ --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300);
+ --spectrum-dial-border-color-disabled: var(--spectrum-gray-300);
+ --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
+ --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50);
+ }
+}
diff --git a/components/dialog/CHANGELOG.md b/components/dialog/CHANGELOG.md
index e9e691ae04a..7429bd19997 100644
--- a/components/dialog/CHANGELOG.md
+++ b/components/dialog/CHANGELOG.md
@@ -1,5 +1,246 @@
# Change Log
+## 11.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.16
+ - @spectrum-css/underlay@5.0.0-s2-foundations.15
+ - @spectrum-css/divider@4.0.0-s2-foundations.15
+ - @spectrum-css/modal@6.0.0-s2-foundations.16
+
+## 11.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.15
+ - @spectrum-css/underlay@5.0.0-s2-foundations.14
+ - @spectrum-css/divider@4.0.0-s2-foundations.14
+ - @spectrum-css/modal@6.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 11.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.14
+ - @spectrum-css/underlay@5.0.0-s2-foundations.13
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/modal@6.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 11.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.12
+ - @spectrum-css/underlay@5.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/modal@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 11.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.11
+ - @spectrum-css/underlay@5.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/modal@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 11.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.10
+ - @spectrum-css/underlay@5.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/modal@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 11.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.9
+ - @spectrum-css/underlay@5.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/modal@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 11.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.8
+ - @spectrum-css/underlay@5.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/modal@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 11.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.7
+ - @spectrum-css/underlay@5.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/modal@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 11.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.6
+ - @spectrum-css/underlay@5.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/modal@6.0.0-s2-foundations.6
+
+## 11.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.5
+ - @spectrum-css/underlay@5.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/modal@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 11.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.4
+ - @spectrum-css/underlay@5.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/modal@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 11.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.3
+ - @spectrum-css/underlay@5.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/modal@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 11.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.2
+ - @spectrum-css/underlay@5.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/modal@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 11.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.1
+ - @spectrum-css/underlay@5.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/modal@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 11.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.0
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/modal@6.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/underlay@5.0.0-s2-foundations.0
+
## 10.2.0
### Minor Changes
diff --git a/components/dialog/index.css b/components/dialog/index.css
index 513da55f2c3..32669566642 100644
--- a/components/dialog/index.css
+++ b/components/dialog/index.css
@@ -11,32 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-Dialog {
- /* The font-size of the fullscreen dialog header */
- --spectrum-dialog-fullscreen-header-text-size: 28px;
- --spectrum-dialog-min-inline-size: 288px;
- --spectrum-dialog-confirm-small-width: 400px;
- --spectrum-dialog-confirm-medium-width: 480px;
- --spectrum-dialog-confirm-large-width: 640px;
- --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
- --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
- --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800);
- --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900);
- --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100);
- --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100);
- --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-
- --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50);
- --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1);
- --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
- --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
- --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
- --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
- --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));
- --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50);
-}
+@import "./themes/spectrum-two.css";
/* @deprecated .spectrum-Dialog--medium */
.spectrum-Dialog,
@@ -86,7 +61,6 @@
grid-template-columns:
var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
- grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
grid-template-areas:
"hero hero hero hero hero hero"
". . . . . ."
@@ -94,7 +68,7 @@
". divider divider divider divider ."
". content content content content ."
". footer footer buttonGroup buttonGroup ."
- ". . . . . .";
+ ". . . . . .";grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
inline-size: 100%;
}
@@ -173,6 +147,7 @@
/* this is kinda dumb, but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */
padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2);
margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin));
+
}
.spectrum-Dialog-footer {
@@ -213,7 +188,6 @@
grid-template-columns:
var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
- grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
grid-template-areas:
"hero hero hero hero hero hero hero"
". . . . . closeButton closeButton"
@@ -221,7 +195,7 @@
". divider divider divider divider divider ."
". content content content content content ."
". footer footer buttonGroup buttonGroup buttonGroup ."
- ". . . . . . .";
+ ". . . . . . .";grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
.spectrum-Dialog-buttonGroup {
display: none;
@@ -326,8 +300,7 @@
". divider divider divider divider divider ."
". content content content content content ."
". footer footer buttonGroup buttonGroup buttonGroup ."
- ". . . . . . .";
- }
+ ". . . . . . .";}
.spectrum-Dialog .spectrum-Dialog-header {
justify-content: flex-start;
@@ -346,8 +319,7 @@
". divider ."
". content ."
". buttonGroup ."
- ". . .";
- }
+ ". . .";}
.spectrum-Dialog-buttonGroup {
padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top));
diff --git a/components/dialog/metadata/metadata.json b/components/dialog/metadata/metadata.json
index 44cd1a85b8e..26ac328b13e 100644
--- a/components/dialog/metadata/metadata.json
+++ b/components/dialog/metadata/metadata.json
@@ -95,20 +95,7 @@
"--spectrum-dialog-heading-font-weight",
"--spectrum-dialog-min-inline-size"
],
- "global": [
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-height-100",
- "--spectrum-component-pill-edge-to-text-100",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-line-height-100",
- "--spectrum-regular-font-weight",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-spacing-50",
- "--spectrum-spacing-600"
- ],
+ "global": ["--spectrum-regular-font-weight"],
"system-theme": [],
"passthroughs": [],
"high-contrast": []
diff --git a/components/dialog/package.json b/components/dialog/package.json
index 128c8e408c0..947b03dbea4 100644
--- a/components/dialog/package.json
+++ b/components/dialog/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/dialog",
- "version": "10.2.0",
+ "version": "11.0.0-s2-foundations.15",
"description": "The Spectrum CSS dialog component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
index 3e40c848883..ae1c3bcd4a7 100644
--- a/components/dialog/stories/dialog.stories.js
+++ b/components/dialog/stories/dialog.stories.js
@@ -120,6 +120,10 @@ export default {
height: "500px",
},
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=839-1128",
+ },
packageJson,
metadata,
},
@@ -237,6 +241,10 @@ WithScroll.parameters = {
export const Fullscreen = DialogFullscreen.bind({});
Fullscreen.parameters = {
chromatic: { disableSnapshot: true },
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399",
+ },
};
Fullscreen.args = {
...Default.args,
@@ -249,6 +257,10 @@ Fullscreen.args = {
export const FullscreenTakeover = DialogFullscreenTakeover.bind({});
FullscreenTakeover.parameters = {
chromatic: { disableSnapshot: true },
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399",
+ },
};
FullscreenTakeover.args = {
...Default.args,
diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js
index 860bd6b6302..f97d22a7bd1 100644
--- a/components/dialog/stories/template.js
+++ b/components/dialog/stories/template.js
@@ -10,6 +10,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Dialog",
@@ -29,7 +32,10 @@ export const Template = ({
customStyles = {},
} = {}, context = {}) => {
const { updateArgs } = context;
- const toggleOpen = () => updateArgs({ isOpen: !isOpen });
+
+ const toggleOpen = function () {
+ updateArgs({ isOpen: !isOpen });
+ };
const Dialog = html`
layout !== l),
[`${rootClass}--${layout}`]: typeof layout !== "undefined",
- [`${rootClass}--${size}`]: typeof size !== "undefined",
+ [`${rootClass}--${size}`]: typeof size !== "undefined",
[`${rootClass}--noDivider`]: !hasDivider,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
@@ -50,7 +56,7 @@ export const Template = ({
${when(typeof heroImageUrl !== "undefined", () =>
html`
-
@@ -119,4 +125,3 @@ export const Template = ({
return Dialog;
}
};
-
diff --git a/components/dialog/themes/express.css b/components/dialog/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/dialog/themes/express.css
+++ b/components/dialog/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/dialog/themes/spectrum-two.css b/components/dialog/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/dialog/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/dialog/themes/spectrum.css b/components/dialog/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/dialog/themes/spectrum.css
+++ b/components/dialog/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/divider/CHANGELOG.md b/components/divider/CHANGELOG.md
index 421030f320e..b9261c7eb87 100644
--- a/components/divider/CHANGELOG.md
+++ b/components/divider/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 4.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 4.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.2.0
### Minor Changes
diff --git a/components/divider/index.css b/components/divider/index.css
index e947909bf6c..762bdbdcfa4 100644
--- a/components/divider/index.css
+++ b/components/divider/index.css
@@ -11,65 +11,31 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
-.spectrum-Divider {
- /* default thickness no size */
- --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
+/* windows high contrast mode */
+@media (forced-colors: active) {
+ .spectrum-Divider {
+ background-color: CanvasText !important;
+ }
+}
- /* default background color no size */
+.spectrum-Divider,
+.spectrum-Divider--sizeM {
+ --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
--spectrum-divider-background-color: var(--spectrum-divider-background-color-medium);
-
- /* background colors */
- --spectrum-divider-background-color-small: var(--spectrum-gray-300);
- --spectrum-divider-background-color-medium: var(--spectrum-gray-300);
- --spectrum-divider-background-color-large: var(--spectrum-gray-800);
-
- /* static white background colors */
- --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-300);
- --spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300);
- --spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-800);
-
- /* static black background colors */
- --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-300);
- --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300);
- --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-800);
}
-/* small divider */
.spectrum-Divider--sizeS {
--spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
--spectrum-divider-background-color: var(--spectrum-divider-background-color-small);
}
-/* medium divider */
-.spectrum-Divider--sizeM {
- --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
- --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium);
-}
-
-/* large divider */
.spectrum-Divider--sizeL {
--spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
--spectrum-divider-background-color: var(--spectrum-divider-background-color-large);
}
-/* windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-Divider,
- .spectrum-Divider--sizeS,
- .spectrum-Divider--sizeM,
- .spectrum-Divider--sizeL {
- --spectrum-divider-background-color: CanvasText;
- --spectrum-divider-background-color-small-static-white: CanvasText;
- --spectrum-divider-background-color-medium-static-white: CanvasText;
- --spectrum-divider-background-color-large-static-white: CanvasText;
- --spectrum-divider-background-color-small-static-black: CanvasText;
- --spectrum-divider-background-color-medium-static-black: CanvasText;
- --spectrum-divider-background-color-large-static-black: CanvasText;
- }
-}
-
.spectrum-Divider {
block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
inline-size: 100%;
@@ -86,14 +52,15 @@
/* static white variant colors */
.spectrum-Divider--staticWhite {
- &.spectrum-Divider--sizeS {
- --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white));
- }
-
+ &,
&.spectrum-Divider--sizeM {
--spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white));
}
+ &.spectrum-Divider--sizeS {
+ --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white));
+ }
+
&.spectrum-Divider--sizeL {
--spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white));
}
@@ -101,14 +68,15 @@
/* static black variant colors */
.spectrum-Divider--staticBlack {
- &.spectrum-Divider--sizeS {
- --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black));
- }
-
+ &,
&.spectrum-Divider--sizeM {
--spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black));
}
+ &.spectrum-Divider--sizeS {
+ --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black));
+ }
+
&.spectrum-Divider--sizeL {
--spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black));
}
diff --git a/components/divider/metadata/metadata.json b/components/divider/metadata/metadata.json
index 2c200f1bbff..6245a3baf3e 100644
--- a/components/divider/metadata/metadata.json
+++ b/components/divider/metadata/metadata.json
@@ -5,9 +5,11 @@
".spectrum-Divider--sizeL",
".spectrum-Divider--sizeM",
".spectrum-Divider--sizeS",
+ ".spectrum-Divider--staticBlack",
".spectrum-Divider--staticBlack.spectrum-Divider--sizeL",
".spectrum-Divider--staticBlack.spectrum-Divider--sizeM",
".spectrum-Divider--staticBlack.spectrum-Divider--sizeS",
+ ".spectrum-Divider--staticWhite",
".spectrum-Divider--staticWhite.spectrum-Divider--sizeL",
".spectrum-Divider--staticWhite.spectrum-Divider--sizeM",
".spectrum-Divider--staticWhite.spectrum-Divider--sizeS",
@@ -43,14 +45,22 @@
"--spectrum-divider-thickness-small"
],
"global": [
- "--spectrum-gray-300",
- "--spectrum-gray-800",
- "--spectrum-transparent-black-300",
- "--spectrum-transparent-black-800",
- "--spectrum-transparent-white-300",
- "--spectrum-transparent-white-800"
+ "--spectrum-gray-200",
+ "--spectrum-transparent-black-400",
+ "--spectrum-transparent-black-900",
+ "--spectrum-transparent-white-400",
+ "--spectrum-transparent-white-900"
+ ],
+ "system-theme": [
+ "--system-divider-background-color-large-static-black",
+ "--system-divider-background-color-large-static-white",
+ "--system-divider-background-color-medium",
+ "--system-divider-background-color-medium-static-black",
+ "--system-divider-background-color-medium-static-white",
+ "--system-divider-background-color-small",
+ "--system-divider-background-color-small-static-black",
+ "--system-divider-background-color-small-static-white"
],
- "system-theme": [],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/divider/package.json b/components/divider/package.json
index f9d255af819..cec62c73f25 100644
--- a/components/divider/package.json
+++ b/components/divider/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/divider",
- "version": "3.2.0",
+ "version": "4.0.0-s2-foundations.15",
"description": "The Spectrum CSS divider component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js
index 45eb6b925cf..77734460505 100644
--- a/components/divider/stories/divider.stories.js
+++ b/components/divider/stories/divider.stories.js
@@ -34,6 +34,10 @@ export default {
minDimensionValues: true,
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13642-334",
+ },
packageJson,
metadata,
},
diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js
index cd3d9bc1a64..ac2ffa2a4c1 100644
--- a/components/divider/stories/template.js
+++ b/components/divider/stories/template.js
@@ -4,6 +4,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { capitalize, upperCase } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Divider",
diff --git a/components/divider/themes/express.css b/components/divider/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/divider/themes/express.css
+++ b/components/divider/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/divider/themes/spectrum-two.css b/components/divider/themes/spectrum-two.css
new file mode 100644
index 00000000000..0cdcae026e1
--- /dev/null
+++ b/components/divider/themes/spectrum-two.css
@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Divider {
+ /* background colors */
+ --spectrum-divider-background-color-small: var(--spectrum-gray-200);
+ --spectrum-divider-background-color-medium: var(--spectrum-gray-200);
+
+ /* static white background colors */
+ --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-400);
+ --spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-400);
+ --spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-900);
+
+ /* static black background colors */
+ --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-400);
+ --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-400);
+ --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-900);
+ }
+}
diff --git a/components/divider/themes/spectrum.css b/components/divider/themes/spectrum.css
index 3b48a570c21..64108adc7b7 100644
--- a/components/divider/themes/spectrum.css
+++ b/components/divider/themes/spectrum.css
@@ -10,3 +10,25 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Divider {
+ /* background colors */
+ --spectrum-divider-background-color-small: var(--spectrum-gray-300);
+ --spectrum-divider-background-color-medium: var(--spectrum-gray-300);
+
+ /* static white background colors */
+ --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-300);
+ --spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300);
+ --spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-800);
+
+ /* static black background colors */
+ --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-300);
+ --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300);
+ --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-800);
+ }
+}
diff --git a/components/dropindicator/CHANGELOG.md b/components/dropindicator/CHANGELOG.md
index c77d7f72bf4..7a5892f9bbb 100644
--- a/components/dropindicator/CHANGELOG.md
+++ b/components/dropindicator/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css
index a247b66bd6a..b28281cd63f 100644
--- a/components/dropindicator/index.css
+++ b/components/dropindicator/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-DropIndicator {
@@ -19,13 +19,6 @@
}
}
-.spectrum-DropIndicator {
- --spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color);
- --spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color);
- --spectrum-dropindicator-border-size: var(--spectrum-border-width-200);
- --spectrum-dropindicator-circle-size: 12px;
-}
-
.spectrum-DropIndicator {
position: relative;
background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color)));
diff --git a/components/dropindicator/metadata/metadata.json b/components/dropindicator/metadata/metadata.json
index e8c125fbcd4..ab8343d9a20 100644
--- a/components/dropindicator/metadata/metadata.json
+++ b/components/dropindicator/metadata/metadata.json
@@ -21,10 +21,9 @@
"--spectrum-dropindicator-border-color",
"--spectrum-dropindicator-border-size",
"--spectrum-dropindicator-circle-color",
- "--spectrum-dropindicator-circle-size",
- "--spectrum-dropindicator-color"
+ "--spectrum-dropindicator-circle-size"
],
- "global": ["--spectrum-border-width-200"],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": ["--highcontrast-dropindicator-color"]
diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json
index dc07373203e..7f3a0a62151 100644
--- a/components/dropindicator/package.json
+++ b/components/dropindicator/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/dropindicator",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS dropindicator component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/dropindicator/stories/template.js b/components/dropindicator/stories/template.js
index e9d57e8ffcf..6106bd1cc66 100644
--- a/components/dropindicator/stories/template.js
+++ b/components/dropindicator/stories/template.js
@@ -4,6 +4,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-DropIndicator",
diff --git a/components/dropindicator/themes/express.css b/components/dropindicator/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/dropindicator/themes/express.css
+++ b/components/dropindicator/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/dropindicator/themes/spectrum-two.css b/components/dropindicator/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/dropindicator/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/dropindicator/themes/spectrum.css b/components/dropindicator/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/dropindicator/themes/spectrum.css
+++ b/components/dropindicator/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/dropzone/CHANGELOG.md b/components/dropzone/CHANGELOG.md
index 63c56fbd223..451c176f5a8 100644
--- a/components/dropzone/CHANGELOG.md
+++ b/components/dropzone/CHANGELOG.md
@@ -1,5 +1,236 @@
# Change Log
+## 7.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.15
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.21
+ - @spectrum-css/link@6.0.0-s2-foundations.15
+
+## 7.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.14
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.20
+ - @spectrum-css/link@6.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.13
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/link@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`877ca25`](https://github.com/adobe/spectrum-css/commit/877ca2516363e9483e7b3ecbfddc900b4e6a9a65) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-241] In order to show dropzone background color, --spectrum-drop-zone-background-color has been changed to --mod-drop-zone-background-color in &.is-dragged and &.is-filled
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.12
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/link@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.11
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/link@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.10
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/link@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.9
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/link@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.8
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/link@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.7
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/link@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/link@6.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.5
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/link@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.4
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/link@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.3
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/link@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.2
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/link@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.1
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/link@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.0
+ - @spectrum-css/link@6.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
@@ -19,6 +250,12 @@
- [#3300](https://github.com/adobe/spectrum-css/pull/3300) [`89797d0`](https://github.com/adobe/spectrum-css/commit/89797d0324bcbf2195a28840ce87ed6959da24a5) Thanks [@castastrophe](https://github.com/castastrophe)! - Add passthrough markers to prevent unnecessary warnings about unused custom properties
+## 6.1.4
+
+### Patch Changes
+
+- [#3300](https://github.com/adobe/spectrum-css/pull/3300) [`89797d0`](https://github.com/adobe/spectrum-css/commit/89797d0324bcbf2195a28840ce87ed6959da24a5) Thanks [@castastrophe](https://github.com/castastrophe)! - Add passthrough markers to prevent unnecessary warnings about unused custom properties
+
## 6.1.3
### Patch Changes
diff --git a/components/dropzone/index.css b/components/dropzone/index.css
index f46224d1a88..9d778b793b2 100644
--- a/components/dropzone/index.css
+++ b/components/dropzone/index.css
@@ -11,53 +11,10 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-DropZone {
- --spectrum-drop-zone-padding: var(--spectrum-spacing-400);
- --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400);
- --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75);
-
- --spectrum-drop-zone-border-width: var(--spectrum-border-width-200);
- --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-drop-zone-border-color: var(--spectrum-gray-300);
-
- --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
- --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size);
- --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height);
- --spectrum-drop-zone-heading-color: var(--spectrum-heading-color);
-
- --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size);
- --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height);
- --spectrum-drop-zone-body-color: var(--spectrum-body-color);
-
- --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb);
- --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color);
- --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color);
- --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color);
-
- /* Filled styles */
- --spectrum-drop-zone-content-height: var(--spectrum-component-height-300);
- --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width);
- --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300);
- --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300);
- --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
-
- --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style);
- --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300);
- --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100);
-
- --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color);
- --spectrum-drop-zone-content-color: var(--spectrum-white);
-
- /* @passthrough start -- settings for a nested illustrated message */
+ /* @passthrough start -- IllustratedMessage -- settings for a nested illustrated message */
--mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width));
--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color));
--mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading));
@@ -79,21 +36,12 @@
--mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color));
/* @passthrough end */
- /* @passthrough start -- settings for a nested actionbutton */
+ /* @passthrough start -- ActionButton settings for a nested actionbutton */
--mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size));
--mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color));
--mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text));
/* @passthrough end */
- /* cjk language support */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-cjk-title-size);
- }
-}
-
-.spectrum-DropZone {
box-sizing: border-box;
inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width));
padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)));
@@ -102,16 +50,21 @@
border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width));
border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius));
border-style: var(--mod-drop-zone-border-style, dashed);
- background-size: cover;
background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color));
+ background-size: cover;
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-heading-font-size-cjk);
+ }
&.is-dragged {
- /* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */
- --mod-drop-zone-border-style: var(--mod-drop-zone-border-style--dragged, var(--mod-drop-zone-border-style-dragged, solid));
+ --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid);
--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity)));
--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
- /* Updated values for a nested illustrated message when state changes */
+ /* @passthrough -- Updated values for a nested illustrated message when state changes */
--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover));
}
@@ -119,7 +72,7 @@
/* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */
--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
- /* Updated values for a nested illustrated message when state changes */
+ /* @passthrough -- Updated values for a nested illustrated message when state changes */
--mod-illustrated-message-display: none;
}
diff --git a/components/dropzone/metadata/metadata.json b/components/dropzone/metadata/metadata.json
index a3bbc3e93e8..94d097b3176 100644
--- a/components/dropzone/metadata/metadata.json
+++ b/components/dropzone/metadata/metadata.json
@@ -27,7 +27,6 @@
"--mod-drop-zone-border-color",
"--mod-drop-zone-border-color-hover",
"--mod-drop-zone-border-style",
- "--mod-drop-zone-border-style--dragged",
"--mod-drop-zone-border-style-dragged",
"--mod-drop-zone-border-width",
"--mod-drop-zone-content-background-color",
@@ -62,18 +61,15 @@
"--spectrum-drop-zone-background-color",
"--spectrum-drop-zone-background-color-opacity",
"--spectrum-drop-zone-background-color-opacity-filled",
- "--spectrum-drop-zone-background-color-rgb",
"--spectrum-drop-zone-body-color",
"--spectrum-drop-zone-body-font-family",
"--spectrum-drop-zone-body-font-size",
"--spectrum-drop-zone-body-font-style",
"--spectrum-drop-zone-body-font-weight",
"--spectrum-drop-zone-body-line-height",
- "--spectrum-drop-zone-body-size",
"--spectrum-drop-zone-border-color",
"--spectrum-drop-zone-border-color-hover",
"--spectrum-drop-zone-border-width",
- "--spectrum-drop-zone-cjk-title-size",
"--spectrum-drop-zone-content-background-color",
"--spectrum-drop-zone-content-bottom-to-text",
"--spectrum-drop-zone-content-color",
@@ -91,6 +87,7 @@
"--spectrum-drop-zone-heading-color",
"--spectrum-drop-zone-heading-font-family",
"--spectrum-drop-zone-heading-font-size",
+ "--spectrum-drop-zone-heading-font-size-cjk",
"--spectrum-drop-zone-heading-font-style",
"--spectrum-drop-zone-heading-font-weight",
"--spectrum-drop-zone-heading-line-height",
@@ -99,37 +96,10 @@
"--spectrum-drop-zone-illustration-color-hover",
"--spectrum-drop-zone-illustration-to-heading",
"--spectrum-drop-zone-padding",
- "--spectrum-drop-zone-title-size",
"--spectrum-drop-zone-width"
],
- "global": [
- "--spectrum-accent-visual-color",
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-bold-font-weight",
- "--spectrum-border-width-200",
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-edge-to-text-300",
- "--spectrum-component-height-300",
- "--spectrum-component-top-to-text-300",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-font-size-300",
- "--spectrum-gray-300",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-style",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-line-height-100",
- "--spectrum-neutral-visual-color",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-400",
- "--spectrum-spacing-75",
- "--spectrum-white"
- ],
- "system-theme": [],
+ "global": ["--spectrum-gray-200"],
+ "system-theme": ["--system-drop-zone-border-color"],
"passthroughs": [
"--mod-actionbutton-edge-to-text",
"--mod-actionbutton-font-size",
diff --git a/components/dropzone/metadata/mods.md b/components/dropzone/metadata/mods.md
index da00c42f335..21a65244705 100644
--- a/components/dropzone/metadata/mods.md
+++ b/components/dropzone/metadata/mods.md
@@ -12,7 +12,6 @@
| `--mod-drop-zone-border-color` |
| `--mod-drop-zone-border-color-hover` |
| `--mod-drop-zone-border-style` |
-| `--mod-drop-zone-border-style--dragged` |
| `--mod-drop-zone-border-style-dragged` |
| `--mod-drop-zone-border-width` |
| `--mod-drop-zone-content-background-color` |
diff --git a/components/dropzone/package.json b/components/dropzone/package.json
index 4fb44cb6c3b..cd251f2b40e 100644
--- a/components/dropzone/package.json
+++ b/components/dropzone/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/dropzone",
- "version": "6.2.0",
+ "version": "7.0.0-s2-foundations.16",
"description": "The Spectrum CSS dropzone component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js
index 7bd644a0969..eba852ba47d 100644
--- a/components/dropzone/stories/dropzone.stories.js
+++ b/components/dropzone/stories/dropzone.stories.js
@@ -35,6 +35,10 @@ export default {
isFilled: false,
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13049-185",
+ },
packageJson,
metadata,
},
diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js
index 3363790eccc..9eb2dfface7 100644
--- a/components/dropzone/stories/template.js
+++ b/components/dropzone/stories/template.js
@@ -7,6 +7,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-DropZone",
diff --git a/components/dropzone/themes/express.css b/components/dropzone/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/dropzone/themes/express.css
+++ b/components/dropzone/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/dropzone/themes/spectrum-two.css b/components/dropzone/themes/spectrum-two.css
new file mode 100644
index 00000000000..cf71b766c33
--- /dev/null
+++ b/components/dropzone/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-DropZone {
+ --spectrum-drop-zone-border-color: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/dropzone/themes/spectrum.css b/components/dropzone/themes/spectrum.css
index 3b48a570c21..0760508568f 100644
--- a/components/dropzone/themes/spectrum.css
+++ b/components/dropzone/themes/spectrum.css
@@ -10,3 +10,13 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-DropZone {
+ --spectrum-drop-zone-border-color: var(--spectrum-gray-300);
+ }
+}
diff --git a/components/fieldgroup/CHANGELOG.md b/components/fieldgroup/CHANGELOG.md
index 2a4db63b4e3..199629734c6 100644
--- a/components/fieldgroup/CHANGELOG.md
+++ b/components/fieldgroup/CHANGELOG.md
@@ -1,5 +1,261 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.18
+ - @spectrum-css/helptext@6.0.0-s2-foundations.15
+ - @spectrum-css/radio@10.0.0-s2-foundations.15
+
+## 6.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.17
+ - @spectrum-css/helptext@6.0.0-s2-foundations.14
+ - @spectrum-css/radio@10.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0) Thanks [@pfulton](https://github.com/pfulton)! - ActionButton:
+
+ - Correct --spectrum-actionbutton-background-color-selected-disabled to be --spectrum-actionbutton-(background|border)-color-disabled-selected
+
+ Combobox:
+
+ - Move --spectrum-combobox-min-inline-size and --spectrum-combobox-button-width to the index.css
+
+ FieldGroup:
+
+ - Swap gap back to margin-inline-end on FieldGroup
+
+ Typography:
+
+ - Remap body size to xs if xxs provided
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/helptext@6.0.0-s2-foundations.13
+ - @spectrum-css/radio@10.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/helptext@6.0.0-s2-foundations.12
+ - @spectrum-css/radio@10.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/helptext@6.0.0-s2-foundations.11
+ - @spectrum-css/radio@10.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/helptext@6.0.0-s2-foundations.10
+ - @spectrum-css/radio@10.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/helptext@6.0.0-s2-foundations.9
+ - @spectrum-css/radio@10.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/helptext@6.0.0-s2-foundations.8
+ - @spectrum-css/radio@10.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/helptext@6.0.0-s2-foundations.7
+ - @spectrum-css/radio@10.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/helptext@6.0.0-s2-foundations.6
+ - @spectrum-css/radio@10.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/helptext@6.0.0-s2-foundations.5
+ - @spectrum-css/radio@10.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/helptext@6.0.0-s2-foundations.4
+ - @spectrum-css/radio@10.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/helptext@6.0.0-s2-foundations.3
+ - @spectrum-css/radio@10.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/helptext@6.0.0-s2-foundations.2
+ - @spectrum-css/radio@10.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/helptext@6.0.0-s2-foundations.1
+ - @spectrum-css/radio@10.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/radio@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/helptext@6.0.0-s2-foundations.0
+
+## 5.3.0
+
+### Minor Changes
+
+- [#3328](https://github.com/adobe/spectrum-css/pull/3328) [`a0486b3`](https://github.com/adobe/spectrum-css/commit/a0486b341581c610ebc9b3acd1837be2b66eb348) Thanks [@jawinn](https://github.com/jawinn)! - The previous display of the read-only state checkboxes did not match up with any guidelines. This update removes the read-only specific styles for checkbox within the fieldgroup component, so that the boxes are still displayed and commas are not appended to the label. This includes the removal of `--spectrum-fieldgroup-readonly-delimiter` as it is no longer needed.
+
+### Patch Changes
+
+- Updated dependencies [[`a0486b3`](https://github.com/adobe/spectrum-css/commit/a0486b341581c610ebc9b3acd1837be2b66eb348)]:
+ - @spectrum-css/checkbox@9.2.1
+
## 5.3.0
### Minor Changes
diff --git a/components/fieldgroup/index.css b/components/fieldgroup/index.css
index dc2aef1d43a..51fa1027116 100644
--- a/components/fieldgroup/index.css
+++ b/components/fieldgroup/index.css
@@ -11,16 +11,24 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-FieldGroup {
- --spectrum-fieldgroup-margin: var(--spectrum-spacing-300);
-}
+@import "./themes/spectrum-two.css";
/* field group */
.spectrum-FieldGroup {
display: flex;
flex-flow: column wrap;
+
+ /* read-only checkbox group */
+ .spectrum-Checkbox.is-readOnly {
+ .spectrum-Checkbox-box {
+ display: none;
+ }
+
+ /* read-only checkbox fields delimited by commas */
+ &:not(:last-child) .spectrum-Checkbox-label::after {
+ content: var(--spectrum-fieldgroup-readonly-delimiter);
+ }
+ }
}
/* field group label top aligned */
diff --git a/components/fieldgroup/metadata/metadata.json b/components/fieldgroup/metadata/metadata.json
index 20528391a13..97616578107 100644
--- a/components/fieldgroup/metadata/metadata.json
+++ b/components/fieldgroup/metadata/metadata.json
@@ -2,6 +2,8 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-FieldGroup",
+ ".spectrum-FieldGroup .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-box",
+ ".spectrum-FieldGroup .spectrum-Checkbox.is-readOnly:not(:last-child) .spectrum-Checkbox-label:after",
".spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout",
".spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout .spectrum-FieldGroup-item:not(:last-child)",
".spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout .spectrum-HelpText",
@@ -11,8 +13,11 @@
".spectrum-FieldGroupInputLayout"
],
"modifiers": [],
- "component": ["--spectrum-fieldgroup-margin"],
- "global": ["--spectrum-spacing-300"],
+ "component": [
+ "--spectrum-fieldgroup-margin",
+ "--spectrum-fieldgroup-readonly-delimiter"
+ ],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": []
diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json
index 4cad0ed5664..c2b845089d1 100644
--- a/components/fieldgroup/package.json
+++ b/components/fieldgroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/fieldgroup",
- "version": "5.3.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS fieldgroup component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/fieldgroup/stories/template.js b/components/fieldgroup/stories/template.js
index 3c74a2fbdcf..dc382afcbe9 100644
--- a/components/fieldgroup/stories/template.js
+++ b/components/fieldgroup/stories/template.js
@@ -9,6 +9,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = (
{
diff --git a/components/fieldgroup/themes/express.css b/components/fieldgroup/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/fieldgroup/themes/express.css
+++ b/components/fieldgroup/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/fieldgroup/themes/spectrum-two.css b/components/fieldgroup/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/fieldgroup/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/fieldgroup/themes/spectrum.css b/components/fieldgroup/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/fieldgroup/themes/spectrum.css
+++ b/components/fieldgroup/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/fieldlabel/CHANGELOG.md b/components/fieldlabel/CHANGELOG.md
index 5433f98d220..d7bd772fbf5 100644
--- a/components/fieldlabel/CHANGELOG.md
+++ b/components/fieldlabel/CHANGELOG.md
@@ -1,5 +1,207 @@
# Change Log
+## 9.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`085ecbc`](https://github.com/adobe/spectrum-css/commit/085ecbc739cf736e8d95377d605f2a7c4104bcc0) Thanks [@pfulton](https://github.com/pfulton)! - Pulled out _form_ from _fieldlabel_ package.
+ Pulled out _meter_ from _progressbar_ package.
+
+ [SWC-522] fix hover style regression
+
+## 9.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 9.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 9.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 9.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 9.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 9.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 9.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 9.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 9.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 9.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 9.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 9.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 9.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 9.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 9.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 8.2.0
### Minor Changes
diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css
index c52c4d4fae2..88f3039b3e8 100644
--- a/components/fieldlabel/index.css
+++ b/components/fieldlabel/index.css
@@ -11,90 +11,39 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-FieldLabel {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
- --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
-
- --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
- --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
-}
-
-.spectrum-FieldLabel--sizeS {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
- --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
- --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
-
- --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
- --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
-}
-
-.spectrum-FieldLabel--sizeM {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
- --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
- --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
-
- --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
- --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
-}
-
-.spectrum-FieldLabel--sizeL {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
- --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
-
- --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
- --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
-}
-
-.spectrum-FieldLabel--sizeXL {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200);
- --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
- --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
-
- --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
- --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
-}
+@import "./themes/spectrum-two.css";
.spectrum-FieldLabel {
display: block;
box-sizing: border-box;
- min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
+ min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height));
- padding-block: var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text));
- padding-inline: 0;
+ padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text)));
+ padding-inline: var(--mod-fieldlabel-padding-inline, 0);
+ margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0));
+ margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0));
- font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size));
- font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight));
+ font-size: var(--mod-fieldlabel-font-size, var(--spectrum-field-label-font-size));
+ font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-field-label-font-weight));
- line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height));
+ line-height: var(--mod-fieldlabel-line-height, var(--spectrum-field-label-line-height));
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
- color: var(--spectrum-fieldlabel-color);
+ color: var(--mod-fieldlabel-color, var(--spectrum-field-label-color));
/* CJK (Chinese, Japanese, and Korean) language support */
&:lang(ja),
&:lang(zh),
&:lang(ko) {
- line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-fieldlabel-line-height-cjk));
+ --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-field-label-line-height-cjk));
+ }
+
+ /********* Disabled state *********/
+ &.is-disabled,
+ &.is-disabled .spectrum-FieldLabel-requiredIcon {
+ --mod-fieldlabel-color: var(--highcontrast-field-label-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-field-label-disabled-content-color)));
}
}
@@ -108,9 +57,9 @@
.spectrum-FieldLabel--right {
display: inline-block;
- margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start));
+ margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start));
margin-block-end: 0;
- margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
+ margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right));
vertical-align: top;
}
@@ -119,71 +68,9 @@
text-align: end;
}
-/********* Form *********/
-.spectrum-Form {
- --spectrum-tableform-item-block-spacing: var(--spectrum-spacing-300);
-
- margin: 0;
- display: grid;
- grid-template-columns: var(--mod-form-grid-template-columns, auto auto);
- inline-size: var(--mod-form-inline-size, fit-content);
- justify-content: start;
-
- /* @deprecation --mod-tableform-item-block-spacing has been renamed to
- --mod-form-item-block-spacing. The fallback will be removed in a future version. */
- row-gap: var(--mod-form-item-block-spacing, var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing)));
-}
-
-/* Row */
-.spectrum-Form-item {
- display: contents;
-}
-
-@supports (grid-template-columns: subgrid) {
- .spectrum-Form-item {
- display: grid;
- grid-column: span 2;
- grid-template-columns: subgrid;
- }
-}
-
-.spectrum-Form-itemLabel,
-.spectrum-Form-itemField {
- display: block;
-}
-
-/* Fix extra space after inline-flex elements such as stepper. */
-.spectrum-Form-itemField > * {
- vertical-align: top;
-}
-
-/* Rows with stacked alignment */
-.spectrum-Form--labelsAbove {
- /* @deprecation --mod-tableform-item-block-spacing-labels-above has been renamed to
- --mod-form-item-block-spacing-labels-above. The fallback will be removed in a future version. */
- --mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--mod-tableform-item-block-spacing-labels-above, var(--spectrum-spacing-200)));
- --mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, auto);
-
- .spectrum-Form-item {
- display: block;
- }
-}
-
-/********* Disabled state *********/
-.spectrum-FieldLabel,
-.spectrum-Form-itemLabel {
- &.is-disabled {
- color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
-
- .spectrum-FieldLabel-requiredIcon {
- color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
- }
- }
-}
-
/********* WHCM *********/
@media (forced-colors: active) {
.spectrum-FieldLabel {
- --highcontrast-disabled-content-color: GrayText;
+ --highcontrast-field-label-disabled-content-color: GrayText;
}
}
diff --git a/components/fieldlabel/metadata/metadata.json b/components/fieldlabel/metadata/metadata.json
index 409f73ab3ab..6b2a9e85d32 100644
--- a/components/fieldlabel/metadata/metadata.json
+++ b/components/fieldlabel/metadata/metadata.json
@@ -4,25 +4,12 @@
".spectrum-FieldLabel",
".spectrum-FieldLabel--left",
".spectrum-FieldLabel--right",
- ".spectrum-FieldLabel--sizeL",
- ".spectrum-FieldLabel--sizeM",
- ".spectrum-FieldLabel--sizeS",
- ".spectrum-FieldLabel--sizeXL",
".spectrum-FieldLabel-requiredIcon",
".spectrum-FieldLabel.is-disabled",
".spectrum-FieldLabel.is-disabled .spectrum-FieldLabel-requiredIcon",
".spectrum-FieldLabel:lang(ja)",
".spectrum-FieldLabel:lang(ko)",
- ".spectrum-FieldLabel:lang(zh)",
- ".spectrum-Form",
- ".spectrum-Form--labelsAbove",
- ".spectrum-Form--labelsAbove .spectrum-Form-item",
- ".spectrum-Form-item",
- ".spectrum-Form-itemField",
- ".spectrum-Form-itemField > *",
- ".spectrum-Form-itemLabel",
- ".spectrum-Form-itemLabel.is-disabled",
- ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon"
+ ".spectrum-FieldLabel:lang(zh)"
],
"modifiers": [
"--mod-disabled-content-color",
@@ -30,67 +17,39 @@
"--mod-field-label-bottom-to-text",
"--mod-field-label-text-to-asterisk",
"--mod-field-label-top-to-text",
+ "--mod-fieldlabel-color",
"--mod-fieldlabel-font-size",
"--mod-fieldlabel-font-weight",
"--mod-fieldlabel-line-height",
"--mod-fieldlabel-line-height-cjk",
+ "--mod-fieldlabel-margin-block",
+ "--mod-fieldlabel-margin-block-end",
+ "--mod-fieldlabel-margin-block-start",
+ "--mod-fieldlabel-margin-inline",
+ "--mod-fieldlabel-margin-inline-end",
+ "--mod-fieldlabel-margin-inline-start",
"--mod-fieldlabel-min-height",
+ "--mod-fieldlabel-padding-block",
+ "--mod-fieldlabel-padding-inline",
"--mod-fieldlabel-side-margin-block-start",
- "--mod-fieldlabel-side-padding-right",
- "--mod-form-grid-template-columns",
- "--mod-form-grid-template-columns-labels-above",
- "--mod-form-inline-size",
- "--mod-form-item-block-spacing",
- "--mod-form-item-block-spacing-labels-above"
+ "--mod-fieldlabel-side-padding-right"
],
"component": [
+ "--spectrum-field-label-bottom-to-text",
+ "--spectrum-field-label-color",
+ "--spectrum-field-label-disabled-content-color",
+ "--spectrum-field-label-font-size",
+ "--spectrum-field-label-font-weight",
+ "--spectrum-field-label-line-height",
+ "--spectrum-field-label-line-height-cjk",
+ "--spectrum-field-label-min-height",
+ "--spectrum-field-label-side-margin-block-start",
+ "--spectrum-field-label-side-padding-right",
"--spectrum-field-label-text-to-asterisk",
- "--spectrum-field-label-text-to-asterisk-extra-large",
- "--spectrum-field-label-text-to-asterisk-large",
- "--spectrum-field-label-text-to-asterisk-medium",
- "--spectrum-field-label-text-to-asterisk-small",
- "--spectrum-field-label-top-margin-extra-large",
- "--spectrum-field-label-top-margin-large",
- "--spectrum-field-label-top-margin-medium",
- "--spectrum-field-label-top-margin-small",
- "--spectrum-fieldlabel-bottom-to-text",
- "--spectrum-fieldlabel-color",
- "--spectrum-fieldlabel-font-size",
- "--spectrum-fieldlabel-font-weight",
- "--spectrum-fieldlabel-line-height",
- "--spectrum-fieldlabel-line-height-cjk",
- "--spectrum-fieldlabel-min-height",
- "--spectrum-fieldlabel-side-margin-block-start",
- "--spectrum-fieldlabel-side-padding-right",
- "--spectrum-fieldlabel-top-to-text"
- ],
- "global": [
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-75",
- "--spectrum-disabled-content-color",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-75",
- "--spectrum-line-height-100",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-regular-font-weight",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-tableform-item-block-spacing"
+ "--spectrum-field-label-top-to-text"
],
+ "global": [],
"system-theme": [],
- "passthroughs": [
- "--mod-tableform-item-block-spacing",
- "--mod-tableform-item-block-spacing-labels-above"
- ],
- "high-contrast": ["--highcontrast-disabled-content-color"]
+ "passthroughs": [],
+ "high-contrast": ["--highcontrast-field-label-disabled-content-color"]
}
diff --git a/components/fieldlabel/metadata/mods.md b/components/fieldlabel/metadata/mods.md
index 35f6422ca6a..b7fb79c638a 100644
--- a/components/fieldlabel/metadata/mods.md
+++ b/components/fieldlabel/metadata/mods.md
@@ -1,19 +1,23 @@
-| Modifiable custom properties |
-| ----------------------------------------------- |
-| `--mod-disabled-content-color` |
-| `--mod-field-label-asterisk-vertical-align` |
-| `--mod-field-label-bottom-to-text` |
-| `--mod-field-label-text-to-asterisk` |
-| `--mod-field-label-top-to-text` |
-| `--mod-fieldlabel-font-size` |
-| `--mod-fieldlabel-font-weight` |
-| `--mod-fieldlabel-line-height` |
-| `--mod-fieldlabel-line-height-cjk` |
-| `--mod-fieldlabel-min-height` |
-| `--mod-fieldlabel-side-margin-block-start` |
-| `--mod-fieldlabel-side-padding-right` |
-| `--mod-form-grid-template-columns` |
-| `--mod-form-grid-template-columns-labels-above` |
-| `--mod-form-inline-size` |
-| `--mod-form-item-block-spacing` |
-| `--mod-form-item-block-spacing-labels-above` |
+| Modifiable custom properties |
+| ------------------------------------------- |
+| `--mod-disabled-content-color` |
+| `--mod-field-label-asterisk-vertical-align` |
+| `--mod-field-label-bottom-to-text` |
+| `--mod-field-label-text-to-asterisk` |
+| `--mod-field-label-top-to-text` |
+| `--mod-fieldlabel-color` |
+| `--mod-fieldlabel-font-size` |
+| `--mod-fieldlabel-font-weight` |
+| `--mod-fieldlabel-line-height` |
+| `--mod-fieldlabel-line-height-cjk` |
+| `--mod-fieldlabel-margin-block` |
+| `--mod-fieldlabel-margin-block-end` |
+| `--mod-fieldlabel-margin-block-start` |
+| `--mod-fieldlabel-margin-inline` |
+| `--mod-fieldlabel-margin-inline-end` |
+| `--mod-fieldlabel-margin-inline-start` |
+| `--mod-fieldlabel-min-height` |
+| `--mod-fieldlabel-padding-block` |
+| `--mod-fieldlabel-padding-inline` |
+| `--mod-fieldlabel-side-margin-block-start` |
+| `--mod-fieldlabel-side-padding-right` |
diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json
index 3abf4885c02..a9e9a107663 100644
--- a/components/fieldlabel/package.json
+++ b/components/fieldlabel/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/fieldlabel",
- "version": "8.2.0",
+ "version": "9.0.0-s2-foundations.16",
"description": "The Spectrum CSS fieldlabel component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js
index 36669ac1b37..a6245d1105b 100644
--- a/components/fieldlabel/stories/fieldlabel.stories.js
+++ b/components/fieldlabel/stories/fieldlabel.stories.js
@@ -45,6 +45,10 @@ export default {
label: "Label",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=16090-95",
+ },
packageJson,
metadata,
},
diff --git a/components/fieldlabel/stories/form.template.js b/components/fieldlabel/stories/form.template.js
deleted file mode 100644
index 0b04ff96cbf..00000000000
--- a/components/fieldlabel/stories/form.template.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
-import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { repeat } from "lit/directives/repeat.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
-
-import "../index.css";
-
-export const Template = ({
- rootClass = "spectrum-Form",
- labelPosition = "top",
- fieldLabelAlignment = "left",
- customClasses = [],
- customStyles = {},
- id = getRandomId("form"),
- items = [],
-}, context) => html`
-
-`;
diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js
index 7f5477e4d5f..97fd584410a 100644
--- a/components/fieldlabel/stories/template.js
+++ b/components/fieldlabel/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-FieldLabel",
diff --git a/components/fieldlabel/themes/express.css b/components/fieldlabel/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/fieldlabel/themes/express.css
+++ b/components/fieldlabel/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/fieldlabel/themes/spectrum-two.css b/components/fieldlabel/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/fieldlabel/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/fieldlabel/themes/spectrum.css b/components/fieldlabel/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/fieldlabel/themes/spectrum.css
+++ b/components/fieldlabel/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/floatingactionbutton/CHANGELOG.md b/components/floatingactionbutton/CHANGELOG.md
index fe6a7559f7c..2e2af49a099 100644
--- a/components/floatingactionbutton/CHANGELOG.md
+++ b/components/floatingactionbutton/CHANGELOG.md
@@ -1,5 +1,167 @@
# Change Log
+## 3.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 3.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`43c7d40`](https://github.com/adobe/spectrum-css/commit/43c7d40cd97d75162fa954a9bd35cfcdbc37ccd1) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to static white background color and selected states
+
+### Patch Changes
+
+- Updated dependencies [[`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.19
+
+## 3.0.0-s2-foundations.11
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.10
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 2.2.0
### Minor Changes
diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css
index f44edcfd11a..966f6d8d77f 100644
--- a/components/floatingactionbutton/index.css
+++ b/components/floatingactionbutton/index.css
@@ -11,47 +11,10 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-FloatingActionButton {
- --spectrum-floating-action-button-size: var(--spectrum-component-height-200);
- --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200);
- --spectrum-floating-action-button-margin: var(--spectrum-spacing-200);
- --spectrum-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x);
-
- --spectrum-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness);
- --spectrum-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-floating-action-button-background-color: var(--spectrum-accent-background-color-default);
- --spectrum-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover);
- --spectrum-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down);
- --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus);
- --spectrum-floating-action-button-icon-color: var(--spectrum-white);
- --spectrum-floating-action-button-icon-color-hover: var(--spectrum-white);
- --spectrum-floating-action-button-icon-color-down: var(--spectrum-white);
- --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white);
-}
-
-.spectrum-FloatingActionButton--secondary {
- --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color);
- --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color);
- --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color);
- --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color);
- --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-FloatingActionButton {
- &::after {
- /* make sure focus-ring renders */
- forced-color-adjust: none;
- }
-
--highcontrast-floating-action-button-background-color: ButtonText;
--highcontrast-floating-action-button-background-color-hover: Highlight;
--highcontrast-floating-action-button-background-color-down: Highlight;
@@ -61,6 +24,11 @@
--highcontrast-floating-action-button-icon-color-hover: ButtonFace;
--highcontrast-floating-action-button-icon-color-down: ButtonFace;
--highcontrast-floating-action-button-icon-color-key-focus: ButtonFace;
+
+ &::after {
+ /* make sure focus-ring renders */
+ forced-color-adjust: none;
+ }
}
}
diff --git a/components/floatingactionbutton/metadata/metadata.json b/components/floatingactionbutton/metadata/metadata.json
index 093c5517581..7334cdb2d37 100644
--- a/components/floatingactionbutton/metadata/metadata.json
+++ b/components/floatingactionbutton/metadata/metadata.json
@@ -2,7 +2,6 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-FloatingActionButton",
- ".spectrum-FloatingActionButton--secondary",
".spectrum-FloatingActionButton:active",
".spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon",
".spectrum-FloatingActionButton:after",
@@ -56,26 +55,7 @@
"--spectrum-floating-action-button-padding",
"--spectrum-floating-action-button-size"
],
- "global": [
- "--spectrum-accent-background-color-default",
- "--spectrum-accent-background-color-down",
- "--spectrum-accent-background-color-hover",
- "--spectrum-accent-background-color-key-focus",
- "--spectrum-background-layer-2-color",
- "--spectrum-component-height-200",
- "--spectrum-component-pill-edge-to-visual-only-200",
- "--spectrum-drop-shadow-x",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-neutral-subdued-content-color-down",
- "--spectrum-neutral-subdued-content-color-hover",
- "--spectrum-neutral-subdued-content-color-key-focus",
- "--spectrum-spacing-200",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-200"
- ],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": [
diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json
index d7e065bc10f..9d68834017e 100644
--- a/components/floatingactionbutton/package.json
+++ b/components/floatingactionbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/floatingactionbutton",
- "version": "2.2.0",
+ "version": "3.0.0-s2-foundations.14",
"description": "The Spectrum CSS floatingactionbutton component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/floatingactionbutton/stories/template.js b/components/floatingactionbutton/stories/template.js
index c82eb7bb687..bd9f973bd61 100644
--- a/components/floatingactionbutton/stories/template.js
+++ b/components/floatingactionbutton/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-FloatingActionButton",
diff --git a/components/floatingactionbutton/themes/express.css b/components/floatingactionbutton/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/floatingactionbutton/themes/express.css
+++ b/components/floatingactionbutton/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/floatingactionbutton/themes/spectrum-two.css b/components/floatingactionbutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/floatingactionbutton/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/floatingactionbutton/themes/spectrum.css b/components/floatingactionbutton/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/floatingactionbutton/themes/spectrum.css
+++ b/components/floatingactionbutton/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/form/CHANGELOG.md b/components/form/CHANGELOG.md
new file mode 100644
index 00000000000..52b1a35c6a2
--- /dev/null
+++ b/components/form/CHANGELOG.md
@@ -0,0 +1,10 @@
+# Change Log
+
+## 0.0.0-s2-foundations.1
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`085ecbc`](https://github.com/adobe/spectrum-css/commit/085ecbc739cf736e8d95377d605f2a7c4104bcc0) Thanks [@pfulton](https://github.com/pfulton)! - Pulled out _form_ from _fieldlabel_ package.
+ Pulled out _meter_ from _progressbar_ package.
+
+ [SWC-522] fix hover style regression
diff --git a/components/page/README.md b/components/form/README.md
similarity index 82%
rename from components/page/README.md
rename to components/form/README.md
index b9ab95ef3ff..7b4cce7b04f 100644
--- a/components/page/README.md
+++ b/components/form/README.md
@@ -1,6 +1,6 @@
-# @spectrum-css/page
+# @spectrum-css/form
-> The Spectrum CSS page component
+> The Spectrum CSS form component
This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
diff --git a/components/form/index.css b/components/form/index.css
new file mode 100644
index 00000000000..50807f073a3
--- /dev/null
+++ b/components/form/index.css
@@ -0,0 +1,83 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@import "./themes/spectrum-two.css";
+
+.spectrum-Form {
+ --spectrum-form-item-block-spacing: var(--spectrum-spacing-300);
+ --spectrum-form-item-block-spacing-labels-above: var(--spectrum-spacing-200);
+
+ --spectrum-form-grid-template-columns: auto auto;
+ --spectrum-form-grid-template-columns-labels-above: auto;
+
+ --spectrum-form-item-disabled-content-color: var(--spectrum-disabled-content-color);
+
+ margin: 0;
+ display: grid;
+ grid-template-columns: var(--mod-form-grid-template-columns, var(--spectrum-form-grid-template-columns));
+ inline-size: var(--mod-form-inline-size, fit-content);
+ justify-content: start;
+ row-gap: var(--mod-form-item-block-spacing, var(--spectrum-form-item-block-spacing));
+
+}
+
+/* Row */
+.spectrum-Form-item {
+ display: contents;
+}
+
+@supports (grid-template-columns: subgrid) {
+ .spectrum-Form-item {
+ display: grid;
+ grid-column: span 2;
+ grid-template-columns: subgrid;
+ }
+}
+
+.spectrum-Form-itemLabel,
+.spectrum-Form-itemField {
+ display: block;
+}
+
+/* Fix extra space after inline-flex elements such as stepper. */
+.spectrum-Form-itemField > * {
+ vertical-align: top;
+}
+
+/* Rows with stacked alignment */
+.spectrum-Form--labelsAbove {
+ --mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--spectrum-form-item-block-spacing-labels-above));
+ --mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, var(--spectrum-form-grid-template-columns-labels-above));
+
+ .spectrum-Form-item {
+ display: block;
+ }
+}
+
+/********* Disabled state *********/
+.spectrum-Form-itemLabel {
+ &.is-disabled {
+ color: var(--highcontrast-form-item-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color)));
+
+ .spectrum-FieldLabel-requiredIcon {
+ color: var(--highcontrast-form-item-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color)));
+ }
+ }
+}
+
+/********* WHCM *********/
+@media (forced-colors: active) {
+ .spectrum-Form {
+ --highcontrast-form-item-disabled-content-color: GrayText;
+ }
+}
diff --git a/components/form/metadata/metadata.json b/components/form/metadata/metadata.json
new file mode 100644
index 00000000000..88655f8edd3
--- /dev/null
+++ b/components/form/metadata/metadata.json
@@ -0,0 +1,37 @@
+{
+ "sourceFile": "index.css",
+ "selectors": [
+ ".spectrum-Form",
+ ".spectrum-Form--labelsAbove",
+ ".spectrum-Form--labelsAbove .spectrum-Form-item",
+ ".spectrum-Form-item",
+ ".spectrum-Form-itemField",
+ ".spectrum-Form-itemField > *",
+ ".spectrum-Form-itemLabel",
+ ".spectrum-Form-itemLabel.is-disabled",
+ ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon"
+ ],
+ "modifiers": [
+ "--mod-disabled-content-color",
+ "--mod-form-grid-template-columns",
+ "--mod-form-grid-template-columns-labels-above",
+ "--mod-form-inline-size",
+ "--mod-form-item-block-spacing",
+ "--mod-form-item-block-spacing-labels-above"
+ ],
+ "component": [
+ "--spectrum-form-grid-template-columns",
+ "--spectrum-form-grid-template-columns-labels-above",
+ "--spectrum-form-item-block-spacing",
+ "--spectrum-form-item-block-spacing-labels-above",
+ "--spectrum-form-item-disabled-content-color"
+ ],
+ "global": [
+ "--spectrum-disabled-content-color",
+ "--spectrum-spacing-200",
+ "--spectrum-spacing-300"
+ ],
+ "system-theme": [],
+ "passthroughs": [],
+ "high-contrast": ["--highcontrast-form-item-disabled-content-color"]
+}
diff --git a/components/form/metadata/mods.md b/components/form/metadata/mods.md
new file mode 100644
index 00000000000..bea9efef78a
--- /dev/null
+++ b/components/form/metadata/mods.md
@@ -0,0 +1,8 @@
+| Modifiable custom properties |
+| ----------------------------------------------- |
+| `--mod-disabled-content-color` |
+| `--mod-form-grid-template-columns` |
+| `--mod-form-grid-template-columns-labels-above` |
+| `--mod-form-inline-size` |
+| `--mod-form-item-block-spacing` |
+| `--mod-form-item-block-spacing-labels-above` |
diff --git a/components/page/package.json b/components/form/package.json
similarity index 79%
rename from components/page/package.json
rename to components/form/package.json
index 64690a19fa0..83ef961d43a 100644
--- a/components/page/package.json
+++ b/components/form/package.json
@@ -1,14 +1,14 @@
{
- "name": "@spectrum-css/page",
- "version": "8.2.0",
- "description": "The Spectrum CSS page component",
+ "name": "@spectrum-css/form",
+ "version": "0.0.0-s2-foundations.1",
+ "description": "The Spectrum CSS form component",
"license": "Apache-2.0",
"author": "Adobe",
- "homepage": "https://opensource.adobe.com/spectrum-css/page",
+ "homepage": "https://opensource.adobe.com/spectrum-css/form",
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-css.git",
- "directory": "components/page"
+ "directory": "components/form"
},
"bugs": {
"url": "https://github.com/adobe/spectrum-css/issues"
diff --git a/components/page/project.json b/components/form/project.json
similarity index 94%
rename from components/page/project.json
rename to components/form/project.json
index ba93abb5315..f419af393ec 100644
--- a/components/page/project.json
+++ b/components/form/project.json
@@ -1,6 +1,6 @@
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
- "name": "page",
+ "name": "form",
"tags": ["component"],
"targets": {
"build": {},
diff --git a/components/fieldlabel/stories/form.stories.js b/components/form/stories/form.stories.js
similarity index 98%
rename from components/fieldlabel/stories/form.stories.js
rename to components/form/stories/form.stories.js
index fb26920d530..5adbb790303 100644
--- a/components/fieldlabel/stories/form.stories.js
+++ b/components/form/stories/form.stories.js
@@ -6,8 +6,8 @@ import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js";
import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
import metadata from "../metadata/metadata.json";
import packageJson from "../package.json";
-import { Template } from "./form.template.js";
import { FormGroup } from "./form.test.js";
+import { Template } from "./template.js";
/**
* The form component is used for aligning multiple inputs and field groups within a form. It provides structure and spacing for your form fields.
diff --git a/components/fieldlabel/stories/form.test.js b/components/form/stories/form.test.js
similarity index 88%
rename from components/fieldlabel/stories/form.test.js
rename to components/form/stories/form.test.js
index bd9fc862243..b2dc7e74327 100644
--- a/components/fieldlabel/stories/form.test.js
+++ b/components/form/stories/form.test.js
@@ -1,5 +1,5 @@
import { Variants } from "@spectrum-css/preview/decorators";
-import { Template } from "./form.template.js";
+import { Template } from "./template.js";
export const FormGroup = Variants({
Template,
diff --git a/components/form/stories/template.js b/components/form/stories/template.js
new file mode 100644
index 00000000000..c75456bc895
--- /dev/null
+++ b/components/form/stories/template.js
@@ -0,0 +1,56 @@
+import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
+import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
+
+import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
+
+export const Template = ({
+ rootClass = "spectrum-Form",
+ labelPosition = "top",
+ fieldLabelAlignment = "left",
+ customClasses = [],
+ customStyles = {},
+ id = getRandomId("form"),
+ items = [],
+} = {}, context = {}) => {
+ return html`
+
+ `;
+};
diff --git a/tokens/custom-express/custom-vars.css b/components/form/themes/express.css
similarity index 85%
rename from tokens/custom-express/custom-vars.css
rename to components/form/themes/express.css
index d21931db513..9fd550418f2 100644
--- a/tokens/custom-express/custom-vars.css
+++ b/components/form/themes/express.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-/* This file contains overrides and additions to core tokens */
+/* @combine .spectrum.spectrum--express */
-.spectrum--express {
- --system: express;
-}
+@import "./spectrum.css";
diff --git a/components/form/themes/spectrum-two.css b/components/form/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/form/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/form/themes/spectrum.css b/components/form/themes/spectrum.css
new file mode 100644
index 00000000000..3d81bc564b5
--- /dev/null
+++ b/components/form/themes/spectrum.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/helptext/CHANGELOG.md b/components/helptext/CHANGELOG.md
index 7ad4ed5aa84..d2fd24e5b84 100644
--- a/components/helptext/CHANGELOG.md
+++ b/components/helptext/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/helptext/index.css b/components/helptext/index.css
index 1c477287c81..7874b0ce2bd 100644
--- a/components/helptext/index.css
+++ b/components/helptext/index.css
@@ -11,79 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-HelpText {
- --spectrum-helptext-line-height: var(--spectrum-line-height-100);
- --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color);
-
- &.spectrum-HelpText--neutral {
- --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
- }
-
- &.spectrum-HelpText--negative {
- --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900);
- --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900);
- }
-
- &.is-disabled {
- --spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color);
- --spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color);
- }
-
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100);
- }
-}
-
-.spectrum-HelpText--sizeS {
- --spectrum-helptext-min-height: var(--spectrum-component-height-75);
- --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-helptext-font-size: var(--spectrum-font-size-75);
- --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
- --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small);
- --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
- --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-}
-
-.spectrum-HelpText--sizeM {
- --spectrum-helptext-min-height: var(--spectrum-component-height-75);
- --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-helptext-font-size: var(--spectrum-font-size-75);
- --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
- --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium);
- --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
- --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-}
-
-.spectrum-HelpText--sizeL {
- --spectrum-helptext-min-height: var(--spectrum-component-height-100);
- --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-helptext-font-size: var(--spectrum-font-size-100);
- --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
- --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large);
- --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
- --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-}
-
-.spectrum-HelpText--sizeXL {
- --spectrum-helptext-min-height: var(--spectrum-component-height-200);
- --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
- --spectrum-helptext-font-size: var(--spectrum-font-size-200);
- --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200);
- --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large);
- --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
- --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-HelpText {
@@ -100,6 +28,8 @@
}
.spectrum-HelpText {
+ --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
+
color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
display: flex;
font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size));
diff --git a/components/helptext/metadata/metadata.json b/components/helptext/metadata/metadata.json
index b6600329896..19418128584 100644
--- a/components/helptext/metadata/metadata.json
+++ b/components/helptext/metadata/metadata.json
@@ -4,24 +4,14 @@
".spectrum-HelpText",
".spectrum-HelpText .spectrum-HelpText-text",
".spectrum-HelpText .spectrum-HelpText-validationIcon",
- ".spectrum-HelpText--sizeL",
- ".spectrum-HelpText--sizeM",
- ".spectrum-HelpText--sizeS",
- ".spectrum-HelpText--sizeXL",
- ".spectrum-HelpText.is-disabled",
".spectrum-HelpText.is-disabled .spectrum-HelpText-text",
".spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon",
- ".spectrum-HelpText.spectrum-HelpText--negative",
".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text",
".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon",
- ".spectrum-HelpText.spectrum-HelpText--neutral",
".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text",
".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon",
- ".spectrum-HelpText:lang(ja)",
".spectrum-HelpText:lang(ja) .spectrum-HelpText-text",
- ".spectrum-HelpText:lang(ko)",
".spectrum-HelpText:lang(ko) .spectrum-HelpText-text",
- ".spectrum-HelpText:lang(zh)",
".spectrum-HelpText:lang(zh) .spectrum-HelpText-text"
],
"modifiers": [
@@ -39,14 +29,9 @@
"--mod-helptext-top-to-workflow-icon"
],
"component": [
- "--spectrum-help-text-top-to-workflow-icon-extra-large",
- "--spectrum-help-text-top-to-workflow-icon-large",
- "--spectrum-help-text-top-to-workflow-icon-medium",
- "--spectrum-help-text-top-to-workflow-icon-small",
"--spectrum-helptext-bottom-to-text",
"--spectrum-helptext-bottom-to-workflow-icon",
"--spectrum-helptext-content-color-default",
- "--spectrum-helptext-disabled-content-color",
"--spectrum-helptext-font-size",
"--spectrum-helptext-icon-color-default",
"--spectrum-helptext-icon-size",
@@ -57,32 +42,7 @@
"--spectrum-helptext-top-to-text",
"--spectrum-helptext-top-to-workflow-icon"
],
- "global": [
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-75",
- "--spectrum-disabled-content-color",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-75",
- "--spectrum-line-height-100",
- "--spectrum-negative-color-900",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-75",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-75"
- ],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": [
diff --git a/components/helptext/package.json b/components/helptext/package.json
index c09a64c5ff3..7f08de20b02 100644
--- a/components/helptext/package.json
+++ b/components/helptext/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/helptext",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS helptext component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js
index e19f0ebef36..ef05dc29d45 100644
--- a/components/helptext/stories/helptext.stories.js
+++ b/components/helptext/stories/helptext.stories.js
@@ -57,6 +57,10 @@ export default {
size: "m",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13653-196",
+ },
packageJson,
metadata,
},
diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js
index 74fa628ae2a..61d5e243da5 100644
--- a/components/helptext/stories/template.js
+++ b/components/helptext/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-HelpText",
diff --git a/components/helptext/themes/express.css b/components/helptext/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/helptext/themes/express.css
+++ b/components/helptext/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/helptext/themes/spectrum-two.css b/components/helptext/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/helptext/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/helptext/themes/spectrum.css b/components/helptext/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/helptext/themes/spectrum.css
+++ b/components/helptext/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/icon/CHANGELOG.md b/components/icon/CHANGELOG.md
index b3ab1a66566..4dd0d79a8b0 100644
--- a/components/icon/CHANGELOG.md
+++ b/components/icon/CHANGELOG.md
@@ -1,5 +1,196 @@
# Change Log
+## 8.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 8.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f38c66a`](https://github.com/adobe/spectrum-css/commit/f38c66a314c94058d7f8f084faa4967c89b20e7b) Thanks [@pfulton](https://github.com/pfulton)! - Fix icon sizing and checkbox border colors
+
+## 8.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.12
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.11
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.10
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`494da11`](https://github.com/adobe/spectrum-css/commit/494da118554c2ecc425564e42d25424325efc331) Thanks [@pfulton](https://github.com/pfulton)! - ## Feature [@spectrum-css/icon]
+
+ Update source files to load the mappings from component-level to global tokens for size and transform values. This will allow for more consistent and predictable behavior when using the `size` and `transform` props on icons when switching between contexts for S1, S2, and Express.
+
+ ## Patch [@spectrum-css/typography]
+
+ Remove the sourcemap footer from compiled assets.
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 7.2.0
### Minor Changes
diff --git a/components/icon/index.css b/components/icon/index.css
index ac23de00cbb..28d171ba8e6 100644
--- a/components/icon/index.css
+++ b/components/icon/index.css
@@ -11,7 +11,144 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-@import "./icons.css";
-@import "./workflow-icons.css";
-@import "./ui-icons.css";
+ @import "./themes/spectrum-two.css";
+
+ /*
+ * Component-specific icon transforms
+ */
+ .spectrum-UIIcon-ChevronDown50,
+ .spectrum-UIIcon-ChevronDown75,
+ .spectrum-UIIcon-ChevronDown100,
+ .spectrum-UIIcon-ChevronDown200,
+ .spectrum-UIIcon-ChevronDown300,
+ .spectrum-UIIcon-ChevronDown400,
+ .spectrum-UIIcon-ChevronDown500,
+ .spectrum-UIIcon-ArrowDown75,
+ .spectrum-UIIcon-ArrowDown100,
+ .spectrum-UIIcon-ArrowDown200,
+ .spectrum-UIIcon-ArrowDown300,
+ .spectrum-UIIcon-ArrowDown400,
+ .spectrum-UIIcon-ArrowDown500,
+ .spectrum-UIIcon-ArrowDown600 {
+ --spectrum-icon-transform: rotate(90deg);
+ }
+
+ .spectrum-UIIcon-ChevronLeft50,
+ .spectrum-UIIcon-ChevronLeft75,
+ .spectrum-UIIcon-ChevronLeft100,
+ .spectrum-UIIcon-ChevronLeft200,
+ .spectrum-UIIcon-ChevronLeft300,
+ .spectrum-UIIcon-ChevronLeft400,
+ .spectrum-UIIcon-ChevronLeft500,
+ .spectrum-UIIcon-ArrowLeft75,
+ .spectrum-UIIcon-ArrowLeft100,
+ .spectrum-UIIcon-ArrowLeft200,
+ .spectrum-UIIcon-ArrowLeft300,
+ .spectrum-UIIcon-ArrowLeft400,
+ .spectrum-UIIcon-ArrowLeft500,
+ .spectrum-UIIcon-ArrowLeft600 {
+ --spectrum-icon-transform: rotate(180deg);
+ }
+
+ .spectrum-UIIcon-ChevronUp50,
+ .spectrum-UIIcon-ChevronUp75,
+ .spectrum-UIIcon-ChevronUp100,
+ .spectrum-UIIcon-ChevronUp200,
+ .spectrum-UIIcon-ChevronUp300,
+ .spectrum-UIIcon-ChevronUp400,
+ .spectrum-UIIcon-ChevronUp500,
+ .spectrum-UIIcon-ArrowUp75,
+ .spectrum-UIIcon-ArrowUp100,
+ .spectrum-UIIcon-ArrowUp200,
+ .spectrum-UIIcon-ArrowUp300,
+ .spectrum-UIIcon-ArrowUp400,
+ .spectrum-UIIcon-ArrowUp500,
+ .spectrum-UIIcon-ArrowUp600 {
+ --spectrum-icon-transform: rotate(270deg);
+ }
+
+ /*
+ * Icon root class styles
+ */
+
+.spectrum-Icon,
+.spectrum-UIIcon,
+.spectrum-Icon--sizeM {
+ --spectrum-icon-size: var(--spectrum-icon-size-m);
+}
+
+/* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */
+.spectrum-Icon--sizeXXS {
+ --spectrum-icon-size: var(--spectrum-icon-size-xxs);
+}
+
+.spectrum-Icon--sizeXS {
+ --spectrum-icon-size: var(--spectrum-icon-size-xs);
+}
+
+.spectrum-Icon--sizeS {
+ --spectrum-icon-size: var(--spectrum-icon-size-s);
+}
+
+.spectrum-Icon--sizeL {
+ --spectrum-icon-size: var(--spectrum-icon-size-l);
+}
+
+.spectrum-Icon--sizeXL {
+ --spectrum-icon-size: var(--spectrum-icon-size-xl);
+}
+
+.spectrum-Icon--sizeXXL {
+ --spectrum-icon-size: var(--spectrum-icon-size-xxl);
+}
+
+.spectrum-Icon,
+.spectrum-UIIcon {
+ /* Don't catch clicks or hover, otherwise they may not escape the SVG. */
+ pointer-events: none;
+
+ /* Only some icons have a transform applied to them */
+ transform: var(--spectrum-icon-transform, none);
+
+ display: inline-block;
+ inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)));
+ block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)));
+
+ /* Use custom pass through or inherit the text color. */
+ color: var(--mod-icon-color, inherit);
+
+ /* Fill should match the current text color. */
+ fill: currentColor;
+}
+
+.spectrum-Icon {
+ img,
+ svg {
+ inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)));
+ block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)));
+ }
+}
+
+/*
+ * Medium/large scale
+ * ------------------
+ * In the "combined" versiom of the UI Icon SVGs, the medium and the large icons are
+ * contained within the same SVG. The two separate elements are shown or hidden based
+ * on the current platform scale.
+ */
+
+.spectrum-UIIcon--medium {
+ display: var(--mod-ui-icon-medium-display, var(--spectrum-ui-icon-medium-display, block));
+}
+
+.spectrum-UIIcon--large {
+ display: var(--mod-ui-icon-large-display, var(--spectrum-ui-icon-large-display, none));
+}
+
+@media (forced-colors: active) {
+ .spectrum-Icon,
+ .spectrum-UIIcon {
+ /* Automatically adjust the SVG to pick up the text color for High Contrast mode */
+ forced-color-adjust: auto;
+ }
+}
diff --git a/components/icon/metadata/metadata.json b/components/icon/metadata/metadata.json
index 7f5d27e3789..9c176c4b3ea 100644
--- a/components/icon/metadata/metadata.json
+++ b/components/icon/metadata/metadata.json
@@ -5,6 +5,7 @@
".spectrum-Icon img",
".spectrum-Icon svg",
".spectrum-Icon--sizeL",
+ ".spectrum-Icon--sizeM",
".spectrum-Icon--sizeS",
".spectrum-Icon--sizeXL",
".spectrum-Icon--sizeXS",
@@ -27,13 +28,6 @@
".spectrum-UIIcon-ArrowLeft500",
".spectrum-UIIcon-ArrowLeft600",
".spectrum-UIIcon-ArrowLeft75",
- ".spectrum-UIIcon-ArrowRight100",
- ".spectrum-UIIcon-ArrowRight200",
- ".spectrum-UIIcon-ArrowRight300",
- ".spectrum-UIIcon-ArrowRight400",
- ".spectrum-UIIcon-ArrowRight500",
- ".spectrum-UIIcon-ArrowRight600",
- ".spectrum-UIIcon-ArrowRight75",
".spectrum-UIIcon-ArrowUp100",
".spectrum-UIIcon-ArrowUp200",
".spectrum-UIIcon-ArrowUp300",
@@ -41,18 +35,6 @@
".spectrum-UIIcon-ArrowUp500",
".spectrum-UIIcon-ArrowUp600",
".spectrum-UIIcon-ArrowUp75",
- ".spectrum-UIIcon-Asterisk100",
- ".spectrum-UIIcon-Asterisk200",
- ".spectrum-UIIcon-Asterisk300",
- ".spectrum-UIIcon-Asterisk75",
- ".spectrum-UIIcon-Checkmark100",
- ".spectrum-UIIcon-Checkmark200",
- ".spectrum-UIIcon-Checkmark300",
- ".spectrum-UIIcon-Checkmark400",
- ".spectrum-UIIcon-Checkmark50",
- ".spectrum-UIIcon-Checkmark500",
- ".spectrum-UIIcon-Checkmark600",
- ".spectrum-UIIcon-Checkmark75",
".spectrum-UIIcon-ChevronDown100",
".spectrum-UIIcon-ChevronDown200",
".spectrum-UIIcon-ChevronDown300",
@@ -67,39 +49,13 @@
".spectrum-UIIcon-ChevronLeft50",
".spectrum-UIIcon-ChevronLeft500",
".spectrum-UIIcon-ChevronLeft75",
- ".spectrum-UIIcon-ChevronRight100",
- ".spectrum-UIIcon-ChevronRight200",
- ".spectrum-UIIcon-ChevronRight300",
- ".spectrum-UIIcon-ChevronRight400",
- ".spectrum-UIIcon-ChevronRight50",
- ".spectrum-UIIcon-ChevronRight500",
- ".spectrum-UIIcon-ChevronRight75",
".spectrum-UIIcon-ChevronUp100",
".spectrum-UIIcon-ChevronUp200",
".spectrum-UIIcon-ChevronUp300",
".spectrum-UIIcon-ChevronUp400",
".spectrum-UIIcon-ChevronUp50",
".spectrum-UIIcon-ChevronUp500",
- ".spectrum-UIIcon-ChevronUp75",
- ".spectrum-UIIcon-CornerTriangle100",
- ".spectrum-UIIcon-CornerTriangle200",
- ".spectrum-UIIcon-CornerTriangle300",
- ".spectrum-UIIcon-CornerTriangle75",
- ".spectrum-UIIcon-Cross100",
- ".spectrum-UIIcon-Cross200",
- ".spectrum-UIIcon-Cross300",
- ".spectrum-UIIcon-Cross400",
- ".spectrum-UIIcon-Cross500",
- ".spectrum-UIIcon-Cross600",
- ".spectrum-UIIcon-Cross75",
- ".spectrum-UIIcon-Dash100",
- ".spectrum-UIIcon-Dash200",
- ".spectrum-UIIcon-Dash300",
- ".spectrum-UIIcon-Dash400",
- ".spectrum-UIIcon-Dash50",
- ".spectrum-UIIcon-Dash500",
- ".spectrum-UIIcon-Dash600",
- ".spectrum-UIIcon-Dash75"
+ ".spectrum-UIIcon-ChevronUp75"
],
"modifiers": [
"--mod-icon-block-size",
@@ -110,65 +66,19 @@
"--mod-ui-icon-medium-display"
],
"component": [
- "--spectrum-icon-block-size",
- "--spectrum-icon-inline-size",
- "--spectrum-icon-size"
+ "--spectrum-icon-size",
+ "--spectrum-icon-size-l",
+ "--spectrum-icon-size-m",
+ "--spectrum-icon-size-s",
+ "--spectrum-icon-size-xl",
+ "--spectrum-icon-size-xs",
+ "--spectrum-icon-size-xxl",
+ "--spectrum-icon-size-xxs",
+ "--spectrum-icon-transform"
],
"global": [
- "--spectrum-arrow-icon-size-100",
- "--spectrum-arrow-icon-size-200",
- "--spectrum-arrow-icon-size-300",
- "--spectrum-arrow-icon-size-400",
- "--spectrum-arrow-icon-size-500",
- "--spectrum-arrow-icon-size-600",
- "--spectrum-arrow-icon-size-75",
- "--spectrum-asterisk-icon-size-100",
- "--spectrum-asterisk-icon-size-200",
- "--spectrum-asterisk-icon-size-300",
- "--spectrum-asterisk-icon-size-75",
- "--spectrum-checkmark-icon-size-100",
- "--spectrum-checkmark-icon-size-200",
- "--spectrum-checkmark-icon-size-300",
- "--spectrum-checkmark-icon-size-400",
- "--spectrum-checkmark-icon-size-50",
- "--spectrum-checkmark-icon-size-500",
- "--spectrum-checkmark-icon-size-600",
- "--spectrum-checkmark-icon-size-75",
- "--spectrum-chevron-icon-size-100",
- "--spectrum-chevron-icon-size-200",
- "--spectrum-chevron-icon-size-300",
- "--spectrum-chevron-icon-size-400",
- "--spectrum-chevron-icon-size-50",
- "--spectrum-chevron-icon-size-500",
- "--spectrum-chevron-icon-size-75",
- "--spectrum-corner-triangle-icon-size-100",
- "--spectrum-corner-triangle-icon-size-200",
- "--spectrum-corner-triangle-icon-size-300",
- "--spectrum-corner-triangle-icon-size-75",
- "--spectrum-cross-icon-size-100",
- "--spectrum-cross-icon-size-200",
- "--spectrum-cross-icon-size-300",
- "--spectrum-cross-icon-size-400",
- "--spectrum-cross-icon-size-500",
- "--spectrum-cross-icon-size-600",
- "--spectrum-cross-icon-size-75",
- "--spectrum-dash-icon-size-100",
- "--spectrum-dash-icon-size-200",
- "--spectrum-dash-icon-size-300",
- "--spectrum-dash-icon-size-400",
- "--spectrum-dash-icon-size-50",
- "--spectrum-dash-icon-size-500",
- "--spectrum-dash-icon-size-600",
- "--spectrum-dash-icon-size-75",
"--spectrum-ui-icon-large-display",
- "--spectrum-ui-icon-medium-display",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-50",
- "--spectrum-workflow-icon-size-75",
- "--spectrum-workflow-icon-size-xxl",
- "--spectrum-workflow-icon-size-xxs"
+ "--spectrum-ui-icon-medium-display"
],
"system-theme": [],
"passthroughs": [],
diff --git a/components/icon/package.json b/components/icon/package.json
index 293aeaf0f96..35e2d854857 100644
--- a/components/icon/package.json
+++ b/components/icon/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/icon",
- "version": "7.2.0",
+ "version": "8.0.0-s2-foundations.17",
"description": "The Spectrum CSS icon component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
index ea28140a2cb..01d8c6a3b92 100644
--- a/components/icon/stories/icon.stories.js
+++ b/components/icon/stories/icon.stories.js
@@ -104,7 +104,10 @@ WithForcedColors.tags = ["!autodocs", "!dev"];
WithForcedColors.parameters = {
chromatic: {
forcedColors: "active",
- modes: disableDefaultModes
+ modes: {
+ ...disableDefaultModes,
+ "Mobile": { disable: true },
+ },
},
};
diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js
index cf4b2067091..16f3b57bffb 100644
--- a/components/icon/stories/template.js
+++ b/components/icon/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
/**
* @typedef { keyof import("./icon.stories.js").default.args } IconArgs
@@ -111,6 +114,7 @@ export const Template = ({
uiIconSizes,
} = {}, context = {}) => {
const { globals = {}, loaded = {} } = context;
+
const scale = globals.scale ?? "medium";
if (!workflowIcons || !uiIcons || !uiIconSizes) {
diff --git a/components/icon/themes/express.css b/components/icon/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/icon/themes/express.css
+++ b/components/icon/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/icon/themes/spectrum-two.css b/components/icon/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/icon/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/icon/themes/spectrum.css b/components/icon/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/icon/themes/spectrum.css
+++ b/components/icon/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/illustratedmessage/CHANGELOG.md b/components/illustratedmessage/CHANGELOG.md
index a79e098c865..13f90fb5319 100644
--- a/components/illustratedmessage/CHANGELOG.md
+++ b/components/illustratedmessage/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 8.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.17
+
+## 8.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/typography@7.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/typography@7.0.0-s2-foundations.0
+
## 7.2.0
### Minor Changes
diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css
index f51cba797af..ae48a68291c 100644
--- a/components/illustratedmessage/index.css
+++ b/components/illustratedmessage/index.css
@@ -11,42 +11,7 @@
* governing permissions and limitations under the License.
*/
- @import "./themes/express.css";
-
-.spectrum-IllustratedMessage {
- /* Size & Spacing */
- --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
- --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
- --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400);
- --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75);
-
- /* Illustration */
- --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color);
- --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color);
-
- /* Title */
- --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style);
- --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size);
- --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height);
- --spectrum-illustrated-message-title-color: var(--spectrum-heading-color);
-
- /* Description */
- --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size);
- --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height);
- --spectrum-illustrated-message-description-color: var(--spectrum-body-color);
-
- /* CJK (Chinese, Japanese, and Korean) language support */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size);
- }
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-IllustratedMessage {
@@ -95,6 +60,7 @@
max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size));
margin-block-start: 0;
margin-block-end: var(--mod-illustrated-message-heading-to-body, 0);
+
}
.spectrum-IllustratedMessage-description {
diff --git a/components/illustratedmessage/metadata/metadata.json b/components/illustratedmessage/metadata/metadata.json
index 24de798ac33..9bf9df670e2 100644
--- a/components/illustratedmessage/metadata/metadata.json
+++ b/components/illustratedmessage/metadata/metadata.json
@@ -5,10 +5,7 @@
".spectrum-IllustratedMessage-accent",
".spectrum-IllustratedMessage-description",
".spectrum-IllustratedMessage-heading",
- ".spectrum-IllustratedMessage-illustration",
- ".spectrum-IllustratedMessage:lang(ja)",
- ".spectrum-IllustratedMessage:lang(ko)",
- ".spectrum-IllustratedMessage:lang(zh)"
+ ".spectrum-IllustratedMessage-illustration"
],
"modifiers": [
"--mod-illustrated-message-content-maximum-width",
@@ -38,8 +35,6 @@
"--mod-illustrated-message-title-to-heading"
],
"component": [
- "--spectrum-illustrated-message-body-size",
- "--spectrum-illustrated-message-cjk-title-size",
"--spectrum-illustrated-message-description-color",
"--spectrum-illustrated-message-description-font-family",
"--spectrum-illustrated-message-description-font-size",
@@ -51,31 +46,15 @@
"--spectrum-illustrated-message-heading-to-description",
"--spectrum-illustrated-message-illustration-accent-color",
"--spectrum-illustrated-message-illustration-color",
- "--spectrum-illustrated-message-maximum-width",
"--spectrum-illustrated-message-title-color",
"--spectrum-illustrated-message-title-font-family",
"--spectrum-illustrated-message-title-font-size",
"--spectrum-illustrated-message-title-font-style",
"--spectrum-illustrated-message-title-font-weight",
"--spectrum-illustrated-message-title-line-height",
- "--spectrum-illustrated-message-title-size",
"--spectrum-illustrated-message-title-to-heading"
],
- "global": [
- "--spectrum-accent-visual-color",
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-style",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-neutral-visual-color",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-400",
- "--spectrum-spacing-75"
- ],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": [
diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json
index 91cbbb9f7e4..ed010a059b0 100644
--- a/components/illustratedmessage/package.json
+++ b/components/illustratedmessage/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/illustratedmessage",
- "version": "7.2.0",
+ "version": "8.0.0-s2-foundations.15",
"description": "The Spectrum CSS illustratedmessage component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js
index 7daaa86e92a..2333714d6f0 100644
--- a/components/illustratedmessage/stories/illustratedmessage.stories.js
+++ b/components/illustratedmessage/stories/illustratedmessage.stories.js
@@ -44,6 +44,10 @@ export default {
useAccentColor: false,
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=20032-601",
+ },
packageJson,
metadata,
},
diff --git a/components/illustratedmessage/stories/template.js b/components/illustratedmessage/stories/template.js
index 58b0a69076e..9d9f06852b9 100644
--- a/components/illustratedmessage/stories/template.js
+++ b/components/illustratedmessage/stories/template.js
@@ -4,6 +4,9 @@ import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-IllustratedMessage",
@@ -11,34 +14,36 @@ export const Template = ({
description,
customClasses = [],
useAccentColor = false,
-} = {}, context = {}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- >
- ${illustrationSvgMarkup(useAccentColor)}
- ${when(heading, () =>
- Typography({
- semantics: "heading",
- "size": "m",
- customClasses: [`${rootClass}-heading`],
- content: [heading],
- }, context)
- )}
- ${when(description, () =>
- Typography({
- semantics: "body",
- "size": "s",
- customClasses: [`${rootClass}-description`],
- content: [
- ...description.map((c) => (typeof c === "function" ? c({}) : c))
- ],
- }, context)
- )}
-
-`;
+} = {}, context = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ >
+ ${illustrationSvgMarkup(useAccentColor)}
+ ${when(heading, () =>
+ Typography({
+ semantics: "heading",
+ "size": "m",
+ customClasses: [`${rootClass}-heading`],
+ content: [heading],
+ }, context)
+ )}
+ ${when(description, () =>
+ Typography({
+ semantics: "body",
+ "size": "s",
+ customClasses: [`${rootClass}-description`],
+ content: [
+ ...description.map((c) => (typeof c === "function" ? c({}) : c))
+ ],
+ }, context)
+ )}
+
+ `;
+};
const illustrationSvgMarkup = (withAccentColorClass = false) => html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/illustratedmessage/themes/spectrum.css b/components/illustratedmessage/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/illustratedmessage/themes/spectrum.css
+++ b/components/illustratedmessage/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/infieldbutton/CHANGELOG.md b/components/infieldbutton/CHANGELOG.md
index adb201756c4..1763fe372b8 100644
--- a/components/infieldbutton/CHANGELOG.md
+++ b/components/infieldbutton/CHANGELOG.md
@@ -1,5 +1,204 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 6.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#3040](https://github.com/adobe/spectrum-css/pull/3040) [`cf2e737`](https://github.com/adobe/spectrum-css/commit/cf2e73743b2c3d43d4c51fceeabfb99fda1ac4b5) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - Migrating --mod to index.css from infield button, logic button and table components
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
@@ -17,6 +216,12 @@
- [#3289](https://github.com/adobe/spectrum-css/pull/3289) [`d05f25f`](https://github.com/adobe/spectrum-css/commit/d05f25f971f2e0123ad0747c53ad0250c7cee707) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violation by removing unused custom property.
+## 5.1.4
+
+### Patch Changes
+
+- [#3289](https://github.com/adobe/spectrum-css/pull/3289) [`d05f25f`](https://github.com/adobe/spectrum-css/commit/d05f25f971f2e0123ad0747c53ad0250c7cee707) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violation by removing unused custom property.
+
## 5.1.3
### Patch Changes
diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css
index 2cf8eb7c715..67b2256a81f 100644
--- a/components/infieldbutton/index.css
+++ b/components/infieldbutton/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-InfieldButton {
/* Medium size is the default */
diff --git a/components/infieldbutton/metadata/metadata.json b/components/infieldbutton/metadata/metadata.json
index 1b524213f41..206aae26ed3 100644
--- a/components/infieldbutton/metadata/metadata.json
+++ b/components/infieldbutton/metadata/metadata.json
@@ -135,30 +135,28 @@
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-corner-radius-100",
- "--spectrum-corner-radius-75",
"--spectrum-disabled-background-color",
"--spectrum-disabled-content-color",
"--spectrum-global-animation-duration-100",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
- "--spectrum-gray-75",
+ "--spectrum-gray-50",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus"
],
"system-theme": [
- "--system-spectrum-infieldbutton-spectrum-infield-button-background-color",
- "--system-spectrum-infieldbutton-spectrum-infield-button-background-color-down",
- "--system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover",
- "--system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus",
- "--system-spectrum-infieldbutton-spectrum-infield-button-border-color",
- "--system-spectrum-infieldbutton-spectrum-infield-button-border-radius",
- "--system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset",
- "--system-spectrum-infieldbutton-spectrum-infield-button-border-width",
- "--system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start",
- "--system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start"
+ "--system-infield-button-background-color",
+ "--system-infield-button-background-color-down",
+ "--system-infield-button-background-color-hover",
+ "--system-infield-button-background-color-key-focus",
+ "--system-infield-button-border-color",
+ "--system-infield-button-border-radius",
+ "--system-infield-button-border-radius-reset",
+ "--system-infield-button-border-width",
+ "--system-infield-button-stacked-bottom-border-radius-end-start",
+ "--system-infield-button-stacked-top-border-radius-start-start"
],
"passthroughs": [],
"high-contrast": ["--highcontrast-infield-button-border-color"]
diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json
index 8fc651ed416..73b1ea9a7cc 100644
--- a/components/infieldbutton/package.json
+++ b/components/infieldbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/infieldbutton",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS infield button component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js
index 5cc77d42045..7f0b4ee8db1 100644
--- a/components/infieldbutton/stories/template.js
+++ b/components/infieldbutton/stories/template.js
@@ -4,6 +4,9 @@ import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = (
{
diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css
index 3eb94f10c9c..1d930d4cfee 100644
--- a/components/infieldbutton/themes/express.css
+++ b/components/infieldbutton/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-InfieldButton {
--spectrum-infield-button-border-width: 0;
--spectrum-infield-button-border-color: transparent;
diff --git a/components/infieldbutton/themes/spectrum-two.css b/components/infieldbutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..69b060d4e03
--- /dev/null
+++ b/components/infieldbutton/themes/spectrum-two.css
@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-InfieldButton {
+ --spectrum-infield-button-border-width: var(--spectrum-border-width-100);
+ --spectrum-infield-button-border-color: inherit;
+
+ --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-infield-button-border-radius-reset: 0;
+
+ /* Have to call these out specifically due to Express differences */
+ --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset);
+ --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset);
+
+ --spectrum-infield-button-background-color: var(--spectrum-gray-50);
+ --spectrum-infield-button-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-infield-button-background-color-down: var(--spectrum-gray-200);
+ --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100);
+ }
+}
diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css
index 9bb80540e20..ff95c7c2dce 100644
--- a/components/infieldbutton/themes/spectrum.css
+++ b/components/infieldbutton/themes/spectrum.css
@@ -11,18 +11,12 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-InfieldButton {
- --spectrum-infield-button-border-width: var(--spectrum-border-width-100);
- --spectrum-infield-button-border-color: inherit;
-
- --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-infield-button-border-radius-reset: 0;
+/* @combine .spectrum.spectrum--legacy */
- /* Have to call these out specifically due to Express differences */
- --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset);
- --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset);
+@import "./spectrum-two.css";
+@container style(--system: legacy) {
+ .spectrum-InfieldButton {
--spectrum-infield-button-background-color: var(--spectrum-gray-75);
--spectrum-infield-button-background-color-hover: var(--spectrum-gray-200);
--spectrum-infield-button-background-color-down: var(--spectrum-gray-300);
diff --git a/components/inlinealert/CHANGELOG.md b/components/inlinealert/CHANGELOG.md
index 951d845f7b2..0cf7d4c625a 100644
--- a/components/inlinealert/CHANGELOG.md
+++ b/components/inlinealert/CHANGELOG.md
@@ -1,5 +1,214 @@
# Change Log
+## 9.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.17
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 9.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 9.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 9.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 9.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 9.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 9.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 9.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 9.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 9.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 9.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 9.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 9.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 9.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 9.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 8.2.0
### Minor Changes
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 407c1d4b2aa..08299a00eba 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -11,44 +11,7 @@
* governing permissions and limitations under the License.
*/
- @import "./themes/express.css";
-
-.spectrum-InLineAlert {
- /* Font */
- --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
- --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs);
- --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height);
-
- --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s);
- --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height);
-
- /* Size */
- --spectrum-inlinealert-border-width: var(--spectrum-border-width-200);
- --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width);
- --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50);
-
- /* Spacing */
- --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400);
- --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400);
- --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300);
-
- /* Color */
- --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color);
- --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
- --spectrum-inlinealert-header-color: var(--spectrum-heading-color);
- --spectrum-inlinealert-content-color: var(--spectrum-body-color);
- --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color);
- --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color);
- --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color);
- --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color);
-}
+@import "./themes/spectrum-two.css";
.spectrum-InLineAlert {
position: relative;
@@ -120,6 +83,7 @@
line-height: var(--mod-inlinealert-content-line-height, var(--spectrum-inlinealert-content-line-height));
color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color)));
+
}
.spectrum-InLineAlert-footer {
diff --git a/components/inlinealert/metadata/metadata.json b/components/inlinealert/metadata/metadata.json
index 935c89f08a3..998a6cd352c 100644
--- a/components/inlinealert/metadata/metadata.json
+++ b/components/inlinealert/metadata/metadata.json
@@ -45,7 +45,6 @@
"--mod-inlinealert-spacing-header-to-icon"
],
"component": [
- "--spectrum-in-line-alert-minimum-width",
"--spectrum-inlinealert-background-color",
"--spectrum-inlinealert-border-and-icon-color",
"--spectrum-inlinealert-border-and-icon-color-info",
@@ -73,31 +72,7 @@
"--spectrum-inlinealert-spacing-header-content-button",
"--spectrum-inlinealert-spacing-header-to-icon"
],
- "global": [
- "--spectrum-background-layer-2-color",
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-body-size-s",
- "--spectrum-border-width-200",
- "--spectrum-component-height-50",
- "--spectrum-corner-radius-100",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-style",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-heading-size-xxs",
- "--spectrum-informative-visual-color",
- "--spectrum-negative-visual-color",
- "--spectrum-neutral-visual-color",
- "--spectrum-notice-visual-color",
- "--spectrum-positive-visual-color",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400",
- "--spectrum-workflow-icon-size-100"
- ],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": [
diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json
index 139d9acbf79..b577a349227 100644
--- a/components/inlinealert/package.json
+++ b/components/inlinealert/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/inlinealert",
- "version": "8.2.0",
+ "version": "9.0.0-s2-foundations.15",
"description": "The Spectrum CSS in-line alert component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index 5ef4fb5f446..67f802cc5f4 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -59,6 +59,10 @@ export default {
isClosable: false,
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=2659-4482",
+ },
packageJson,
metadata,
},
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index f5439cf8c4d..6d7a89137f3 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -5,6 +5,9 @@ import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-InLineAlert",
diff --git a/components/inlinealert/themes/express.css b/components/inlinealert/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/inlinealert/themes/express.css
+++ b/components/inlinealert/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/inlinealert/themes/spectrum-two.css b/components/inlinealert/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/inlinealert/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/inlinealert/themes/spectrum.css b/components/inlinealert/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/inlinealert/themes/spectrum.css
+++ b/components/inlinealert/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/link/CHANGELOG.md b/components/link/CHANGELOG.md
index 1d215111dca..3e73fa2ce90 100644
--- a/components/link/CHANGELOG.md
+++ b/components/link/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/link/index.css b/components/link/index.css
index 4e182c227ba..c7af0eda943 100644
--- a/components/link/index.css
+++ b/components/link/index.css
@@ -11,27 +11,7 @@
* governing permissions and limitations under the License.
*/
- @import "./themes/express.css";
-
-.spectrum-Link {
- --spectrum-link-animation-duration: var(--spectrum-animation-duration-100);
-
- /* Colors */
- /* Primary */
- --spectrum-link-text-color-primary-default: var(--spectrum-accent-content-color-default);
- --spectrum-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover);
- --spectrum-link-text-color-primary-active: var(--spectrum-accent-content-color-down);
- --spectrum-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus);
-
- /* Secondary */
- --spectrum-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default);
- --spectrum-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down);
- --spectrum-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-link-text-color-white: var(--spectrum-white);
- --spectrum-link-text-color-black: var(--spectrum-black);
-}
+@import "./themes/spectrum-two.css";
/* Windows high contrast mode */
@media (forced-colors: active) {
@@ -58,22 +38,22 @@
/* Remove gaps in links underline in iOS 8+ and Safari 8+. */
text-decoration-skip: objects;
text-decoration: underline;
- transition: color var(--mod-link-animation-duration, var(--spectrum-link-animation-duration)) ease-in-out;
+ transition: color var(--mod-link-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
outline: none;
cursor: pointer;
- color: var(--highcontrast-link-text-color-primary-default, var(--mod-link-text-color-primary-default, var(--spectrum-link-text-color-primary-default)));
+ color: var(--highcontrast-link-text-color-primary-default, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default)));
&:hover {
- color: var(--highcontrast-link-text-color-primary-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-link-text-color-primary-hover)));
+ color: var(--highcontrast-link-text-color-primary-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover)));
}
&:active {
- color: var(--highcontrast-link-text-color-primary-active, var(--mod-link-text-color-primary-active, var(--spectrum-link-text-color-primary-active)));
+ color: var(--highcontrast-link-text-color-primary-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down)));
}
&:focus-visible {
- color: var(--highcontrast-link-text-color-primary-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-link-text-color-primary-focus)));
+ color: var(--highcontrast-link-text-color-primary-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus)));
text-decoration: underline;
text-decoration-style: double;
text-decoration-color: var(--highcontrast-link-focus-color, inherit);
@@ -81,18 +61,18 @@
}
.spectrum-Link--secondary {
- color: var(--highcontrast-link-text-color-secondary-default, var(--mod-link-text-color-secondary-default, var(--spectrum-link-text-color-secondary-default)));
+ color: var(--highcontrast-link-text-color-secondary-default, var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default)));
&:hover {
- color: var(--highcontrast-link-text-color-secondary-hover, var(--mod-link-text-color-secondary-hover, var(--spectrum-link-text-color-secondary-hover)));
+ color: var(--highcontrast-link-text-color-secondary-hover, var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover)));
}
&:active {
- color: var(--highcontrast-link-text-color-secondary-active, var(--mod-link-text-color-secondary-active, var(--spectrum-link-text-color-secondary-active)));
+ color: var(--highcontrast-link-text-color-secondary-active, var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down)));
}
&:focus {
- color: var(--highcontrast-link-text-color-secondary-focus, var(--mod-link-text-color-secondary-focus, var(--spectrum-link-text-color-secondary-focus)));
+ color: var(--highcontrast-link-text-color-secondary-focus, var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus)));
}
}
@@ -105,21 +85,21 @@
}
.spectrum-Link--staticWhite {
- color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)));
+ color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-white)));
&:hover,
&:active,
&:focus {
- color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)));
+ color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-white)));
}
}
.spectrum-Link--staticBlack {
- color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black)));
+ color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-black)));
&:hover,
&:active,
&:focus {
- color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black)));
+ color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-black)));
}
}
diff --git a/components/link/metadata/metadata.json b/components/link/metadata/metadata.json
index a5b1874d5ea..c178969a50b 100644
--- a/components/link/metadata/metadata.json
+++ b/components/link/metadata/metadata.json
@@ -46,19 +46,7 @@
"--spectrum-link-text-color-secondary-hover",
"--spectrum-link-text-color-white"
],
- "global": [
- "--spectrum-accent-content-color-default",
- "--spectrum-accent-content-color-down",
- "--spectrum-accent-content-color-hover",
- "--spectrum-accent-content-color-key-focus",
- "--spectrum-animation-duration-100",
- "--spectrum-black",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-white"
- ],
+ "global": [],
"system-theme": [],
"passthroughs": [],
"high-contrast": [
diff --git a/components/link/package.json b/components/link/package.json
index dbe72dbc99e..08d8acbc0a0 100644
--- a/components/link/package.json
+++ b/components/link/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/link",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS link component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js
index ff955ec089b..b025880ae3d 100644
--- a/components/link/stories/link.stories.js
+++ b/components/link/stories/link.stories.js
@@ -70,6 +70,10 @@ export default {
actions: {
handles: ["click .spectrum-Link"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=18850-110",
+ },
packageJson,
metadata,
},
diff --git a/components/link/stories/template.js b/components/link/stories/template.js
index 2c4cd925c15..e999236a81f 100644
--- a/components/link/stories/template.js
+++ b/components/link/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Link",
@@ -19,31 +22,33 @@ export const Template = ({
isVisited = false,
id = getRandomId("link"),
customClasses = [],
-} = {}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- id=${ifDefined(id)}
- href=${ifDefined(url)}
- >
- ${text}
-
-`;
+} = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ id=${ifDefined(id)}
+ href=${ifDefined(url)}
+ >
+ ${text}
+
+ `;
+};
export const TemplateWithFillerText = (args, context) => html`
Hello, this is a
- ${Template({...args, context})}
+ ${Template(args, context)}
. This is just filler text, but if you keep reading maybe something good will happen.
`;
diff --git a/components/link/themes/express.css b/components/link/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/link/themes/express.css
+++ b/components/link/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/link/themes/spectrum-two.css b/components/link/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/link/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/link/themes/spectrum.css b/components/link/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/link/themes/spectrum.css
+++ b/components/link/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/logicbutton/CHANGELOG.md b/components/logicbutton/CHANGELOG.md
index 334a6fbea44..a520c5018bf 100644
--- a/components/logicbutton/CHANGELOG.md
+++ b/components/logicbutton/CHANGELOG.md
@@ -1,5 +1,184 @@
# Change Log
+## 5.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 5.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 5.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#3040](https://github.com/adobe/spectrum-css/pull/3040) [`cf2e737`](https://github.com/adobe/spectrum-css/commit/cf2e73743b2c3d43d4c51fceeabfb99fda1ac4b5) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - Migrating --mod to index.css from infield button, logic button and table components
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 4.2.0
### Minor Changes
diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css
index c2f85821aac..4429907705b 100644
--- a/components/logicbutton/index.css
+++ b/components/logicbutton/index.css
@@ -12,71 +12,58 @@
*/
@import "@spectrum-css/commons/basebutton.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-LogicButton {
- --spectrum-logic-button-height: 24px;
- --spectrum-logic-button-padding: var(--spectrum-component-edge-to-text-50);
- --spectrum-logic-button-font-size: var(--spectrum-font-size-100);
- --spectrum-logic-button-font-weight: var(--spectrum-bold-font-weight);
-
- --spectrum-logic-button-border-width: var(--spectrum-border-width-200);
--spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
- --spectrum-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
--spectrum-logic-button-and-text-color: var(--spectrum-white);
--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
--spectrum-logic-button-or-text-color: var(--spectrum-white);
+ --spectrum-logic-button-text-color-disabled: var(--spectrum-gray-500);
- &:disabled,
- &.is-disabled {
- --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-200));
- --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-200));
- --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-gray-500));
- --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-200));
- --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-200));
-
- --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-200));
- --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-200));
- --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-gray-500));
- --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-200));
- --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-200));
- }
-}
-
-.spectrum-LogicButton {
@extend %spectrum-BaseButton;
@extend %spectrum-ButtonWithFocusRing;
- block-size: var(--mod-logic-button-height, var(--spectrum-logic-button-height));
- padding: var(--mod-logic-button-padding, var(--spectrum-logic-button-padding));
+ block-size: var(--mod-logic-button-height, 24px);
+ padding: var(--mod-logic-button-padding, var(--spectrum-component-edge-to-text-50));
- border-width: var(--mod-logic-button-border-width, var(--spectrum-logic-button-border-width));
+ border-width: var(--mod-logic-button-border-width, var(--spectrum-border-width-200));
border-radius: var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius));
- font-size: var(--mod-logic-button-font-size, var(--spectrum-logic-button-font-size));
- font-weight: var(--mod-logic-button-font-weight, var(--spectrum-logic-button-font-weight));
+ font-size: var(--mod-logic-button-font-size, var(--spectrum-font-size-100));
+ font-weight: var(--mod-logic-button-font-weight, var(--spectrum-bold-font-weight));
line-height: 0;
&::after {
/* Override border-radius set in %spectrum-ButtonWithFocusRing since this is not a pill button */
- border-radius: calc(var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)) + var(--mod-logic-button-focus-indicator-gap, var(--spectrum-logic-button-focus-indicator-gap)));
+ border-radius: calc(var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)) + var(--mod-logic-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)));
}
-}
-.spectrum-LogicButton {
&:focus-visible {
outline: none;
&::after {
- box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-logic-button-focus-indicator-width)) var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-logic-button-focus-indicator-color)));
+ box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-focus-indicator-thickness)) var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color)));
}
}
+
+ &:disabled,
+ &.is-disabled {
+ --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-logic-button-and-background-color-disabled));
+ --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-logic-button-and-border-color-disabled));
+ --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-logic-button-text-color-disabled));
+ --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-logic-button-and-background-color-hover-disabled));
+ --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-logic-button-and-border-color-hover-disabled));
+
+ --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-logic-button-or-background-color-disabled));
+ --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-logic-button-or-border-color-disabled));
+ --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-logic-button-text-color-disabled));
+ --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-logic-button-or-background-color-hover-disabled));
+ --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-logic-button-or-border-color-hover-disabled));
+ }
}
.spectrum-LogicButton--and {
@@ -104,11 +91,11 @@
@media (forced-colors: active) {
.spectrum-LogicButton::after {
--highcontrast-logic-button-focus-indicator-color: Highlight;
+
forced-color-adjust: none;
}
.spectrum-LogicButton {
-
--highcontrast-logic-button-and-background-color: ButtonFace;
--highcontrast-logic-button-and-background-color-hover: ButtonFace;
--highcontrast-logic-button-and-border-color: ButtonText;
@@ -119,6 +106,7 @@
--highcontrast-logic-button-or-border-color: ButtonText;
--highcontrast-logic-button-or-border-color-hover: Highlight;
--highcontrast-logic-button-or-text-color: ButtonText;
+
forced-color-adjust: none;
&:disabled,
diff --git a/components/logicbutton/metadata/metadata.json b/components/logicbutton/metadata/metadata.json
index 36af6ae9a7a..6adfbf58b24 100644
--- a/components/logicbutton/metadata/metadata.json
+++ b/components/logicbutton/metadata/metadata.json
@@ -51,24 +51,25 @@
],
"component": [
"--spectrum-logic-button-and-background-color",
+ "--spectrum-logic-button-and-background-color-disabled",
"--spectrum-logic-button-and-background-color-hover",
+ "--spectrum-logic-button-and-background-color-hover-disabled",
"--spectrum-logic-button-and-border-color",
+ "--spectrum-logic-button-and-border-color-disabled",
"--spectrum-logic-button-and-border-color-hover",
+ "--spectrum-logic-button-and-border-color-hover-disabled",
"--spectrum-logic-button-and-text-color",
"--spectrum-logic-button-border-radius",
- "--spectrum-logic-button-border-width",
- "--spectrum-logic-button-focus-indicator-color",
- "--spectrum-logic-button-focus-indicator-gap",
- "--spectrum-logic-button-focus-indicator-width",
- "--spectrum-logic-button-font-size",
- "--spectrum-logic-button-font-weight",
- "--spectrum-logic-button-height",
"--spectrum-logic-button-or-background-color",
+ "--spectrum-logic-button-or-background-color-disabled",
"--spectrum-logic-button-or-background-color-hover",
+ "--spectrum-logic-button-or-background-color-hover-disabled",
"--spectrum-logic-button-or-border-color",
+ "--spectrum-logic-button-or-border-color-disabled",
"--spectrum-logic-button-or-border-color-hover",
+ "--spectrum-logic-button-or-border-color-hover-disabled",
"--spectrum-logic-button-or-text-color",
- "--spectrum-logic-button-padding"
+ "--spectrum-logic-button-text-color-disabled"
],
"global": [
"--spectrum-animation-duration-100",
@@ -81,13 +82,22 @@
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
- "--spectrum-gray-200",
+ "--spectrum-gray-100",
"--spectrum-gray-500",
"--spectrum-line-height-100",
"--spectrum-sans-font-family-stack",
"--spectrum-white"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-logic-button-and-background-color-disabled",
+ "--system-logic-button-and-background-color-hover-disabled",
+ "--system-logic-button-and-border-color-disabled",
+ "--system-logic-button-and-border-color-hover-disabled",
+ "--system-logic-button-or-background-color-disabled",
+ "--system-logic-button-or-background-color-hover-disabled",
+ "--system-logic-button-or-border-color-disabled",
+ "--system-logic-button-or-border-color-hover-disabled"
+ ],
"passthroughs": [
"--mod-button-animation-duration",
"--mod-button-focus-indicator-gap",
diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json
index dda75daeb7d..2cb52d49319 100644
--- a/components/logicbutton/package.json
+++ b/components/logicbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/logicbutton",
- "version": "4.2.0",
+ "version": "5.0.0-s2-foundations.16",
"description": "The Spectrum CSS logicbutton component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/logicbutton/stories/template.js b/components/logicbutton/stories/template.js
index 889eda68e38..5b0730616ef 100644
--- a/components/logicbutton/stories/template.js
+++ b/components/logicbutton/stories/template.js
@@ -2,28 +2,33 @@ import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-LogicButton",
customClasses = [],
variant = "and",
isDisabled = false,
-} = {}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- aria-disabled=${isDisabled ? "true" : "false"}
- ?disabled=${isDisabled}
- type="button"
- >
- ${variant
- ? variant.charAt(0).toUpperCase() + variant.slice(1)
- : undefined}
-
-`;
+} = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ aria-disabled=${isDisabled ? "true" : "false"}
+ ?disabled=${isDisabled}
+ type="button"
+ >
+ ${variant
+ ? variant.charAt(0).toUpperCase() + variant.slice(1)
+ : undefined}
+
+ `;
+};
export const VariantGroup = (args, context) => html`
${Template({...args}, context)}
diff --git a/components/logicbutton/themes/express.css b/components/logicbutton/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/logicbutton/themes/express.css
+++ b/components/logicbutton/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/logicbutton/themes/spectrum-two.css b/components/logicbutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..c0bd0d1b3fb
--- /dev/null
+++ b/components/logicbutton/themes/spectrum-two.css
@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-LogicButton {
+ --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100);
+
+ --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100);
+ }
+}
diff --git a/components/logicbutton/themes/spectrum.css b/components/logicbutton/themes/spectrum.css
index 3b48a570c21..4aa43a01048 100644
--- a/components/logicbutton/themes/spectrum.css
+++ b/components/logicbutton/themes/spectrum.css
@@ -10,3 +10,21 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-LogicButton {
+ --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-200);
+
+ --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/menu/CHANGELOG.md b/components/menu/CHANGELOG.md
index 4a3e1d5706e..1dd15d40253 100644
--- a/components/menu/CHANGELOG.md
+++ b/components/menu/CHANGELOG.md
@@ -1,5 +1,271 @@
# Change Log
+## 8.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`085ecbc`](https://github.com/adobe/spectrum-css/commit/085ecbc739cf736e8d95377d605f2a7c4104bcc0) Thanks [@pfulton](https://github.com/pfulton)! - Pulled out _form_ from _fieldlabel_ package.
+ Pulled out _meter_ from _progressbar_ package.
+
+ [SWC-522] fix hover style regression
+
+## 8.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.18
+ - @spectrum-css/divider@4.0.0-s2-foundations.15
+ - @spectrum-css/switch@6.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+ - @spectrum-css/tray@4.0.0-s2-foundations.15
+
+## 8.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.17
+ - @spectrum-css/divider@4.0.0-s2-foundations.14
+ - @spectrum-css/switch@6.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tray@4.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/switch@6.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tray@4.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/switch@6.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tray@4.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/switch@6.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tray@4.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/switch@6.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tray@4.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/switch@6.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tray@4.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/switch@6.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tray@4.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/switch@6.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tray@4.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/switch@6.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/tray@4.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/switch@6.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tray@4.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/switch@6.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tray@4.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/switch@6.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tray@4.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/switch@6.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tray@4.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/switch@6.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tray@4.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/switch@6.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+ - @spectrum-css/tray@4.0.0-s2-foundations.0
+
## 7.2.0
### Minor Changes
@@ -27,6 +293,18 @@
- [#3290](https://github.com/adobe/spectrum-css/pull/3290) [`df4c029`](https://github.com/adobe/spectrum-css/commit/df4c029babe8007a783099f9989af1e2c2e8181e) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violation by removing unused custom property.
+## 7.1.9
+
+### Patch Changes
+
+- [#3300](https://github.com/adobe/spectrum-css/pull/3300) [`89797d0`](https://github.com/adobe/spectrum-css/commit/89797d0324bcbf2195a28840ce87ed6959da24a5) Thanks [@castastrophe](https://github.com/castastrophe)! - Add passthrough markers to prevent unnecessary warnings about unused custom properties
+
+## 7.1.8
+
+### Patch Changes
+
+- [#3290](https://github.com/adobe/spectrum-css/pull/3290) [`df4c029`](https://github.com/adobe/spectrum-css/commit/df4c029babe8007a783099f9989af1e2c2e8181e) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violation by removing unused custom property.
+
## 7.1.7
### Patch Changes
diff --git a/components/menu/index.css b/components/menu/index.css
index beedd2c07a2..bcb468c029d 100644
--- a/components/menu/index.css
+++ b/components/menu/index.css
@@ -11,32 +11,76 @@
* governing permissions and limitations under the License.
*/
- @import "./themes/express.css";
+@import "./themes/spectrum-two.css";
-.spectrum-Menu {
- --spectrum-menu-item-min-height: var(--spectrum-component-height-100);
- --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100);
- --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
- --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
- --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);
+@media (forced-colors: active) {
+ .spectrum-Menu {
+ --highcontrast-menu-item-background-color-default: ButtonFace;
+ --highcontrast-menu-item-color-default: ButtonText;
- --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
- --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);
+ --highcontrast-menu-item-background-color-focus: Highlight;
+ --highcontrast-menu-item-color-focus: HighlightText;
- --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100);
+ --highcontrast-menu-checkmark-icon-color-default: Highlight;
+
+ --highcontrast-menu-item-color-disabled: GrayText;
+ --highcontrast-menu-item-focus-indicator-color: Highlight;
- --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75);
+ --highcontrast-menu-item-selected-background-color: Highlight;
+ --highcontrast-menu-item-selected-color: HighlightText;
- --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100);
- --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100);
+ @supports (color: SelectedItem) {
+ --highcontrast-menu-item-selected-background-color: SelectedItem;
+ --highcontrast-menu-item-selected-color: SelectedItemText;
+ }
- --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);
+ .spectrum-Menu-item {
+ /* Hide unstylable readability backplates. */
+ forced-color-adjust: none;
+ }
- --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium);
- --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium);
- --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium);
+ .spectrum-Menu-item:hover,
+ .spectrum-Menu-item:focus {
+ .spectrum-Menu-itemCheckbox {
+ /* @passthrough start */
+ --highcontrast-checkbox-highlight-color-hover: ButtonText;
+ --highcontrast-checkbox-highlight-color-default: ButtonText;
+ /* @passthrough end */
+ }
+
+ .spectrum-Menu-itemSwitch {
+ /* @passthrough start */
+ --highcontrast-switch-handle-border-color-hover: ButtonText;
+ --highcontrast-switch-handle-border-color-selected-default: ButtonText;
+ --highcontrast-switch-handle-border-color-selected-hover: ButtonText;
+ --highcontrast-switch-background-color-selected-default: ButtonText;
+ --highcontrast-switch-background-color-selected-hover: ButtonText;
+ /* @passthrough end */
+ }
+ }
+
+ .spectrum-Menu-item--drillIn.is-open {
+ --highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color);
+ --highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color);
+ }
+
+ .spectrum-Menu-item--collapsible.is-open {
+ &:hover,
+ &:focus-within {
+ box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
+ }
+ &:hover,
+ &:active,
+ &:focus,
+ &.is-focused {
+ --highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default);
+ }
+ }
+ }
+}
+
+.spectrum-Menu {
--spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
--spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
@@ -94,161 +138,118 @@
--spectrum-menu-checkmark-display-shown: block;
--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
- --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium);
-
/* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */
--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width)));
-}
-.spectrum-Menu--sizeS {
- --spectrum-menu-item-min-height: var(--spectrum-component-height-75);
- --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75);
- --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
- --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
- --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);
+ &.spectrum-Menu--sizeS {
+ --spectrum-menu-item-min-height: var(--spectrum-component-height-75);
+ --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75);
+ --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
+ --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
+ --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);
- --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
- --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
+ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);
- --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75);
+ --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75);
- --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50);
+ --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50);
- --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75);
- --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75);
+ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75);
+ --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75);
- --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);
+ --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);
- --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small);
- --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small);
- --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small);
+ --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small);
+ --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small);
+ --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small);
- --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small);
-}
-
-.spectrum-Menu--sizeL {
- --spectrum-menu-item-min-height: var(--spectrum-component-height-200);
- --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200);
- --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
- --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
- --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);
-
- --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
- --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);
-
- --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200);
-
- --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100);
+ --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small);
+ }
- --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200);
- --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200);
+ &,
+ &.spectrum-Menu--sizeM {
+ --spectrum-menu-item-min-height: var(--spectrum-component-height-100);
+ --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100);
+ --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
+ --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
+ --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);
- --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);
+ --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
+ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);
- --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large);
- --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large);
- --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large);
+ --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100);
- --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large);
-}
+ --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75);
-.spectrum-Menu--sizeXL {
- --spectrum-menu-item-min-height: var(--spectrum-component-height-300);
- --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300);
- --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
- --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
- --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);
+ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100);
+ --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100);
- --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
- --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
- --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);
+ --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);
- --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300);
+ --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium);
+ --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium);
+ --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium);
- --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200);
+ --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium);
+ }
- --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300);
- --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300);
+ &.spectrum-Menu--sizeL {
+ --spectrum-menu-item-min-height: var(--spectrum-component-height-200);
+ --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200);
+ --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
+ --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
+ --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);
- --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);
+ --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
+ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);
- --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large);
- --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large);
- --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large);
+ --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200);
- --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
-}
+ --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100);
-@media (forced-colors: active) {
- .spectrum-Menu {
- --highcontrast-menu-item-background-color-default: ButtonFace;
- --highcontrast-menu-item-color-default: ButtonText;
+ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200);
+ --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200);
- --highcontrast-menu-item-background-color-focus: Highlight;
- --highcontrast-menu-item-color-focus: HighlightText;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);
- --highcontrast-menu-checkmark-icon-color-default: Highlight;
+ --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large);
+ --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large);
+ --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large);
- --highcontrast-menu-item-color-disabled: GrayText;
- --highcontrast-menu-item-focus-indicator-color: Highlight;
+ --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large);
+ }
- --highcontrast-menu-item-selected-background-color: Highlight;
- --highcontrast-menu-item-selected-color: HighlightText;
+ &.spectrum-Menu--sizeXL {
+ --spectrum-menu-item-min-height: var(--spectrum-component-height-300);
+ --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300);
+ --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
+ --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
+ --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);
- @supports (color: SelectedItem) {
- --highcontrast-menu-item-selected-background-color: SelectedItem;
- --highcontrast-menu-item-selected-color: SelectedItemText;
- }
+ --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
+ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
+ --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);
- .spectrum-Menu-item {
- /* Hide unstylable readability backplates. */
- forced-color-adjust: none;
- }
+ --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300);
- .spectrum-Menu-item:hover,
- .spectrum-Menu-item:focus {
- .spectrum-Menu-itemCheckbox {
- /* @passthrough start */
- --highcontrast-checkbox-highlight-color-hover: ButtonText;
- --highcontrast-checkbox-highlight-color-default: ButtonText;
- /* @passthrough end */
- }
+ --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200);
- .spectrum-Menu-itemSwitch {
- /* @passthrough start */
- --highcontrast-switch-handle-border-color-hover: ButtonText;
- --highcontrast-switch-handle-border-color-selected-default: ButtonText;
- --highcontrast-switch-handle-border-color-selected-hover: ButtonText;
- --highcontrast-switch-background-color-selected-default: ButtonText;
- --highcontrast-switch-background-color-selected-hover: ButtonText;
- /* @passthrough end */
- }
- }
+ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300);
+ --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300);
- .spectrum-Menu-item--drillIn.is-open {
- --highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color);
- --highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color);
- }
+ --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);
- .spectrum-Menu-item--collapsible.is-open {
- &:hover,
- &:focus-within {
- box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
- }
+ --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large);
+ --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large);
+ --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large);
- &:hover,
- &:active,
- &:focus,
- &.is-focused {
- --highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default);
- }
- }
+ --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
}
-}
-.spectrum-Menu {
display: inline-block;
inline-size: var(--mod-menu-inline-size, auto);
box-sizing: border-box;
@@ -265,6 +266,23 @@
--spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk));
}
+ /* Menus with "selectable" menu items. */
+ &.is-selectable {
+ /* Provide inline-start spacing for potential checkmarks. */
+ .spectrum-Menu-item {
+ --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden);
+
+ padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected));
+
+ /* Remove inline-start spacing once an item is selected and a checkmark appears. */
+ &.is-selected {
+ --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
+
+ padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
+ }
+ }
+ }
+
.spectrum-Menu-divider {
--spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium);
@@ -277,25 +295,8 @@
margin-block: var(--mod-menu-section-divider-margin-block, max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness)) / 2));
margin-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
}
-}
-
-/* Menus with "selectable" menu items. */
-.spectrum-Menu.is-selectable {
- /* Provide inline-start spacing for potential checkmarks. */
- .spectrum-Menu-item {
- --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden);
- padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected));
- /* Remove inline-start spacing once an item is selected and a checkmark appears. */
- &.is-selected {
- --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
- padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
- }
- }
-}
-
-/* Icons */
-.spectrum-Menu {
+ /* Icons */
.spectrum-Menu-itemIcon {
fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default)));
color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default)));
@@ -331,6 +332,17 @@
grid-area: chevronArea;
align-self: center;
+
+ &:dir(rtl) {
+ transform: rotate(-180deg);
+ }
+ }
+
+ .spectrum-Menu-backIcon {
+ margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin));
+ margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin));
+ fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
+ color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
}
.spectrum-Menu-itemIcon--workflowIcon {
@@ -342,19 +354,15 @@
block-size: var(--mod-menu-item-icon-height, var(--spectrum-menu-item-icon-height));
inline-size: var(--mod-menu-item-icon-width, var(--spectrum-menu-item-icon-width));
}
-}
-
-.spectrum-Menu-chevron:dir(rtl) {
- transform: rotate(-180deg);
-}
-/* Presentational list items for sections and dividers. */
-.spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider) {
- display: block;
- position: relative;
- box-sizing: border-box;
- margin: 0;
- padding: 0;
+ /* Presentational list items for sections and dividers. */
+ li:not(.spectrum-Menu-item, .spectrum-Menu-divider) {
+ display: block;
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
}
.spectrum-Menu-item {
@@ -369,6 +377,7 @@
line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height));
min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height));
+
padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text));
padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text));
padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
@@ -376,14 +385,25 @@
margin: 0;
text-decoration: none;
+ display: grid;
+
+ grid-template-areas:
+ ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . . "
+ "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"
+ ". . . . descriptionArea . . . "
+ ". . . . submenuArea . . . ";
+
+ grid-template-columns: auto auto auto auto 1fr auto auto auto;
+ grid-template-rows: 1fr auto;
+
.spectrum-Menu-itemCheckbox {
--mod-checkbox-top-to-text: 0;
--mod-checkbox-text-to-control: 0;
+
min-block-size: 0;
.spectrum-Checkbox-box {
margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
-
margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox));
margin-block-end: 0;
}
@@ -397,161 +417,188 @@
margin-block-end: 0;
}
}
-}
-.spectrum-Menu-item {
- display: grid;
- grid-template-areas:
- ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . . "
- "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"
- ". . . . descriptionArea . . . "
- ". . . . submenuArea . . . ";
+ .spectrum-Menu-item {
+ display: grid;
+ grid-template-areas: "submenuItemLabelArea submenuItemValueArea";
+ grid-template-columns: auto auto;
+ grid-template-rows: 1fr auto;
- grid-template-columns: auto auto auto auto 1fr auto auto auto;
- grid-template-rows: 1fr auto;
-}
+ .spectrum-Menu-itemLabel {
+ grid-area: submenuItemLabelArea;
+ }
-.spectrum-Menu-item .spectrum-Menu-item {
- display: grid;
- grid-template-areas: "submenuItemLabelArea submenuItemValueArea";
- grid-template-columns: auto auto;
- grid-template-rows: 1fr auto;
-}
+ .spectrum-Menu-itemValue {
+ grid-area: submenuItemValueArea;
+ }
+ }
-.spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemLabel {
- grid-area: submenuItemLabelArea;
-}
+ &:focus,
+ &.is-focused {
+ background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus)));
+ outline: none;
-.spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemValue {
- grid-area: submenuItemValueArea;
-}
+ > .spectrum-Menu-itemLabel {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus)));
+ }
-.spectrum-Menu-item:focus,
-.spectrum-Menu-item.is-focused {
- background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus)));
- outline: none;
+ > .spectrum-Menu-sectionHeading {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
+ }
- > .spectrum-Menu-itemLabel {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus)));
- }
+ > .spectrum-Menu-itemDescription {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus)));
+ }
- > .spectrum-Menu-sectionHeading {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
- }
+ > .spectrum-Menu-itemValue {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
+ }
- > .spectrum-Menu-itemDescription {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus)));
- }
+ > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
+ fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
+ }
- > .spectrum-Menu-itemValue {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
- }
+ > .spectrum-Menu-chevron {
+ fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+ }
- > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
- fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
+ > .spectrum-Menu-checkmark {
+ fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
+ }
}
- > .spectrum-Menu-chevron {
- fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+ &:dir(rtl) {
+ --spectrum-menu-item-focus-indicator-direction-scalar: -1;
}
- > .spectrum-Menu-checkmark {
- fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
- }
-}
+ &:hover {
+ background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
-.spectrum-Menu-item:focus-visible,
-.spectrum-Menu-back:focus-visible {
- box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
-}
+ > .spectrum-Menu-itemLabel {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover)));
+ }
-.spectrum-Menu-item:dir(rtl) {
- --spectrum-menu-item-focus-indicator-direction-scalar: -1;
-}
+ > .spectrum-Menu-sectionHeading {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
+ }
-.spectrum-Menu-item:hover {
- background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
+ > .spectrum-Menu-itemDescription {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover)));
+ }
- > .spectrum-Menu-itemLabel {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover)));
- }
+ > .spectrum-Menu-itemValue {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
+ }
- > .spectrum-Menu-sectionHeading {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
- }
+ > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
+ fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
+ }
- > .spectrum-Menu-itemDescription {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover)));
- }
+ > .spectrum-Menu-chevron {
+ fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+ }
- > .spectrum-Menu-itemValue {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
+ > .spectrum-Menu-checkmark {
+ fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
+ }
}
- > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
- fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
- }
+ &:active {
+ background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down)));
- > .spectrum-Menu-chevron {
- fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
- }
+ > .spectrum-Menu-itemLabel {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
+ }
- > .spectrum-Menu-checkmark {
- fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
- }
-}
+ > .spectrum-Menu-sectionHeading {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
+ }
-.spectrum-Menu-item:active {
- background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down)));
+ > .spectrum-Menu-itemDescription {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down)));
+ }
- > .spectrum-Menu-itemLabel {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
- }
+ > .spectrum-Menu-itemValue {
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
+ }
- > .spectrum-Menu-sectionHeading {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
- }
+ > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
+ fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
+ }
- > .spectrum-Menu-itemDescription {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down)));
- }
+ > .spectrum-Menu-chevron {
+ fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
+ }
- > .spectrum-Menu-itemValue {
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
+ > .spectrum-Menu-checkmark {
+ fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
+ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
+ }
}
- > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
- fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
- }
+ /* Disabled menu items */
+ &.is-disabled,
+ &[aria-disabled="true"] {
+ background-color: transparent;
- > .spectrum-Menu-chevron {
- fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
- }
+ .spectrum-Menu-itemLabel,
+ .spectrum-Menu-sectionHeading,
+ .spectrum-Menu-itemValue {
+ color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
+ }
- > .spectrum-Menu-checkmark {
- fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
- color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
+ .spectrum-Menu-itemDescription {
+ color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
+ }
+
+ .spectrum-Menu-itemIcon {
+ color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+ fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+ }
+
+ &:hover {
+ cursor: default;
+ background-color: transparent;
+
+ .spectrum-Menu-itemLabel,
+ .spectrum-Menu-sectionHeading,
+ .spectrum-Menu-itemValue {
+ color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
+ }
+
+ .spectrum-Menu-itemDescription {
+ color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
+ }
+
+ .spectrum-Menu-itemIcon {
+ color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+ fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+ }
+ }
}
}
-.spectrum-Menu-item--collapsible .spectrum-Menu-itemIcon {
- grid-area: headingIconArea;
+.spectrum-Menu-item:focus-visible,
+.spectrum-Menu-back:focus-visible {
+ box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
}
-.is-selectableMultiple .spectrum-Menu-item {
- align-items: start;
-}
+.is-selectableMultiple {
+ .spectrum-Menu-item {
+ align-items: start;
+ }
-.is-selectableMultiple .spectrum-Menu-itemCheckbox {
- grid-area: checkmarkArea;
+ .spectrum-Menu-itemCheckbox {
+ grid-area: checkmarkArea;
+ }
}
.spectrum-Menu-itemSelection {
@@ -559,13 +606,26 @@
}
.spectrum-Menu-itemLabel {
+ /* @passthrough start -- Switch spacing overrides */
+ --mod-switch-control-label-spacing: 0;
+ --mod-switch-spacing-top-to-label: 0;
+ /* @passthrough end */
+
grid-area: labelArea;
font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default)));
+
+ hyphens: auto;
+ overflow-wrap: break-word;
}
.spectrum-Menu-itemValue {
grid-area: valueArea;
+ color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default)));
+ font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
+ justify-self: end;
+ align-self: start;
+ margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
}
.spectrum-Menu-itemActions {
@@ -574,39 +634,22 @@
margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
}
-.spectrum-Menu-item--collapsible .spectrum-Menu-chevron {
- grid-area: chevronAreaCollapsible;
-}
-
.spectrum-Menu-sectionHeading {
grid-area: sectionHeadingArea;
grid-column: 1 / -1;
-}
-
-.spectrum-Menu-item--collapsible .spectrum-Menu-sectionHeading {
- /*
- start at 5th column, to account for icons & match sectionHeadingArea
- ". chevronAreaCollapsible . iconArea sectionHeadingArea . . ."
- stretch to last column
- */
- grid-column: 5 / -1;
+ color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
+ display: block;
+ font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size));
+ font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
+ line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
+ min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width));
+ padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
+ padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
+ padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
}
.spectrum-Menu-itemDescription {
grid-area: descriptionArea;
-}
-
-.spectrum-Menu-item--collapsible .spectrum-Menu,
-.spectrum-Menu-item .spectrum-Menu {
- grid-area: submenuArea;
- grid-column: 1 / -1;
-}
-
-.spectrum-Menu-item--drillIn .spectrum-Menu-chevron {
- grid-area: chevronAreaDrillIn;
-}
-
-.spectrum-Menu-itemDescription {
color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-description-color-default, var(--spectrum-menu-item-description-color-default)));
font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size));
hyphens: auto;
@@ -615,39 +658,25 @@
line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height));
}
-.spectrum-Menu-itemLabel {
- hyphens: auto;
- overflow-wrap: break-word;
-}
-
-.spectrum-Menu-itemValue {
- color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default)));
- font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
- justify-self: end;
- align-self: start;
- margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
-}
-
.spectrum-Menu-itemLabel--truncate {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
-.spectrum-Menu-sectionHeading {
- color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
- display: block;
- font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size));
- font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
- line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
- min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width));
- padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
- padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
- padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
-}
-
-/* collapsible sub-menus */
.spectrum-Menu-item--collapsible {
+ .spectrum-Menu-sectionHeading {
+ /*
+ start at 5th column, to account for icons & match sectionHeadingArea
+ ". chevronAreaCollapsible . iconArea sectionHeadingArea . . ."
+ stretch to last column
+ */
+ grid-column: 5 / -1;
+
+ padding-inline: 0;
+ }
+
+ /* collapsible sub-menus */
&.is-open {
padding-block-end: 0;
@@ -663,43 +692,52 @@
background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
}
- .spectrum-Menu {
- display: none;
- }
-
- .spectrum-Menu.is-open {
- display: block;
- }
-
- .spectrum-Menu-sectionHeading {
- padding-inline: 0;
+ .spectrum-Menu-itemIcon {
+ grid-area: headingIconArea;
}
> .spectrum-Menu-itemIcon {
padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
}
-}
-/*
- assume that if an item is collapsible, it will
- have a chevron and we need to adjust position of submenu items to account for that
-*/
-.spectrum-Menu-item--collapsible .spectrum-Menu {
- /* reposition the entire submenu to be flush left with the parent menu item via negative margins */
- margin-inline: calc(var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)) * -1);
+ .spectrum-Menu-chevron {
+ grid-area: chevronAreaCollapsible;
+ }
- .spectrum-Menu-item {
- /*
- allow item to take up full width of parent,
- but make the content start where the parent item's label text starts
- */
- padding-inline-start: var(--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start, var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start));
+ /*
+ assume that if an item is collapsible, it will
+ have a chevron and we need to adjust position of submenu items to account for that
+ */
+ .spectrum-Menu {
+ display: none;
+
+ /* reposition the entire submenu to be flush left with the parent menu item via negative margins */
+ margin-inline: calc(var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)) * -1);
+
+ &.is-open {
+ display: block;
+ }
+
+ .spectrum-Menu-item {
+ /*
+ allow item to take up full width of parent,
+ but make the content start where the parent item's label text starts
+ */
+ padding-inline-start: var(--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start, var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start));
+ }
}
}
+.spectrum-Menu-item--collapsible .spectrum-Menu,
+.spectrum-Menu-item .spectrum-Menu {
+ grid-area: submenuArea;
+ grid-column: 1 / -1;
+}
+
.spectrum-Menu-item--drillIn {
.spectrum-Menu-chevron {
+ grid-area: chevronAreaDrillIn;
fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default)));
color: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default)));
margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
@@ -748,47 +786,6 @@
}
}
-/* Disabled menu items */
-.spectrum-Menu-item.is-disabled,
-.spectrum-Menu-item[aria-disabled="true"] {
- background-color: transparent;
-
- .spectrum-Menu-itemLabel,
- .spectrum-Menu-sectionHeading,
- .spectrum-Menu-itemValue {
- color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
- }
-
- .spectrum-Menu-itemDescription {
- color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
- }
-
- .spectrum-Menu-itemIcon {
- fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
- color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
- }
-
- &:hover {
- cursor: default;
- background-color: transparent;
-
- .spectrum-Menu-itemLabel,
- .spectrum-Menu-sectionHeading,
- .spectrum-Menu-itemValue {
- color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
- }
-
- .spectrum-Menu-itemDescription {
- color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
- }
-
- .spectrum-Menu-itemIcon {
- fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
- color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
- }
- }
-}
-
/* Tray submenu */
.spectrum-Menu-back {
display: flex;
@@ -823,10 +820,3 @@
font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
}
-
-.spectrum-Menu .spectrum-Menu-backIcon {
- margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin));
- margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin));
- fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default));
- color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default));
-}
diff --git a/components/menu/metadata/metadata.json b/components/menu/metadata/metadata.json
index 2b9470696d9..b770b9e947b 100644
--- a/components/menu/metadata/metadata.json
+++ b/components/menu/metadata/metadata.json
@@ -8,6 +8,7 @@
".spectrum-Menu .spectrum-Menu-backIcon",
".spectrum-Menu .spectrum-Menu-checkmark",
".spectrum-Menu .spectrum-Menu-chevron",
+ ".spectrum-Menu .spectrum-Menu-chevron:dir(rtl)",
".spectrum-Menu .spectrum-Menu-divider",
".spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS",
".spectrum-Menu .spectrum-Menu-item",
@@ -25,16 +26,12 @@
".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon",
".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)",
- ".spectrum-Menu--sizeL",
- ".spectrum-Menu--sizeS",
- ".spectrum-Menu--sizeXL",
".spectrum-Menu-back",
".spectrum-Menu-back .spectrum-Menu-sectionHeading",
".spectrum-Menu-back:focus-visible",
".spectrum-Menu-backButton",
".spectrum-Menu-backButton:focus-visible",
".spectrum-Menu-backHeading",
- ".spectrum-Menu-chevron:dir(rtl)",
".spectrum-Menu-item",
".spectrum-Menu-item .spectrum-Menu",
".spectrum-Menu-item .spectrum-Menu-item",
@@ -134,10 +131,14 @@
".spectrum-Menu.is-selectable .spectrum-Menu-item",
".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected",
".spectrum-Menu.js-focus-within .spectrum-Menu-item--collapsible.is-open[focus-within]",
+ ".spectrum-Menu.spectrum-Menu--sizeL",
+ ".spectrum-Menu.spectrum-Menu--sizeM",
+ ".spectrum-Menu.spectrum-Menu--sizeS",
+ ".spectrum-Menu.spectrum-Menu--sizeXL",
".spectrum-Menu:lang(ja)",
".spectrum-Menu:lang(ko)",
".spectrum-Menu:lang(zh)",
- "[dir=\"rtl\"] .spectrum-Menu-chevron",
+ "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron",
"[dir=\"rtl\"] .spectrum-Menu-item"
],
"modifiers": [
@@ -341,6 +342,7 @@
"--spectrum-font-size-300",
"--spectrum-font-size-50",
"--spectrum-font-size-75",
+ "--spectrum-gray-1000-rgb",
"--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-navigational-indicator-top-to-back-icon-extra-large",
@@ -365,15 +367,22 @@
"--spectrum-text-to-visual-200",
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-75",
+ "--spectrum-transparent-black-200-opacity",
"--spectrum-workflow-icon-size-100",
"--spectrum-workflow-icon-size-200",
"--spectrum-workflow-icon-size-300",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-menu-item-background-color-down",
+ "--system-menu-item-background-color-hover",
+ "--system-menu-item-background-color-key-focus"
+ ],
"passthroughs": [
"--mod-checkbox-text-to-control",
- "--mod-checkbox-top-to-text"
+ "--mod-checkbox-top-to-text",
+ "--mod-switch-control-label-spacing",
+ "--mod-switch-spacing-top-to-label"
],
"high-contrast": [
"--highcontrast-checkbox-highlight-color-default",
diff --git a/components/menu/package.json b/components/menu/package.json
index f8565467dba..b195bb53b21 100644
--- a/components/menu/package.json
+++ b/components/menu/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/menu",
- "version": "7.2.0",
+ "version": "8.0.0-s2-foundations.16",
"description": "The Spectrum CSS menu component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js
index acf1e41bb96..8409f26b220 100644
--- a/components/menu/stories/menu.stories.js
+++ b/components/menu/stories/menu.stories.js
@@ -82,6 +82,10 @@ export default {
height: "300px"
}
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=37252-553",
+ },
packageJson,
metadata,
},
@@ -247,6 +251,9 @@ TraySubmenu.parameters = {
height: "400px"
}
},
+ viewport: {
+ defaultViewport: "mobile2"
+ },
};
export const MenuItem = MenuItemGroup.bind({});
@@ -317,6 +324,12 @@ MenuItem.args = {
isSelected: false,
hasActions: false,
};
+MenuItem.parameters = {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=37252-2242&node-type=frame&t=Kcz7zeePp3PeRusJ-11",
+ },
+};
/**
* This option will display submenus in a collapsed, nested format within the parent menu’s container. It can be used
diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js
index 24aee2eeaba..7c41f127add 100644
--- a/components/menu/stories/template.js
+++ b/components/menu/stories/template.js
@@ -13,6 +13,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
/**
* Get the tray submenu back arrow name with scale number (defined in design spec).
diff --git a/components/menu/themes/express.css b/components/menu/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/menu/themes/express.css
+++ b/components/menu/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css
new file mode 100644
index 00000000000..821e0fde0b6
--- /dev/null
+++ b/components/menu/themes/spectrum-two.css
@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Menu {
+ --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+ }
+}
diff --git a/components/menu/themes/spectrum.css b/components/menu/themes/spectrum.css
index 3b48a570c21..5085c7a1b08 100644
--- a/components/menu/themes/spectrum.css
+++ b/components/menu/themes/spectrum.css
@@ -10,3 +10,15 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Menu {
+ --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
+ }
+}
diff --git a/components/meter/CHANGELOG.md b/components/meter/CHANGELOG.md
new file mode 100644
index 00000000000..c5dca48ea2f
--- /dev/null
+++ b/components/meter/CHANGELOG.md
@@ -0,0 +1,1703 @@
+# Change Log
+
+## 0.0.0-s2-foundations.2
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f14c3be`](https://github.com/adobe/spectrum-css/commit/f14c3bee4ea3b3ad259ce2fa9c3f58fa49febf9d) Thanks [@pfulton](https://github.com/pfulton)! - ProgressBar/Meter
+
+ - Fix bug by reverting "background-color" for track fill back to "background".
+
+ Thumbnail
+
+ - Remove unused "vertical align" property.
+
+### Patch Changes
+
+- Updated dependencies [[`f14c3be`](https://github.com/adobe/spectrum-css/commit/f14c3bee4ea3b3ad259ce2fa9c3f58fa49febf9d)]:
+ - @spectrum-css/progressbar@5.0.0-s2-foundations.19
+
+## 0.0.0-s2-foundations.1
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`085ecbc`](https://github.com/adobe/spectrum-css/commit/085ecbc739cf736e8d95377d605f2a7c4104bcc0) Thanks [@pfulton](https://github.com/pfulton)! - Pulled out _form_ from _fieldlabel_ package.
+ Pulled out _meter_ from _progressbar_ package.
+
+ [SWC-522] fix hover style regression
+
+### Patch Changes
+
+- Updated dependencies [[`085ecbc`](https://github.com/adobe/spectrum-css/commit/085ecbc739cf736e8d95377d605f2a7c4104bcc0)]:
+ - @spectrum-css/progressbar@5.0.0-s2-foundations.18
+
+## 5.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.15
+
+## 5.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 5.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.14
+
+### Patch Changes
+
+- [#3023](https://github.com/adobe/spectrum-css/pull/3023) [`213efa8`](https://github.com/adobe/spectrum-css/commit/213efa8618cdccf75a274ee9c2dd0404864c1779) Thanks [@jawinn](https://github.com/jawinn)! - Relocates --mod custom properties from the themes CSS to the index.css.
+
+## 5.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-235] meter properties moved out of theme and into index.css
+
+### Patch Changes
+
+- Updated dependencies [[`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f), [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.14
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.0
+
+## 4.1.7
+
+### Patch Changes
+
+- [#3107](https://github.com/adobe/spectrum-css/pull/3107) [`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2) Thanks [@castastrophe](https://github.com/castastrophe)! - Incorporate glob export for the dist directory in all component packages as well as glob markdown exports (to include both CHANGELOG and READMEs).
+
+ Sort keys in the package.json assets.
+
+- Updated dependencies [[`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2)]:
+ - @spectrum-css/fieldlabel@8.1.3
+
+## 4.1.6
+
+### Patch Changes
+
+- [#3045](https://github.com/adobe/spectrum-css/pull/3045) [`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277) Thanks [@castastrophe](https://github.com/castastrophe)! - Improve changeset suggestions by using exports instead of files in component packages
+
+- Updated dependencies [[`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277)]:
+ - @spectrum-css/fieldlabel@8.1.2
+
+## 4.1.5
+
+### Patch Changes
+
+- [#2929](https://github.com/adobe/spectrum-css/pull/2929) [`3c6addd`](https://github.com/adobe/spectrum-css/commit/3c6addd3133f9340bb6472c96fc5c436bb77cb5a) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Reverts the `background-color` property to `background` to support the use of CSS gradients. Gradient support stories were added to the meter and progress bar components within their Chromatic testing previews to ensure that we continue to support gradients by covering them in our visual regression tests.
+
+## 4.1.4
+
+### Patch Changes
+
+- [#2965](https://github.com/adobe/spectrum-css/pull/2965) [`469dfc2`](https://github.com/adobe/spectrum-css/commit/469dfc2b13248ed5fb067e05cc30049d3e43dc90) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - - Enforces the correct static white progress bar fill color when meter is using both the `spectrum-ProgressBar--staticWhite` class and one of the `is-positive`, `is-negative`, or `is-notice` classes.
+ - Adds a static white story to meter.
+
+## 4.1.3
+
+### Patch Changes
+
+- [#2842](https://github.com/adobe/spectrum-css/pull/2842) [`4cd3a15`](https://github.com/adobe/spectrum-css/commit/4cd3a15db914b667f5d606388051ecd2cd318134) Thanks [@castastrophe](https://github.com/castastrophe)! - Updated CSSNano plugin to toggle reduceIdent off to prevent invalid abstractions from breaking named grid templates.
+
+## 4.1.2
+
+### Patch Changes
+
+- [#2677](https://github.com/adobe/spectrum-css/pull/2677) [`d83200c`](https://github.com/adobe/spectrum-css/commit/d83200ca70a959aa70329e71de0c4383de157855) Thanks [@castastrophe](https://github.com/castastrophe)! - Leveral local workspace versioning to prevent misalignment
+
+- Updated dependencies [[`d83200c`](https://github.com/adobe/spectrum-css/commit/d83200ca70a959aa70329e71de0c4383de157855)]:
+ - @spectrum-css/fieldlabel@8.1.1
+
+## 4.1.1
+
+### Patch Changes
+
+- [#2754](https://github.com/adobe/spectrum-css/pull/2754) [`dbf1406`](https://github.com/adobe/spectrum-css/commit/dbf1406822be32aa1dbd2864b097853423bf06d8) Thanks [@jawinn](https://github.com/jawinn)! - Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM.
+
+## 4.1.0
+
+### Minor Changes
+
+- [#2616](https://github.com/adobe/spectrum-css/pull/2616) [`7f45ea9`](https://github.com/adobe/spectrum-css/commit/7f45ea95d3d31addf29b0720de8623b0f3f0431d) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+#### Build optmizations to support minification
+
+Output for all component CSS files is now being run through a lightweight optimizer (cssnano) which significantly reduces unnecessary whitespace. These changes reduce file size but should not have any impact on the rendering of the component. By removing unnecessary whitespace from var functions, we are making it easier to effectively minify our provided CSS assets.
+
+### Patch Changes
+
+- Updated peerDependencies [[`7f45ea9`](https://github.com/adobe/spectrum-css/commit/7f45ea95d3d31addf29b0720de8623b0f3f0431d)]:
+ - @spectrum-css/fieldlabel@>=8
+ - @spectrum-css/tokens@>=14
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+
+Co-authored-by: Bernhard Schmidt <52184321+bernhard-adobe@users.noreply.github.com>
+
+
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@import "./themes/spectrum-two.css";
+
+/* @passthrough start */
+.spectrum-Meter {
+ --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-default-width));
+ --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width));
+ --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width));
+
+ &,
+ &.spectrum-Meter--sizeS {
+ --mod-progressbar-thickness: var(--spectrum-meter-thickness-small);
+ --mod-progressbar-font-size: var(--spectrum-font-size-75);
+ --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+ }
+
+ &.spectrum-Meter--sizeL {
+ --mod-progressbar-thickness: var(--spectrum-meter-thickness-large);
+ --mod-progressbar-font-size: var(--spectrum-font-size-100);
+ --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
+ }
+
+ &.is-positive {
+ --mod-progressbar-fill-color: var(--spectrum-positive-visual-color);
+ }
+
+ &.is-notice {
+ --mod-progressbar-fill-color: var(--spectrum-notice-visual-color);
+ }
+
+ &.is-negative {
+ --mod-progressbar-fill-color: var(--spectrum-negative-visual-color);
+ }
+}
+/* @passthrough end */
diff --git a/components/meter/metadata/metadata.json b/components/meter/metadata/metadata.json
new file mode 100644
index 00000000000..9bfe3424ce7
--- /dev/null
+++ b/components/meter/metadata/metadata.json
@@ -0,0 +1,43 @@
+{
+ "sourceFile": "index.css",
+ "selectors": [
+ ".spectrum-Meter",
+ ".spectrum-Meter.is-negative",
+ ".spectrum-Meter.is-notice",
+ ".spectrum-Meter.is-positive",
+ ".spectrum-Meter.spectrum-Meter--sizeL",
+ ".spectrum-Meter.spectrum-Meter--sizeS"
+ ],
+ "modifiers": [
+ "--mod-meter-inline-size",
+ "--mod-meter-max-width",
+ "--mod-meter-min-width"
+ ],
+ "component": [
+ "--spectrum-meter-default-width",
+ "--spectrum-meter-maximum-width",
+ "--spectrum-meter-minimum-width",
+ "--spectrum-meter-thickness-large",
+ "--spectrum-meter-thickness-small"
+ ],
+ "global": [
+ "--spectrum-component-top-to-text-200",
+ "--spectrum-component-top-to-text-75",
+ "--spectrum-font-size-100",
+ "--spectrum-font-size-75",
+ "--spectrum-negative-visual-color",
+ "--spectrum-notice-visual-color",
+ "--spectrum-positive-visual-color"
+ ],
+ "system-theme": [],
+ "passthroughs": [
+ "--mod-progressbar-fill-color",
+ "--mod-progressbar-font-size",
+ "--mod-progressbar-max-size",
+ "--mod-progressbar-min-size",
+ "--mod-progressbar-size-default",
+ "--mod-progressbar-spacing-top-to-text",
+ "--mod-progressbar-thickness"
+ ],
+ "high-contrast": []
+}
diff --git a/components/meter/metadata/mods.md b/components/meter/metadata/mods.md
new file mode 100644
index 00000000000..413920957c5
--- /dev/null
+++ b/components/meter/metadata/mods.md
@@ -0,0 +1,5 @@
+| Modifiable custom properties |
+| ---------------------------- |
+| `--mod-meter-inline-size` |
+| `--mod-meter-max-width` |
+| `--mod-meter-min-width` |
diff --git a/components/meter/package.json b/components/meter/package.json
new file mode 100644
index 00000000000..68109f9dba6
--- /dev/null
+++ b/components/meter/package.json
@@ -0,0 +1,50 @@
+{
+ "name": "@spectrum-css/meter",
+ "version": "0.0.0-s2-foundations.2",
+ "description": "The Spectrum CSS meter component",
+ "license": "Apache-2.0",
+ "author": "Adobe",
+ "homepage": "https://opensource.adobe.com/spectrum-css/meter",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/adobe/spectrum-css.git",
+ "directory": "components/meter"
+ },
+ "bugs": {
+ "url": "https://github.com/adobe/spectrum-css/issues"
+ },
+ "exports": {
+ ".": "./dist/index.css",
+ "./*.md": "./*.md",
+ "./dist/*": "./dist/*",
+ "./index-*.css": "./dist/index-*.css",
+ "./index.css": "./dist/index.css",
+ "./metadata.json": "./metadata/metadata.json",
+ "./metadata/*": "./metadata/*",
+ "./package.json": "./package.json"
+ },
+ "main": "dist/index.css",
+ "files": [
+ "dist/*",
+ "*.md",
+ "package.json",
+ "metadata/*"
+ ],
+ "peerDependencies": {
+ "@spectrum-css/progressbar": ">=4",
+ "@spectrum-css/tokens": ">=14"
+ },
+ "devDependencies": {
+ "@spectrum-css/progressbar": "workspace:^",
+ "@spectrum-css/tokens": "workspace:^"
+ },
+ "keywords": [
+ "spectrum",
+ "css",
+ "design system",
+ "adobe"
+ ],
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/components/meter/project.json b/components/meter/project.json
new file mode 100644
index 00000000000..480296f64f0
--- /dev/null
+++ b/components/meter/project.json
@@ -0,0 +1,17 @@
+{
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "name": "meter",
+ "tags": ["component"],
+ "targets": {
+ "build": {},
+ "clean": {},
+ "compare": {},
+ "format": {},
+ "lint": {},
+ "report": {},
+ "test": {
+ "defaultConfiguration": "scope"
+ },
+ "validate": {}
+ }
+}
diff --git a/components/progressbar/stories/meter.stories.js b/components/meter/stories/meter.stories.js
similarity index 91%
rename from components/progressbar/stories/meter.stories.js
rename to components/meter/stories/meter.stories.js
index 1f7129bdfa1..1f56041110d 100644
--- a/components/progressbar/stories/meter.stories.js
+++ b/components/meter/stories/meter.stories.js
@@ -1,11 +1,11 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
+import { default as ProgressBar } from "@spectrum-css/progressbar/stories/progressbar.stories.js";
import metadata from "../metadata/metadata.json";
import packageJson from "../package.json";
-import { FillGroup, Template } from "./meter.template.js";
import { MeterGroup } from "./meter.test.js";
-import { default as ProgressBar } from "./progressbar.stories";
+import { FillGroup, Template } from "./template.js";
/**
* The meter component is a visual representations of a quantity or an achievement. The progress is determined by user actions, rather than system actions.
@@ -16,7 +16,7 @@ import { default as ProgressBar } from "./progressbar.stories";
*/
export default {
title: "Meter",
- component: "ProgressBar",
+ component: "Meter",
argTypes: {
...ProgressBar.argTypes,
size: size(["s", "l"]),
@@ -41,6 +41,10 @@ export default {
label: "Storage space",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=33840-90",
+ },
packageJson,
metadata,
},
@@ -78,14 +82,9 @@ Sizing.parameters = {
*
* By default, the meter has a informative, blue fill to show the value. This can be used to represent a neutral or non-semantic value. The positive variant has a green fill, representing a positive semantic value. The notice variant has an orange fill, and can be used to warn users about a situation that may need to be addressed soon. The negative variant has a red fill, and can be used to warn users about a critical situation that needs their urgent attention.
*/
-export const FillColors = (args, context) => FillGroup({
- variants: ["info", "positive", "negative", "notice"],
- ...args,
-}, context);
+export const FillColors = FillGroup.bind({});
FillColors.storyName = "Fill colors";
-FillColors.args = {
- value: 50,
-};
+FillColors.args = Default.args;
FillColors.tags = ["!dev"];
FillColors.parameters = {
chromatic: { disableSnapshot: true },
diff --git a/components/progressbar/stories/meter.test.js b/components/meter/stories/meter.test.js
similarity index 91%
rename from components/progressbar/stories/meter.test.js
rename to components/meter/stories/meter.test.js
index 64de9db0623..46f60024bf4 100644
--- a/components/progressbar/stories/meter.test.js
+++ b/components/meter/stories/meter.test.js
@@ -1,5 +1,5 @@
import { Variants } from "@spectrum-css/preview/decorators";
-import { Template } from "./meter.template.js";
+import { Template } from "./template.js";
export const MeterGroup = Variants({
Template,
@@ -28,7 +28,7 @@ export const MeterGroup = Variants({
testHeading: "Without value label",
showValueLabel: false,
},
- /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom
+ /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom
linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
*/
{
diff --git a/components/meter/stories/template.js b/components/meter/stories/template.js
new file mode 100644
index 00000000000..22baef0df20
--- /dev/null
+++ b/components/meter/stories/template.js
@@ -0,0 +1,43 @@
+import { ArgGrid } from "@spectrum-css/preview/decorators";
+import { Template as ProgressBar } from "@spectrum-css/progressbar/stories/template.js";
+import { capitalize } from "lodash-es";
+
+import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
+
+export const Template = ({
+ rootClass = "spectrum-Meter",
+ customClasses = [],
+ fill,
+ size = "s",
+ staticColor,
+ ...item
+} = {}, context = {}) => {
+ return ProgressBar({
+ ...item,
+ customClasses: [
+ ...customClasses,
+ rootClass,
+ typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null,
+ typeof fill !== "undefined" ? `is-${fill}` : null,
+ /*
+ * The `spectrum-Meter--staticWhite` class is not present in the Meter CSS, as it makes use of
+ * `spectrum-ProgressBar--staticWhite`, but having this allows for simpler detection of static
+ * colors when looking at the element using its `rootClass` in our decorators.
+ */
+ typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null,
+ ].filter(Boolean),
+ staticColor,
+ }, context);
+};
+
+/* FillGroup showcases all semantic variants in a single story. */
+export const FillGroup = (args, context) => ArgGrid({
+ Template,
+ argKey: "fill",
+ options: ["info", "positive", "negative", "notice"],
+ withBorder: false,
+ ...args,
+}, context);
diff --git a/components/meter/themes/express.css b/components/meter/themes/express.css
new file mode 100644
index 00000000000..9fd550418f2
--- /dev/null
+++ b/components/meter/themes/express.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/meter/themes/spectrum-two.css b/components/meter/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/meter/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/meter/themes/spectrum.css b/components/meter/themes/spectrum.css
new file mode 100644
index 00000000000..3d81bc564b5
--- /dev/null
+++ b/components/meter/themes/spectrum.css
@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/miller/CHANGELOG.md b/components/miller/CHANGELOG.md
index 7cb3dc90de2..a1f660b92ce 100644
--- a/components/miller/CHANGELOG.md
+++ b/components/miller/CHANGELOG.md
@@ -1,5 +1,230 @@
# Change Log
+## 7.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.15
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.18
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.14
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.17
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.13
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.12
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.11
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.10
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.9
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.8
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.7
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.5
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.4
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.3
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.2
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.1
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.0
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
diff --git a/components/miller/index.css b/components/miller/index.css
index faa8cb4cbb9..d1cd1ca2b2b 100644
--- a/components/miller/index.css
+++ b/components/miller/index.css
@@ -11,34 +11,27 @@
* governing permissions and limitations under the License.
*/
- @import "./themes/express.css";
-
-.spectrum-MillerColumns {
- --spectrum-millercolumns-inline-size: 272px;
- --spectrum-millercolumns-padding: var(--spectrum-spacing-100);
- --spectrum-millercolumns-margin-inline-start: var(--spectrum-spacing-100);
- --spectrum-millercolumns-margin-inline-end: var(--spectrum-spacing-100);
-}
+@import "./themes/spectrum-two.css";
.spectrum-MillerColumns {
overflow-x: auto;
white-space: nowrap;
user-select: none;
- padding: var(--mod-millercolumns-padding, var(--spectrum-millercolumns-padding)) 0;
+ padding: var(--mod-millercolumns-padding, var(--spectrum-spacing-100)) 0;
}
.spectrum-MillerColumns-item {
display: inline-block;
- inline-size: var(--mod-millercolumns-inline-size, var(--spectrum-millercolumns-inline-size));
+ inline-size: var(--mod-millercolumns-inline-size, 272px);
vertical-align: top;
outline: none;
margin: 0;
padding: 0;
- margin-inline-end: var(--mod-millercolumns-margin-inline-end, var(--spectrum-millercolumns-margin-inline-end));
+ margin-inline-end: var(--mod-millercolumns-margin-inline-end, var(--spectrum-spacing-100));
overflow: auto;
block-size: 100%;
&:first-child {
- margin-inline-start: var(--mod-millercolumns-margin-inline-start, var(--spectrum-millercolumns-margin-inline-start));
+ margin-inline-start: var(--mod-millercolumns-margin-inline-start, var(--spectrum-spacing-100));
}
}
diff --git a/components/miller/metadata/metadata.json b/components/miller/metadata/metadata.json
index 4d2e62f974e..adb2109144c 100644
--- a/components/miller/metadata/metadata.json
+++ b/components/miller/metadata/metadata.json
@@ -11,12 +11,7 @@
"--mod-millercolumns-margin-inline-start",
"--mod-millercolumns-padding"
],
- "component": [
- "--spectrum-millercolumns-inline-size",
- "--spectrum-millercolumns-margin-inline-end",
- "--spectrum-millercolumns-margin-inline-start",
- "--spectrum-millercolumns-padding"
- ],
+ "component": [],
"global": ["--spectrum-spacing-100"],
"system-theme": [],
"passthroughs": [],
diff --git a/components/miller/package.json b/components/miller/package.json
index a09980c654e..f1214a103fc 100644
--- a/components/miller/package.json
+++ b/components/miller/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/miller",
- "version": "6.2.0",
+ "version": "7.0.0-s2-foundations.15",
"description": "The Spectrum CSS miller component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/miller/stories/template.js b/components/miller/stories/template.js
index 66caafe96fe..9476ef5fc35 100644
--- a/components/miller/stories/template.js
+++ b/components/miller/stories/template.js
@@ -3,6 +3,9 @@ import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-MillerColumns",
diff --git a/components/miller/themes/express.css b/components/miller/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/miller/themes/express.css
+++ b/components/miller/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/miller/themes/spectrum-two.css b/components/miller/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/miller/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/miller/themes/spectrum.css b/components/miller/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/miller/themes/spectrum.css
+++ b/components/miller/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/modal/CHANGELOG.md b/components/modal/CHANGELOG.md
index f3b027cd6ec..7e95b8b0428 100644
--- a/components/modal/CHANGELOG.md
+++ b/components/modal/CHANGELOG.md
@@ -1,5 +1,189 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 6.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#3056](https://github.com/adobe/spectrum-css/pull/3056) [`5bbbc78`](https://github.com/adobe/spectrum-css/commit/5bbbc78a6ef9442dc51c5fcc14a82fbe9bc277bf) Thanks [@Rajdeepc](https://github.com/Rajdeepc)! - Updates the spectrum-modal-background-color in dark and light in spectrum-two theme
+
+### Patch Changes
+
+- Updated dependencies [[`db528ce`](https://github.com/adobe/spectrum-css/commit/db528ce0a6f7d817e6124604014faf9f4accfc1e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.20
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/modal/index.css b/components/modal/index.css
index fb6b22c0ef8..4de165a2251 100644
--- a/components/modal/index.css
+++ b/components/modal/index.css
@@ -12,24 +12,7 @@
*/
@import "@spectrum-css/commons/overlay.css";
-@import "./themes/express.css";
-
-.spectrum-Modal {
- /* Bug: this must be 0ms, not 0 */
- --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
-
- /* Distance between top and bottom of modal and edge of window for fullscreen modal */
- --spectrum-modal-fullscreen-margin: 32px;
- --spectrum-modal-max-height: 90vh;
- --spectrum-modal-max-width: 90%;
-
- --spectrum-modal-background-color: var(--spectrum-gray-100);
- --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
- --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
- --spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100);
-}
+@import "./themes/spectrum-two.css";
/* Used to position the modal */
.spectrum-Modal-wrapper {
@@ -64,7 +47,7 @@
z-index: 2;
/* Be invisible by default */
- transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-modal-transition-animation-duration));
+ transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100));
&.is-open {
visibility: visible;
@@ -72,22 +55,32 @@
}
.spectrum-Modal {
+ /* Bug: this must be 0ms, not 0 */
+ --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
+
+ /* Distance between top and bottom of modal and edge of window for fullscreen modal */
+ --spectrum-modal-fullscreen-margin: 32px;
+
+ --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
+ --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
+
@extend %spectrum-overlay;
- /* Start offset by the animation distance */
- transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance)));
+ /* Start offset by the animation distance -- @note this is using the global dialog token */
+ transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance)));
/* Appear above underlay */
z-index: 2;
/* Don't be bigger than the screen */
- max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height));
- max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width));
+ max-block-size: var(--mod-modal-max-height, 90vh);
+ max-inline-size: var(--mod-modal-max-width, 90%);
background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
- border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius));
+ border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100));
overflow: hidden;
outline: none; /* Firefox shows outline */
pointer-events: auto;
@@ -97,17 +90,17 @@
opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in) var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)),
visibility 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))),
transform 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)));
-}
-.spectrum-Modal.is-open {
- @extend %spectrum-overlay--open;
+ &.is-open {
+ @extend %spectrum-overlay--open;
- /* Entry animations */
- transition:
- transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
- opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
+ /* Entry animations */
+ transition:
+ transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
+ opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
- transform: translateY(0);
+ transform: translateY(0);
+ }
}
/* Responsive modals will fill the screen on small viewports */
diff --git a/components/modal/metadata/metadata.json b/components/modal/metadata/metadata.json
index 0fcba109eea..33c6cb2a9b8 100644
--- a/components/modal/metadata/metadata.json
+++ b/components/modal/metadata/metadata.json
@@ -1,6 +1,7 @@
{
"sourceFile": "index.css",
"selectors": [
+ ".is-open:scope",
".spectrum-Modal",
".spectrum-Modal--fullscreen",
".spectrum-Modal--fullscreenTakeover",
@@ -28,16 +29,11 @@
],
"component": [
"--spectrum-modal-background-color",
- "--spectrum-modal-confirm-border-radius",
"--spectrum-modal-confirm-entry-animation-delay",
- "--spectrum-modal-confirm-entry-animation-distance",
"--spectrum-modal-confirm-entry-animation-duration",
"--spectrum-modal-confirm-exit-animation-delay",
"--spectrum-modal-confirm-exit-animation-duration",
- "--spectrum-modal-fullscreen-margin",
- "--spectrum-modal-max-height",
- "--spectrum-modal-max-width",
- "--spectrum-modal-transition-animation-duration"
+ "--spectrum-modal-fullscreen-margin"
],
"global": [
"--spectrum-animation-duration-0",
@@ -46,10 +42,11 @@
"--spectrum-animation-duration-500",
"--spectrum-animation-ease-in",
"--spectrum-animation-ease-out",
+ "--spectrum-background-layer-2-color",
"--spectrum-corner-radius-100",
- "--spectrum-gray-100"
+ "--spectrum-dialog-confirm-entry-animation-distance"
],
- "system-theme": [],
+ "system-theme": ["--system-modal-background-color"],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/modal/package.json b/components/modal/package.json
index e2b52f1af59..92f161ab4fd 100644
--- a/components/modal/package.json
+++ b/components/modal/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/modal",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS modal component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/modal/stories/template.js b/components/modal/stories/template.js
index 9abbf49ebea..07a52b89131 100644
--- a/components/modal/stories/template.js
+++ b/components/modal/stories/template.js
@@ -5,6 +5,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
/**
* Just the modal markup.
diff --git a/components/modal/themes/express.css b/components/modal/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/modal/themes/express.css
+++ b/components/modal/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/modal/themes/spectrum-two.css b/components/modal/themes/spectrum-two.css
new file mode 100644
index 00000000000..c31756dcdae
--- /dev/null
+++ b/components/modal/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Modal {
+ --spectrum-modal-background-color: var(--spectrum-background-layer-2-color);
+ }
+}
diff --git a/components/modal/themes/spectrum.css b/components/modal/themes/spectrum.css
index 3b48a570c21..f637e6f343e 100644
--- a/components/modal/themes/spectrum.css
+++ b/components/modal/themes/spectrum.css
@@ -10,3 +10,13 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Modal {
+ --spectrum-modal-background-color: var(--spectrum-gray-100);
+ }
+}
diff --git a/components/opacitycheckerboard/CHANGELOG.md b/components/opacitycheckerboard/CHANGELOG.md
index ac6deb909c7..b67aee3c3d8 100644
--- a/components/opacitycheckerboard/CHANGELOG.md
+++ b/components/opacitycheckerboard/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 3.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 3.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 3.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 2.2.0
### Minor Changes
diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css
index a0485721ad6..f24f7e72027 100644
--- a/components/opacitycheckerboard/index.css
+++ b/components/opacitycheckerboard/index.css
@@ -11,17 +11,17 @@
* governing permissions and limitations under the License.
*/
- @import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-OpacityCheckerboard {
- --spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark);
- --spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light);
- --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size);
- --spectrum-opacity-checkerboard-position: left top;
-}
-
-.spectrum-OpacityCheckerboard {
- background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2);
+ background:
+ repeating-conic-gradient(
+ var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light)) 0% 25%,
+ var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark)) 0% 50%
+ )
+ var(--mod-opacity-checkerboard-position, left top) /
+ calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2)
+ calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2);
}
@media (forced-colors: active) {
diff --git a/components/opacitycheckerboard/metadata/metadata.json b/components/opacitycheckerboard/metadata/metadata.json
index a47a1f04bb9..51c1a155873 100644
--- a/components/opacitycheckerboard/metadata/metadata.json
+++ b/components/opacitycheckerboard/metadata/metadata.json
@@ -8,10 +8,6 @@
"--mod-opacity-checkerboard-size"
],
"component": [
- "--spectrum-opacity-checkerboard-dark",
- "--spectrum-opacity-checkerboard-light",
- "--spectrum-opacity-checkerboard-position",
- "--spectrum-opacity-checkerboard-size",
"--spectrum-opacity-checkerboard-square-dark",
"--spectrum-opacity-checkerboard-square-light",
"--spectrum-opacity-checkerboard-square-size"
diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json
index 4e25dbc1d49..e259e04b053 100644
--- a/components/opacitycheckerboard/package.json
+++ b/components/opacitycheckerboard/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/opacitycheckerboard",
- "version": "2.2.0",
+ "version": "3.0.0-s2-foundations.15",
"description": "The Spectrum CSS opacitycheckerboard component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js
index 5327a593cb8..4f55fe23408 100644
--- a/components/opacitycheckerboard/stories/template.js
+++ b/components/opacitycheckerboard/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-OpacityCheckerboard",
@@ -14,18 +17,21 @@ export const Template = ({
id = getRandomId("opacity-checkerboard"),
content = [],
role,
-}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- style=${ifDefined(styleMap({
- "--mod-opacity-checkerboard-position": backgroundPosition,
- ...customStyles,
- }))}
- role=${ifDefined(role)}
- id=${ifDefined(id)}
- >
- ${renderContent(content)}
-
`;
+} = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ style=${ifDefined(styleMap({
+ "--mod-opacity-checkerboard-position": backgroundPosition,
+ ...customStyles,
+ }))}
+ role=${ifDefined(role)}
+ id=${ifDefined(id)}
+ >
+ ${renderContent(content)}
+
+ `;
+};
diff --git a/components/opacitycheckerboard/themes/express.css b/components/opacitycheckerboard/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/opacitycheckerboard/themes/express.css
+++ b/components/opacitycheckerboard/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/opacitycheckerboard/themes/spectrum-two.css b/components/opacitycheckerboard/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/opacitycheckerboard/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/opacitycheckerboard/themes/spectrum.css b/components/opacitycheckerboard/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/opacitycheckerboard/themes/spectrum.css
+++ b/components/opacitycheckerboard/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/page/CHANGELOG.md b/components/page/CHANGELOG.md
deleted file mode 100644
index f3b1d00596c..00000000000
--- a/components/page/CHANGELOG.md
+++ /dev/null
@@ -1,752 +0,0 @@
-# Change Log
-
-## 8.2.0
-
-### Minor Changes
-
-- [#3369](https://github.com/adobe/spectrum-css/pull/3369) [`9c49505`](https://github.com/adobe/spectrum-css/commit/9c4950517bf0f8ca7b2e373f4323c97d068d0ceb) Thanks [@castastrophe](https://github.com/castastrophe)! - Remove the storybook assets from the shipped output for components
-
-## 8.1.3
-
-### Patch Changes
-
-- [#3107](https://github.com/adobe/spectrum-css/pull/3107) [`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2) Thanks [@castastrophe](https://github.com/castastrophe)! - Incorporate glob export for the dist directory in all component packages as well as glob markdown exports (to include both CHANGELOG and READMEs).
-
- Sort keys in the package.json assets.
-
-## 8.1.2
-
-### Patch Changes
-
-- [#3045](https://github.com/adobe/spectrum-css/pull/3045) [`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277) Thanks [@castastrophe](https://github.com/castastrophe)! - Improve changeset suggestions by using exports instead of files in component packages
-
-## 8.1.1
-
-### Patch Changes
-
-- [#2677](https://github.com/adobe/spectrum-css/pull/2677) [`d83200c`](https://github.com/adobe/spectrum-css/commit/d83200ca70a959aa70329e71de0c4383de157855) Thanks [@castastrophe](https://github.com/castastrophe)! - Leveral local workspace versioning to prevent misalignment
-
-## 8.1.0
-
-### Minor Changes
-
-- [#2616](https://github.com/adobe/spectrum-css/pull/2616) [`7f45ea9`](https://github.com/adobe/spectrum-css/commit/7f45ea95d3d31addf29b0720de8623b0f3f0431d) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-#### Build optmizations to support minification
-
-Output for all component CSS files is now being run through a lightweight optimizer (cssnano) which significantly reduces unnecessary whitespace. These changes reduce file size but should not have any impact on the rendering of the component. By removing unnecessary whitespace from var functions, we are making it easier to effectively minify our provided CSS assets.
-
-### Patch Changes
-
-- Updated peerDependencies [[`7f45ea9`](https://github.com/adobe/spectrum-css/commit/7f45ea95d3d31addf29b0720de8623b0f3f0431d)]:
- - @spectrum-css/tokens@>=14
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-
`;
- // @todo This variant should be deprecated, as it uses the deprecated SplitButton component.
- const buttonVariant = SplitButton({
- position: "left",
- variant: "accent",
- label: "Next",
- iconName: "ChevronLeft100",
- labelIconName: "ChevronRight100",
- iconSet: "ui",
- customFirstButtonClasses: ["spectrum-Pagination-prevButton"],
- customLastButtonClasses: ["spectrum-Pagination-nextButton"]
- }, context);
-
const listingVariant = html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/pagination/themes/spectrum.css b/components/pagination/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/pagination/themes/spectrum.css
+++ b/components/pagination/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/picker/CHANGELOG.md b/components/picker/CHANGELOG.md
index 063fedc10aa..e05a3c136f3 100644
--- a/components/picker/CHANGELOG.md
+++ b/components/picker/CHANGELOG.md
@@ -1,5 +1,262 @@
# Change Log
+## 9.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.15
+ - @spectrum-css/helptext@6.0.0-s2-foundations.15
+ - @spectrum-css/popover@8.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+ - @spectrum-css/menu@8.0.0-s2-foundations.15
+
+## 9.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.14
+ - @spectrum-css/helptext@6.0.0-s2-foundations.14
+ - @spectrum-css/popover@8.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/menu@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 9.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.13
+ - @spectrum-css/helptext@6.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 9.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.12
+ - @spectrum-css/helptext@6.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 9.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.11
+ - @spectrum-css/helptext@6.0.0-s2-foundations.11
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 9.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.10
+ - @spectrum-css/helptext@6.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 9.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.9
+ - @spectrum-css/helptext@6.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 9.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.8
+ - @spectrum-css/helptext@6.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 9.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.7
+ - @spectrum-css/helptext@6.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 9.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.6
+ - @spectrum-css/helptext@6.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 9.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.5
+ - @spectrum-css/helptext@6.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 9.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.4
+ - @spectrum-css/helptext@6.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 9.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.3
+ - @spectrum-css/helptext@6.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 9.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.2
+ - @spectrum-css/helptext@6.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.1
+ - @spectrum-css/helptext@6.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 9.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/helptext@6.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 8.3.0
### Minor Changes
diff --git a/components/picker/index.css b/components/picker/index.css
index 23295ab3108..dbe348e0080 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/basebutton.css";
.spectrum-Picker {
@@ -45,10 +45,6 @@
--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100);
--spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);
- & + .spectrum-Popover--bottom.is-open {
- --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
- }
-
/* animation */
--spectrum-picker-animation-duration: var(--spectrum-animation-duration-100);
@@ -84,6 +80,10 @@
--spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
--spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
--spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ & + .spectrum-Popover--bottom.is-open {
+ --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
+ }
}
.spectrum-Picker--sizeS {
diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json
index a87ea36a42b..cba044ebf5d 100644
--- a/components/picker/metadata/metadata.json
+++ b/components/picker/metadata/metadata.json
@@ -274,13 +274,12 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
+ "--spectrum-gray-50",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-line-height-100",
"--spectrum-negative-border-color-default",
"--spectrum-negative-border-color-down",
@@ -303,19 +302,19 @@
"--spectrum-text-to-visual-75"
],
"system-theme": [
- "--system-spectrum-picker-background-color-active",
- "--system-spectrum-picker-background-color-default",
- "--system-spectrum-picker-background-color-default-open",
- "--system-spectrum-picker-background-color-hover",
- "--system-spectrum-picker-background-color-hover-open",
- "--system-spectrum-picker-background-color-key-focus",
- "--system-spectrum-picker-border-color-active",
- "--system-spectrum-picker-border-color-default",
- "--system-spectrum-picker-border-color-default-open",
- "--system-spectrum-picker-border-color-hover",
- "--system-spectrum-picker-border-color-hover-open",
- "--system-spectrum-picker-border-color-key-focus",
- "--system-spectrum-picker-border-width"
+ "--system-picker-background-color-active",
+ "--system-picker-background-color-default",
+ "--system-picker-background-color-default-open",
+ "--system-picker-background-color-hover",
+ "--system-picker-background-color-hover-open",
+ "--system-picker-background-color-key-focus",
+ "--system-picker-border-color-active",
+ "--system-picker-border-color-default",
+ "--system-picker-border-color-default-open",
+ "--system-picker-border-color-hover",
+ "--system-picker-border-color-hover-open",
+ "--system-picker-border-color-key-focus",
+ "--system-picker-border-width"
],
"passthroughs": [
"--mod-button-animation-duration",
diff --git a/components/picker/package.json b/components/picker/package.json
index 840c99e1b3d..4ca31454ee2 100644
--- a/components/picker/package.json
+++ b/components/picker/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/picker",
- "version": "8.3.0",
+ "version": "9.0.0-s2-foundations.15",
"description": "The Spectrum CSS picker component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index a94d309e4aa..291b9467c03 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -137,6 +137,10 @@ export default {
height: "400px"
}
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=739-1453",
+ },
packageJson,
metadata,
},
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 4be33a2092f..5bce15f0744 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -11,6 +11,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
/**
* Template for Picker only (no popover or help text).
diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css
index 05de433acae..bb521933e6b 100644
--- a/components/picker/themes/express.css
+++ b/components/picker/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Picker {
--spectrum-picker-background-color-default: var(--spectrum-gray-200);
--spectrum-picker-background-color-default-open: var(--spectrum-gray-300);
diff --git a/components/picker/themes/spectrum-two.css b/components/picker/themes/spectrum-two.css
new file mode 100644
index 00000000000..413f909b366
--- /dev/null
+++ b/components/picker/themes/spectrum-two.css
@@ -0,0 +1,32 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Picker {
+ --spectrum-picker-background-color-default: var(--spectrum-gray-50);
+ --spectrum-picker-background-color-default-open: var(--spectrum-gray-100);
+ --spectrum-picker-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-picker-background-color-hover-open: var(--spectrum-gray-100);
+ --spectrum-picker-background-color-active: var(--spectrum-gray-200);
+ --spectrum-picker-background-color-key-focus: var(--spectrum-gray-100);
+
+ --spectrum-picker-border-color-default: var(--spectrum-gray-500);
+ --spectrum-picker-border-color-default-open: var(--spectrum-gray-500);
+ --spectrum-picker-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-picker-border-color-hover-open: var(--spectrum-gray-600);
+ --spectrum-picker-border-color-active: var(--spectrum-gray-700);
+ --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
+
+ --spectrum-picker-border-width: var(--spectrum-border-width-100);
+ }
+}
diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css
index b98f70f57ea..ff6add69d38 100644
--- a/components/picker/themes/spectrum.css
+++ b/components/picker/themes/spectrum.css
@@ -11,7 +11,11 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Picker {
--spectrum-picker-background-color-default: var(--spectrum-gray-75);
--spectrum-picker-background-color-default-open: var(--spectrum-gray-200);
@@ -19,14 +23,5 @@
--spectrum-picker-background-color-hover: var(--spectrum-gray-200);
--spectrum-picker-background-color-hover-open: var(--spectrum-gray-200);
--spectrum-picker-background-color-key-focus: var(--spectrum-gray-200);
-
- --spectrum-picker-border-color-default: var(--spectrum-gray-500);
- --spectrum-picker-border-color-default-open: var(--spectrum-gray-500);
- --spectrum-picker-border-color-hover: var(--spectrum-gray-600);
- --spectrum-picker-border-color-hover-open: var(--spectrum-gray-600);
- --spectrum-picker-border-color-active: var(--spectrum-gray-700);
- --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
-
- --spectrum-picker-border-width: var(--spectrum-border-width-100);
}
}
diff --git a/components/pickerbutton/CHANGELOG.md b/components/pickerbutton/CHANGELOG.md
index 76ace483e66..9061d36292a 100644
--- a/components/pickerbutton/CHANGELOG.md
+++ b/components/pickerbutton/CHANGELOG.md
@@ -1,5 +1,236 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+ - @spectrum-css/menu@8.0.0-s2-foundations.15
+
+## 6.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/menu@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#3023](https://github.com/adobe/spectrum-css/pull/3023) [`213efa8`](https://github.com/adobe/spectrum-css/commit/213efa8618cdccf75a274ee9c2dd0404864c1779) Thanks [@jawinn](https://github.com/jawinn)! - Relocates --mod custom properties from the themes CSS to the index.css.
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index 14b89f9bbfd..b24208778d8 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-PickerButton {
--spectrum-picker-button-height: var(--spectrum-component-height-100);
@@ -22,8 +22,6 @@
--spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50);
--spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100);
- --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
-
--spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default);
--spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
--spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down);
@@ -41,56 +39,6 @@
--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
- &:disabled {
- --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color));
- --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
- --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
- --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color));
-
- --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color));
- --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color));
- --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color));
-
- --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color));
- --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
- --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
- }
-
- &.spectrum-PickerButton--quiet {
- --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent);
- --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent);
- --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent);
- --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent);
-
- --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent);
- }
-
- &.spectrum-PickerButton--sizeS {
- --spectrum-picker-button-height: var(--spectrum-component-height-75);
- --spectrum-picker-button-width: var(--spectrum-component-height-75);
- --spectrum-picker-button-label-padding: var(--spectrum-spacing-75);
- --spectrum-picker-button-font-size: var(--spectrum-font-size-75);
- --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
- }
-
- &.spectrum-PickerButton--sizeL {
- --spectrum-picker-button-height: var(--spectrum-component-height-200);
- --spectrum-picker-button-width: var(--spectrum-component-height-200);
- --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200);
- --spectrum-picker-button-font-size: var(--spectrum-font-size-200);
- --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
- }
-
- &.spectrum-PickerButton--sizeXL {
- --spectrum-picker-button-height: var(--spectrum-component-height-300);
- --spectrum-picker-button-width: var(--spectrum-component-height-300);
- --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300);
- --spectrum-picker-button-font-size: var(--spectrum-font-size-300);
- --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
- }
-}
-
-.spectrum-PickerButton {
border-style: none;
background-color: transparent;
block-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width));
@@ -145,6 +93,54 @@
color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus));
}
}
+
+ &:disabled {
+ --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color));
+ --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
+ --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
+ --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color));
+
+ --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color));
+ --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color));
+ --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color));
+
+ --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color));
+ --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
+ --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
+ }
+
+ &.spectrum-PickerButton--quiet {
+ --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent);
+ --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent);
+ --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent);
+ --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent);
+
+ --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent);
+ }
+
+ &.spectrum-PickerButton--sizeS {
+ --spectrum-picker-button-height: var(--spectrum-component-height-75);
+ --spectrum-picker-button-width: var(--spectrum-component-height-75);
+ --spectrum-picker-button-label-padding: var(--spectrum-spacing-75);
+ --spectrum-picker-button-font-size: var(--spectrum-font-size-75);
+ --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
+ }
+
+ &.spectrum-PickerButton--sizeL {
+ --spectrum-picker-button-height: var(--spectrum-component-height-200);
+ --spectrum-picker-button-width: var(--spectrum-component-height-200);
+ --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200);
+ --spectrum-picker-button-font-size: var(--spectrum-font-size-200);
+ --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
+ }
+
+ &.spectrum-PickerButton--sizeXL {
+ --spectrum-picker-button-height: var(--spectrum-component-height-300);
+ --spectrum-picker-button-width: var(--spectrum-component-height-300);
+ --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300);
+ --spectrum-picker-button-font-size: var(--spectrum-font-size-300);
+ --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
+ }
}
.spectrum-PickerButton--right {
diff --git a/components/pickerbutton/metadata/metadata.json b/components/pickerbutton/metadata/metadata.json
index c605d88694b..23322f00c5f 100644
--- a/components/pickerbutton/metadata/metadata.json
+++ b/components/pickerbutton/metadata/metadata.json
@@ -127,8 +127,6 @@
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-corner-radius-100",
- "--spectrum-corner-radius-200",
- "--spectrum-corner-radius-75",
"--spectrum-default-font-style",
"--spectrum-disabled-background-color",
"--spectrum-disabled-content-color",
@@ -140,10 +138,9 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
- "--spectrum-gray-75",
+ "--spectrum-gray-50",
"--spectrum-in-field-button-edge-to-fill",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
@@ -156,15 +153,15 @@
"--spectrum-text-to-visual-50"
],
"system-theme": [
- "--system-spectrum-pickerbutton-spectrum-picker-button-background-color",
- "--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down",
- "--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover",
- "--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-color",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-radius",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-width"
+ "--system-picker-button-background-color",
+ "--system-picker-button-background-color-down",
+ "--system-picker-button-background-color-hover",
+ "--system-picker-button-background-color-key-focus",
+ "--system-picker-button-border-color",
+ "--system-picker-button-border-radius",
+ "--system-picker-button-border-radius-rounded-sided",
+ "--system-picker-button-border-radius-sided",
+ "--system-picker-button-border-width"
],
"passthroughs": [],
"high-contrast": []
diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json
index 281ede12f1b..6a445a90992 100644
--- a/components/pickerbutton/package.json
+++ b/components/pickerbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/pickerbutton",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS picker button component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 5ec6142f74d..0479c145e0a 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-PickerButton",
diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css
index f399ef81f83..dc0472307b2 100644
--- a/components/pickerbutton/themes/express.css
+++ b/components/pickerbutton/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-PickerButton {
--spectrum-picker-button-background-color: var(--spectrum-gray-200);
--spectrum-picker-button-background-color-hover: var(--spectrum-gray-300);
diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..6cba1ef3df8
--- /dev/null
+++ b/components/pickerbutton/themes/spectrum-two.css
@@ -0,0 +1,27 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-PickerButton {
+ --spectrum-picker-button-background-color: var(--spectrum-gray-50);
+ --spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
+ --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100);
+
+ --spectrum-picker-button-border-color: inherit;
+ --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-picker-button-border-radius-rounded-sided: 0;
+ --spectrum-picker-button-border-radius-sided: 0;
+ --spectrum-picker-button-border-width: var(--spectrum-border-width-100);
+ }
+}
diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css
index 1daf4d9af8e..c62cef119d4 100644
--- a/components/pickerbutton/themes/spectrum.css
+++ b/components/pickerbutton/themes/spectrum.css
@@ -11,17 +11,17 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-PickerButton {
--spectrum-picker-button-background-color: var(--spectrum-gray-75);
--spectrum-picker-button-background-color-hover: var(--spectrum-gray-200);
--spectrum-picker-button-background-color-down: var(--spectrum-gray-300);
--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200);
- --spectrum-picker-button-border-color: inherit;
- --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-picker-button-border-radius-rounded-sided: 0;
- --spectrum-picker-button-border-radius-sided: 0;
- --spectrum-picker-button-border-width: var(--spectrum-border-width-100);
+ --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
}
}
diff --git a/components/popover/CHANGELOG.md b/components/popover/CHANGELOG.md
index 47794f83645..9fb15cb7350 100644
--- a/components/popover/CHANGELOG.md
+++ b/components/popover/CHANGELOG.md
@@ -1,5 +1,252 @@
# Change Log
+## 8.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.15
+ - @spectrum-css/divider@4.0.0-s2-foundations.15
+ - @spectrum-css/dialog@11.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.15
+
+## 8.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.14
+ - @spectrum-css/divider@4.0.0-s2-foundations.14
+ - @spectrum-css/dialog@11.0.0-s2-foundations.14
+ - @spectrum-css/menu@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.13
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/dialog@11.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2982](https://github.com/adobe/spectrum-css/pull/2982) [`dffdefa`](https://github.com/adobe/spectrum-css/commit/dffdefaa1ffc39fbf7706e218d261da3a02695b5) Thanks [@castastrophe](https://github.com/castastrophe)! - Remove internal-only --flow-direction variable
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/dialog@11.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/dialog@11.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/dialog@11.0.0-s2-foundations.10
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/dialog@11.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/dialog@11.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/dialog@11.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/dialog@11.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/dialog@11.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/dialog@11.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/dialog@11.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/dialog@11.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/dialog@11.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.0
+ - @spectrum-css/dialog@11.0.0-s2-foundations.0
+
## 7.2.0
### Minor Changes
diff --git a/components/popover/index.css b/components/popover/index.css
index 5c94377b78c..9176923959e 100644
--- a/components/popover/index.css
+++ b/components/popover/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/overlay.css";
.spectrum-Popover {
diff --git a/components/popover/metadata/metadata.json b/components/popover/metadata/metadata.json
index c0ec791c2b5..a2590a8af60 100644
--- a/components/popover/metadata/metadata.json
+++ b/components/popover/metadata/metadata.json
@@ -148,7 +148,7 @@
"--spectrum-gray-400",
"--spectrum-spacing-100"
],
- "system-theme": ["--system-spectrum-popover-border-width"],
+ "system-theme": ["--system-popover-border-width"],
"passthroughs": [],
"high-contrast": [
"--highcontrast-popover-background-color",
diff --git a/components/popover/package.json b/components/popover/package.json
index 961b825cddf..34a28160398 100644
--- a/components/popover/package.json
+++ b/components/popover/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/popover",
- "version": "7.2.0",
+ "version": "8.0.0-s2-foundations.16",
"description": "The Spectrum CSS popover component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
index 967dda2baac..dcd82cc65ef 100644
--- a/components/popover/stories/popover.stories.js
+++ b/components/popover/stories/popover.stories.js
@@ -91,6 +91,10 @@ export default {
height: "200px",
}
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=42086-5684",
+ },
packageJson,
metadata,
},
diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js
index 1be2e30689e..d21e2c8b6e4 100644
--- a/components/popover/stories/template.js
+++ b/components/popover/stories/template.js
@@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Popover",
@@ -186,8 +189,7 @@ export const Template = ({
class=${classMap({
[rootClass]: true,
"is-open": isOpen,
- [`${rootClass}--size${size?.toUpperCase()}`]:
- typeof size !== "undefined",
+ [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
[`${rootClass}--withTip`]: withTip,
[`${rootClass}--${position}`]: typeof position !== "undefined",
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -275,7 +277,7 @@ export const TipPlacementVariants = (args, context) => {
/**
* Contains a source button with a fixed width, and an always open Popover.
*/
-export const FixedWidthSourceTemplate = (args) => html`
+export const FixedWidthSourceTemplate = (args, context) => html`
${ActionButton({
label: "Source",
@@ -283,12 +285,12 @@ export const FixedWidthSourceTemplate = (args) => html`
width: "100px",
display: "block",
},
- })}
+ }, context)}
${Template({
...args,
position: "bottom-start",
isOpen: true,
trigger: () => null,
- })}
+ }, context)}
`;
diff --git a/components/popover/themes/express.css b/components/popover/themes/express.css
index 4748454f03d..32c92bf71b5 100644
--- a/components/popover/themes/express.css
+++ b/components/popover/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Popover {
--spectrum-popover-border-width: 0;
}
diff --git a/components/page/index.css b/components/popover/themes/spectrum-two.css
similarity index 81%
rename from components/page/index.css
rename to components/popover/themes/spectrum-two.css
index 28bab4cccc2..80c0cdc94c4 100644
--- a/components/page/index.css
+++ b/components/popover/themes/spectrum-two.css
@@ -11,9 +11,8 @@
* governing permissions and limitations under the License.
*/
-:root {
- background-color: var(--spectrum-gray-100);
-
- /* Prevent tap highlights */
- -webkit-tap-highlight-color: var(--spectrum-transparent-black-100);
+@container style(--system: spectrum) {
+ .spectrum-Popover {
+ --spectrum-popover-border-width: var(--spectrum-border-width-100);
+ }
}
diff --git a/components/popover/themes/spectrum.css b/components/popover/themes/spectrum.css
index 2f0c2993266..3d81bc564b5 100644
--- a/components/popover/themes/spectrum.css
+++ b/components/popover/themes/spectrum.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Popover {
- --spectrum-popover-border-width: var(--spectrum-border-width-100);
- }
-}
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/progressbar/CHANGELOG.md b/components/progressbar/CHANGELOG.md
index acc0e3020f8..953290a0d7c 100644
--- a/components/progressbar/CHANGELOG.md
+++ b/components/progressbar/CHANGELOG.md
@@ -1,5 +1,241 @@
# Change Log
+## 5.0.0-s2-foundations.19
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f14c3be`](https://github.com/adobe/spectrum-css/commit/f14c3bee4ea3b3ad259ce2fa9c3f58fa49febf9d) Thanks [@pfulton](https://github.com/pfulton)! - ProgressBar/Meter
+
+ - Fix bug by reverting "background-color" for track fill back to "background".
+
+ Thumbnail
+
+ - Remove unused "vertical align" property.
+
+## 5.0.0-s2-foundations.18
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`085ecbc`](https://github.com/adobe/spectrum-css/commit/085ecbc739cf736e8d95377d605f2a7c4104bcc0) Thanks [@pfulton](https://github.com/pfulton)! - Pulled out _form_ from _fieldlabel_ package.
+ Pulled out _meter_ from _progressbar_ package.
+
+ [SWC-522] fix hover style regression
+
+### Patch Changes
+
+- Updated dependencies [[`085ecbc`](https://github.com/adobe/spectrum-css/commit/085ecbc739cf736e8d95377d605f2a7c4104bcc0)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.16
+
+## 5.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.15
+
+## 5.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 5.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.14
+
+### Patch Changes
+
+- [#3023](https://github.com/adobe/spectrum-css/pull/3023) [`213efa8`](https://github.com/adobe/spectrum-css/commit/213efa8618cdccf75a274ee9c2dd0404864c1779) Thanks [@jawinn](https://github.com/jawinn)! - Relocates --mod custom properties from the themes CSS to the index.css.
+
+## 5.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-235] meter properties moved out of theme and into index.css
+
+### Patch Changes
+
+- Updated dependencies [[`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f), [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.14
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.0
+
## 4.2.0
### Minor Changes
@@ -17,6 +253,12 @@
- [#3291](https://github.com/adobe/spectrum-css/pull/3291) [`6c47b48`](https://github.com/adobe/spectrum-css/commit/6c47b48cdfbd1ad5fc19d913d18901f405b8b211) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violation by removing unused custom property.
+## 4.1.8
+
+### Patch Changes
+
+- [#3291](https://github.com/adobe/spectrum-css/pull/3291) [`6c47b48`](https://github.com/adobe/spectrum-css/commit/6c47b48cdfbd1ad5fc19d913d18901f405b8b211) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violation by removing unused custom property.
+
## 4.1.7
### Patch Changes
diff --git a/components/progressbar/README.md b/components/progressbar/README.md
index 0f0acd2bf5b..28f221fd087 100644
--- a/components/progressbar/README.md
+++ b/components/progressbar/README.md
@@ -1,6 +1,6 @@
-# @spectrum-css/barloader
+# @spectrum-css/progressbar
-> The Spectrum CSS barloader component
+> The Spectrum CSS progressbar component
This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
diff --git a/components/progressbar/index.css b/components/progressbar/index.css
index 970c7adf162..f4422105ff2 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-ProgressBar {
/* Static tokens */
@@ -47,96 +47,56 @@
/* Color */
--spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default);
- --spectrum-progressbar-track-color: var(--spectrum-gray-300);
--spectrum-progressbar-fill-color: var(--spectrum-accent-color-900);
- --spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color);
- --spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color);
- --spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color);
--spectrum-progressbar-label-and-value-white: var(--spectrum-white);
- --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
--spectrum-progressbar-fill-color-white: var(--spectrum-white);
- /* Meter */
- --spectrum-meter-min-width: var(--spectrum-meter-minimum-width);
- --spectrum-meter-max-width: var(--spectrum-meter-maximum-width);
- --spectrum-meter-inline-size: var(--spectrum-meter-default-width);
- --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small);
- --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large);
-}
-
-.spectrum-ProgressBar--sizeS,
-.spectrum-Meter--sizeS {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
-
- --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small);
-
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-}
-
-.spectrum-ProgressBar--sizeM {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
+ /* @passthrough */
+ --mod-fieldlabel-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size));
- --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
-
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-}
+ &.spectrum-ProgressBar--sizeS {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
-.spectrum-ProgressBar--sizeL,
-.spectrum-Meter--sizeL {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small);
- --spectrum-progressbar-font-size: var(--spectrum-font-size-100);
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+ }
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
-}
+ &,
+ &.spectrum-ProgressBar--sizeM {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
-.spectrum-ProgressBar--sizeXL {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800);
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
- --spectrum-progressbar-font-size: var(--spectrum-font-size-200);
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large);
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+ }
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
-}
+ &.spectrum-ProgressBar--sizeL {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
-.spectrum-Meter {
- --spectrum-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size));
- --spectrum-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width));
- --spectrum-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width));
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-100);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
- /* Meter only supports size S and L */
- &.spectrum-Meter--sizeS {
- --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-s);
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
}
- &.spectrum-Meter--sizeL {
- --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-l);
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
- }
+ &.spectrum-ProgressBar--sizeXL {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800);
- &.is-positive .spectrum-ProgressBar-fill {
- background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
- }
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-200);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large);
- &.is-notice .spectrum-ProgressBar-fill {
- background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
}
- &.is-negative .spectrum-ProgressBar-fill {
- background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
- }
-}
-.spectrum-ProgressBar {
position: relative;
display: inline-flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
- font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size));
vertical-align: top;
inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
@@ -152,13 +112,13 @@
line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height));
+ color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color));
+
&:lang(ja),
&:lang(zh),
&:lang(ko) {
line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk));
}
-
- color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color));
}
/* Label */
@@ -196,6 +156,14 @@
position: relative;
animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate));
will-change: transform;
+
+ animation-name: indeterminate-loop-ltr;
+ animation-duration: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate));
+ animation-iteration-count: infinite;
+}
+
+.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl) {
+ animation-name: indeterminate-loop-rtl;
}
/* Variants */
@@ -240,15 +208,6 @@
}
}
-/* Animations */
-.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill {
- animation: indeterminate-loop-ltr var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite;
-}
-
-.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl) {
- animation: indeterminate-loop-rtl var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite;
-}
-
@keyframes indeterminate-loop-ltr {
from {
transform: translate(calc(-1 * var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate))));
@@ -273,6 +232,7 @@
.spectrum-ProgressBar-track {
--highcontrast-progressbar-fill-color: ButtonText;
--highcontrast-progressbar-track-color: ButtonFace;
+
forced-color-adjust: none;
border: 1px solid ButtonText;
}
diff --git a/components/progressbar/metadata/metadata.json b/components/progressbar/metadata/metadata.json
index f49c8b03854..a2f0edd8ce3 100644
--- a/components/progressbar/metadata/metadata.json
+++ b/components/progressbar/metadata/metadata.json
@@ -1,14 +1,6 @@
{
"sourceFile": "index.css",
"selectors": [
- ".spectrum-Meter",
- ".spectrum-Meter--sizeL",
- ".spectrum-Meter--sizeS",
- ".spectrum-Meter.is-negative .spectrum-ProgressBar-fill",
- ".spectrum-Meter.is-notice .spectrum-ProgressBar-fill",
- ".spectrum-Meter.is-positive .spectrum-ProgressBar-fill",
- ".spectrum-Meter.spectrum-Meter--sizeL",
- ".spectrum-Meter.spectrum-Meter--sizeS",
".spectrum-ProgressBar",
".spectrum-ProgressBar .spectrum-ProgressBar-fill",
".spectrum-ProgressBar .spectrum-ProgressBar-label",
@@ -26,11 +18,11 @@
".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label",
".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage",
".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track",
- ".spectrum-ProgressBar--sizeL",
- ".spectrum-ProgressBar--sizeM",
- ".spectrum-ProgressBar--sizeS",
- ".spectrum-ProgressBar--sizeXL",
".spectrum-ProgressBar-track",
+ ".spectrum-ProgressBar.spectrum-ProgressBar--sizeL",
+ ".spectrum-ProgressBar.spectrum-ProgressBar--sizeM",
+ ".spectrum-ProgressBar.spectrum-ProgressBar--sizeS",
+ ".spectrum-ProgressBar.spectrum-ProgressBar--sizeXL",
".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill",
".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label",
".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage",
@@ -40,15 +32,9 @@
"to"
],
"modifiers": [
- "--mod-meter-inline-size",
- "--mod-meter-max-width",
- "--mod-meter-min-width",
"--mod-progressbar-animation-duration-indeterminate",
"--mod-progressbar-animation-ease-in-out-indeterminate",
"--mod-progressbar-fill-color",
- "--mod-progressbar-fill-color-negative",
- "--mod-progressbar-fill-color-notice",
- "--mod-progressbar-fill-color-positive",
"--mod-progressbar-fill-color-white",
"--mod-progressbar-fill-size-indeterminate",
"--mod-progressbar-font-size",
@@ -77,9 +63,6 @@
"--spectrum-progressbar-animation-ease-in-out-indeterminate",
"--spectrum-progressbar-corner-radius",
"--spectrum-progressbar-fill-color",
- "--spectrum-progressbar-fill-color-negative",
- "--spectrum-progressbar-fill-color-notice",
- "--spectrum-progressbar-fill-color-positive",
"--spectrum-progressbar-fill-color-white",
"--spectrum-progressbar-fill-size-indeterminate",
"--spectrum-progressbar-font-size",
@@ -113,29 +96,19 @@
"--spectrum-font-size-100",
"--spectrum-font-size-200",
"--spectrum-font-size-75",
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-line-height-100",
- "--spectrum-meter-default-width",
- "--spectrum-meter-inline-size",
- "--spectrum-meter-max-width",
- "--spectrum-meter-maximum-width",
- "--spectrum-meter-min-width",
- "--spectrum-meter-minimum-width",
- "--spectrum-meter-thickness-l",
- "--spectrum-meter-thickness-large",
- "--spectrum-meter-thickness-s",
- "--spectrum-meter-thickness-small",
- "--spectrum-negative-visual-color",
"--spectrum-neutral-content-color-default",
- "--spectrum-notice-visual-color",
- "--spectrum-positive-visual-color",
"--spectrum-spacing-200",
"--spectrum-spacing-75",
- "--spectrum-transparent-white-300",
+ "--spectrum-transparent-white-400",
"--spectrum-white"
],
- "system-theme": [],
- "passthroughs": [],
+ "system-theme": [
+ "--system-progress-bar-track-color",
+ "--system-progress-bar-track-color-white"
+ ],
+ "passthroughs": ["--mod-fieldlabel-font-size"],
"high-contrast": [
"--highcontrast-progressbar-fill-color",
"--highcontrast-progressbar-track-color"
diff --git a/components/progressbar/metadata/mods.md b/components/progressbar/metadata/mods.md
index 1a9745a13ea..c7cef01ad72 100644
--- a/components/progressbar/metadata/mods.md
+++ b/components/progressbar/metadata/mods.md
@@ -1,14 +1,8 @@
| Modifiable custom properties |
| ------------------------------------------------------- |
-| `--mod-meter-inline-size` |
-| `--mod-meter-max-width` |
-| `--mod-meter-min-width` |
| `--mod-progressbar-animation-duration-indeterminate` |
| `--mod-progressbar-animation-ease-in-out-indeterminate` |
| `--mod-progressbar-fill-color` |
-| `--mod-progressbar-fill-color-negative` |
-| `--mod-progressbar-fill-color-notice` |
-| `--mod-progressbar-fill-color-positive` |
| `--mod-progressbar-fill-color-white` |
| `--mod-progressbar-fill-size-indeterminate` |
| `--mod-progressbar-font-size` |
diff --git a/components/progressbar/package.json b/components/progressbar/package.json
index da26db33092..f956f001cd2 100644
--- a/components/progressbar/package.json
+++ b/components/progressbar/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/progressbar",
- "version": "4.2.0",
+ "version": "5.0.0-s2-foundations.19",
"description": "The Spectrum CSS progress bar component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
deleted file mode 100644
index 8c045d1cf05..00000000000
--- a/components/progressbar/stories/meter.template.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Container } from "@spectrum-css/preview/decorators";
-import { html } from "lit";
-import { capitalize } from "lodash-es";
-import { Template as ProgressBar } from "./template.js";
-
-import "../index.css";
-
-export const Template = ({
- customClasses = [],
- fill,
- size = "s",
- rootClass = "spectrum-Meter",
- staticColor,
- ...item
-} = {}, context = {}) => ProgressBar({
- customClasses: [
- rootClass,
- typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null,
- typeof fill !== "undefined" ? `is-${fill}` : null,
- /*
- * The `spectrum-Meter--staticWhite` class is not present in the Meter CSS, as it makes use of
- * `spectrum-ProgressBar--staticWhite`, but having this allows for simpler detection of static
- * colors when looking at the element using its `rootClass` in our decorators.
- */
- typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null,
- ...customClasses,
- ].filter(Boolean),
- size,
- staticColor,
- ...item,
-}, context);
-
-/* FillGroup showcases all semantic variants in a single story. */
-export const FillGroup = (args, context) => Container({
- withBorder: false,
- withHeading: false,
- content: html`${["info", "positive", "negative", "notice"].map((variant) =>
- Container({
- withBorder: false,
- heading: variant,
- content: Template({...args, fill: variant}, context),
- }, context)
- )}`
-}, context);
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index f6bf0ff90ad..d94a214f2de 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -92,6 +92,10 @@ export default {
showValueLabel: true,
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13059-181",
+ },
packageJson,
metadata,
},
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index 84fd9506b7e..c358879721c 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ProgressBar",
@@ -22,7 +25,8 @@ export const Template = ({
progressBarFill,
customStyles = {},
size = "m",
-} = {}, context = {}) => html`
+} = {}, context = {}) => {
+ return html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-ProgressBar {
+ --spectrum-progressbar-track-color: var(--spectrum-gray-200);
+ --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400);
+ }
+}
diff --git a/components/progressbar/themes/spectrum.css b/components/progressbar/themes/spectrum.css
index 3b48a570c21..3760cc4cfc4 100644
--- a/components/progressbar/themes/spectrum.css
+++ b/components/progressbar/themes/spectrum.css
@@ -10,3 +10,14 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-ProgressBar {
+ --spectrum-progressbar-track-color: var(--spectrum-gray-300);
+ --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
+ }
+}
diff --git a/components/progresscircle/CHANGELOG.md b/components/progresscircle/CHANGELOG.md
index 1c4522b7636..b6e4037460f 100644
--- a/components/progresscircle/CHANGELOG.md
+++ b/components/progresscircle/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 4.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 4.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.2.0
### Minor Changes
diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css
index 76a3e03f6b5..a7b404d293a 100644
--- a/components/progresscircle/index.css
+++ b/components/progresscircle/index.css
@@ -11,8 +11,23 @@
* governing permissions and limitations under the License.
*/
-@import "./animation.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
+
+/* windows high contrast mode */
+@media (forced-colors: active) {
+ .spectrum-ProgressCircle {
+ /* fill is bright color */
+ --highcontrast-progress-circle-fill-border-color: Highlight;
+
+ /* fill over background is bright color */
+ --highcontrast-progress-circle-fill-border-color-over-background: Highlight;
+ }
+
+ /* track double for visibility */
+ .spectrum-ProgressCircle-track {
+ --spectrum-progress-circle-track-border-style: double;
+ }
+}
.spectrum-ProgressCircle {
/* circle unfilled border color */
@@ -27,46 +42,26 @@
/* over background progress fill border color */
--spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
- /* default size and thickness */
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
- --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
-
/* track border style */
--spectrum-progress-circle-track-border-style: solid;
-}
-.spectrum-ProgressCircle--small {
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
- --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
-}
-
-.spectrum-ProgressCircle--medium {
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
- --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
-}
-
-.spectrum-ProgressCircle--large {
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
- --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
-}
-/* windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-ProgressCircle {
- /* fill is bright color */
- --highcontrast-progress-circle-fill-border-color: Highlight;
+ &.spectrum-ProgressCircle--small {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
+ }
- /* fill over background is bright color */
- --highcontrast-progress-circle-fill-border-color-over-background: Highlight;
+ &,
+ &.spectrum-ProgressCircle--medium {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
}
- /* track double for visibility */
- .spectrum-ProgressCircle-track {
- --spectrum-progress-circle-track-border-style: double;
+ &.spectrum-ProgressCircle--large {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
}
-}
-.spectrum-ProgressCircle {
display: inline-block;
inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
@@ -166,3 +161,501 @@
animation: 1s infinite linear spectrum-fill-mask-2;
}
}
+
+.spectrum-ProgressCircle--indeterminate-fill-submask-2 {
+ animation: 1s infinite linear spectrum-fill-mask-2;
+}
+
+@keyframes spectrum-fill-mask-1 {
+ 0% {
+ transform: rotate(90deg);
+ }
+
+ 1.69% {
+ transform: rotate(72.3deg);
+ }
+
+ 3.39% {
+ transform: rotate(55.5deg);
+ }
+
+ 5.08% {
+ transform: rotate(40.3deg);
+ }
+
+ 6.78% {
+ transform: rotate(25deg);
+ }
+
+ 8.47% {
+ transform: rotate(10.6deg);
+ }
+
+ 10.17% {
+ transform: rotate(0deg);
+ }
+
+ 11.86% {
+ transform: rotate(0deg);
+ }
+
+ 13.56% {
+ transform: rotate(0deg);
+ }
+
+ 15.25% {
+ transform: rotate(0deg);
+ }
+
+ 16.95% {
+ transform: rotate(0deg);
+ }
+
+ 18.64% {
+ transform: rotate(0deg);
+ }
+
+ 20.34% {
+ transform: rotate(0deg);
+ }
+
+ 22.03% {
+ transform: rotate(0deg);
+ }
+
+ 23.73% {
+ transform: rotate(0deg);
+ }
+
+ 25.42% {
+ transform: rotate(0deg);
+ }
+
+ 27.12% {
+ transform: rotate(0deg);
+ }
+
+ 28.81% {
+ transform: rotate(0deg);
+ }
+
+ 30.51% {
+ transform: rotate(0deg);
+ }
+
+ 32.2% {
+ transform: rotate(0deg);
+ }
+
+ 33.9% {
+ transform: rotate(0deg);
+ }
+
+ 35.59% {
+ transform: rotate(0deg);
+ }
+
+ 37.29% {
+ transform: rotate(0deg);
+ }
+
+ 38.98% {
+ transform: rotate(0deg);
+ }
+
+ 40.68% {
+ transform: rotate(0deg);
+ }
+
+ 42.37% {
+ transform: rotate(5.3deg);
+ }
+
+ 44.07% {
+ transform: rotate(13.4deg);
+ }
+
+ 45.76% {
+ transform: rotate(20.6deg);
+ }
+
+ 47.46% {
+ transform: rotate(29deg);
+ }
+
+ 49.15% {
+ transform: rotate(36.5deg);
+ }
+
+ 50.85% {
+ transform: rotate(42.6deg);
+ }
+
+ 52.54% {
+ transform: rotate(48.8deg);
+ }
+
+ 54.24% {
+ transform: rotate(54.2deg);
+ }
+
+ 55.93% {
+ transform: rotate(59.4deg);
+ }
+
+ 57.63% {
+ transform: rotate(63.2deg);
+ }
+
+ 59.32% {
+ transform: rotate(67.2deg);
+ }
+
+ 61.02% {
+ transform: rotate(70.8deg);
+ }
+
+ 62.71% {
+ transform: rotate(73.8deg);
+ }
+
+ 64.41% {
+ transform: rotate(76.2deg);
+ }
+
+ 66.1% {
+ transform: rotate(78.7deg);
+ }
+
+ 67.8% {
+ transform: rotate(80.6deg);
+ }
+
+ 69.49% {
+ transform: rotate(82.6deg);
+ }
+
+ 71.19% {
+ transform: rotate(83.7deg);
+ }
+
+ 72.88% {
+ transform: rotate(85deg);
+ }
+
+ 74.58% {
+ transform: rotate(86.3deg);
+ }
+
+ 76.27% {
+ transform: rotate(87deg);
+ }
+
+ 77.97% {
+ transform: rotate(87.7deg);
+ }
+
+ 79.66% {
+ transform: rotate(88.3deg);
+ }
+
+ 81.36% {
+ transform: rotate(88.6deg);
+ }
+
+ 83.05% {
+ transform: rotate(89.2deg);
+ }
+
+ 84.75% {
+ transform: rotate(89.2deg);
+ }
+
+ 86.44% {
+ transform: rotate(89.5deg);
+ }
+
+ 88.14% {
+ transform: rotate(89.9deg);
+ }
+
+ 89.83% {
+ transform: rotate(89.7deg);
+ }
+
+ 91.53% {
+ transform: rotate(90.1deg);
+ }
+
+ 93.22% {
+ transform: rotate(90.2deg);
+ }
+
+ 94.92% {
+ transform: rotate(90.1deg);
+ }
+
+ 96.61% {
+ transform: rotate(90deg);
+ }
+
+ 98.31% {
+ transform: rotate(89.8deg);
+ }
+
+ 100% {
+ transform: rotate(90deg);
+ }
+}
+
+@keyframes spectrum-fill-mask-2 {
+ 0% {
+ transform: rotate(180deg);
+ }
+
+ 1.69% {
+ transform: rotate(180deg);
+ }
+
+ 3.39% {
+ transform: rotate(180deg);
+ }
+
+ 5.08% {
+ transform: rotate(180deg);
+ }
+
+ 6.78% {
+ transform: rotate(180deg);
+ }
+
+ 8.47% {
+ transform: rotate(180deg);
+ }
+
+ 10.17% {
+ transform: rotate(179.2deg);
+ }
+
+ 11.86% {
+ transform: rotate(164deg);
+ }
+
+ 13.56% {
+ transform: rotate(151.8deg);
+ }
+
+ 15.25% {
+ transform: rotate(140.8deg);
+ }
+
+ 16.95% {
+ transform: rotate(130.3deg);
+ }
+
+ 18.64% {
+ transform: rotate(120.4deg);
+ }
+
+ 20.34% {
+ transform: rotate(110.8deg);
+ }
+
+ 22.03% {
+ transform: rotate(101.6deg);
+ }
+
+ 23.73% {
+ transform: rotate(93.5deg);
+ }
+
+ 25.42% {
+ transform: rotate(85.4deg);
+ }
+
+ 27.12% {
+ transform: rotate(78.1deg);
+ }
+
+ 28.81% {
+ transform: rotate(71.2deg);
+ }
+
+ 30.51% {
+ transform: rotate(89.1deg);
+ }
+
+ 32.2% {
+ transform: rotate(105.5deg);
+ }
+
+ 33.9% {
+ transform: rotate(121.3deg);
+ }
+
+ 35.59% {
+ transform: rotate(135.5deg);
+ }
+
+ 37.29% {
+ transform: rotate(148.4deg);
+ }
+
+ 38.98% {
+ transform: rotate(161deg);
+ }
+
+ 40.68% {
+ transform: rotate(173.5deg);
+ }
+
+ 42.37% {
+ transform: rotate(180deg);
+ }
+
+ 44.07% {
+ transform: rotate(180deg);
+ }
+
+ 45.76% {
+ transform: rotate(180deg);
+ }
+
+ 47.46% {
+ transform: rotate(180deg);
+ }
+
+ 49.15% {
+ transform: rotate(180deg);
+ }
+
+ 50.85% {
+ transform: rotate(180deg);
+ }
+
+ 52.54% {
+ transform: rotate(180deg);
+ }
+
+ 54.24% {
+ transform: rotate(180deg);
+ }
+
+ 55.93% {
+ transform: rotate(180deg);
+ }
+
+ 57.63% {
+ transform: rotate(180deg);
+ }
+
+ 59.32% {
+ transform: rotate(180deg);
+ }
+
+ 61.02% {
+ transform: rotate(180deg);
+ }
+
+ 62.71% {
+ transform: rotate(180deg);
+ }
+
+ 64.41% {
+ transform: rotate(180deg);
+ }
+
+ 66.1% {
+ transform: rotate(180deg);
+ }
+
+ 67.8% {
+ transform: rotate(180deg);
+ }
+
+ 69.49% {
+ transform: rotate(180deg);
+ }
+
+ 71.19% {
+ transform: rotate(180deg);
+ }
+
+ 72.88% {
+ transform: rotate(180deg);
+ }
+
+ 74.58% {
+ transform: rotate(180deg);
+ }
+
+ 76.27% {
+ transform: rotate(180deg);
+ }
+
+ 77.97% {
+ transform: rotate(180deg);
+ }
+
+ 79.66% {
+ transform: rotate(180deg);
+ }
+
+ 81.36% {
+ transform: rotate(180deg);
+ }
+
+ 83.05% {
+ transform: rotate(180deg);
+ }
+
+ 84.75% {
+ transform: rotate(180deg);
+ }
+
+ 86.44% {
+ transform: rotate(180deg);
+ }
+
+ 88.14% {
+ transform: rotate(180deg);
+ }
+
+ 89.83% {
+ transform: rotate(180deg);
+ }
+
+ 91.53% {
+ transform: rotate(180deg);
+ }
+
+ 93.22% {
+ transform: rotate(180deg);
+ }
+
+ 94.92% {
+ transform: rotate(180deg);
+ }
+
+ 96.61% {
+ transform: rotate(180deg);
+ }
+
+ 98.31% {
+ transform: rotate(180deg);
+ }
+
+ 100% {
+ transform: rotate(180deg);
+ }
+}
+
+@keyframes spectrum-fills-rotate {
+ 0% {
+ transform: rotate(-90deg);
+ }
+
+ 100% {
+ transform: rotate(270deg);
+ }
+}
diff --git a/components/progresscircle/metadata/metadata.json b/components/progresscircle/metadata/metadata.json
index cc43dfd0c63..0c4f9fa2d97 100644
--- a/components/progresscircle/metadata/metadata.json
+++ b/components/progresscircle/metadata/metadata.json
@@ -6,9 +6,6 @@
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2",
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills",
".spectrum-ProgressCircle--indeterminate-fill-submask-2",
- ".spectrum-ProgressCircle--large",
- ".spectrum-ProgressCircle--medium",
- ".spectrum-ProgressCircle--small",
".spectrum-ProgressCircle-fill",
".spectrum-ProgressCircle-fillMask1",
".spectrum-ProgressCircle-fillMask2",
@@ -16,6 +13,9 @@
".spectrum-ProgressCircle-fillSubMask2",
".spectrum-ProgressCircle-fills",
".spectrum-ProgressCircle-track",
+ ".spectrum-ProgressCircle.spectrum-ProgressCircle--large",
+ ".spectrum-ProgressCircle.spectrum-ProgressCircle--medium",
+ ".spectrum-ProgressCircle.spectrum-ProgressCircle--small",
".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill",
".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track",
"0%",
@@ -106,11 +106,18 @@
],
"global": [
"--spectrum-accent-content-color-default",
+ "--spectrum-gray-200",
"--spectrum-gray-300",
+ "--spectrum-transparent-white-1000",
"--spectrum-transparent-white-300",
+ "--spectrum-transparent-white-400",
"--spectrum-transparent-white-900"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-progress-circle-fill-border-color-over-background",
+ "--system-progress-circle-track-border-color",
+ "--system-progress-circle-track-border-color-over-background"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-progress-circle-fill-border-color",
diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json
index 8587d222a04..e9da90f1879 100644
--- a/components/progresscircle/package.json
+++ b/components/progresscircle/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/progresscircle",
- "version": "3.2.0",
+ "version": "4.0.0-s2-foundations.15",
"description": "The Spectrum CSS progress circle component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js
index f5f7216b3e0..24491ad3405 100644
--- a/components/progresscircle/stories/progresscircle.stories.js
+++ b/components/progresscircle/stories/progresscircle.stories.js
@@ -27,6 +27,10 @@ export default {
staticColor: undefined,
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13061-181",
+ },
packageJson,
metadata,
},
diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js
index a0fa4486e8b..2e27221f91a 100644
--- a/components/progresscircle/stories/template.js
+++ b/components/progresscircle/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
id = getRandomId("progress-circle"),
@@ -15,7 +18,7 @@ export const Template = ({
size = "m",
staticColor,
isIndeterminate = false,
-}) => {
+} = {}) => {
let sizeClassName = "medium";
switch (size) {
case "s":
diff --git a/components/progresscircle/themes/express.css b/components/progresscircle/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/progresscircle/themes/express.css
+++ b/components/progresscircle/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/progresscircle/themes/spectrum-two.css b/components/progresscircle/themes/spectrum-two.css
new file mode 100644
index 00000000000..02fff62e640
--- /dev/null
+++ b/components/progresscircle/themes/spectrum-two.css
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-ProgressCircle {
+ /* circle unfilled border color */
+ --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200);
+
+ /* over background unfilled border color */
+ --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400);
+
+ /* over background progress fill border color */
+ --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000);
+ }
+}
diff --git a/components/progresscircle/themes/spectrum.css b/components/progresscircle/themes/spectrum.css
index 3b48a570c21..e9740e41d36 100644
--- a/components/progresscircle/themes/spectrum.css
+++ b/components/progresscircle/themes/spectrum.css
@@ -10,3 +10,17 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-ProgressCircle {
+ /* circle unfilled border color */
+ --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
+
+ --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
+ --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
+ }
+}
diff --git a/components/radio/CHANGELOG.md b/components/radio/CHANGELOG.md
index ba1cd664f87..eec85d20a80 100644
--- a/components/radio/CHANGELOG.md
+++ b/components/radio/CHANGELOG.md
@@ -1,5 +1,219 @@
# Change Log
+## 10.0.0-s2-foundations.17
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57e187f`](https://github.com/adobe/spectrum-css/commit/57e187f5a52e9782e8573defc825cef0399b99e4) Thanks [@pfulton](https://github.com/pfulton)! - Minor bug fixes for datepicker and radio; tokens released for alignment
+
+- Updated dependencies [[`57e187f`](https://github.com/adobe/spectrum-css/commit/57e187f5a52e9782e8573defc825cef0399b99e4)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.26
+
+## 10.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#3164](https://github.com/adobe/spectrum-css/pull/3164) [`f8dead7`](https://github.com/adobe/spectrum-css/commit/f8dead7a680e88678bf830fccee32ecc661677bc) Thanks [@jawinn](https://github.com/jawinn)! - Fixes an issue with the alignment of a read-only radio's label element within field group and flex layouts.
+
+## 10.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 10.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 10.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
+## 9.4.1
+
+### Patch Changes
+
+- [#3350](https://github.com/adobe/spectrum-css/pull/3350) [`c091b4d`](https://github.com/adobe/spectrum-css/commit/c091b4d7ee33c870d24d731c9f377cf7ed1cb19a) Thanks [@5t3ph](https://github.com/5t3ph)! - Corrects the styles of the read-only state to show the radio inputs and allow visible focus. Also adds `aria-disabled` since `aria-readonly` isn't well supported, and story demonstrates scripting to make selection for read-only radios immutable.
+
## 9.4.1
### Patch Changes
diff --git a/components/radio/index.css b/components/radio/index.css
index 37e128bdb45..02fff8df9d2 100644
--- a/components/radio/index.css
+++ b/components/radio/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
/*
* Radio:
@@ -43,21 +43,13 @@
/* selection indicator all themes */
--spectrum-radio-border-width: var(--spectrum-border-width-200);
- --spectrum-radio-button-background-color: var(--spectrum-gray-75);
/* checked selection indicator */
--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
- --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
+ --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
- /* spacing all themes */
- --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
- --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-
- /* text styles all themes */
- --spectrum-radio-font-size: var(--spectrum-font-size-100);
--spectrum-radio-line-height: var(--spectrum-line-height-100);
/* animation all themes */
@@ -69,13 +61,6 @@
&:lang(ko) {
--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
}
-
- /* default radio size for no t-shirt size */
- --spectrum-radio-height: var(--spectrum-component-height-100);
- --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
-
- /* default radio spacing for no t-shirt size */
- --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
}
.spectrum-Radio--sizeS {
@@ -90,6 +75,7 @@
--spectrum-radio-font-size: var(--spectrum-font-size-75);
}
+.spectrum-Radio,
.spectrum-Radio--sizeM {
--spectrum-radio-height: var(--spectrum-component-height-100);
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
diff --git a/components/radio/metadata/metadata.json b/components/radio/metadata/metadata.json
index 9fd6219975e..b94c6dfcf90 100644
--- a/components/radio/metadata/metadata.json
+++ b/components/radio/metadata/metadata.json
@@ -7,7 +7,6 @@
".spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label",
".spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before",
".spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label",
- ".spectrum-Radio--emphasized",
".spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
".spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
".spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
@@ -150,16 +149,15 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-50",
"--spectrum-gray-600",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-gray-800",
- "--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-neutral-background-color-selected-default",
"--spectrum-neutral-background-color-selected-down",
- "--spectrum-neutral-background-color-selected-focus",
"--spectrum-neutral-background-color-selected-hover",
+ "--spectrum-neutral-background-color-selected-key-focus",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
@@ -170,14 +168,11 @@
"--spectrum-text-to-control-75"
],
"system-theme": [
- "--system-spectrum-radio-button-border-color-default",
- "--system-spectrum-radio-button-border-color-down",
- "--system-spectrum-radio-button-border-color-focus",
- "--system-spectrum-radio-button-border-color-hover",
- "--system-spectrum-radio-emphasized-button-checked-border-color-default",
- "--system-spectrum-radio-emphasized-button-checked-border-color-down",
- "--system-spectrum-radio-emphasized-button-checked-border-color-focus",
- "--system-spectrum-radio-emphasized-button-checked-border-color-hover"
+ "--system-radio-button-background-color",
+ "--system-radio-button-border-color-default",
+ "--system-radio-button-border-color-down",
+ "--system-radio-button-border-color-focus",
+ "--system-radio-button-border-color-hover"
],
"passthroughs": [],
"high-contrast": [
diff --git a/components/radio/package.json b/components/radio/package.json
index 3db57b4f02e..ecec7948cb9 100644
--- a/components/radio/package.json
+++ b/components/radio/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/radio",
- "version": "9.4.1",
+ "version": "10.0.0-s2-foundations.17",
"description": "The Spectrum CSS radio component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js
index bb2181ea408..778736043f1 100644
--- a/components/radio/stories/radio.stories.js
+++ b/components/radio/stories/radio.stories.js
@@ -54,6 +54,10 @@ export default {
actions: {
handles: ["click input[type=\"radio\"]"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=164-16723",
+ },
packageJson,
metadata,
},
diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js
index 50ba8484b2f..68c3cbf0e96 100644
--- a/components/radio/stories/template.js
+++ b/components/radio/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Radio",
diff --git a/components/radio/themes/express.css b/components/radio/themes/express.css
index 65e3ec36e9b..8565459259d 100644
--- a/components/radio/themes/express.css
+++ b/components/radio/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Radio {
/* selection indicator */
--spectrum-radio-button-border-color-default: var(--spectrum-gray-800);
diff --git a/components/radio/themes/spectrum-two.css b/components/radio/themes/spectrum-two.css
new file mode 100644
index 00000000000..48b980fc0e4
--- /dev/null
+++ b/components/radio/themes/spectrum-two.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Radio {
+ /* selection indicator */
+ --spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
+ --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
+ --spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
+ --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
+
+ --spectrum-radio-button-background-color: var(--spectrum-gray-50);
+ }
+}
diff --git a/components/radio/themes/spectrum.css b/components/radio/themes/spectrum.css
index 467a880aa56..33772fcc7c9 100644
--- a/components/radio/themes/spectrum.css
+++ b/components/radio/themes/spectrum.css
@@ -11,19 +11,12 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Radio {
- /* selection indicator */
- --spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
- --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
- --spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
- --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
- }
+/* @combine .spectrum.spectrum--legacy */
- .spectrum-Radio--emphasized {
- --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900);
- --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100);
- --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Radio {
+ --spectrum-radio-button-background-color: var(--spectrum-gray-75);
}
}
diff --git a/components/rating/CHANGELOG.md b/components/rating/CHANGELOG.md
index 3dfbe3e36cc..69d51c919b3 100644
--- a/components/rating/CHANGELOG.md
+++ b/components/rating/CHANGELOG.md
@@ -1,5 +1,209 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e) Thanks [@pfulton](https://github.com/pfulton)! - Bring in the latest S2 foundations release including updated corner rounding approach, colors, and icon spacing. Remapped corner rounding values for the -75 token to a static 2px value for spectrum themes.
+
+### Patch Changes
+
+- Updated dependencies [[`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.25
+
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
@@ -17,6 +221,12 @@
- [#3294](https://github.com/adobe/spectrum-css/pull/3294) [`d66cc60`](https://github.com/adobe/spectrum-css/commit/d66cc6019124f25582716d57b2cf499cdbacad48) Thanks [@cdransf](https://github.com/cdransf)! - Assigns CanvasText to custom property to satisfy linting requirements.
+## 5.1.4
+
+### Patch Changes
+
+- [#3294](https://github.com/adobe/spectrum-css/pull/3294) [`d66cc60`](https://github.com/adobe/spectrum-css/commit/d66cc6019124f25582716d57b2cf499cdbacad48) Thanks [@cdransf](https://github.com/cdransf)! - Assigns CanvasText to custom property to satisfy linting requirements.
+
## 5.1.3
### Patch Changes
diff --git a/components/rating/index.css b/components/rating/index.css
index ff4f5bd8195..a9ab3cdfd57 100644
--- a/components/rating/index.css
+++ b/components/rating/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Rating {
/* Icon */
@@ -26,7 +26,6 @@
/* Spacing (top/bottom edge to icon) */
--spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
- --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75);
/* Indicator height */
--spectrum-rating-indicator-height: var(--spectrum-border-width-200);
@@ -41,9 +40,20 @@
/* Disabled */
--spectrum-rating-icon-color-disabled: var(--spectrum-disabled-content-color);
--spectrum-rating-icon-count: var(--spectrum-rating-icon-count);
-}
-.spectrum-Rating {
+ position: relative;
+ display: inline-flex;
+ flex: 0 0 auto;
+
+ gap: var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing));
+
+ inline-size: calc((var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)) + var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing))) * var(--mod-rating-icon-count, var(--spectrum-rating-icon-count)));
+ border-radius: var(--mod-rating-border-radius, var(--spectrum-rating-border-radius));
+
+ padding-inline: calc((var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing)) + var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap))) - 1.5px);
+
+ cursor: pointer;
+
&.is-focused {
box-shadow: 0 0 0 var(--mod-rating-focus-indicator-thickness, var(--spectrum-rating-focus-indicator-thickness)) var(--highcontrast-rating-focus-indicator-color, var(--mod-rating-focus-indicator-color, var(--spectrum-rating-focus-indicator-color)));
@@ -76,31 +86,8 @@
/* Match the color of the star */
background: currentColor;
}
- }
-}
-
-.spectrum-Rating {
- position: relative;
- display: inline-flex;
- flex: 0 0 auto;
- gap: var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing));
-
- inline-size: calc((var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)) + var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing))) * var(--mod-rating-icon-count, var(--spectrum-rating-icon-count)));
- border-radius: var(--mod-rating-border-radius, var(--spectrum-rating-border-radius));
-
- padding-inline: calc((var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing)) + var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap))) - 1.5px);
-
- cursor: pointer;
-
- &.is-disabled,
- &.is-readOnly {
- cursor: default;
- pointer-events: none;
- }
-
- /* When the entire component is hovered, show all solid icons */
- &:hover {
+ /* When the entire component is hovered, show all solid icons */
.spectrum-Rating-starActive {
display: block;
}
@@ -109,6 +96,12 @@
display: none;
}
}
+
+ &.is-disabled,
+ &.is-readOnly {
+ cursor: default;
+ pointer-events: none;
+ }
}
.spectrum-Rating-input {
diff --git a/components/rating/metadata/metadata.json b/components/rating/metadata/metadata.json
index 7902bda44e7..58ff4acf407 100644
--- a/components/rating/metadata/metadata.json
+++ b/components/rating/metadata/metadata.json
@@ -91,15 +91,10 @@
"--spectrum-border-width-200",
"--spectrum-component-top-to-workflow-icon-100",
"--spectrum-corner-radius-100",
- "--spectrum-corner-radius-75",
"--spectrum-disabled-content-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--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-neutral-subdued-content-color-down",
"--spectrum-neutral-subdued-content-color-hover",
@@ -107,10 +102,11 @@
"--spectrum-workflow-icon-size-100"
],
"system-theme": [
- "--system-spectrum-rating-icon-color-default",
- "--system-spectrum-rating-icon-color-down",
- "--system-spectrum-rating-icon-color-hover",
- "--system-spectrum-rating-icon-color-key-focus"
+ "--system-rating-icon-color-default",
+ "--system-rating-icon-color-down",
+ "--system-rating-icon-color-hover",
+ "--system-rating-icon-color-key-focus",
+ "--system-rating-indicator-border-radius"
],
"passthroughs": [],
"high-contrast": [
diff --git a/components/rating/package.json b/components/rating/package.json
index 2413dd9f806..14ff2e88e8d 100644
--- a/components/rating/package.json
+++ b/components/rating/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/rating",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS rating component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js
index 79efe8c3b83..eb9e4d83f52 100644
--- a/components/rating/stories/rating.stories.js
+++ b/components/rating/stories/rating.stories.js
@@ -53,6 +53,10 @@ export default {
value: 3,
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=59953-195",
+ },
packageJson,
metadata,
},
diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js
index 245694af8fa..47ea5c5f61a 100644
--- a/components/rating/stories/template.js
+++ b/components/rating/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { repeat } from "lit/directives/repeat.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Rating",
diff --git a/components/rating/themes/express.css b/components/rating/themes/express.css
index 20e16cab063..1a0d5c792b2 100644
--- a/components/rating/themes/express.css
+++ b/components/rating/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Rating {
--spectrum-rating-icon-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover);
diff --git a/components/rating/themes/spectrum-two.css b/components/rating/themes/spectrum-two.css
new file mode 100644
index 00000000000..0c2a8df9260
--- /dev/null
+++ b/components/rating/themes/spectrum-two.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Rating {
+ --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+ --spectrum-rating-indicator-border-radius: 2px;
+ }
+}
diff --git a/components/rating/themes/spectrum.css b/components/rating/themes/spectrum.css
index 87a6e2ee611..0f07dfcc100 100644
--- a/components/rating/themes/spectrum.css
+++ b/components/rating/themes/spectrum.css
@@ -11,11 +11,12 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Rating {
- --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
- }
+ --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75);
+ }
}
diff --git a/components/search/CHANGELOG.md b/components/search/CHANGELOG.md
index 510e9d54346..6f00436e51a 100644
--- a/components/search/CHANGELOG.md
+++ b/components/search/CHANGELOG.md
@@ -1,5 +1,253 @@
# Change Log
+## 8.0.0-s2-foundations.18
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`22fbd89`](https://github.com/adobe/spectrum-css/commit/22fbd895f90470d6a0211c50360d774c6a54ff57) Thanks [@pfulton](https://github.com/pfulton)! - Update offset mod placement for quiet button offsets
+
+## 8.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.16
+ - @spectrum-css/textfield@8.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 8.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.15
+ - @spectrum-css/textfield@8.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.14
+ - @spectrum-css/textfield@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.14
+
+### Patch Changes
+
+- [#3023](https://github.com/adobe/spectrum-css/pull/3023) [`213efa8`](https://github.com/adobe/spectrum-css/commit/213efa8618cdccf75a274ee9c2dd0404864c1779) Thanks [@jawinn](https://github.com/jawinn)! - Relocates --mod custom properties from the themes CSS to the index.css.
+
+## 8.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`d06b762`](https://github.com/adobe/spectrum-css/commit/d06b762232592342dcea35c8ff4d309edb00d588) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-236] Search: internal property references including calc moved out of theme files; express theme updated to match format of spectrum-two theme selectors; spectrum-two theme adds new --spectrum-search-min-inline-multiplier abstraction for internal calc, removes passthroughs, adds in a sizeM theme instead of relying on defaults
+
+### Patch Changes
+
+- Updated dependencies [[`58a89ea`](https://github.com/adobe/spectrum-css/commit/58a89ea464c387111511271a5f5afce044f11042)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.15
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/textfield@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.11
+ - @spectrum-css/textfield@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/textfield@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/textfield@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/textfield@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/textfield@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/textfield@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/textfield@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/textfield@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/textfield@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/textfield@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/textfield@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/textfield@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 7.4.0
### Minor Changes
@@ -45,6 +293,24 @@
- [#3270](https://github.com/adobe/spectrum-css/pull/3270) [`008bb34`](https://github.com/adobe/spectrum-css/commit/008bb34a0bbefd1abeb0d37bcdb179811dd9df3c) Thanks [@cdransf](https://github.com/cdransf)! - Removes unnecessary stylelint-disable comments now that rule is disabled in config.
+## 7.2.3
+
+### Patch Changes
+
+- [#3300](https://github.com/adobe/spectrum-css/pull/3300) [`89797d0`](https://github.com/adobe/spectrum-css/commit/89797d0324bcbf2195a28840ce87ed6959da24a5) Thanks [@castastrophe](https://github.com/castastrophe)! - Add passthrough markers to prevent unnecessary warnings about unused custom properties
+
+## 7.2.2
+
+### Patch Changes
+
+- [#3295](https://github.com/adobe/spectrum-css/pull/3295) [`62e2b76`](https://github.com/adobe/spectrum-css/commit/62e2b76f1fed5c0fb60049826b05eaa9162f21e2) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violation in search by moving spectrum-search-color custom property above style declarations.
+
+## 7.2.1
+
+### Patch Changes
+
+- [#3270](https://github.com/adobe/spectrum-css/pull/3270) [`008bb34`](https://github.com/adobe/spectrum-css/commit/008bb34a0bbefd1abeb0d37bcdb179811dd9df3c) Thanks [@cdransf](https://github.com/cdransf)! - Removes unnecessary stylelint-disable comments now that rule is disabled in config.
+
## 7.2.0
### Minor Changes
diff --git a/components/search/index.css b/components/search/index.css
index e33392c5503..c1a5ff89585 100644
--- a/components/search/index.css
+++ b/components/search/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Search {
/* Size / Spacing */
@@ -45,7 +45,6 @@
/* Background and Border */
--spectrum-search-border-width: var(--spectrum-border-width-100);
- --spectrum-search-background-color: var(--spectrum-gray-50);
/* Disabled */
--spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
diff --git a/components/search/metadata/metadata.json b/components/search/metadata/metadata.json
index 76433d8544c..727e7193840 100644
--- a/components/search/metadata/metadata.json
+++ b/components/search/metadata/metadata.json
@@ -10,7 +10,6 @@
".spectrum-Search--quiet.spectrum-Search",
".spectrum-Search--quiet.spectrum-Search .spectrum-Search-input",
".spectrum-Search--sizeL",
- ".spectrum-Search--sizeM",
".spectrum-Search--sizeS",
".spectrum-Search--sizeXL",
".spectrum-Search-clearButton",
@@ -27,6 +26,10 @@
".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon",
".spectrum-Search-textfield:hover .spectrum-Search-icon",
".spectrum-Search.is-disabled .spectrum-Search-clearButton",
+ ".spectrum-Search.spectrum-Search--sizeL",
+ ".spectrum-Search.spectrum-Search--sizeM",
+ ".spectrum-Search.spectrum-Search--sizeS",
+ ".spectrum-Search.spectrum-Search--sizeXL",
".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon",
".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input"
],
@@ -113,10 +116,6 @@
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
- "--spectrum-component-pill-edge-to-visual-100",
- "--spectrum-component-pill-edge-to-visual-200",
- "--spectrum-component-pill-edge-to-visual-300",
- "--spectrum-component-pill-edge-to-visual-75",
"--spectrum-component-top-to-text-100",
"--spectrum-corner-radius-100",
"--spectrum-default-font-style",
@@ -128,8 +127,7 @@
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--spectrum-gray-400",
- "--spectrum-gray-50",
+ "--spectrum-gray-25",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-800",
@@ -153,21 +151,22 @@
"--spectrum-workflow-icon-size-75"
],
"system-theme": [
- "--system-spectrum-search-border-color-default",
- "--system-spectrum-search-border-color-focus",
- "--system-spectrum-search-border-color-focus-hover",
- "--system-spectrum-search-border-color-hover",
- "--system-spectrum-search-border-color-key-focus",
- "--system-spectrum-search-border-radius",
- "--system-spectrum-search-edge-to-visual",
- "--system-spectrum-search-sizel-border-radius",
- "--system-spectrum-search-sizel-edge-to-visual",
- "--system-spectrum-search-sizem-border-radius",
- "--system-spectrum-search-sizem-edge-to-visual",
- "--system-spectrum-search-sizes-border-radius",
- "--system-spectrum-search-sizes-edge-to-visual",
- "--system-spectrum-search-sizexl-border-radius",
- "--system-spectrum-search-sizexl-edge-to-visual"
+ "--system-search-background-color",
+ "--system-search-border-color-default",
+ "--system-search-border-color-focus",
+ "--system-search-border-color-focus-hover",
+ "--system-search-border-color-hover",
+ "--system-search-border-color-key-focus",
+ "--system-search-border-radius",
+ "--system-search-edge-to-visual",
+ "--system-search-size-l-border-radius",
+ "--system-search-size-l-edge-to-visual",
+ "--system-search-size-m-border-radius",
+ "--system-search-size-m-edge-to-visual",
+ "--system-search-size-s-border-radius",
+ "--system-search-size-s-edge-to-visual",
+ "--system-search-size-xl-border-radius",
+ "--system-search-size-xl-edge-to-visual"
],
"passthroughs": [
"--mod-textfield-background-color",
diff --git a/components/search/package.json b/components/search/package.json
index ef798f7c4d2..424010f2335 100644
--- a/components/search/package.json
+++ b/components/search/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/search",
- "version": "7.4.0",
+ "version": "8.0.0-s2-foundations.18",
"description": "The Spectrum CSS search component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js
index 6283aae9762..ad061edfd79 100644
--- a/components/search/stories/search.stories.js
+++ b/components/search/stories/search.stories.js
@@ -56,6 +56,10 @@ export default {
"click .spectrum-Search-icon",
],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13670-229",
+ },
packageJson,
metadata,
},
@@ -70,8 +74,10 @@ export const Disabled = SearchOptions.bind({});
Disabled.args = {
isDisabled: true,
};
-
Disabled.tags = ["!dev"];
+Disabled.parameters = {
+ chromatic: { disableSnapshot: true },
+};
/**
* A search field can have [help text](?path=/docs/components-help-text--docs) below the field to give extra context or instruction about what a user should input. The description communicates a hint or helpful information, such as a search’s scope.
diff --git a/components/search/stories/template.js b/components/search/stories/template.js
index 09570d33581..364c8d8fde6 100644
--- a/components/search/stories/template.js
+++ b/components/search/stories/template.js
@@ -7,6 +7,9 @@ import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Search",
diff --git a/components/search/themes/express.css b/components/search/themes/express.css
index 7dfe45ef663..002ab9cecb6 100644
--- a/components/search/themes/express.css
+++ b/components/search/themes/express.css
@@ -11,37 +11,37 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Search {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
-
--spectrum-search-border-color-default: var(--spectrum-gray-400);
--spectrum-search-border-color-hover: var(--spectrum-gray-500);
--spectrum-search-border-color-focus: var(--spectrum-gray-800);
--spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
- }
- .spectrum-Search--sizeS {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75);
- }
+ &,
+ &.spectrum-Search--sizeM {
+ --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
+ }
- .spectrum-Search--sizeM {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
- }
+ &.spectrum-Search--sizeS {
+ --spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75);
+ }
- .spectrum-Search--sizeL {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200);
- }
+ &.spectrum-Search--sizeL {
+ --spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200);
+ }
- .spectrum-Search--sizeXL {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300);
+ &.spectrum-Search--sizeXL {
+ --spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300);
+ }
}
}
diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css
new file mode 100644
index 00000000000..85a34114a0a
--- /dev/null
+++ b/components/search/themes/spectrum-two.css
@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Search {
+ --spectrum-search-border-color-default: var(--spectrum-gray-500);
+ --spectrum-search-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-search-border-color-focus: var(--spectrum-gray-800);
+ --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
+ --spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
+
+ --spectrum-search-background-color: var(--spectrum-gray-25);
+
+ &,
+ &.spectrum-Search--sizeM {
+ --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
+ }
+
+ &.spectrum-Search--sizeS {
+ --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
+ }
+
+ &.spectrum-Search--sizeL {
+ --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
+ }
+
+ &.spectrum-Search--sizeXL {
+ --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
+ }
+ }
+}
diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css
index e4246f817a2..4fd1a9aae94 100644
--- a/components/search/themes/spectrum.css
+++ b/components/search/themes/spectrum.css
@@ -11,35 +11,12 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Search {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
+/* @combine .spectrum.spectrum--legacy */
- --spectrum-search-border-color-default: var(--spectrum-gray-500);
- --spectrum-search-border-color-hover: var(--spectrum-gray-600);
- --spectrum-search-border-color-focus: var(--spectrum-gray-800);
- --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
- --spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
- }
+@import "./spectrum-two.css";
- .spectrum-Search--sizeS {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
- }
-
- .spectrum-Search--sizeM {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
- }
-
- .spectrum-Search--sizeL {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
- }
-
- .spectrum-Search--sizeXL {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
+@container style(--system: legacy) {
+ .spectrum-Search {
+ --spectrum-search-background-color: var(--spectrum-gray-50);
}
}
diff --git a/components/sidenav/CHANGELOG.md b/components/sidenav/CHANGELOG.md
index 1761f420150..3af17a01ffe 100644
--- a/components/sidenav/CHANGELOG.md
+++ b/components/sidenav/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/sidenav/index.css b/components/sidenav/index.css
index d3fd3adf21c..284e34acc1e 100644
--- a/components/sidenav/index.css
+++ b/components/sidenav/index.css
@@ -11,7 +11,40 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+ @import "./themes/spectrum-two.css";
+
+ @media (forced-colors: active) {
+ /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */
+ .spectrum-SideNav {
+ .spectrum-Icon {
+ forced-color-adjust: preserve-parent-color; /* stylelint-disable-line declaration-property-value-no-unknown */
+ }
+ }
+
+ .spectrum-SideNav-item {
+ --highcontrast-sidenav-content-disabled-color: GrayText;
+
+ --highcontrast-sidenav-focus-ring-color: Highlight;
+
+ --highcontrast-sidenav-content-color-default-selected: SelectedItemText;
+ --highcontrast-sidenav-item-background-default-selected: SelectedItem;
+
+ --highcontrast-sidenav-background-key-focus-selected: Highlight;
+ --highcontrast-sidenav-background-hover-selected: Highlight;
+ --highcontrast-sidenav-item-background-down-selected: Highlight;
+
+ --highcontrast-sidenav-item-background-down: Highlight;
+ --highcontrast-sidenav-background-hover: Highlight;
+ --highcontrast-sidenav-content-color-hover: HighlightText;
+ --highcontrast-sidenav-background-key-focus: Highlight;
+
+ --highcontrast-sidenav-top-level-font-color: ButtonText;
+ --highcontrast-sidenav-content-color-default: ButtonText;
+ --highcontrast-sidenav-content-color-down: HighlightText;
+
+ forced-color-adjust: none;
+ }
+}
.spectrum-SideNav {
/* focus indicator */
@@ -45,14 +78,6 @@
/* color - background */
--spectrum-sidenav-background-disabled: transparent;
--spectrum-sidenav-background-default: transparent;
- --spectrum-sidenav-background-hover: var(--spectrum-gray-200);
- --spectrum-sidenav-item-background-down: var(--spectrum-gray-300);
- --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200);
-
- --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200);
- --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300);
- --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300);
- --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200);
/* color font */
--spectrum-sidenav-header-color: var(--spectrum-gray-600);
@@ -76,44 +101,32 @@
--spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
--spectrum-sidenav-text-line-height: var(--spectrum-line-height-100);
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100);
- }
-
--spectrum-sidenav-top-level-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight);
--spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style);
--spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100);
--spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100);
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100);
- }
-
--spectrum-sidenav-header-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight);
--spectrum-sidenav-header-font-style: var(--spectrum-default-font-style);
--spectrum-sidenav-header-font-size: var(--spectrum-font-size-75);
--spectrum-sidenav-header-line-height: var(--spectrum-line-height-100);
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100);
- }
-}
-
-.spectrum-SideNav {
display: flex;
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100);
+ --spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100);
+ --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100);
+ }
}
.spectrum-SideNav-item {
@@ -130,27 +143,27 @@
pointer-events: none;
}
}
-}
-
-.spectrum-SideNav-item.is-selected {
- .spectrum-SideNav-itemLink {
- background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected)));
- color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected)));
-
- &:hover {
- background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected)));
- color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected));
- }
- &:active {
- background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected)));
- color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected));
- }
-
- &.is-keyboardFocused,
- &:focus-visible {
- background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected)));
- color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected));
+ &.is-selected {
+ .spectrum-SideNav-itemLink {
+ background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected)));
+ color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected)));
+
+ &:hover {
+ background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected)));
+ color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected));
+ }
+
+ &:active {
+ background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected)));
+ color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected));
+ }
+
+ &.is-keyboardFocused,
+ &:focus-visible {
+ background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected)));
+ color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected));
+ }
}
}
}
@@ -263,35 +276,3 @@
}
}
}
-
-@media (forced-colors: active) {
- .spectrum-SideNav {
- .spectrum-Icon {
- forced-color-adjust: preserve-parent-color;
- }
- }
-
- .spectrum-SideNav-item {
- --highcontrast-sidenav-content-disabled-color: GrayText;
-
- --highcontrast-sidenav-focus-ring-color: Highlight;
-
- --highcontrast-sidenav-content-color-default-selected: SelectedItemText;
- --highcontrast-sidenav-item-background-default-selected: SelectedItem;
-
- --highcontrast-sidenav-background-key-focus-selected: Highlight;
- --highcontrast-sidenav-background-hover-selected: Highlight;
- --highcontrast-sidenav-item-background-down-selected: Highlight;
-
- --highcontrast-sidenav-item-background-down: Highlight;
- --highcontrast-sidenav-background-hover: Highlight;
- --highcontrast-sidenav-content-color-hover: HighlightText;
- --highcontrast-sidenav-background-key-focus: Highlight;
-
- --highcontrast-sidenav-top-level-font-color: ButtonText;
- --highcontrast-sidenav-content-color-default: ButtonText;
- --highcontrast-sidenav-content-color-down: HighlightText;
-
- forced-color-adjust: none;
- }
-}
diff --git a/components/sidenav/metadata/metadata.json b/components/sidenav/metadata/metadata.json
index 08e0dcc839d..0373b90aa51 100644
--- a/components/sidenav/metadata/metadata.json
+++ b/components/sidenav/metadata/metadata.json
@@ -166,8 +166,8 @@
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
"--spectrum-font-size-75",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
"--spectrum-gray-600",
"--spectrum-line-height-100",
"--spectrum-medium-font-weight",
@@ -180,7 +180,15 @@
"--spectrum-text-to-visual-100",
"--spectrum-workflow-icon-size-100"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-side-nav-background-hover",
+ "--system-side-nav-background-hover-selected",
+ "--system-side-nav-background-key-focus",
+ "--system-side-nav-background-key-focus-selected",
+ "--system-side-nav-item-background-default-selected",
+ "--system-side-nav-item-background-down",
+ "--system-side-nav-item-background-down-selected"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-sidenav-background-default",
diff --git a/components/sidenav/package.json b/components/sidenav/package.json
index f17cc275c95..0ecf6346e58 100644
--- a/components/sidenav/package.json
+++ b/components/sidenav/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/sidenav",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS sidenav component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js
index 3f1b5648431..17ff41ef0f3 100644
--- a/components/sidenav/stories/sidenav.stories.js
+++ b/components/sidenav/stories/sidenav.stories.js
@@ -63,6 +63,10 @@ export default {
],
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21993-665",
+ },
packageJson,
metadata,
},
@@ -142,6 +146,10 @@ Multilevel.args = {
]
};
Multilevel.parameters = {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21993-941&node-type=frame&t=YT3sYHqnhqpnjdv9-11",
+ },
chromatic: { disableSnapshot: true },
};
@@ -189,6 +197,10 @@ WithHeading.args = {
]
};
WithHeading.parameters = {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21993-941&node-type=frame&t=YT3sYHqnhqpnjdv9-11",
+ },
chromatic: { disableSnapshot: true },
};
diff --git a/components/sidenav/stories/template.js b/components/sidenav/stories/template.js
index 18ee61a6ade..3aa9960e809 100644
--- a/components/sidenav/stories/template.js
+++ b/components/sidenav/stories/template.js
@@ -7,6 +7,9 @@ import { repeat } from "lit/directives/repeat.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-SideNav",
@@ -16,69 +19,106 @@ export const Template = ({
iconName,
iconSet = "workflow",
items = [],
-} = {}, context = {}) => html`
-
- ({ ...a, [c]: true }), {}),
- })}>
- ${repeat(items, (item) => item.id, (item) => {
- // First level nav item with second tier of nav items beneath.
- if (typeof item.levelTwoItems !== "undefined") {
- return html`
-
- ${item.heading
- ? html`${item.heading} `
- : html`
-
- ${when(hasIcon && iconName, () => Icon({ iconName, setName: iconSet }, context))}
- ${item.title}
-
- `
- }
- ({ ...a, [c]: true }), {}),
- })}
- aria-labelledby=${ifDefined(item.heading) ? `${item.id}-heading` : ""}>
- ${repeat(item.levelTwoItems, (item) => item.id, (item) => {
- // Display nav items in second tier, and possibly a third tier.
- return SideNavItem({
- currentTier: 2,
- hasIcon,
- iconName,
- iconSet,
- ...item
- }, context);
- })}
-
-
- `;
- }
- else {
- // First level nav item only.
- return SideNavItem({
- currentTier: 1,
- hasIcon,
- iconName,
- iconSet,
- ...item
- }, context);
- }
- })}
-
-
-`;
+} = {}, context = {}) => {
+ return html`
+
+ ({ ...a, [c]: true }), {}),
+ })}
+ >
+ ${repeat(
+ items,
+ (item) => item.id,
+ (item) => {
+ // First level nav item with second tier of nav items beneath.
+ if (typeof item.levelTwoItems !== "undefined") {
+ return html`
+
+ ${item.heading
+ ? html`
+ ${item.heading}
+ `
+ : html`
+
+ ${when(hasIcon && iconName, () =>
+ Icon({ iconName, setName: iconSet }, context),
+ )}
+ ${item.title}
+
+ `}
+ ({ ...a, [c]: true }),
+ {},
+ ),
+ })}
+ aria-labelledby=${ifDefined(item.heading)
+ ? `${item.id}-heading`
+ : ""}
+ >
+ ${repeat(
+ item.levelTwoItems,
+ (item) => item.id,
+ (item) => {
+ // Display nav items in second tier, and possibly a third tier.
+ return SideNavItem(
+ {
+ currentTier: 2,
+ hasIcon,
+ iconName,
+ iconSet,
+ ...item,
+ },
+ context,
+ );
+ },
+ )}
+
+
+ `;
+ }
+ else {
+ // First level nav item only.
+ return SideNavItem(
+ {
+ currentTier: 1,
+ hasIcon,
+ iconName,
+ iconSet,
+ ...item,
+ },
+ context,
+ );
+ }
+ },
+ )}
+
+
+ `;
+};
/**
* Renders a single navigation item, and an optional third tier of items.
@@ -98,37 +138,53 @@ export const SideNavItem = ({
customClasses = [],
} = {}, context = {}) => {
return html`
- ({ ...a, [c]: true }), {}),
- })}
- >
-
- ${when(hasIcon && iconName && currentTier == 1, () => Icon({ iconName, setName: iconSet }, context))}
-
- ${title}
-
-
- ${when(levelThreeItems, () => html`
-
- ${repeat(levelThreeItems, (item) => item.id, (item) => SideNavItem({
- ...item
- }, context))}
- `
- )}
-
- `;
+ ({ ...a, [c]: true }), {}),
+ })}
+ >
+
+ ${when(hasIcon && iconName && currentTier == 1, () =>
+ Icon({ iconName, setName: iconSet }, context),
+ )}
+
+ ${title}
+
+
+ ${when(
+ levelThreeItems,
+ () =>
+ html`
+ ${repeat(
+ levelThreeItems,
+ (item) => item.id,
+ (item) =>
+ SideNavItem(
+ {
+ ...item,
+ },
+ context,
+ ),
+ )}
+ `,
+ )}
+
+ `;
};
diff --git a/components/sidenav/themes/express.css b/components/sidenav/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/sidenav/themes/express.css
+++ b/components/sidenav/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/tokens/custom-express/custom-medium-vars.css b/components/sidenav/themes/spectrum-two.css
similarity index 52%
rename from tokens/custom-express/custom-medium-vars.css
rename to components/sidenav/themes/spectrum-two.css
index 1d6e142a98a..85869d92dbe 100644
--- a/tokens/custom-express/custom-medium-vars.css
+++ b/components/sidenav/themes/spectrum-two.css
@@ -11,15 +11,15 @@
* governing permissions and limitations under the License.
*/
-/* This file contains overrides and additions to core tokens */
+@container style(--system: spectrum) {
+ .spectrum-SideNav {
+ --spectrum-sidenav-background-hover: var(--spectrum-gray-100);
+ --spectrum-sidenav-item-background-down: var(--spectrum-gray-200);
+ --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100);
-.spectrum--express.spectrum--medium {
- --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
- --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-
- --spectrum-dialog-confirm-border-radius: 6px;
-
- --spectrum-dial-border-radius: 12px;
-
- --spectrum-assetcard-focus-ring-border-radius: 10px;
+ --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100);
+ --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200);
+ --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200);
+ --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100);
+ }
}
diff --git a/components/sidenav/themes/spectrum.css b/components/sidenav/themes/spectrum.css
index 3b48a570c21..51828a4d8bf 100644
--- a/components/sidenav/themes/spectrum.css
+++ b/components/sidenav/themes/spectrum.css
@@ -10,3 +10,20 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-SideNav {
+ --spectrum-sidenav-background-hover: var(--spectrum-gray-200);
+ --spectrum-sidenav-item-background-down: var(--spectrum-gray-300);
+ --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200);
+
+ --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200);
+ --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300);
+ --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300);
+ --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/slider/CHANGELOG.md b/components/slider/CHANGELOG.md
index 4f749b63f86..a4bfc8a0b22 100644
--- a/components/slider/CHANGELOG.md
+++ b/components/slider/CHANGELOG.md
@@ -1,5 +1,215 @@
# Change Log
+## 6.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e) Thanks [@pfulton](https://github.com/pfulton)! - Bring in the latest S2 foundations release including updated corner rounding approach, colors, and icon spacing. Remapped corner rounding values for the -75 token to a static 2px value for spectrum themes.
+
+### Patch Changes
+
+- Updated dependencies [[`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.25
+
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.18
+
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#3154](https://github.com/adobe/spectrum-css/pull/3154) [`7735155`](https://github.com/adobe/spectrum-css/commit/77351552eac8a28cab316d984fee88dca61dc786) Thanks [@cdransf](https://github.com/cdransf)! - This applies a flex layout to the spectrum slider controls to consistently align the enclosed handle and ramp, while also removing the margins that might otherwise interfere with alignment. This aims to resolve the issues with the calc-based approach that exhibited variations in vertical alignment.
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.17
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/stepper@7.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.5.0
### Minor Changes
@@ -23,6 +233,21 @@
- [#3298](https://github.com/adobe/spectrum-css/pull/3298) [`07cc324`](https://github.com/adobe/spectrum-css/commit/07cc324af3b1a6240033b6c2f91342373c7234c2) Thanks [@cdransf](https://github.com/cdransf)! - Resolves violation error by moving todo comment into stylelint disable comment as a description
+- Updated dependencies [[`5fa753b`](https://github.com/adobe/spectrum-css/commit/5fa753b34944584576c8d91b8d51460ff0a2e4be)]:
+ - @spectrum-css/stepper@6.2.1
+
+## 5.4.2
+
+### Patch Changes
+
+- [#3300](https://github.com/adobe/spectrum-css/pull/3300) [`89797d0`](https://github.com/adobe/spectrum-css/commit/89797d0324bcbf2195a28840ce87ed6959da24a5) Thanks [@castastrophe](https://github.com/castastrophe)! - Remove duplicate references
+
+## 5.4.1
+
+### Patch Changes
+
+- [#3298](https://github.com/adobe/spectrum-css/pull/3298) [`07cc324`](https://github.com/adobe/spectrum-css/commit/07cc324af3b1a6240033b6c2f91342373c7234c2) Thanks [@cdransf](https://github.com/cdransf)! - Resolves violation error by moving todo comment into stylelint disable comment as a description
+
- Updated dependencies [[`5fa753b`](https://github.com/adobe/spectrum-css/commit/5fa753b34944584576c8d91b8d51460ff0a2e4be)]:
- @spectrum-css/stepper@6.2.1
diff --git a/components/slider/index.css b/components/slider/index.css
index f4cd0317ee8..ed4bc4f76f3 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -11,14 +11,13 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Slider {
/* default sizing, matches t-shirt size M */
--spectrum-slider-font-size: var(--spectrum-font-size-75);
--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
--spectrum-slider-control-height: var(--spectrum-component-height-100);
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
@@ -27,57 +26,10 @@
/* TODO: placeholder value for sideLabel variant value width */
--spectrum-slider-value-inline-size: 18px;
- &:dir(rtl),
- &:dir(rtl) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
- }
-}
-
-.spectrum-Slider--sizeS {
- --spectrum-slider-font-size: var(--spectrum-font-size-75);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
- --spectrum-slider-control-height: var(--spectrum-component-height-75);
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
-}
-
-.spectrum-Slider--sizeL {
- --spectrum-slider-font-size: var(--spectrum-font-size-100);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
- --spectrum-slider-control-height: var(--spectrum-component-height-200);
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-
- /* TODO: placeholder value for sideLabel variant value width */
- --spectrum-slider-value-inline-size: 18px;
-}
-
-.spectrum-Slider--sizeXL {
- --spectrum-slider-font-size: var(--spectrum-font-size-200);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
- --spectrum-slider-control-height: var(--spectrum-component-height-300);
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-
- /* TODO: placeholder value for sideLabel variant value width */
- --spectrum-slider-value-inline-size: 22px;
-}
-
-.spectrum-Slider {
--spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
--spectrum-slider-min-size: var(--spectrum-spacing-900);
- --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
--spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
--spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
--spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
@@ -115,11 +67,52 @@
user-select: none;
+ &:dir(rtl),
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
+
&:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp) {
margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
}
}
+.spectrum-Slider--sizeS {
+ --spectrum-slider-font-size: var(--spectrum-font-size-75);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
+ --spectrum-slider-control-height: var(--spectrum-component-height-75);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
+}
+
+.spectrum-Slider--sizeL {
+ --spectrum-slider-font-size: var(--spectrum-font-size-100);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
+ --spectrum-slider-control-height: var(--spectrum-component-height-200);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+
+ /* TODO: placeholder value for sideLabel variant value width */
+ --spectrum-slider-value-inline-size: 18px;
+}
+
+.spectrum-Slider--sizeXL {
+ --spectrum-slider-font-size: var(--spectrum-font-size-200);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
+ --spectrum-slider-control-height: var(--spectrum-component-height-300);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+
+ /* TODO: placeholder value for sideLabel variant value width */
+ --spectrum-slider-value-inline-size: 22px;
+}
+
.spectrum-Slider--sideLabel {
display: flex;
align-items: center;
diff --git a/components/slider/metadata/metadata.json b/components/slider/metadata/metadata.json
index 4c2be2d396c..2f2a2dd8669 100644
--- a/components/slider/metadata/metadata.json
+++ b/components/slider/metadata/metadata.json
@@ -83,6 +83,10 @@
".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before",
".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before",
".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle",
+ ".spectrum-Slider.spectrum-Slider--sizeL",
+ ".spectrum-Slider.spectrum-Slider--sizeM",
+ ".spectrum-Slider.spectrum-Slider--sizeS",
+ ".spectrum-Slider.spectrum-Slider--sizeXL",
".spectrum-Slider:dir(rtl)",
".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused",
@@ -230,8 +234,7 @@
"--spectrum-component-top-to-text-100",
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-200",
- "--spectrum-corner-radius-75",
+ "--spectrum-corner-radius-500",
"--spectrum-disabled-background-color",
"--spectrum-disabled-border-color",
"--spectrum-disabled-content-color",
@@ -243,13 +246,10 @@
"--spectrum-font-size-75",
"--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
"--spectrum-gray-400",
- "--spectrum-gray-50",
- "--spectrum-gray-600",
"--spectrum-gray-700",
+ "--spectrum-gray-75",
"--spectrum-gray-800",
- "--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-logical-rotation",
"--spectrum-neutral-content-color-default",
@@ -260,21 +260,27 @@
"--spectrum-text-to-visual-75"
],
"system-theme": [
- "--system-spectrum-slider-handle-background-color",
- "--system-spectrum-slider-handle-background-color-disabled",
- "--system-spectrum-slider-handle-border-color",
- "--system-spectrum-slider-handle-border-color-down",
- "--system-spectrum-slider-handle-border-color-hover",
- "--system-spectrum-slider-handle-border-color-key-focus",
- "--system-spectrum-slider-handle-disabled-background-color",
- "--system-spectrum-slider-handle-focus-ring-color-key-focus",
- "--system-spectrum-slider-ramp-handle-background-color",
- "--system-spectrum-slider-ramp-track-color",
- "--system-spectrum-slider-ramp-track-color-disabled",
- "--system-spectrum-slider-tick-mark-color",
- "--system-spectrum-slider-ticks-handle-background-color",
- "--system-spectrum-slider-track-color",
- "--system-spectrum-slider-track-fill-color"
+ "--system-slider-handle-background-color",
+ "--system-slider-handle-background-color-disabled",
+ "--system-slider-handle-border-color",
+ "--system-slider-handle-border-color-down",
+ "--system-slider-handle-border-color-hover",
+ "--system-slider-handle-border-color-key-focus",
+ "--system-slider-handle-border-radius",
+ "--system-slider-handle-disabled-background-color",
+ "--system-slider-handle-focus-ring-color-key-focus",
+ "--system-slider-ramp-handle-background-color",
+ "--system-slider-ramp-track-color",
+ "--system-slider-ramp-track-color-disabled",
+ "--system-slider-size-l-handle-border-radius",
+ "--system-slider-size-m-handle-border-radius",
+ "--system-slider-size-s-handle-border-radius",
+ "--system-slider-size-xl-handle-border-radius",
+ "--system-slider-tick-mark-color",
+ "--system-slider-ticks-handle-background-color",
+ "--system-slider-track-color",
+ "--system-slider-track-corner-radius",
+ "--system-slider-track-fill-color"
],
"passthroughs": [],
"high-contrast": [
diff --git a/components/slider/package.json b/components/slider/package.json
index fb047af5489..1980e4afd1b 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/slider",
- "version": "5.5.0",
+ "version": "6.0.0-s2-foundations.17",
"description": "The Spectrum CSS slider component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js
index 2c2c4984585..c0977f94830 100644
--- a/components/slider/stories/slider.stories.js
+++ b/components/slider/stories/slider.stories.js
@@ -140,6 +140,10 @@ export default {
"change .spectrum-Slider-input",
],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=842-1056",
+ },
packageJson,
metadata,
},
diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js
index bc625452855..becef6ade92 100644
--- a/components/slider/stories/template.js
+++ b/components/slider/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Slider",
diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css
index 834cc673f79..f9f149f4d93 100644
--- a/components/slider/themes/express.css
+++ b/components/slider/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Slider {
--spectrum-slider-track-color: var(--spectrum-gray-200);
--spectrum-slider-track-fill-color: var(--spectrum-gray-600);
diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css
new file mode 100644
index 00000000000..b118d77cffd
--- /dev/null
+++ b/components/slider/themes/spectrum-two.css
@@ -0,0 +1,54 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Slider {
+ --spectrum-slider-track-color: var(--spectrum-gray-200);
+ --spectrum-slider-track-fill-color: var(--spectrum-gray-700);
+ --spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
+ --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100);
+
+ --spectrum-slider-handle-background-color: transparent;
+ --spectrum-slider-handle-background-color-disabled: transparent;
+ --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75);
+ --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75);
+ --spectrum-slider-handle-border-color: var(--spectrum-gray-700);
+ --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75);
+
+ --spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
+
+ --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
+ --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
+ --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
+ --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
+
+ --spectrum-slider-track-corner-radius: 2px;
+
+ &,
+ &.spectrum-Slider--sizeM {
+ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
+ }
+
+ &.spectrum-Slider--sizeS {
+ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
+ }
+
+ &.spectrum-Slider--sizeL {
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
+ }
+
+ &.spectrum-Slider--sizeXL {
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
+ }
+ }
+}
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
index 1beab05efd8..f411427cc8d 100644
--- a/components/slider/themes/spectrum.css
+++ b/components/slider/themes/spectrum.css
@@ -11,25 +11,35 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Slider {
--spectrum-slider-track-color: var(--spectrum-gray-300);
- --spectrum-slider-track-fill-color: var(--spectrum-gray-700);
- --spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
--spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200);
-
- --spectrum-slider-handle-background-color: transparent;
- --spectrum-slider-handle-background-color-disabled: transparent;
--spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100);
--spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100);
- --spectrum-slider-handle-border-color: var(--spectrum-gray-700);
--spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
-
--spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
+ --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
+
+ &,
+ &.spectrum-Slider--sizeM {
+ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+ }
+
+ &.spectrum-Slider--sizeS {
+ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+ }
+
+ &.spectrum-Slider--sizeL {
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+ }
- --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
- --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
- --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
- --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
+ &.spectrum-Slider--sizeXL {
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+ }
}
}
diff --git a/components/splitview/CHANGELOG.md b/components/splitview/CHANGELOG.md
index 991760d8a42..920bfeaa8ec 100644
--- a/components/splitview/CHANGELOG.md
+++ b/components/splitview/CHANGELOG.md
@@ -1,5 +1,189 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e) Thanks [@pfulton](https://github.com/pfulton)! - Bring in the latest S2 foundations release including updated corner rounding approach, colors, and icon spacing. Remapped corner rounding values for the -75 token to a static 2px value for spectrum themes.
+
+### Patch Changes
+
+- Updated dependencies [[`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.25
+
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.3.0
### Minor Changes
diff --git a/components/splitview/index.css b/components/splitview/index.css
index 219190bfab8..392fcf80971 100644
--- a/components/splitview/index.css
+++ b/components/splitview/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+ @import "./themes/spectrum-two.css";
.spectrum-SplitView {
--spectrum-splitview-vertical-width: 100%;
@@ -19,23 +19,18 @@
--spectrum-splitview-vertical-gripper-outer-width: 100%;
--spectrum-splitview-vertical-gripper-reset: 0;
- --spectrum-splitview-background-color: var(--spectrum-gray-100);
--spectrum-splitview-content-color: var(--spectrum-body-color);
- --spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
--spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
--spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
--spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
--spectrum-splitview-handle-width: var(--spectrum-border-width-200);
- --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
--spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
- --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
- --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
+ --spectrum-splitview-gripper-height: 16px;
+ --spectrum-splitview-gripper-border-width-horizontal: 3px;
--spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
-}
-.spectrum-SplitView {
display: flex;
overflow: hidden;
}
@@ -111,51 +106,51 @@
inset-inline-start: auto;
}
}
-}
-
-.spectrum-SplitView-splitter.is-draggable {
- &:hover,
- &.is-hovered {
- background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-
- .spectrum-SplitView-gripper {
- border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
- }
- .spectrum-SplitView-gripper::before {
+ &.is-draggable {
+ &:hover,
+ &.is-hovered {
background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
- }
- }
- &:active,
- &.is-active {
- background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+ .spectrum-SplitView-gripper {
+ border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+ }
- .spectrum-SplitView-gripper {
- border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+ .spectrum-SplitView-gripper::before {
+ background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+ }
}
- /* Center line of gripper */
- .spectrum-SplitView-gripper::before {
+ &:active,
+ &.is-active {
background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
- }
- }
- &:focus {
- outline: none;
- }
+ .spectrum-SplitView-gripper {
+ border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+ }
- &:focus-visible {
- outline: none;
- background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+ /* Center line of gripper */
+ .spectrum-SplitView-gripper::before {
+ background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+ }
+ }
- .spectrum-SplitView-gripper {
- border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
- box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+ &:focus {
+ outline: none;
}
- .spectrum-SplitView-gripper::before {
+ &:focus-visible {
+ outline: none;
background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+
+ .spectrum-SplitView-gripper {
+ border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+ box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+ }
+
+ .spectrum-SplitView-gripper::before {
+ background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+ }
}
}
}
diff --git a/components/splitview/metadata/metadata.json b/components/splitview/metadata/metadata.json
index b8f8fa5031a..4902e8e2368 100644
--- a/components/splitview/metadata/metadata.json
+++ b/components/splitview/metadata/metadata.json
@@ -75,14 +75,17 @@
"--spectrum-body-color",
"--spectrum-border-width-200",
"--spectrum-border-width-400",
- "--spectrum-corner-radius-75",
"--spectrum-focus-indicator-color",
- "--spectrum-gray-100",
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-gray-400",
+ "--spectrum-gray-75",
"--spectrum-gray-800"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-split-view-background-color",
+ "--system-split-view-gripper-border-radius",
+ "--system-split-view-handle-background-color"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-splitview-handle-background-color",
diff --git a/components/splitview/package.json b/components/splitview/package.json
index 93a0a7e36c1..3bf37057f1f 100644
--- a/components/splitview/package.json
+++ b/components/splitview/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/splitview",
- "version": "5.3.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS splitview component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js
index aacdd00a3e7..4fb08b911dd 100644
--- a/components/splitview/stories/template.js
+++ b/components/splitview/stories/template.js
@@ -3,6 +3,9 @@ import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-SplitView",
diff --git a/components/splitview/themes/express.css b/components/splitview/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/splitview/themes/express.css
+++ b/components/splitview/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/splitview/themes/spectrum-two.css b/components/splitview/themes/spectrum-two.css
new file mode 100644
index 00000000000..14ef6131e5a
--- /dev/null
+++ b/components/splitview/themes/spectrum-two.css
@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-SplitView {
+ --spectrum-splitview-background-color: var(--spectrum-gray-75);
+ --spectrum-splitview-handle-background-color: var(--spectrum-gray-200);
+ --spectrum-splitview-gripper-border-radius: 2px;
+ }
+}
diff --git a/components/splitview/themes/spectrum.css b/components/splitview/themes/spectrum.css
index 3b48a570c21..209e46a4b3b 100644
--- a/components/splitview/themes/spectrum.css
+++ b/components/splitview/themes/spectrum.css
@@ -10,3 +10,15 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-SplitView {
+ --spectrum-splitview-background-color: var(--spectrum-gray-100);
+ --spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
+ --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
+ }
+}
diff --git a/components/statuslight/CHANGELOG.md b/components/statuslight/CHANGELOG.md
index 3dfc11abb4e..7555d2a7c69 100644
--- a/components/statuslight/CHANGELOG.md
+++ b/components/statuslight/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 8.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 8.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 7.3.0
### Minor Changes
@@ -12,6 +185,12 @@
- [#3299](https://github.com/adobe/spectrum-css/pull/3299) [`d1a8522`](https://github.com/adobe/spectrum-css/commit/d1a8522b8bd0ba8f1ecf30bd8ed00af679e7e532) Thanks [@cdransf](https://github.com/cdransf)! - Adjust custom property ordering to resolve lint violations.
+## 7.2.3
+
+### Patch Changes
+
+- [#3299](https://github.com/adobe/spectrum-css/pull/3299) [`d1a8522`](https://github.com/adobe/spectrum-css/commit/d1a8522b8bd0ba8f1ecf30bd8ed00af679e7e532) Thanks [@cdransf](https://github.com/cdransf)! - Adjust custom property ordering to resolve lint violations.
+
## 7.2.2
### Patch Changes
diff --git a/components/statuslight/index.css b/components/statuslight/index.css
index ee936645cf1..23e5740c4c1 100644
--- a/components/statuslight/index.css
+++ b/components/statuslight/index.css
@@ -11,52 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-StatusLight {
- /* Static tokens */
- --spectrum-statuslight-corner-radius: 50%;
- --spectrum-statuslight-font-weight: 400;
- --spectrum-statuslight-border-width: var(--spectrum-border-width-100);
-
- /* Size */
- --spectrum-statuslight-height: var(--spectrum-component-height-100);
- --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
- --spectrum-statuslight-line-height: var(--spectrum-line-height-100);
- --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
- --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
-
- /* Space */
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
- --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
- --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
- --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
-
- /* Color */
- --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
- --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color);
- --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
- --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
- --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
- --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
- --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
- --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
- --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
- --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color);
- --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color);
- --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color);
- --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color);
- --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color);
- --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color);
- --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color);
- --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color);
- --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
- --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
- --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
-}
+@import "./themes/spectrum-two.css";
.spectrum-StatusLight--sizeS {
--spectrum-statuslight-height: var(--spectrum-component-height-75);
@@ -70,6 +25,7 @@
--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
}
+.spectrum-StatusLight,
.spectrum-StatusLight--sizeM {
--spectrum-statuslight-height: var(--spectrum-component-height-100);
--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
@@ -107,6 +63,36 @@
}
.spectrum-StatusLight {
+ --spectrum-statuslight-corner-radius: 50%;
+ --spectrum-statuslight-font-weight: 400;
+ --spectrum-statuslight-border-width: var(--spectrum-border-width-100);
+
+ --spectrum-statuslight-line-height: var(--spectrum-line-height-100);
+ --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+ --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
+ --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color);
+ --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
+ --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
+ --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
+ --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
+ --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
+ --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
+ --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
+ --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color);
+ --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color);
+ --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color);
+ --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color);
+ --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color);
+ --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color);
+ --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color);
+ --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color);
+ --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
+ --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
+ --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
+
display: flex;
flex-direction: row;
align-items: flex-start;
@@ -148,13 +134,10 @@
}
}
+/* Semantic Colors */
.spectrum-StatusLight--neutral {
font-style: italic;
-}
-/* Semantic Colors */
-
-.spectrum-StatusLight--neutral {
color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));
&::before {
@@ -183,7 +166,6 @@
}
/* Non-Semantic Colors */
-
.spectrum-StatusLight--gray::before {
background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color));
}
diff --git a/components/statuslight/package.json b/components/statuslight/package.json
index 1ddbb84bc8a..51d8ea2ce68 100644
--- a/components/statuslight/package.json
+++ b/components/statuslight/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/statuslight",
- "version": "7.3.0",
+ "version": "8.0.0-s2-foundations.15",
"description": "The Spectrum CSS statuslight component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js
index fdd4f7224da..b5cc8aba9ce 100644
--- a/components/statuslight/stories/statuslight.stories.js
+++ b/components/statuslight/stories/statuslight.stories.js
@@ -65,6 +65,10 @@ export default {
isDisabled: false,
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36797-954",
+ },
packageJson,
metadata,
},
diff --git a/components/statuslight/stories/template.js b/components/statuslight/stories/template.js
index 2faf35797c8..75da81e79a0 100644
--- a/components/statuslight/stories/template.js
+++ b/components/statuslight/stories/template.js
@@ -4,6 +4,9 @@ import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-StatusLight",
diff --git a/components/statuslight/themes/express.css b/components/statuslight/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/statuslight/themes/express.css
+++ b/components/statuslight/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/statuslight/themes/spectrum-two.css b/components/statuslight/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/statuslight/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/statuslight/themes/spectrum.css b/components/statuslight/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/statuslight/themes/spectrum.css
+++ b/components/statuslight/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/steplist/CHANGELOG.md b/components/steplist/CHANGELOG.md
index 1117b3ac23c..84109a6b971 100644
--- a/components/steplist/CHANGELOG.md
+++ b/components/steplist/CHANGELOG.md
@@ -1,5 +1,214 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
@@ -18,6 +227,12 @@
- [#3302](https://github.com/adobe/spectrum-css/pull/3302) [`4988da3`](https://github.com/adobe/spectrum-css/commit/4988da329bc4d562dd068776d7b7f84393086274) Thanks [@cdransf](https://github.com/cdransf)! - Resolves stylelint violation by removing vertical-align declaration that is ignored due to preceding display: block declaration.
+## 5.1.4
+
+### Patch Changes
+
+- [#3302](https://github.com/adobe/spectrum-css/pull/3302) [`4988da3`](https://github.com/adobe/spectrum-css/commit/4988da329bc4d562dd068776d7b7f84393086274) Thanks [@cdransf](https://github.com/cdransf)! - Resolves stylelint violation by removing vertical-align declaration that is ignored due to preceding display: block declaration.
+
## 5.1.3
### Patch Changes
diff --git a/components/steplist/index.css b/components/steplist/index.css
index d8734bd6dfc..e4d55d614da 100644
--- a/components/steplist/index.css
+++ b/components/steplist/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Steplist {
/* The width of a step */
@@ -40,23 +40,12 @@
--spectrum-steplist-label-text-size: 12px;
--spectrum-steplist-current-label-text-color: var(--spectrum-gray-800);
-
--spectrum-steplist-current-marker-color: var(--spectrum-gray-800);
-
--spectrum-steplist-complete-label-text-color: var(--spectrum-gray-700);
-
- --spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600);
-
--spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600);
-
- --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300);
-
- --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300);
-
--spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600);
-}
+ --spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600);
-.spectrum-Steplist {
/* Contain child elements with positive z-index */
z-index: 0;
position: relative;
@@ -71,6 +60,7 @@
white-space: nowrap;
font-size: 0; /* To remove html whitespace between inline elements */
line-height: 16px; /* in case the container changes it */
+
}
.spectrum-Steplist--interactive {
@@ -190,6 +180,7 @@
inset-inline-start: 50%;
inset-block-end: var(--mod-steplist-label-labelOffset, var(--spectrum-steplist-label-labelOffset));
+
display: block;
inline-size: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5);
diff --git a/components/steplist/metadata/metadata.json b/components/steplist/metadata/metadata.json
index 3f2c92091bf..3e4e5dc0bed 100644
--- a/components/steplist/metadata/metadata.json
+++ b/components/steplist/metadata/metadata.json
@@ -86,12 +86,15 @@
"--spectrum-steplist-topPadding"
],
"global": [
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-gray-600",
"--spectrum-gray-700",
"--spectrum-gray-800"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-steplist-incomplete-marker-border-color",
+ "--system-steplist-incomplete-segment-border-block-end-color"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-steplist-complete-marker-background-color",
diff --git a/components/steplist/package.json b/components/steplist/package.json
index 428b2e91ed0..651ff81258f 100644
--- a/components/steplist/package.json
+++ b/components/steplist/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/steplist",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS steplist component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/steplist/stories/template.js b/components/steplist/stories/template.js
index 7edfdf8199b..ea9a57ef420 100644
--- a/components/steplist/stories/template.js
+++ b/components/steplist/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { repeat } from "lit/directives/repeat.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const SteplistItem = ({
rootClass = "spectrum-Steplist-item",
diff --git a/components/steplist/themes/express.css b/components/steplist/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/steplist/themes/express.css
+++ b/components/steplist/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/steplist/themes/spectrum-two.css b/components/steplist/themes/spectrum-two.css
new file mode 100644
index 00000000000..649e9fb4d3a
--- /dev/null
+++ b/components/steplist/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Steplist {
+ --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200);
+ --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/steplist/themes/spectrum.css b/components/steplist/themes/spectrum.css
index 3b48a570c21..bfe1e5f6f8c 100644
--- a/components/steplist/themes/spectrum.css
+++ b/components/steplist/themes/spectrum.css
@@ -10,3 +10,14 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Steplist {
+ --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300);
+ --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300);
+ }
+}
diff --git a/components/stepper/CHANGELOG.md b/components/stepper/CHANGELOG.md
index c07139f577c..9059d8634b2 100644
--- a/components/stepper/CHANGELOG.md
+++ b/components/stepper/CHANGELOG.md
@@ -1,5 +1,277 @@
# Change Log
+## 7.0.0-s2-foundations.18
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.16
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.21
+ - @spectrum-css/textfield@8.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 7.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.15
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.20
+ - @spectrum-css/textfield@8.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5f693f2`](https://github.com/adobe/spectrum-css/commit/5f693f2b000ffe77f1293980bc6006fbc5fa76c0) Thanks [@pfulton](https://github.com/pfulton)! - Stepper bug fixes for S1 and Express variants.
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5f693f2`](https://github.com/adobe/spectrum-css/commit/5f693f2b000ffe77f1293980bc6006fbc5fa76c0) Thanks [@pfulton](https://github.com/pfulton)! - Realign structure with original style format
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5f693f2`](https://github.com/adobe/spectrum-css/commit/5f693f2b000ffe77f1293980bc6006fbc5fa76c0) Thanks [@pfulton](https://github.com/pfulton)! - Add separate variable for stepper button border width
+
+## 7.0.0-s2-foundations.15
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9ae725f`](https://github.com/adobe/spectrum-css/commit/9ae725f10ebbb78b62070c4c477cb41cfc1b1ed6) Thanks [@pfulton](https://github.com/pfulton)! - Combobox moved the quiet min-inline-size property to index.css from theme to pick up the t-shirt sizing for the calc.
+
+ Typography increases specificity for the t-shirt sizing.
+
+ Stepper fixes for the disabled + hovered states as well as regressions fixed for the quiet variant.
+
+- Updated dependencies [[`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.19
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.14
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/textfield@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3041](https://github.com/adobe/spectrum-css/pull/3041) [`7be40c3`](https://github.com/adobe/spectrum-css/commit/7be40c334748f3e1064c614af793117f06146475) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - --mod properties were moved out of `stepper/themes/spectrum-two.css` into `stepper/index.css` so --mods can be applied at the component level.
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.12
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/textfield@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.11
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/textfield@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.10
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/textfield@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.9
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/textfield@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.8
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/textfield@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.7
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/textfield@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/textfield@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.5
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/textfield@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.4
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/textfield@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.3
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/textfield@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.2
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/textfield@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.1
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/textfield@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.0
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/textfield@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.3.0
### Minor Changes
@@ -20,6 +292,15 @@
- [#3303](https://github.com/adobe/spectrum-css/pull/3303) [`5fa753b`](https://github.com/adobe/spectrum-css/commit/5fa753b34944584576c8d91b8d51460ff0a2e4be) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violations by removing unused properties and adding comment description.
+- Updated dependencies [[`d05f25f`](https://github.com/adobe/spectrum-css/commit/d05f25f971f2e0123ad0747c53ad0250c7cee707)]:
+ - @spectrum-css/infieldbutton@5.1.4
+
+## 6.2.1
+
+### Patch Changes
+
+- [#3303](https://github.com/adobe/spectrum-css/pull/3303) [`5fa753b`](https://github.com/adobe/spectrum-css/commit/5fa753b34944584576c8d91b8d51460ff0a2e4be) Thanks [@cdransf](https://github.com/cdransf)! - Resolves lint violations by removing unused properties and adding comment description.
+
- Updated dependencies [[`d05f25f`](https://github.com/adobe/spectrum-css/commit/d05f25f971f2e0123ad0747c53ad0250c7cee707)]:
- @spectrum-css/infieldbutton@5.1.4
diff --git a/components/stepper/index.css b/components/stepper/index.css
index 23e913843d7..8ee52bbbc02 100644
--- a/components/stepper/index.css
+++ b/components/stepper/index.css
@@ -11,15 +11,10 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Stepper {
- /* Set defaults to medium size */
- --spectrum-stepper-height: var(--spectrum-component-height-100);
--spectrum-stepper-border-radius: var(--spectrum-corner-radius-100);
-
- --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium);
-
--spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2));
/*** Focus Indicator ***/
@@ -39,6 +34,12 @@
--spectrum-stepper-height: var(--spectrum-component-height-75);
}
+ &,
+ &.spectrum-Stepper--sizeM {
+ --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium);
+ --spectrum-stepper-height: var(--spectrum-component-height-100);
+ }
+
&.spectrum-Stepper--sizeL {
--spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-large);
--spectrum-stepper-height: var(--spectrum-component-height-200);
@@ -87,13 +88,7 @@
--mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid));
}
}
-}
-
-.x {
- border-radius: var(--spectrum-stepper-button-border-radius-reset);
-}
-.spectrum-Stepper {
position: relative;
display: inline-flex;
flex-flow: row nowrap;
@@ -182,10 +177,12 @@
border-end-start-radius: 0;
border-end-end-radius: 0;
+ /* stylelint-disable selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */
&.hide-stepper .spectrum-Stepper-input {
border-inline-end-width: 0;
border-end-end-radius: 0;
}
+ /* stylelint-enable selector-class-pattern */
&::after {
content: "";
@@ -279,7 +276,7 @@
transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out;
}
-/* hide-stepper */
+/* stylelint-disable-next-line selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */
.spectrum-Stepper.hide-stepper .spectrum-Stepper-input {
border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
@@ -293,10 +290,6 @@
--highcontrast-stepper-border-color-focus: Highlight;
--highcontrast-stepper-border-color-focus-hover: Highlight;
--highcontrast-stepper-border-color-keyboard-focus: CanvasText;
- --highcontrast-stepper-button-background-color-default: Canvas;
- --highcontrast-stepper-button-background-color-hover: Canvas;
- --highcontrast-stepper-button-background-color-focus: Canvas;
- --highcontrast-stepper-button-background-color-keyboard-focus: Canvas;
--highcontrast-stepper-focus-indicator-color: Highlight;
&.is-invalid {
@@ -305,12 +298,10 @@
--highcontrast-stepper-border-color-focus: Highlight;
--highcontrast-stepper-border-color-focus-hover: Highlight;
--highcontrast-stepper-border-color-keyboard-focus: Highlight;
- --highcontrast-infield-button-border-color: Highlight;
}
&.is-disabled {
--highcontrast-stepper-border-color: GrayText;
- --highcontrast-infield-button-border-color: GrayText;
--highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
}
}
diff --git a/components/stepper/metadata/metadata.json b/components/stepper/metadata/metadata.json
index 7d2ac4ad7cf..08650356561 100644
--- a/components/stepper/metadata/metadata.json
+++ b/components/stepper/metadata/metadata.json
@@ -41,6 +41,7 @@
".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover",
".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover .spectrum-Stepper-buttons",
".spectrum-Stepper.spectrum-Stepper--sizeL",
+ ".spectrum-Stepper.spectrum-Stepper--sizeM",
".spectrum-Stepper.spectrum-Stepper--sizeS",
".spectrum-Stepper.spectrum-Stepper--sizeXL",
".spectrum-Stepper:before",
@@ -56,8 +57,7 @@
".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-input",
".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-buttons",
".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-input",
- ".spectrum-Stepper:hover:not(.is-invalid)",
- ".x"
+ ".spectrum-Stepper:hover:not(.is-invalid)"
],
"modifiers": [
"--mod-stepper-animation-duration",
@@ -99,17 +99,18 @@
"--spectrum-stepper-border-color-focus-hover-invalid",
"--spectrum-stepper-border-color-focus-invalid",
"--spectrum-stepper-border-color-hover",
+ "--spectrum-stepper-border-color-hover-invalid",
"--spectrum-stepper-border-color-invalid",
"--spectrum-stepper-border-color-keyboard-focus",
"--spectrum-stepper-border-color-keyboard-focus-invalid",
"--spectrum-stepper-border-radius",
"--spectrum-stepper-border-width",
- "--spectrum-stepper-button-background-color-focus",
- "--spectrum-stepper-button-background-color-keyboard-focus",
- "--spectrum-stepper-button-border-radius-reset",
+ "--spectrum-stepper-button-border-color-disabled",
"--spectrum-stepper-button-border-width",
+ "--spectrum-stepper-button-border-width-disabled",
"--spectrum-stepper-button-width",
"--spectrum-stepper-buttons-background-color",
+ "--spectrum-stepper-buttons-background-color-disabled",
"--spectrum-stepper-buttons-border-color",
"--spectrum-stepper-buttons-border-color-focus",
"--spectrum-stepper-buttons-border-color-focus-hover",
@@ -126,26 +127,21 @@
"global": [
"--spectrum-animation-duration-100",
"--spectrum-border-width-100",
- "--spectrum-border-width-200",
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-corner-radius-100",
- "--spectrum-disabled-background-color",
"--spectrum-disabled-border-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
+ "--spectrum-gray-25",
"--spectrum-gray-50",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-800",
"--spectrum-gray-900",
- "--spectrum-in-field-button-fill-stacked-inner-border-rounding",
"--spectrum-in-field-button-width-stacked-extra-large",
"--spectrum-in-field-button-width-stacked-large",
"--spectrum-in-field-button-width-stacked-medium",
@@ -158,29 +154,28 @@
"--spectrum-text-field-minimum-width-multiplier"
],
"system-theme": [
- "--system-spectrum-stepper-border-color",
- "--system-spectrum-stepper-border-color-focus",
- "--system-spectrum-stepper-border-color-focus-hover",
- "--system-spectrum-stepper-border-color-focus-hover-invalid",
- "--system-spectrum-stepper-border-color-focus-invalid",
- "--system-spectrum-stepper-border-color-hover",
- "--system-spectrum-stepper-border-color-invalid",
- "--system-spectrum-stepper-border-color-keyboard-focus",
- "--system-spectrum-stepper-border-color-keyboard-focus-invalid",
- "--system-spectrum-stepper-border-width",
- "--system-spectrum-stepper-button-background-color-focus",
- "--system-spectrum-stepper-button-background-color-keyboard-focus",
- "--system-spectrum-stepper-button-border-radius-reset",
- "--system-spectrum-stepper-button-border-width",
- "--system-spectrum-stepper-buttons-background-color",
- "--system-spectrum-stepper-buttons-border-color",
- "--system-spectrum-stepper-buttons-border-color-focus",
- "--system-spectrum-stepper-buttons-border-color-hover",
- "--system-spectrum-stepper-buttons-border-color-keyboard-focus",
- "--system-spectrum-stepper-buttons-border-style",
- "--system-spectrum-stepper-buttons-border-width",
- "--system-spectrum-stepper-disabled-buttons-background-color",
- "--system-spectrum-stepper-disabled-buttons-border-width"
+ "--system-stepper-border-color",
+ "--system-stepper-border-color-focus",
+ "--system-stepper-border-color-focus-hover",
+ "--system-stepper-border-color-focus-hover-invalid",
+ "--system-stepper-border-color-focus-invalid",
+ "--system-stepper-border-color-hover",
+ "--system-stepper-border-color-hover-invalid",
+ "--system-stepper-border-color-invalid",
+ "--system-stepper-border-color-keyboard-focus",
+ "--system-stepper-border-color-keyboard-focus-invalid",
+ "--system-stepper-border-width",
+ "--system-stepper-button-border-color-disabled",
+ "--system-stepper-button-border-width",
+ "--system-stepper-button-border-width-disabled",
+ "--system-stepper-buttons-background-color",
+ "--system-stepper-buttons-background-color-disabled",
+ "--system-stepper-buttons-border-color",
+ "--system-stepper-buttons-border-color-focus",
+ "--system-stepper-buttons-border-color-hover",
+ "--system-stepper-buttons-border-color-keyboard-focus",
+ "--system-stepper-buttons-border-style",
+ "--system-stepper-buttons-border-width"
],
"passthroughs": [
"--mod-infield-button-border-block-end-width",
@@ -197,16 +192,11 @@
"--mod-textfield-icon-spacing-inline-start-invalid"
],
"high-contrast": [
- "--highcontrast-infield-button-border-color",
"--highcontrast-stepper-border-color",
"--highcontrast-stepper-border-color-focus",
"--highcontrast-stepper-border-color-focus-hover",
"--highcontrast-stepper-border-color-hover",
"--highcontrast-stepper-border-color-keyboard-focus",
- "--highcontrast-stepper-button-background-color-default",
- "--highcontrast-stepper-button-background-color-focus",
- "--highcontrast-stepper-button-background-color-hover",
- "--highcontrast-stepper-button-background-color-keyboard-focus",
"--highcontrast-stepper-buttons-background-color",
"--highcontrast-stepper-buttons-border-width",
"--highcontrast-stepper-focus-indicator-color"
diff --git a/components/stepper/package.json b/components/stepper/package.json
index 9fda6f9abcc..63f74e0174c 100644
--- a/components/stepper/package.json
+++ b/components/stepper/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/stepper",
- "version": "6.3.0",
+ "version": "7.0.0-s2-foundations.18",
"description": "The Spectrum CSS stepper component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js
index cbd0c044e19..d92d141cd80 100644
--- a/components/stepper/stories/stepper.stories.js
+++ b/components/stepper/stories/stepper.stories.js
@@ -42,6 +42,10 @@ export default {
hideStepper: false
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=67507-450",
+ },
packageJson,
metadata,
},
diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js
index fb14155af87..4dea14c20f8 100644
--- a/components/stepper/stories/template.js
+++ b/components/stepper/stories/template.js
@@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Stepper",
@@ -49,7 +52,6 @@ export const Template = ({
"is-keyboardFocused": isKeyboardFocused,
"is-invalid": isInvalid,
"is-disabled": isDisabled,
- "hide-stepper": hideStepper,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
id=${ifDefined(id)}
diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css
index 6cc552c49f9..6c150f1672c 100644
--- a/components/stepper/themes/express.css
+++ b/components/stepper/themes/express.css
@@ -11,11 +11,18 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Stepper {
--spectrum-stepper-border-width: var(--spectrum-border-width-200);
+ --spectrum-stepper-border-color: var(--spectrum-gray-400);
+ --spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
+ --spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
+ --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900);
+ --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
--spectrum-stepper-buttons-border-style: solid;
--spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200);
@@ -25,26 +32,17 @@
--spectrum-stepper-buttons-border-color-focus: transparent;
--spectrum-stepper-buttons-border-color-keyboard-focus: transparent;
- --spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
--spectrum-stepper-button-border-width: 0;
- --spectrum-stepper-border-color: var(--spectrum-gray-400);
- --spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
- --spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
- --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900);
- --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
-
+ /** Invalid **/
--spectrum-stepper-border-color-invalid: transparent;
+ --spectrum-stepper-border-color-hover-invalid: transparent;
--spectrum-stepper-border-color-focus-invalid: transparent;
--spectrum-stepper-border-color-focus-hover-invalid: transparent;
--spectrum-stepper-border-color-keyboard-focus-invalid: transparent;
- --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400);
- --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300);
-
- &.is-disabled {
- --spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color);
- --spectrum-stepper-buttons-border-width: 0;
- }
+ /** Disabled **/
+ --spectrum-stepper-button-border-width-disabled: 0;
+ --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color);
}
}
diff --git a/components/stepper/themes/spectrum-two.css b/components/stepper/themes/spectrum-two.css
new file mode 100644
index 00000000000..80a52fcc860
--- /dev/null
+++ b/components/stepper/themes/spectrum-two.css
@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Stepper {
+ --spectrum-stepper-border-width: var(--spectrum-border-width-100);
+ --spectrum-stepper-border-color: var(--spectrum-gray-500);
+ --spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
+ --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
+ --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+
+ --spectrum-stepper-buttons-border-style: none;
+ --spectrum-stepper-buttons-border-width: 0;
+ --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
+ --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25);
+ --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
+ --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
+
+ --spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
+
+ /** Invalid **/
+ --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
+ --spectrum-stepper-border-color-hover-invalid: var(--spectrum-negative-border-color-hover);
+ --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
+ --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
+ --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
+
+ /** Disabled **/
+ --spectrum-stepper-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100);
+ --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
+ }
+}
diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css
index 17bb6158b38..2bad22190cb 100644
--- a/components/stepper/themes/spectrum.css
+++ b/components/stepper/themes/spectrum.css
@@ -11,33 +11,14 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Stepper {
- --spectrum-stepper-border-width: var(--spectrum-border-width-100);
-
- --spectrum-stepper-buttons-border-style: none;
- --spectrum-stepper-buttons-border-width: 0;
- --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
- --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
- --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
- --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
- --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
-
- --spectrum-stepper-button-border-radius-reset: 0px;
- --spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
+/* @combine .spectrum.spectrum--legacy */
- --spectrum-stepper-border-color: var(--spectrum-gray-500);
- --spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
- --spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
- --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
- --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+@import "./spectrum-two.css";
- --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
- --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
- --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
- --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
-
- --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300);
- --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200);
+@container style(--system: legacy) {
+ .spectrum-Stepper {
+ --spectrum-stepper-button-border-color-disabled: var(--spectrum-gray-200);
+ --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
+ --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-100);
}
}
diff --git a/components/swatch/CHANGELOG.md b/components/swatch/CHANGELOG.md
index 061fe1e6ba7..4d59a159414 100644
--- a/components/swatch/CHANGELOG.md
+++ b/components/swatch/CHANGELOG.md
@@ -1,5 +1,218 @@
# Change Log
+## 7.0.0-s2-foundations.17
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`aedc167`](https://github.com/adobe/spectrum-css/commit/aedc167f86d810f54dea1b2aacb191e718ac9598) Thanks [@pfulton](https://github.com/pfulton)! - Border color for Swatch on light/dark mode switched to use gray instead of black so it responds to theme.
+
+- Updated dependencies [[`aedc167`](https://github.com/adobe/spectrum-css/commit/aedc167f86d810f54dea1b2aacb191e718ac9598)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.27
+
+## 7.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.15
+
+## 7.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2954](https://github.com/adobe/spectrum-css/pull/2954) [`2d89227`](https://github.com/adobe/spectrum-css/commit/2d892277adbc1d8d5598bdf85130d3499fd31e13) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Reimplements support for the `spectrum-Swatch--lightBorder` class for swatches specifically in a swatch group.
+
+### Patch Changes
+
+- Updated dependencies [[`58a89ea`](https://github.com/adobe/spectrum-css/commit/58a89ea464c387111511271a5f5afce044f11042)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.15
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.0
+
## 6.4.0
### Minor Changes
@@ -19,6 +232,17 @@
### Patch Changes
+- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
+ - @spectrum-css/tokens@14.5.0
+
+## 6.3.0
+
+### Minor Changes
+
+- [#3253](https://github.com/adobe/spectrum-css/pull/3253) [`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86) Thanks [@castastrophe](https://github.com/castastrophe)! - This update removes tokens defined locally that belonged in the global scope. To ensure no regressions, please upgrade your @spectrum-css/tokens package at the same time so you will pick up the component-level definitions now in the global tokens scope. References to `.spectrum--(light|dark|darkest|medium|large)` have been removed.
+
+### Patch Changes
+
- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
- @spectrum-css/tokens@14.5.0
diff --git a/components/swatch/index.css b/components/swatch/index.css
index 6856e0e55b6..5e51140735b 100644
--- a/components/swatch/index.css
+++ b/components/swatch/index.css
@@ -11,32 +11,27 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
-/* Swatch tokens */
-.spectrum-Swatch {
- /* Placeholder tokens */
- --spectrum-swatch-focus-indicator-border-radius: 8px;
- --spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%);
+/* Windows high contrast mode */
+@media (forced-colors: active) {
+ .spectrum-Swatch {
+ --highcontrast-swatch-disabled-icon-color: GrayText;
+ --highcontrast-swatch-focus-indicator-color: ButtonText;
+ --highcontrast-swatch-background-color-selected: Background;
+ --highcontrast-swatch-border-color-selected: Highlight;
+ --highcontrast-swatch-border-color: ButtonText;
+ --highcontrast-swatch-fill-foreground-color: ButtonText;
- /* Size */
- --spectrum-swatch-size: var(--spectrum-swatch-size-small);
- --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
- --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
- --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
- --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ .spectrum-Swatch-fill {
+ forced-color-adjust: none;
+ }
+ }
- /* Color */
- --spectrum-swatch-border-color-selected: var(--spectrum-gray-900);
- --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
- --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color);
- --spectrum-swatch-disabled-icon-color: var(--spectrum-white);
- --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
- --spectrum-swatch-slash-icon-color: var(--spectrum-red-900);
- --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
+ .spectrum-Swatch[disabled],
+ .spectrum-Swatch.is-disabled {
+ --highcontrast-swatch-border-color: GrayText;
+ }
}
.spectrum-Swatch--sizeXS {
@@ -45,6 +40,7 @@
--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small);
}
+.spectrum-Swatch,
.spectrum-Swatch--sizeS {
--spectrum-swatch-size: var(--spectrum-swatch-size-small);
--spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
@@ -63,29 +59,19 @@
--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large);
}
-/* Windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-Swatch {
- --highcontrast-swatch-disabled-icon-color: GrayText;
- --highcontrast-swatch-focus-indicator-color: ButtonText;
- --highcontrast-swatch-background-color-selected: Background;
- --highcontrast-swatch-border-color-selected: Highlight;
- --highcontrast-swatch-border-color: ButtonText;
- --highcontrast-swatch-fill-foreground-color: ButtonText;
-
- .spectrum-Swatch-fill {
- forced-color-adjust: none;
- }
- }
-
- .spectrum-Swatch[disabled],
- .spectrum-Swatch.is-disabled {
- --highcontrast-swatch-border-color: GrayText;
- }
-}
-
-/* Swatch styles */
.spectrum-Swatch {
+ --spectrum-swatch-focus-indicator-border-radius: 8px;
+ --spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%);
+ --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
+ --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
+ --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-swatch-border-color-selected: var(--spectrum-gray-900);
+ --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
+ --spectrum-swatch-slash-icon-color: var(--spectrum-red-900);
+ --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
block-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
@@ -243,7 +229,6 @@
position: absolute;
inset: 0;
z-index: 0;
-
background-color: var(--spectrum-picked-color, transparent);
/* Swatch border */
@@ -257,7 +242,6 @@
.spectrum-Swatch-fill {
&::before {
box-shadow: none;
-
background-color: var(--spectrum-picked-color, transparent);
}
}
@@ -274,7 +258,6 @@
.spectrum-Swatch-mixedValueIcon {
display: none;
pointer-events: none;
-
color: var(--spectrum-picked-color, transparent);
}
diff --git a/components/swatch/metadata/metadata.json b/components/swatch/metadata/metadata.json
index 341ffaf99e4..3ba01fcab66 100644
--- a/components/swatch/metadata/metadata.json
+++ b/components/swatch/metadata/metadata.json
@@ -73,12 +73,12 @@
"component": [
"--spectrum-swatch-border-color",
"--spectrum-swatch-border-color-light",
+ "--spectrum-swatch-border-color-opacity",
"--spectrum-swatch-border-color-selected",
"--spectrum-swatch-border-radius",
"--spectrum-swatch-border-thickness",
"--spectrum-swatch-border-thickness-selected",
"--spectrum-swatch-dash-icon-color",
- "--spectrum-swatch-disabled-icon-border-color",
"--spectrum-swatch-disabled-icon-color",
"--spectrum-swatch-disabled-icon-size",
"--spectrum-swatch-focus-indicator-border-radius",
@@ -86,6 +86,8 @@
"--spectrum-swatch-focus-indicator-gap",
"--spectrum-swatch-focus-indicator-thickness",
"--spectrum-swatch-icon-border-color",
+ "--spectrum-swatch-icon-border-color-opacity",
+ "--spectrum-swatch-icon-border-color-rgb",
"--spectrum-swatch-inner-border-color-selected",
"--spectrum-swatch-size",
"--spectrum-swatch-size-extra-small",
@@ -107,18 +109,22 @@
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--spectrum-gray-50",
+ "--spectrum-gray-1000-rgb",
+ "--spectrum-gray-25",
"--spectrum-gray-800",
"--spectrum-gray-900",
"--spectrum-picked-color",
"--spectrum-red-900",
- "--spectrum-white",
"--spectrum-workflow-icon-size-100",
"--spectrum-workflow-icon-size-200",
"--spectrum-workflow-icon-size-50",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-swatch-border-color",
+ "--system-swatch-disabled-icon-color",
+ "--system-swatch-inner-border-color-selected"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-swatch-background-color-selected",
diff --git a/components/swatch/package.json b/components/swatch/package.json
index 4f10285d6cb..7a4d272c4cd 100644
--- a/components/swatch/package.json
+++ b/components/swatch/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/swatch",
- "version": "6.4.0",
+ "version": "7.0.0-s2-foundations.17",
"description": "The Spectrum CSS Color swatch component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js
index d4f6533a8b9..875dd0cee74 100644
--- a/components/swatch/stories/swatch.stories.js
+++ b/components/swatch/stories/swatch.stories.js
@@ -108,6 +108,10 @@ export default {
isMixedValue: false,
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=57008-1092",
+ },
packageJson,
metadata,
},
diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js
index b4fd333417e..8ffd7527a1a 100644
--- a/components/swatch/stories/template.js
+++ b/components/swatch/stories/template.js
@@ -9,6 +9,9 @@ import { when } from "lit/directives/when.js";
import { capitalize, lowerCase } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Swatch",
diff --git a/components/swatch/themes/express.css b/components/swatch/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/swatch/themes/express.css
+++ b/components/swatch/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css
new file mode 100644
index 00000000000..e753d50ca03
--- /dev/null
+++ b/components/swatch/themes/spectrum-two.css
@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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) {
+ /* Swatch tokens */
+ .spectrum-Swatch {
+ --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity));
+ --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25);
+ --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25);
+ }
+}
diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css
index 3b48a570c21..40660a06991 100644
--- a/components/swatch/themes/spectrum.css
+++ b/components/swatch/themes/spectrum.css
@@ -10,3 +10,14 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Swatch {
+ --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
+ --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-50);
+ }
+}
diff --git a/components/swatchgroup/CHANGELOG.md b/components/swatchgroup/CHANGELOG.md
index 5fbef6e8133..966f7c12d47 100644
--- a/components/swatchgroup/CHANGELOG.md
+++ b/components/swatchgroup/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 4.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.16
+
+## 4.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/swatch@7.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.2.0
### Minor Changes
diff --git a/components/swatchgroup/index.css b/components/swatchgroup/index.css
index 0c46df9a83e..46bfda46134 100644
--- a/components/swatchgroup/index.css
+++ b/components/swatchgroup/index.css
@@ -11,32 +11,28 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-SwatchGroup {
- --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50);
- --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75);
- --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100);
-}
+ --spectrum-swatchgroup-spacing: var(--spectrum-spacing-75);
-.spectrum-SwatchGroup {
display: inline-flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content: flex-start;
-}
-/* Regular (Default) */
-.spectrum-SwatchGroup {
- gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular));
+ /* Regular (Default) */
+ gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing));
}
/* Compact */
.spectrum-SwatchGroup--compact {
- gap: var(--mod-swatchgroup-spacing-compact, var(--spectrum-swatchgroup-spacing-compact));
+ --mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-compact);
+ --spectrum-swatchgroup-spacing: var(--spectrum-spacing-50);
}
/* Spacious */
.spectrum-SwatchGroup--spacious {
- gap: var(--mod-swatchgroup-spacing-spacious, var(--spectrum-swatchgroup-spacing-spacious));
+ --mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-spacious);
+ --spectrum-swatchgroup-spacing: var(--spectrum-spacing-100);
}
diff --git a/components/swatchgroup/metadata/metadata.json b/components/swatchgroup/metadata/metadata.json
index b03c96ca873..74adf019d54 100644
--- a/components/swatchgroup/metadata/metadata.json
+++ b/components/swatchgroup/metadata/metadata.json
@@ -10,11 +10,7 @@
"--mod-swatchgroup-spacing-regular",
"--mod-swatchgroup-spacing-spacious"
],
- "component": [
- "--spectrum-swatchgroup-spacing-compact",
- "--spectrum-swatchgroup-spacing-regular",
- "--spectrum-swatchgroup-spacing-spacious"
- ],
+ "component": ["--spectrum-swatchgroup-spacing"],
"global": [
"--spectrum-spacing-100",
"--spectrum-spacing-50",
diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json
index ee54f9d7809..753e67a08ea 100644
--- a/components/swatchgroup/package.json
+++ b/components/swatchgroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/swatchgroup",
- "version": "3.2.0",
+ "version": "4.0.0-s2-foundations.15",
"description": "The Spectrum CSS Color swatch group component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js
index 1b33f6c0deb..05e126cfae7 100644
--- a/components/swatchgroup/stories/swatchgroup.stories.js
+++ b/components/swatchgroup/stories/swatchgroup.stories.js
@@ -112,6 +112,10 @@ export default {
...(Swatch.parameters?.actions?.handles ?? []),
],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=57008-1093",
+ },
packageJson,
metadata,
},
diff --git a/components/swatchgroup/stories/template.js b/components/swatchgroup/stories/template.js
index 01c059998bd..34117cb94b3 100644
--- a/components/swatchgroup/stories/template.js
+++ b/components/swatchgroup/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-SwatchGroup",
diff --git a/components/swatchgroup/themes/express.css b/components/swatchgroup/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/swatchgroup/themes/express.css
+++ b/components/swatchgroup/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/swatchgroup/themes/spectrum-two.css b/components/swatchgroup/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/swatchgroup/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/swatchgroup/themes/spectrum.css b/components/swatchgroup/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/swatchgroup/themes/spectrum.css
+++ b/components/swatchgroup/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/switch/CHANGELOG.md b/components/switch/CHANGELOG.md
index 0598a7e3edd..4af0b029a26 100644
--- a/components/switch/CHANGELOG.md
+++ b/components/switch/CHANGELOG.md
@@ -1,5 +1,184 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 6.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a477157`](https://github.com/adobe/spectrum-css/commit/a477157a27c6fe5bba3f42397438d21c0cff4ddb) Thanks [@pfulton](https://github.com/pfulton)! - fix(switch): migrate mods
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/switch/index.css b/components/switch/index.css
index 7913f290947..fbac254772b 100644
--- a/components/switch/index.css
+++ b/components/switch/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Switch {
--spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default);
@@ -20,19 +20,14 @@
--spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus);
--spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-switch-background-color: var(--spectrum-gray-300);
- --spectrum-switch-background-color-disabled: var(--spectrum-gray-300);
- --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
-
--spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default);
--spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
--spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
--spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
+ --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
--spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
--spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-switch-handle-background-color: var(--spectrum-gray-75);
--spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color);
}
diff --git a/components/switch/metadata/metadata.json b/components/switch/metadata/metadata.json
index d97f21effae..fe753e700d0 100644
--- a/components/switch/metadata/metadata.json
+++ b/components/switch/metadata/metadata.json
@@ -182,10 +182,10 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
+ "--spectrum-gray-50",
"--spectrum-gray-600",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-gray-800",
"--spectrum-gray-900",
"--spectrum-line-height-100",
@@ -203,14 +203,17 @@
"--spectrum-text-to-control-75"
],
"system-theme": [
- "--system-spectrum-switch-handle-border-color-default",
- "--system-spectrum-switch-handle-border-color-down",
- "--system-spectrum-switch-handle-border-color-focus",
- "--system-spectrum-switch-handle-border-color-hover",
- "--system-spectrum-switch-handle-border-color-selected-default",
- "--system-spectrum-switch-handle-border-color-selected-down",
- "--system-spectrum-switch-handle-border-color-selected-focus",
- "--system-spectrum-switch-handle-border-color-selected-hover"
+ "--system-switch-background-color",
+ "--system-switch-background-color-disabled",
+ "--system-switch-handle-background-color",
+ "--system-switch-handle-border-color-default",
+ "--system-switch-handle-border-color-down",
+ "--system-switch-handle-border-color-focus",
+ "--system-switch-handle-border-color-hover",
+ "--system-switch-handle-border-color-selected-default",
+ "--system-switch-handle-border-color-selected-down",
+ "--system-switch-handle-border-color-selected-focus",
+ "--system-switch-handle-border-color-selected-hover"
],
"passthroughs": [],
"high-contrast": [
diff --git a/components/switch/package.json b/components/switch/package.json
index 05fb335f77b..ece6a78ce09 100644
--- a/components/switch/package.json
+++ b/components/switch/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/switch",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS switch component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js
index 561518c4c33..fb385afc12a 100644
--- a/components/switch/stories/switch.stories.js
+++ b/components/switch/stories/switch.stories.js
@@ -39,6 +39,10 @@ export default {
size: "m",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=164-16761",
+ },
packageJson,
metadata,
},
diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js
index 4f0877d5c86..5e67a3cc8b3 100644
--- a/components/switch/stories/template.js
+++ b/components/switch/stories/template.js
@@ -6,6 +6,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Switch",
diff --git a/components/switch/themes/express.css b/components/switch/themes/express.css
index 6f4e39a2b7a..ac5198ba733 100644
--- a/components/switch/themes/express.css
+++ b/components/switch/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Switch {
--spectrum-switch-handle-border-color-default: var(--spectrum-gray-800);
--spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900);
diff --git a/components/switch/themes/spectrum-two.css b/components/switch/themes/spectrum-two.css
new file mode 100644
index 00000000000..c2ed1a192a4
--- /dev/null
+++ b/components/switch/themes/spectrum-two.css
@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Switch {
+ --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600);
+ --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700);
+ --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800);
+ --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700);
+
+ --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700);
+ --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800);
+ --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
+ --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800);
+
+ --spectrum-switch-background-color: var(--spectrum-gray-200);
+ --spectrum-switch-background-color-disabled: var(--spectrum-gray-200);
+ --spectrum-switch-handle-background-color: var(--spectrum-gray-50);
+ }
+}
diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css
index 755d004ae61..8b32e03d8f3 100644
--- a/components/switch/themes/spectrum.css
+++ b/components/switch/themes/spectrum.css
@@ -11,16 +11,14 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Switch {
- --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600);
- --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700);
- --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800);
- --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700);
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
- --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700);
- --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800);
- --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
- --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800);
+@container style(--system: legacy) {
+ .spectrum-Switch {
+ --spectrum-switch-background-color: var(--spectrum-gray-300);
+ --spectrum-switch-background-color-disabled: var(--spectrum-gray-300);
+ --spectrum-switch-handle-background-color: var(--spectrum-gray-75);
}
}
diff --git a/components/table/CHANGELOG.md b/components/table/CHANGELOG.md
index 13133217549..2076e8cc284 100644
--- a/components/table/CHANGELOG.md
+++ b/components/table/CHANGELOG.md
@@ -1,5 +1,258 @@
# Change Log
+## 7.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.15
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.18
+ - @spectrum-css/button@14.0.0-s2-foundations.17
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 7.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.14
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.17
+ - @spectrum-css/button@14.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.13
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1037169`](https://github.com/adobe/spectrum-css/commit/103716919fa4e0d43c68e67e1fd3355651c02016) Thanks [@pfulton](https://github.com/pfulton)! - Move --highcontrast references out of themes; remove remaining --mods from the themes
+
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#3040](https://github.com/adobe/spectrum-css/pull/3040) [`cf2e737`](https://github.com/adobe/spectrum-css/commit/cf2e73743b2c3d43d4c51fceeabfb99fda1ac4b5) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - Migrating --mod to index.css from infield button, logic button and table components
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.12
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.11
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.10
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.9
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.8
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.7
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.5
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.4
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.3
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.2
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.1
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
@@ -20,6 +273,12 @@
- [#3305](https://github.com/adobe/spectrum-css/pull/3305) [`092aac5`](https://github.com/adobe/spectrum-css/commit/092aac56953f4c02cd5227e3f61c6cb0b2b4e46a) Thanks [@cdransf](https://github.com/cdransf)! - Move mod declaration to satisfy lint rules. Rename table custom properties to align with lint rules.
+## 6.1.4
+
+### Patch Changes
+
+- [#3305](https://github.com/adobe/spectrum-css/pull/3305) [`092aac5`](https://github.com/adobe/spectrum-css/commit/092aac56953f4c02cd5227e3f61c6cb0b2b4e46a) Thanks [@cdransf](https://github.com/cdransf)! - Move mod declaration to satisfy lint rules. Rename table custom properties to align with lint rules.
+
## 6.1.3
### Patch Changes
diff --git a/components/table/index.css b/components/table/index.css
index 9f58a1b3265..6fcf381283c 100644
--- a/components/table/index.css
+++ b/components/table/index.css
@@ -11,71 +11,105 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
-.spectrum-Table {
- /* Size and Spacing */
- --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium);
- --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium);
+/********* HIGH CONTRAST *********/
+@media (forced-colors: active) {
+ .spectrum-Table {
+ --highcontrast-table-row-background-color: Canvas;
+ --highcontrast-table-row-text-color: CanvasText;
+ --highcontrast-table-divider-color: CanvasText;
+ --highcontrast-table-border-color: CanvasText;
+ --highcontrast-table-icon-color: CanvasText;
+ --highcontrast-table-icon-color-focus: Highlight;
- --spectrum-table-min-header-height: var(--spectrum-component-height-100);
- --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular);
- --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular);
- --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular);
+ --highcontrast-table-selected-row-background-color: Highlight;
+ --highcontrast-table-selected-row-text-color: HighlightText;
+
+ @supports (color: SelectedItem) {
+ --highcontrast-table-selected-row-background-color: SelectedItem;
+ --highcontrast-table-selected-row-text-color: SelectedItemText;
+ }
+
+ --highcontrast-table-selected-row-background-color-focus: Highlight;
+ --highcontrast-table-selected-row-text-color-focus: HighlightText;
+ --highcontrast-table-row-background-color-hover: Highlight;
+ --highcontrast-table-row-text-color-hover: HighlightText;
+
+ --highcontrast-table-section-header-text-color: Canvas;
+ --highcontrast-table-section-header-background-color: CanvasText;
+
+ --highcontrast-table-focus-indicator-color: Highlight;
+ --highcontrast-table-transition-duration: 0;
+ }
+ .spectrum-Table-cell {
+ /* Removes unstylable readability backplate. */
+ forced-color-adjust: none;
+ }
+
+ .spectrum-Table-row {
+ &:hover,
+ &:focus-visible,
+ &.is-focused {
+ .spectrum-Table-checkbox .spectrum-Checkbox-box::before {
+ outline: var(--highcontrast-table-row-text-color-hover) 1px solid;
+ }
+ }
+ }
+
+ .spectrum-Table-row.is-selected,
+ .spectrum-Table-row.is-drop-target,
+ .spectrum-Table-body.is-drop-target .spectrum-Table-row {
+ /* Ensure negative offset outline contrasts on top of SelectedItem background. */
+ --highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color);
+ --highcontrast-table-cell-focus-extra-offset: 1px;
+
+ .spectrum-Table-checkbox .spectrum-Checkbox-box::before {
+ outline: var(--highcontrast-table-selected-row-text-color) 1px solid;
+ }
+ }
+}
+
+.spectrum-Table {
--spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content);
--spectrum-table-border-radius: var(--spectrum-corner-radius-100);
--spectrum-table-border-width: var(--spectrum-table-border-divider-width);
--spectrum-table-outer-border-inline-width: var(--spectrum-table-border-divider-width);
- --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
-
--spectrum-table-default-vertical-align: top;
--spectrum-table-header-vertical-align: middle;
- /* Typography */
--spectrum-table-header-font-weight: var(--spectrum-bold-font-weight);
--spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-table-row-font-weight: var(--spectrum-regular-font-weight);
--spectrum-table-row-font-style: var(--spectrum-default-font-style);
- --spectrum-table-row-font-size: var(--spectrum-font-size-100);
--spectrum-table-row-line-height: var(--spectrum-line-height-100);
- /* General Colors */
--spectrum-table-border-color: var(--spectrum-gray-300);
--spectrum-table-divider-color: var(--spectrum-gray-300);
-
--spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
--spectrum-table-header-text-color: var(--spectrum-body-color);
-
--spectrum-table-row-background-color: var(--spectrum-gray-50);
--spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default);
- /* ----- *
- @todo Refactor or remove these properties once the RGB stripped value is available. */
+ /* @todo Refactor or remove these properties once the RGB stripped value is available. */
--spectrum-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity));
--spectrum-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized));
--spectrum-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity));
-
--spectrum-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity));
--spectrum-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover));
--spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover));
- /* ----- */
-
--spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
--spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
--spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus);
- --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover);
+ --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+ --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-key-focus);
--spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
- /* Row Selection */
- --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium);
- --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular);
-
--spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
--spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color);
@@ -88,30 +122,19 @@
--spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight);
--spectrum-table-summary-row-background-color: var(--spectrum-gray-200);
- --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium);
- --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100);
- --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100);
-
--spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight);
--spectrum-table-section-header-background-color: var(--spectrum-gray-200);
- /* Collapsible and Thumbnails */
+ /* Collapsible and thumbnails */
--spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300);
--spectrum-table-collapsible-disclosure-inline-spacing: 0px;
- --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100);
--spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
- --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular);
- --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
-
- /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341
- and for modifying emphasized/non-emphasized background colors from the root element. */
--spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color)));
--spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized)));
--spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus)));
- /* Passthrough for nested component(s) */
+ /* @passthrough */
--mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size));
&:dir(rtl) {
@@ -119,7 +142,6 @@
}
}
-/********* T-SHIRT SIZES (Regular Density) *********/
.spectrum-Table--sizeS {
/* Size and Spacing */
--spectrum-table-min-header-height: var(--spectrum-component-height-100);
@@ -152,6 +174,38 @@
--spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200);
}
+.spectrum-Table,
+.spectrum-Table--sizeM {
+ --spectrum-table-min-header-height: var(--spectrum-component-height-100);
+ --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium);
+ --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium);
+
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular);
+
+ --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
+
+ /* Typography */
+ --spectrum-table-row-font-size: var(--spectrum-font-size-100);
+
+ /* Row Selection */
+ --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium);
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular);
+
+ /* Summary Row and Section Header Row */
+ --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium);
+ --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100);
+ --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100);
+
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular);
+ --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
+}
+
.spectrum-Table--sizeL {
/* Size and Spacing */
--spectrum-table-min-header-height: var(--spectrum-component-height-200);
@@ -341,71 +395,12 @@
--mod-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100));
}
-/********* HIGH CONTRAST *********/
-@media (forced-colors: active) {
- .spectrum-Table {
- --highcontrast-table-row-background-color: Canvas;
- --highcontrast-table-row-text-color: CanvasText;
- --highcontrast-table-divider-color: CanvasText;
- --highcontrast-table-border-color: CanvasText;
- --highcontrast-table-icon-color: CanvasText;
- --highcontrast-table-icon-color-focus: Highlight;
-
- --highcontrast-table-selected-row-background-color: Highlight;
- --highcontrast-table-selected-row-text-color: HighlightText;
- --highcontrast-table-selected-row-text-color-default: HighlightText;
-
- @supports (color: SelectedItem) {
- --highcontrast-table-selected-row-background-color: SelectedItem;
- --highcontrast-table-selected-row-text-color: SelectedItemText;
- --highcontrast-table-selected-row-text-color-default: SelectedItemText;
- }
-
- --highcontrast-table-selected-row-background-color-focus: Highlight;
- --highcontrast-table-selected-row-text-color-focus: HighlightText;
- --highcontrast-table-row-background-color-hover: Highlight;
- --highcontrast-table-row-text-color-hover: HighlightText;
-
- --highcontrast-table-section-header-text-color: Canvas;
- --highcontrast-table-section-header-background-color: CanvasText;
-
- --highcontrast-table-focus-indicator-color: Highlight;
- --highcontrast-table-transition-duration: 0;
- }
-
- .spectrum-Table-cell {
- /* Removes unstylable readability backplate. */
- forced-color-adjust: none;
- }
-
- .spectrum-Table-row {
- &:hover,
- &:focus-visible,
- &.is-focused {
- .spectrum-Table-checkbox .spectrum-Checkbox-box::before {
- outline: var(--highcontrast-table-row-text-color-hover) 1px solid;
- }
- }
- }
-
- .spectrum-Table-row.is-selected,
- .spectrum-Table-row.is-drop-target,
- .spectrum-Table-body.is-drop-target .spectrum-Table-row {
- /* Ensure negative offset outline contrasts on top of SelectedItem background. */
- --highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color);
- --highcontrast-table-cell-focus-extra-offset: 1px;
-
- .spectrum-Table-checkbox .spectrum-Checkbox-box::before {
- outline: var(--highcontrast-table-selected-row-text-color) 1px solid;
- }
- }
-}
-
/********* REGULAR / DEFAULT *********/
.spectrum-Table:not(.spectrum-Table-scroller),
.spectrum-Table-main {
border-collapse: separate;
border-spacing: 0;
+ display: table;
}
.spectrum-Table-sortedIcon {
@@ -508,6 +503,7 @@
position: relative;
border: none;
border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
+ display: table-row-group;
&.is-drop-target {
/* Make sure negative offset outline is not covered by borders. */
@@ -526,6 +522,22 @@
/* Row divider lines */
.spectrum-Table-cell {
border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
+
+ /* Cells within table body */
+ box-sizing: border-box;
+ font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size));
+ font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight));
+ line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height));
+ vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align));
+ color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)));
+ background-color: var(--spectrum-table-cell-background-color);
+
+ /* block-size functions as min-block-size when using display table-cell. */
+ block-size: var(--mod-table-min-row-height, var(--spectrum-table-min-row-height));
+
+ padding-block-start: calc(var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
+ padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text));
+ padding-inline: calc(var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)));
}
/* Outside border */
@@ -549,6 +561,12 @@
/* Rounded corners */
.spectrum-Table-row {
+ /* Rows within table body */
+ position: relative;
+ transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
+ cursor: var(--mod-table-cursor-row-default, pointer);
+ border-block-start: none;
+
&:first-child .spectrum-Table-cell:first-child {
border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
}
@@ -564,51 +582,6 @@
&:last-child .spectrum-Table-cell:last-child {
border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
}
-}
-
-/* Cells within table body */
-.spectrum-Table-cell {
- box-sizing: border-box;
- font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size));
- font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight));
- line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height));
- vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align));
- color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)));
- background-color: var(--spectrum-table-cell-background-color);
-
- /* block-size functions as min-block-size when using display table-cell. */
- block-size: var(--mod-table-min-row-height, var(--spectrum-table-min-row-height));
-
- padding-block-start: calc(var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
- padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text));
- padding-inline: calc(var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)));
-}
-
-/* Focus Indicator (Ring) */
-.spectrum-Table-cell,
-.spectrum-Table-headCell {
- position: relative;
-
- &:focus-visible,
- &.is-focused {
- outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
- outline-style: solid;
- outline-color: var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))));
- outline-offset: calc((-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - var(--highcontrast-table-cell-focus-extra-offset, 0px));
- }
-}
-
-/* Cells that display a column divider (vertical border). */
-.spectrum-Table-cell--divider {
- border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
-}
-
-/* Rows within table body */
-.spectrum-Table-row {
- position: relative;
- transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
- cursor: var(--mod-table-cursor-row-default, pointer);
- border-block-start: none;
&:first-child {
/* Ensure that 'outline' will match the border-radius, when used on rows. */
@@ -642,14 +615,14 @@
&.is-selected {
--highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color);
--highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color);
- --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color);
+ --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-cell-background-color));
&:hover,
&:focus-visible,
&.is-focused {
--highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color-focus);
--highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color-focus);
- --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color-focus);
+ --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus));
}
}
@@ -675,6 +648,26 @@
}
}
+/* Focus Indicator (Ring) */
+.spectrum-Table-cell,
+.spectrum-Table-headCell {
+ position: relative;
+ display: table-cell;
+
+ &:focus-visible,
+ &.is-focused {
+ outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
+ outline-style: solid;
+ outline-color: var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))));
+ outline-offset: calc((-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - var(--highcontrast-table-cell-focus-extra-offset, 0px));
+ }
+}
+
+/* Cells that display a column divider (vertical border). */
+.spectrum-Table-cell--divider {
+ border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
+}
+
.spectrum-Table-row--summary {
--spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color)));
@@ -723,7 +716,7 @@
inline-size: var(--spectrum-checkbox-control-size-small);
/* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value
- includes the inline start padding in the adjacent cell. */
+ includes the inline start padding in the adjacent cell. */
padding-inline-end: calc(var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)));
/* Block spacing must be moved to calculated margin on the checkbox element. */
@@ -731,6 +724,7 @@
.spectrum-Table-checkbox {
--mod-checkbox-spacing: 0px;
+
min-block-size: initial;
}
@@ -747,33 +741,19 @@
/********* DIVS *********/
/* Make sure markup that uses divs instead of elements displays like a regular table. */
-.spectrum-Table:not(.spectrum-Table-scroller),
-.spectrum-Table-main {
- display: table;
-}
-
.spectrum-Table-head {
display: table-header-group;
}
-.spectrum-Table-body {
- display: table-row-group;
-}
-
.spectrum-Table-row,
.spectrum-Table-head [role="row"] {
display: table-row;
}
-.spectrum-Table-cell,
-.spectrum-Table-headCell {
- display: table-cell;
-}
-
/********* SCROLLABLE *********/
/* Wrapper that allows a scrollable body and sticky column header. */
.spectrum-Table-scroller {
- --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100)));
+ --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75)));
box-sizing: border-box;
display: inline-block;
@@ -784,15 +764,14 @@
border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
- &.spectrum-Table--quiet {
- --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100)));
- border-block-start: none;
- }
-
/* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus.
--mod-table-current-header-height should be dynamically updated with JS to match the table header height. */
scroll-padding-top: var(--mod-table-current-header-height, calc((var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width))));
+ &.spectrum-Table--quiet {
+ border-block-start: none;
+ }
+
.spectrum-Table-head {
position: sticky;
inset-block-start: 0;
diff --git a/components/table/metadata/metadata.json b/components/table/metadata/metadata.json
index 4b33650d334..a3e0709e691 100644
--- a/components/table/metadata/metadata.json
+++ b/components/table/metadata/metadata.json
@@ -9,6 +9,7 @@
".spectrum-Table--emphasized",
".spectrum-Table--quiet",
".spectrum-Table--sizeL",
+ ".spectrum-Table--sizeM",
".spectrum-Table--sizeS",
".spectrum-Table--sizeXL",
".spectrum-Table--spacious",
@@ -120,6 +121,7 @@
".spectrum-Table-thumbnailInner",
".spectrum-Table-thumbnailInner .spectrum-Table-thumbnailContent",
".spectrum-Table-thumbnailInner .spectrum-Thumbnail",
+ ".spectrum-Table.spectrum-Table--quiet",
".spectrum-Table:dir(rtl)",
".spectrum-Table:not(.spectrum-Table-scroller)",
"[dir=\"rtl\"] .spectrum-Table"
@@ -406,19 +408,19 @@
"--spectrum-font-size-75",
"--spectrum-gray-100",
"--spectrum-gray-200",
+ "--spectrum-gray-25",
"--spectrum-gray-300",
"--spectrum-gray-50",
"--spectrum-gray-700-rgb",
+ "--spectrum-gray-75",
"--spectrum-gray-900-rgb",
"--spectrum-line-height-100",
"--spectrum-logical-rotation",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-subdued-content-color-default",
"--spectrum-neutral-subdued-content-color-down",
- "--spectrum-neutral-subdued-content-color-focus",
"--spectrum-neutral-subdued-content-color-hover",
"--spectrum-neutral-subdued-content-color-key-focus",
- "--spectrum-neutral-subdued-content-focus-hover",
"--spectrum-regular-font-weight",
"--spectrum-sans-font-family-stack",
"--spectrum-spacing-300",
@@ -431,9 +433,21 @@
"--spectrum-thumbnail-size-500",
"--spectrum-thumbnail-size-700",
"--spectrum-thumbnail-size-800",
- "--spectrum-transparent-white-100"
+ "--spectrum-transparent-white-100",
+ "--spectrum-transparent-white-25"
+ ],
+ "system-theme": [
+ "--system-table-border-color",
+ "--system-table-divider-color",
+ "--system-table-header-background-color",
+ "--system-table-icon-color-focus",
+ "--system-table-icon-color-focus-hover",
+ "--system-table-quiet-header-background-color",
+ "--system-table-quiet-row-background-color",
+ "--system-table-row-background-color",
+ "--system-table-section-header-background-color",
+ "--system-table-summary-row-background-color"
],
- "system-theme": [],
"passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"],
"high-contrast": [
"--highcontrast-table-border-color",
@@ -452,7 +466,6 @@
"--highcontrast-table-selected-row-background-color",
"--highcontrast-table-selected-row-background-color-focus",
"--highcontrast-table-selected-row-text-color",
- "--highcontrast-table-selected-row-text-color-default",
"--highcontrast-table-selected-row-text-color-focus",
"--highcontrast-table-transition-duration"
]
diff --git a/components/table/package.json b/components/table/package.json
index 36ab920258b..c19e942e219 100644
--- a/components/table/package.json
+++ b/components/table/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/table",
- "version": "6.2.0",
+ "version": "7.0.0-s2-foundations.17",
"description": "The Spectrum CSS table component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js
index 6612a875fde..dee3eaaed71 100644
--- a/components/table/stories/table.stories.js
+++ b/components/table/stories/table.stories.js
@@ -111,6 +111,10 @@ export default {
],
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=54024-574",
+ },
packageJson,
metadata,
},
diff --git a/components/table/stories/template.js b/components/table/stories/template.js
index 8487cca716d..662a6e3206b 100644
--- a/components/table/stories/template.js
+++ b/components/table/stories/template.js
@@ -9,6 +9,9 @@ import { when } from "lit/directives/when.js";
import { html, literal } from "lit/static-html.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const TableRowItem = ({
rootClass = "spectrum-Table",
diff --git a/components/table/themes/express.css b/components/table/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/table/themes/express.css
+++ b/components/table/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/table/themes/spectrum-two.css b/components/table/themes/spectrum-two.css
new file mode 100644
index 00000000000..2da816e2c15
--- /dev/null
+++ b/components/table/themes/spectrum-two.css
@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Table {
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
+ --spectrum-table-border-color: var(--spectrum-gray-200);
+ --spectrum-table-divider-color: var(--spectrum-gray-200);
+ --spectrum-table-row-background-color: var(--spectrum-gray-25);
+ --spectrum-table-summary-row-background-color: var(--spectrum-gray-100);
+ --spectrum-table-section-header-background-color: var(--spectrum-gray-100);
+ --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+ --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover);
+
+ &.spectrum-Table--quiet {
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
+ --spectrum-table-row-background-color: var(--spectrum-transparent-white-25);
+ }
+ }
+}
diff --git a/components/table/themes/spectrum.css b/components/table/themes/spectrum.css
index 3b48a570c21..f0ac6a68db9 100644
--- a/components/table/themes/spectrum.css
+++ b/components/table/themes/spectrum.css
@@ -10,3 +10,25 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Table {
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
+ --spectrum-table-border-color: var(--spectrum-gray-300);
+ --spectrum-table-divider-color: var(--spectrum-gray-300);
+ --spectrum-table-row-background-color: var(--spectrum-gray-50);
+ --spectrum-table-summary-row-background-color: var(--spectrum-gray-200);
+ --spectrum-table-section-header-background-color: var(--spectrum-gray-200);
+ --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus);
+ --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover);
+ }
+
+ .spectrum-Table--quiet {
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
+ --spectrum-table-row-background-color: var(--spectrum-transparent-white-100);
+ }
+}
diff --git a/components/tabs/CHANGELOG.md b/components/tabs/CHANGELOG.md
index 12f83efcb40..da73dc03da8 100644
--- a/components/tabs/CHANGELOG.md
+++ b/components/tabs/CHANGELOG.md
@@ -1,5 +1,241 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+ - @spectrum-css/menu@8.0.0-s2-foundations.15
+
+## 6.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/menu@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3036](https://github.com/adobe/spectrum-css/pull/3036) [`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - [CSS-890]: adjusts --mods to be applied inside of index.css
+
+### Patch Changes
+
+- Updated dependencies [[`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.18
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/picker@9.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/tabs/index.css b/components/tabs/index.css
index e2f31ac8cfb..6727243f384 100644
--- a/components/tabs/index.css
+++ b/components/tabs/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Tabs {
/* Default is Medium sizing */
@@ -45,7 +45,6 @@
--spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down);
--spectrum-tabs-list-background-direction: top;
- --spectrum-tabs-divider-background-color: var(--spectrum-gray-300);
--spectrum-tabs-divider-size: var(--spectrum-border-width-200);
--spectrum-tabs-divider-border-radius: 1px;
diff --git a/components/tabs/metadata/metadata.json b/components/tabs/metadata/metadata.json
index 5ac97bf7431..544295ef045 100644
--- a/components/tabs/metadata/metadata.json
+++ b/components/tabs/metadata/metadata.json
@@ -135,24 +135,23 @@
"--spectrum-accent-content-color-key-focus",
"--spectrum-animation-duration-100",
"--spectrum-animation-ease-in-out",
- "--spectrum-bold-font-weight",
"--spectrum-border-width-200",
"--spectrum-corner-radius-100",
"--spectrum-default-font-style",
- "--spectrum-default-font-weight",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-gray-500",
"--spectrum-line-height-100",
"--spectrum-neutral-subdued-content-color-default",
"--spectrum-neutral-subdued-content-color-down",
"--spectrum-neutral-subdued-content-color-hover",
"--spectrum-neutral-subdued-content-color-key-focus",
+ "--spectrum-regular-font-weight",
"--spectrum-sans-font-family-stack",
"--spectrum-tab-item-bottom-to-text-extra-large",
"--spectrum-tab-item-bottom-to-text-large",
@@ -207,7 +206,10 @@
"--spectrum-workflow-icon-size-50",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": ["--system-spectrum-tabs-font-weight"],
+ "system-theme": [
+ "--system-tabs-divider-background-color",
+ "--system-tabs-font-weight"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-tabs-color",
diff --git a/components/tabs/package.json b/components/tabs/package.json
index ac24c27f8ae..9cd4ac9a784 100644
--- a/components/tabs/package.json
+++ b/components/tabs/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tabs",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS tabs component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js
index 38589d8e2ff..89e074daa95 100644
--- a/components/tabs/stories/tabs.stories.js
+++ b/components/tabs/stories/tabs.stories.js
@@ -113,6 +113,10 @@ export default {
actions: {
handles: [".spectrum-Tabs-item"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=48979-4695",
+ },
packageJson,
metadata,
},
diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js
index 387683f1ae9..716f45ea2e5 100644
--- a/components/tabs/stories/template.js
+++ b/components/tabs/stories/template.js
@@ -10,6 +10,9 @@ import { when } from "lit/directives/when.js";
import { html, literal } from "lit/static-html.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Tabs",
diff --git a/components/tabs/themes/express.css b/components/tabs/themes/express.css
index e958787153b..83b105f4ac8 100644
--- a/components/tabs/themes/express.css
+++ b/components/tabs/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Tabs {
--spectrum-tabs-font-weight: var(--spectrum-bold-font-weight);
}
diff --git a/components/tabs/themes/spectrum-two.css b/components/tabs/themes/spectrum-two.css
new file mode 100644
index 00000000000..71d71c3c719
--- /dev/null
+++ b/components/tabs/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Tabs {
+ --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-tabs-divider-background-color: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/tabs/themes/spectrum.css b/components/tabs/themes/spectrum.css
index 4e49c9ae85d..9ebe5e09932 100644
--- a/components/tabs/themes/spectrum.css
+++ b/components/tabs/themes/spectrum.css
@@ -11,8 +11,13 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Tabs {
--spectrum-tabs-font-weight: var(--spectrum-default-font-weight);
+ --spectrum-tabs-divider-background-color: var(--spectrum-gray-300);
}
}
diff --git a/components/tag/CHANGELOG.md b/components/tag/CHANGELOG.md
index ba8eb6feb35..bf32872ad15 100644
--- a/components/tag/CHANGELOG.md
+++ b/components/tag/CHANGELOG.md
@@ -1,5 +1,230 @@
# Change Log
+## 10.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.16
+ - @spectrum-css/avatar@8.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 10.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.15
+ - @spectrum-css/avatar@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 10.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.14
+ - @spectrum-css/avatar@8.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/avatar@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.11
+ - @spectrum-css/avatar@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/avatar@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/avatar@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/avatar@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/avatar@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/avatar@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/avatar@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/avatar@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/avatar@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/avatar@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/avatar@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/avatar@8.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 9.2.0
### Minor Changes
@@ -19,6 +244,12 @@
- [#3307](https://github.com/adobe/spectrum-css/pull/3307) [`25ddd5e`](https://github.com/adobe/spectrum-css/commit/25ddd5e62a19a8040f6c08549e447e19c0788af3) Thanks [@cdransf](https://github.com/cdransf)! - Reorder rules and custom properties to resolve lint violations.
+## 9.1.4
+
+### Patch Changes
+
+- [#3307](https://github.com/adobe/spectrum-css/pull/3307) [`25ddd5e`](https://github.com/adobe/spectrum-css/commit/25ddd5e62a19a8040f6c08549e447e19c0788af3) Thanks [@cdransf](https://github.com/cdransf)! - Reorder rules and custom properties to resolve lint violations.
+
## 9.1.3
### Patch Changes
diff --git a/components/tag/index.css b/components/tag/index.css
index be56b3c6391..3b30135deb9 100644
--- a/components/tag/index.css
+++ b/components/tag/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Tag {
/* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */
@@ -29,8 +29,6 @@
--spectrum-tag-label-line-height: var(--spectrum-line-height-100);
--spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight);
- /* selected */
- --spectrum-tag-content-color-selected: var(--spectrum-gray-50);
--spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
--spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
--spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down);
diff --git a/components/tag/metadata/metadata.json b/components/tag/metadata/metadata.json
index 79e64cf042e..10a87e4aa2c 100644
--- a/components/tag/metadata/metadata.json
+++ b/components/tag/metadata/metadata.json
@@ -226,12 +226,6 @@
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-75",
- "--spectrum-component-pill-edge-to-text-100",
- "--spectrum-component-pill-edge-to-text-200",
- "--spectrum-component-pill-edge-to-text-75",
- "--spectrum-component-pill-edge-to-visual-100",
- "--spectrum-component-pill-edge-to-visual-200",
- "--spectrum-component-pill-edge-to-visual-75",
"--spectrum-component-top-to-text-100",
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-75",
@@ -240,7 +234,6 @@
"--spectrum-component-top-to-workflow-icon-75",
"--spectrum-corner-radius-100",
"--spectrum-disabled-background-color",
- "--spectrum-disabled-border-color",
"--spectrum-disabled-content-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
@@ -248,13 +241,10 @@
"--spectrum-font-size-100",
"--spectrum-font-size-200",
"--spectrum-font-size-75",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
+ "--spectrum-gray-100",
+ "--spectrum-gray-25",
"--spectrum-gray-50",
- "--spectrum-gray-500",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-gray-800",
"--spectrum-gray-900",
"--spectrum-line-height-100",
@@ -269,18 +259,10 @@
"--spectrum-negative-content-color-down",
"--spectrum-negative-content-color-hover",
"--spectrum-negative-content-color-key-focus",
- "--spectrum-neutral-background-color-default",
- "--spectrum-neutral-background-color-down",
- "--spectrum-neutral-background-color-hover",
- "--spectrum-neutral-background-color-key-focus",
"--spectrum-neutral-background-color-selected-default",
"--spectrum-neutral-background-color-selected-down",
"--spectrum-neutral-background-color-selected-hover",
"--spectrum-neutral-background-color-selected-key-focus",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
"--spectrum-neutral-subdued-background-color-default",
"--spectrum-neutral-subdued-background-color-down",
"--spectrum-neutral-subdued-background-color-hover",
@@ -299,36 +281,37 @@
"--spectrum-workflow-icon-size-75"
],
"system-theme": [
- "--system-spectrum-tag-background-color",
- "--system-spectrum-tag-background-color-active",
- "--system-spectrum-tag-background-color-disabled",
- "--system-spectrum-tag-background-color-focus",
- "--system-spectrum-tag-background-color-hover",
- "--system-spectrum-tag-border-color",
- "--system-spectrum-tag-border-color-active",
- "--system-spectrum-tag-border-color-disabled",
- "--system-spectrum-tag-border-color-focus",
- "--system-spectrum-tag-border-color-hover",
- "--system-spectrum-tag-border-color-selected",
- "--system-spectrum-tag-border-color-selected-active",
- "--system-spectrum-tag-border-color-selected-focus",
- "--system-spectrum-tag-border-color-selected-hover",
- "--system-spectrum-tag-content-color",
- "--system-spectrum-tag-content-color-active",
- "--system-spectrum-tag-content-color-focus",
- "--system-spectrum-tag-content-color-hover",
- "--system-spectrum-tag-size-large-clear-button-spacing-inline-end",
- "--system-spectrum-tag-size-large-corner-radius",
- "--system-spectrum-tag-size-large-label-spacing-inline-end",
- "--system-spectrum-tag-size-large-spacing-inline-start",
- "--system-spectrum-tag-size-medium-clear-button-spacing-inline-end",
- "--system-spectrum-tag-size-medium-corner-radius",
- "--system-spectrum-tag-size-medium-label-spacing-inline-end",
- "--system-spectrum-tag-size-medium-spacing-inline-start",
- "--system-spectrum-tag-size-small-clear-button-spacing-inline-end",
- "--system-spectrum-tag-size-small-corner-radius",
- "--system-spectrum-tag-size-small-label-spacing-inline-end",
- "--system-spectrum-tag-size-small-spacing-inline-start"
+ "--system-tag-background-color",
+ "--system-tag-background-color-active",
+ "--system-tag-background-color-disabled",
+ "--system-tag-background-color-focus",
+ "--system-tag-background-color-hover",
+ "--system-tag-border-color",
+ "--system-tag-border-color-active",
+ "--system-tag-border-color-disabled",
+ "--system-tag-border-color-focus",
+ "--system-tag-border-color-hover",
+ "--system-tag-border-color-selected",
+ "--system-tag-border-color-selected-active",
+ "--system-tag-border-color-selected-focus",
+ "--system-tag-border-color-selected-hover",
+ "--system-tag-content-color",
+ "--system-tag-content-color-active",
+ "--system-tag-content-color-focus",
+ "--system-tag-content-color-hover",
+ "--system-tag-content-color-selected",
+ "--system-tag-size-large-clear-button-spacing-inline-end",
+ "--system-tag-size-large-corner-radius",
+ "--system-tag-size-large-label-spacing-inline-end",
+ "--system-tag-size-large-spacing-inline-start",
+ "--system-tag-size-medium-clear-button-spacing-inline-end",
+ "--system-tag-size-medium-corner-radius",
+ "--system-tag-size-medium-label-spacing-inline-end",
+ "--system-tag-size-medium-spacing-inline-start",
+ "--system-tag-size-small-clear-button-spacing-inline-end",
+ "--system-tag-size-small-corner-radius",
+ "--system-tag-size-small-label-spacing-inline-end",
+ "--system-tag-size-small-spacing-inline-start"
],
"passthroughs": [
"--mod-avatar-opacity-disabled",
diff --git a/components/tag/package.json b/components/tag/package.json
index ce75b5d77be..7cc09bd720d 100644
--- a/components/tag/package.json
+++ b/components/tag/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tag",
- "version": "9.2.0",
+ "version": "10.0.0-s2-foundations.15",
"description": "The Spectrum CSS tags component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js
index 9192961cbfb..9513c7719d7 100644
--- a/components/tag/stories/tag.stories.js
+++ b/components/tag/stories/tag.stories.js
@@ -94,6 +94,10 @@ export default {
actions: {
handles: [],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=715-2687",
+ },
packageJson,
metadata,
},
diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js
index ee4b244dd43..90c72435bae 100644
--- a/components/tag/stories/template.js
+++ b/components/tag/stories/template.js
@@ -9,6 +9,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Tag",
diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css
index c3f2f0061c6..7c2c2e67303 100644
--- a/components/tag/themes/express.css
+++ b/components/tag/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Tag {
/* border */
--spectrum-tag-background-color: transparent;
diff --git a/components/tag/themes/spectrum-two.css b/components/tag/themes/spectrum-two.css
new file mode 100644
index 00000000000..f9c51730f48
--- /dev/null
+++ b/components/tag/themes/spectrum-two.css
@@ -0,0 +1,56 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Tag {
+ --spectrum-tag-background-color: var(--spectrum-gray-50);
+ --spectrum-tag-background-color-hover: var(--spectrum-gray-50);
+ --spectrum-tag-background-color-active: var(--spectrum-gray-100);
+ --spectrum-tag-background-color-focus: var(--spectrum-gray-50);
+
+ --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
+ --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
+ --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
+
+ --spectrum-tag-border-color: var(--spectrum-gray-700);
+ --spectrum-tag-border-color-hover: var(--spectrum-gray-800);
+ --spectrum-tag-border-color-active: var(--spectrum-gray-900);
+ --spectrum-tag-border-color-focus: var(--spectrum-gray-800);
+
+ --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+ --spectrum-tag-content-color-selected: var(--spectrum-gray-25);
+
+ --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
+ --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
+ --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
+ --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
+
+ /* disabled variant */
+ --spectrum-tag-border-color-disabled: transparent;
+ --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
+
+ /* tokens based on theme and t-shirt size */
+ --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
+ --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
+ --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
+ --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
+ --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
+ --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
+ --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
+ --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
+ --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
+ }
+}
diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css
index 27c05be7bdd..171968e1f50 100644
--- a/components/tag/themes/spectrum.css
+++ b/components/tag/themes/spectrum.css
@@ -11,50 +11,17 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Tag {
- /* border */
- --spectrum-tag-border-color: var(--spectrum-gray-700);
- --spectrum-tag-border-color-hover: var(--spectrum-gray-800);
- --spectrum-tag-border-color-active: var(--spectrum-gray-900);
- --spectrum-tag-border-color-focus: var(--spectrum-gray-800);
+/* @combine .spectrum.spectrum--legacy */
- /* corner border radius */
- --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
+@import "./spectrum-two.css";
- /* background */
+@container style(--system: legacy) {
+ .spectrum-Tag {
--spectrum-tag-background-color: var(--spectrum-gray-75);
--spectrum-tag-background-color-hover: var(--spectrum-gray-75);
--spectrum-tag-background-color-active: var(--spectrum-gray-200);
--spectrum-tag-background-color-focus: var(--spectrum-gray-75);
- /* content color */
- --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-
- /* selected variant */
- --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
- --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
- --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
- --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-
- /* disabled variant */
- --spectrum-tag-border-color-disabled: transparent;
- --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
-
- /* tokens based on theme and t-shirt size */
- --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
- --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
- --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
- --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
- --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
- --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
- --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
- --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
- --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
+ --spectrum-tag-content-color-selected: var(--spectrum-gray-50);
}
}
diff --git a/components/taggroup/CHANGELOG.md b/components/taggroup/CHANGELOG.md
index d9369d0544e..a464eb7298f 100644
--- a/components/taggroup/CHANGELOG.md
+++ b/components/taggroup/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 6.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.15
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/tag@10.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/taggroup/index.css b/components/taggroup/index.css
index 22422bae7f5..c8ad1c1551e 100644
--- a/components/taggroup/index.css
+++ b/components/taggroup/index.css
@@ -11,14 +11,12 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-TagGroup {
--spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75);
--spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75);
-}
-.spectrum-TagGroup {
display: inline-flex;
flex-wrap: wrap;
margin: 0;
diff --git a/components/taggroup/package.json b/components/taggroup/package.json
index f3cbe784c7a..8aba9a40423 100644
--- a/components/taggroup/package.json
+++ b/components/taggroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/taggroup",
- "version": "5.2.0",
+ "version": "6.0.0-s2-foundations.15",
"description": "The Spectrum CSS tag group component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js
index 9b78a490d95..fdd524ad053 100644
--- a/components/taggroup/stories/taggroup.stories.js
+++ b/components/taggroup/stories/taggroup.stories.js
@@ -55,6 +55,10 @@ export default {
...(TagStories.parameters.actions.handles ?? [])
],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=45924-645",
+ },
packageJson,
metadata,
},
diff --git a/components/taggroup/stories/template.js b/components/taggroup/stories/template.js
index 20035de5cda..da04d572a71 100644
--- a/components/taggroup/stories/template.js
+++ b/components/taggroup/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-TagGroup",
@@ -15,22 +18,24 @@ export const Template = ({
customStyles = {},
size = "m",
...args
-} = {}, context = {}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- style=${styleMap(customStyles)}
- role="list"
- aria-label=${ifDefined(ariaLabel)}
- >
- ${items.map((i) => Tag({
- ...i,
- ...args,
- size,
- hasClearButton: isRemovable,
- customClasses: [`${rootClass}-item`],
- }, context))}
-
-`;
+} = {}, context = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ style=${styleMap(customStyles)}
+ role="list"
+ aria-label=${ifDefined(ariaLabel)}
+ >
+ ${items.map((i) => Tag({
+ ...i,
+ ...args,
+ size,
+ hasClearButton: isRemovable,
+ customClasses: [`${rootClass}-item`],
+ }, context))}
+
+ `;
+};
diff --git a/components/taggroup/themes/express.css b/components/taggroup/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/taggroup/themes/express.css
+++ b/components/taggroup/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/taggroup/themes/spectrum-two.css b/components/taggroup/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/taggroup/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/taggroup/themes/spectrum.css b/components/taggroup/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/taggroup/themes/spectrum.css
+++ b/components/taggroup/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/textfield/CHANGELOG.md b/components/textfield/CHANGELOG.md
index 5eee38713d5..0ff51ebaf14 100644
--- a/components/textfield/CHANGELOG.md
+++ b/components/textfield/CHANGELOG.md
@@ -1,5 +1,206 @@
# Change Log
+## 8.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.15
+
+## 8.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 8.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9294678`](https://github.com/adobe/spectrum-css/commit/929467879ebedb5601f54509d95f3dcd97681607) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-306]: Reintroduces previous changes in textfield that had been reverted, including adjusted line height, cleanup of legacy vendor prefixes and normalization (#2771), a fix for focus pseudo pointer events (#2761)
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4) Thanks [@pfulton](https://github.com/pfulton)! - Fix line-height discrepency
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/helptext@6.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/helptext@6.0.0-s2-foundations.0
+
## 7.3.0
### Minor Changes
diff --git a/components/textfield/index.css b/components/textfield/index.css
index e3bb87dded1..49f83fa980e 100644
--- a/components/textfield/index.css
+++ b/components/textfield/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Textfield {
/* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */
@@ -75,9 +75,6 @@
--spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
--spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- /*** Colors ***/
- --spectrum-textfield-background-color: var(--spectrum-gray-50);
-
/* Text Colors */
--spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover);
diff --git a/components/textfield/metadata/metadata.json b/components/textfield/metadata/metadata.json
index 375c277382e..6f2eec4e8a1 100644
--- a/components/textfield/metadata/metadata.json
+++ b/components/textfield/metadata/metadata.json
@@ -228,7 +228,6 @@
"global": [
"--spectrum-animation-duration-100",
"--spectrum-border-width-100",
- "--spectrum-border-width-200",
"--spectrum-character-count-to-field-quiet-extra-large",
"--spectrum-character-count-to-field-quiet-large",
"--spectrum-character-count-to-field-quiet-medium",
@@ -292,8 +291,7 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-400",
- "--spectrum-gray-50",
+ "--spectrum-gray-25",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-800",
@@ -332,12 +330,13 @@
"--spectrum-workflow-icon-size-75"
],
"system-theme": [
- "--system-spectrum-textfield-border-color",
- "--system-spectrum-textfield-border-color-focus",
- "--system-spectrum-textfield-border-color-focus-hover",
- "--system-spectrum-textfield-border-color-hover",
- "--system-spectrum-textfield-border-color-keyboard-focus",
- "--system-spectrum-textfield-border-width"
+ "--system-textfield-background-color",
+ "--system-textfield-border-color",
+ "--system-textfield-border-color-focus",
+ "--system-textfield-border-color-focus-hover",
+ "--system-textfield-border-color-hover",
+ "--system-textfield-border-color-keyboard-focus",
+ "--system-textfield-border-width"
],
"passthroughs": [],
"high-contrast": [
diff --git a/components/textfield/package.json b/components/textfield/package.json
index 2f3c57a2f8d..e682a6f9def 100644
--- a/components/textfield/package.json
+++ b/components/textfield/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/textfield",
- "version": "7.3.0",
+ "version": "8.0.0-s2-foundations.16",
"description": "The Spectrum CSS textfield component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js
index cdb23da0a80..5f20b0abb86 100644
--- a/components/textfield/stories/template.js
+++ b/components/textfield/stories/template.js
@@ -10,6 +10,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
/**
* @typedef API
@@ -148,6 +151,7 @@ export const Template = ({
${when(displayLabel, () => FieldLabel({
size,
label: labelText,
+ isDisabled,
}, context))}
${when(typeof characterCount !== "undefined", () => html`
${characterCount} `)}
diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js
index 6ab8b75a637..090bcf4a4d9 100644
--- a/components/textfield/stories/textarea.stories.js
+++ b/components/textfield/stories/textarea.stories.js
@@ -23,6 +23,10 @@ export default {
parameters: {
packageJson,
metadata,
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=725-2579",
+ },
}
};
diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js
index e86ce3a5d4f..2cab6a8058c 100644
--- a/components/textfield/stories/textfield.stories.js
+++ b/components/textfield/stories/textfield.stories.js
@@ -136,6 +136,10 @@ export default {
"focusout .spectrum-Textfield"
],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=717-2629",
+ },
packageJson,
metadata,
},
diff --git a/components/textfield/themes/express.css b/components/textfield/themes/express.css
index 5bb5ddc44da..31de0c5779a 100644
--- a/components/textfield/themes/express.css
+++ b/components/textfield/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Textfield {
--spectrum-textfield-border-color: var(--spectrum-gray-400);
--spectrum-textfield-border-color-hover: var(--spectrum-gray-500);
diff --git a/tokens/dist/css/express/custom-large-vars.css b/components/textfield/themes/spectrum-two.css
similarity index 52%
rename from tokens/dist/css/express/custom-large-vars.css
rename to components/textfield/themes/spectrum-two.css
index e91e617d134..5083309c314 100644
--- a/tokens/dist/css/express/custom-large-vars.css
+++ b/components/textfield/themes/spectrum-two.css
@@ -11,13 +11,17 @@
* governing permissions and limitations under the License.
*/
-.spectrum--express.spectrum--large{
- --spectrum-colorwheel-path:"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
- --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
+@container style(--system: spectrum) {
+ .spectrum-Textfield {
+ --spectrum-textfield-border-color: var(--spectrum-gray-500);
+ --spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
+ --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
+ --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
- --spectrum-dialog-confirm-border-radius:8px;
+ --spectrum-textfield-border-width: var(--spectrum-border-width-100);
- --spectrum-dial-border-radius:15px;
-
- --spectrum-assetcard-focus-ring-border-radius:12px;
+ /*** Colors ***/
+ --spectrum-textfield-background-color: var(--spectrum-gray-25);
+ }
}
diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css
index a4854e02352..c224d267667 100644
--- a/components/textfield/themes/spectrum.css
+++ b/components/textfield/themes/spectrum.css
@@ -11,14 +11,12 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Textfield {
- --spectrum-textfield-border-color: var(--spectrum-gray-500);
- --spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
- --spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
- --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
- --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
- --spectrum-textfield-border-width: var(--spectrum-border-width-100);
+@container style(--system: legacy) {
+ .spectrum-Textfield {
+ --spectrum-textfield-background-color: var(--spectrum-gray-50);
}
}
diff --git a/components/thumbnail/CHANGELOG.md b/components/thumbnail/CHANGELOG.md
index ad2cf605bf7..53390c05155 100644
--- a/components/thumbnail/CHANGELOG.md
+++ b/components/thumbnail/CHANGELOG.md
@@ -1,5 +1,221 @@
# Change Log
+## 7.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e) Thanks [@pfulton](https://github.com/pfulton)! - Bring in the latest S2 foundations release including updated corner rounding approach, colors, and icon spacing. Remapped corner rounding values for the -75 token to a static 2px value for spectrum themes.
+
+### Patch Changes
+
+- Updated dependencies [[`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.25
+
+## 7.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f14c3be`](https://github.com/adobe/spectrum-css/commit/f14c3bee4ea3b3ad259ce2fa9c3f58fa49febf9d) Thanks [@pfulton](https://github.com/pfulton)! - ProgressBar/Meter
+
+ - Fix bug by reverting "background-color" for track fill back to "background".
+
+ Thumbnail
+
+ - Remove unused "vertical align" property.
+
+## 7.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.15
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.0
+
## 6.3.0
### Minor Changes
diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css
index ee8b55d11f0..7b32f16f179 100644
--- a/components/thumbnail/index.css
+++ b/components/thumbnail/index.css
@@ -11,30 +11,8 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
-.spectrum-Thumbnail {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
-
- --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75);
- --spectrum-thumbnail-border-width: var(--spectrum-border-width-100);
-
- /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
- --spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity));
- --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400);
- --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white);
- --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100);
- --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500);
-
- --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200);
- --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800);
-
- --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
-}
.spectrum-Thumbnail--size50 {
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50);
@@ -60,6 +38,7 @@
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400);
}
+.spectrum-Thumbnail,
.spectrum-Thumbnail--size500 {
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
}
@@ -85,6 +64,24 @@
}
.spectrum-Thumbnail {
+ --spectrum-thumbnail-border-width: var(--spectrum-border-width-100);
+
+ /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
+ --spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity));
+ --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400);
+ --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white);
+ --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100);
+ --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500);
+
+ --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200);
+ --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800);
+
+ --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
+
position: relative;
margin: 0;
padding: 0;
@@ -95,6 +92,9 @@
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+ overflow: hidden;
+ z-index: 0;
+
&::before {
content: "";
z-index: 2;
@@ -130,9 +130,6 @@
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
}
}
-
- overflow: hidden;
- z-index: 0;
}
.spectrum-Thumbnail-layer {
@@ -179,8 +176,8 @@
.spectrum-Thumbnail-image {
position: relative;
- max-block-size: 100%;
max-inline-size: 100%;
+ max-block-size: 100%;
z-index: 1;
}
diff --git a/components/thumbnail/metadata/metadata.json b/components/thumbnail/metadata/metadata.json
index 3aa25c510f5..201fab85385 100644
--- a/components/thumbnail/metadata/metadata.json
+++ b/components/thumbnail/metadata/metadata.json
@@ -79,7 +79,6 @@
"--spectrum-border-width-100",
"--spectrum-border-width-200",
"--spectrum-border-width-400",
- "--spectrum-corner-radius-75",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
@@ -87,7 +86,7 @@
"--spectrum-gray-800-rgb",
"--spectrum-white"
],
- "system-theme": [],
+ "system-theme": ["--system-thumbnail-border-radius"],
"passthroughs": [],
"high-contrast": [
"--highcontrast-thumbnail-border-color",
diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json
index adaebfbe996..720c0435758 100644
--- a/components/thumbnail/package.json
+++ b/components/thumbnail/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/thumbnail",
- "version": "6.3.0",
+ "version": "7.0.0-s2-foundations.17",
"description": "The Spectrum CSS thumbnail component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js
index 2b40d8e1015..aa476ea722b 100644
--- a/components/thumbnail/stories/template.js
+++ b/components/thumbnail/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Thumbnail",
diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js
index f68d07e1c4a..be057b1e0cf 100644
--- a/components/thumbnail/stories/thumbnail.stories.js
+++ b/components/thumbnail/stories/thumbnail.stories.js
@@ -88,6 +88,10 @@ export default {
actions: {
handles: [],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=29951-634",
+ },
packageJson,
metadata,
},
diff --git a/components/thumbnail/themes/express.css b/components/thumbnail/themes/express.css
index 3c392c9ea49..9fd550418f2 100644
--- a/components/thumbnail/themes/express.css
+++ b/components/thumbnail/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
diff --git a/components/thumbnail/themes/spectrum-two.css b/components/thumbnail/themes/spectrum-two.css
new file mode 100644
index 00000000000..4cd647afd85
--- /dev/null
+++ b/components/thumbnail/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Thumbnail {
+ --spectrum-thumbnail-border-radius: 2px;
+ }
+}
diff --git a/components/thumbnail/themes/spectrum.css b/components/thumbnail/themes/spectrum.css
index 3b48a570c21..b1abf324653 100644
--- a/components/thumbnail/themes/spectrum.css
+++ b/components/thumbnail/themes/spectrum.css
@@ -10,3 +10,13 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Thumbnail {
+ --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75);
+ }
+}
diff --git a/components/toast/CHANGELOG.md b/components/toast/CHANGELOG.md
index f132046b85a..a057ab67286 100644
--- a/components/toast/CHANGELOG.md
+++ b/components/toast/CHANGELOG.md
@@ -1,5 +1,230 @@
# Change Log
+## 11.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.16
+ - @spectrum-css/button@14.0.0-s2-foundations.17
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 11.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.15
+ - @spectrum-css/button@14.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 11.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.14
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 11.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.12
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 11.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.11
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 11.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.10
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 11.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.9
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 11.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.8
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 11.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.7
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 11.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 11.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.5
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 11.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.4
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 11.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.3
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 11.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.2
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 11.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.1
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 11.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.0
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 10.3.0
### Minor Changes
diff --git a/components/toast/index.css b/components/toast/index.css
index 5c1a6c0f40c..68af58837a7 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Toast {
/* Hardcoded variables */
@@ -50,14 +50,11 @@
--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
/* Color */
-
--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
--spectrum-toast-text-and-icon-color: var(--spectrum-white);
-
- --spectrum-toast-divider-color: var(--spectrum-transparent-white-300);
}
@media (forced-colors: active) {
diff --git a/components/toast/metadata/metadata.json b/components/toast/metadata/metadata.json
index b186fd9d8ef..333e84c2afb 100644
--- a/components/toast/metadata/metadata.json
+++ b/components/toast/metadata/metadata.json
@@ -90,17 +90,19 @@
"--spectrum-informative-background-color-default",
"--spectrum-line-height-100",
"--spectrum-negative-background-color-default",
- "--spectrum-neutral-background-color-default",
"--spectrum-neutral-subdued-background-color-default",
"--spectrum-positive-background-color-default",
"--spectrum-regular-font-weight",
"--spectrum-spacing-100",
"--spectrum-spacing-300",
"--spectrum-text-to-visual-100",
- "--spectrum-transparent-white-300",
+ "--spectrum-transparent-white-400",
"--spectrum-white"
],
- "system-theme": ["--system-spectrum-toast-background-color-default"],
+ "system-theme": [
+ "--system-toast-background-color-default",
+ "--system-toast-divider-color"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-toast-background-color-default",
diff --git a/components/toast/package.json b/components/toast/package.json
index 1a5e93333e8..a225d27dbdb 100644
--- a/components/toast/package.json
+++ b/components/toast/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/toast",
- "version": "10.3.0",
+ "version": "11.0.0-s2-foundations.15",
"description": "The Spectrum CSS toast component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js
index 6bf43215408..89d459dbf0a 100644
--- a/components/toast/stories/template.js
+++ b/components/toast/stories/template.js
@@ -9,6 +9,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Toast",
diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js
index 3359f4ad692..62989ee2d70 100644
--- a/components/toast/stories/toast.stories.js
+++ b/components/toast/stories/toast.stories.js
@@ -49,6 +49,10 @@ export default {
handles: ["click .spectrum-Toast button"],
},
packageJson,
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=2666-4482",
+ },
metadata,
},
};
diff --git a/components/toast/themes/express.css b/components/toast/themes/express.css
index ab3c76a48eb..2de113b03ed 100644
--- a/components/toast/themes/express.css
+++ b/components/toast/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Toast {
--spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default);
}
diff --git a/components/toast/themes/spectrum-two.css b/components/toast/themes/spectrum-two.css
new file mode 100644
index 00000000000..1097d457299
--- /dev/null
+++ b/components/toast/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Toast {
+ --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+ --spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
+ }
+}
diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css
index e741ff3c6cc..a843b40a646 100644
--- a/components/toast/themes/spectrum.css
+++ b/components/toast/themes/spectrum.css
@@ -11,8 +11,12 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Toast {
- --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
- }
+ --spectrum-toast-divider-color: var(--spectrum-transparent-white-300);
+ }
}
diff --git a/components/tooltip/CHANGELOG.md b/components/tooltip/CHANGELOG.md
index 7897fbb801c..fe06ea1f6bf 100644
--- a/components/tooltip/CHANGELOG.md
+++ b/components/tooltip/CHANGELOG.md
@@ -1,5 +1,198 @@
# Change Log
+## 7.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
diff --git a/components/tooltip/index.css b/components/tooltip/index.css
index 52cc8832746..3499ec9b60a 100644
--- a/components/tooltip/index.css
+++ b/components/tooltip/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/overlay.css";
.spectrum-Tooltip {
@@ -77,11 +77,11 @@
}
.spectrum-Tooltip-tip {
- forced-color-adjust: none;
--highcontrast-tooltip-background-color-default: CanvasText;
--highcontrast-tooltip-background-color-informative: CanvasText;
--highcontrast-tooltip-background-color-positive: CanvasText;
--highcontrast-tooltip-background-color-negative: CanvasText;
+ forced-color-adjust: none;
}
}
diff --git a/components/tooltip/metadata/metadata.json b/components/tooltip/metadata/metadata.json
index 8f711735341..7f6d6d0b94d 100644
--- a/components/tooltip/metadata/metadata.json
+++ b/components/tooltip/metadata/metadata.json
@@ -384,7 +384,6 @@
"--spectrum-informative-background-color-default",
"--spectrum-line-height-100",
"--spectrum-negative-background-color-default",
- "--spectrum-neutral-background-color-default",
"--spectrum-neutral-subdued-background-color-default",
"--spectrum-positive-background-color-default",
"--spectrum-regular-font-weight",
@@ -392,7 +391,7 @@
"--spectrum-white",
"--spectrum-workflow-icon-size-50"
],
- "system-theme": ["--system-spectrum-tooltip-backgound-color-default-neutral"],
+ "system-theme": ["--system-tooltip-backgound-color-default-neutral"],
"passthroughs": [],
"high-contrast": [
"--highcontrast-tooltip-background-color-default",
diff --git a/components/tooltip/package.json b/components/tooltip/package.json
index 63ff8df81c3..096503ce669 100644
--- a/components/tooltip/package.json
+++ b/components/tooltip/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tooltip",
- "version": "6.2.0",
+ "version": "7.0.0-s2-foundations.15",
"description": "The Spectrum CSS tooltip component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js
index 4098beb8b73..5c5c260f4d6 100644
--- a/components/tooltip/stories/template.js
+++ b/components/tooltip/stories/template.js
@@ -7,6 +7,9 @@ import { when } from "lit/directives/when.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Tooltip",
diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js
index 7cff3e7e3d2..83554506e6b 100644
--- a/components/tooltip/stories/tooltip.stories.js
+++ b/components/tooltip/stories/tooltip.stories.js
@@ -90,6 +90,10 @@ export default {
label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=2591-4482",
+ },
packageJson,
metadata,
},
diff --git a/components/tooltip/themes/express.css b/components/tooltip/themes/express.css
index c49466f84fe..ec00162e91a 100644
--- a/components/tooltip/themes/express.css
+++ b/components/tooltip/themes/express.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Tooltip {
--spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default);
}
diff --git a/components/tooltip/themes/spectrum-two.css b/components/tooltip/themes/spectrum-two.css
new file mode 100644
index 00000000000..42b423e3448
--- /dev/null
+++ b/components/tooltip/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Tooltip {
+ --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
+ }
+}
diff --git a/components/tooltip/themes/spectrum.css b/components/tooltip/themes/spectrum.css
index e0a55504823..3d81bc564b5 100644
--- a/components/tooltip/themes/spectrum.css
+++ b/components/tooltip/themes/spectrum.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Tooltip {
- --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
- }
-}
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/tray/CHANGELOG.md b/components/tray/CHANGELOG.md
index 860a9ed8676..f49e0ca4145 100644
--- a/components/tray/CHANGELOG.md
+++ b/components/tray/CHANGELOG.md
@@ -1,5 +1,262 @@
# Change Log
+## 4.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.15
+ - @spectrum-css/button@14.0.0-s2-foundations.17
+ - @spectrum-css/dialog@11.0.0-s2-foundations.15
+ - @spectrum-css/modal@6.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 4.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.14
+ - @spectrum-css/button@14.0.0-s2-foundations.16
+ - @spectrum-css/dialog@11.0.0-s2-foundations.14
+ - @spectrum-css/modal@6.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/dialog@11.0.0-s2-foundations.13
+ - @spectrum-css/modal@6.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/dialog@11.0.0-s2-foundations.12
+ - @spectrum-css/modal@6.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/dialog@11.0.0-s2-foundations.11
+ - @spectrum-css/modal@6.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/dialog@11.0.0-s2-foundations.10
+ - @spectrum-css/modal@6.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/dialog@11.0.0-s2-foundations.9
+ - @spectrum-css/modal@6.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/dialog@11.0.0-s2-foundations.8
+ - @spectrum-css/modal@6.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/dialog@11.0.0-s2-foundations.7
+ - @spectrum-css/modal@6.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/dialog@11.0.0-s2-foundations.6
+ - @spectrum-css/modal@6.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/dialog@11.0.0-s2-foundations.5
+ - @spectrum-css/modal@6.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/dialog@11.0.0-s2-foundations.4
+ - @spectrum-css/modal@6.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/dialog@11.0.0-s2-foundations.3
+ - @spectrum-css/modal@6.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/dialog@11.0.0-s2-foundations.2
+ - @spectrum-css/modal@6.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/dialog@11.0.0-s2-foundations.1
+ - @spectrum-css/modal@6.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/modal@6.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/dialog@11.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 3.2.0
### Minor Changes
diff --git a/components/tray/index.css b/components/tray/index.css
index 458189a0083..76729898c04 100644
--- a/components/tray/index.css
+++ b/components/tray/index.css
@@ -11,10 +11,20 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
+
+.spectrum-Tray-wrapper {
+ inset-inline-start: 0;
+
+ /* Positioned at the bottom of the window */
+ position: fixed;
+ inset-block-end: 0;
+ display: flex;
+ justify-content: center;
+ inline-size: 100%;
+}
.spectrum-Tray {
- /* Placeholder tokens */
--spectrum-tray-exit-animation-delay: 0ms;
--spectrum-tray-entry-animation-delay: 160ms;
@@ -29,20 +39,7 @@
--spectrum-tray-corner-radius: var(--spectrum-corner-radius-100);
--spectrum-tray-background-color: var(--spectrum-background-layer-2-color);
-}
-.spectrum-Tray-wrapper {
- inset-inline-start: 0;
-
- /* Positioned at the bottom of the window */
- position: fixed;
- inset-block-end: 0;
- display: flex;
- justify-content: center;
- inline-size: 100%;
-}
-
-.spectrum-Tray {
--mod-modal-max-width: 100%;
/* Default to full width when the viewport is in portrait orientation */
@@ -62,18 +59,13 @@
transform: translateY(100%);
/* Exit animations */
- transition:
- opacity var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(0.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)),
- visibility var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) linear calc(var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)) + var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration))),
- transform var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(0.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay));
+ transition: opacity var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(0.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)), visibility var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) linear calc(var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)) + var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration))), transform var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(0.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay));
background-color: var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-tray-background-color)));
&.is-open {
/* Entry animations */
- transition:
- transform var(--mod-tray-entry-animation-duration, var(--spectrum-tray-entry-animation-duration)) cubic-bezier(0, 0, 0.4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay)),
- opacity var(--spectrum-tray-entry-animation-duration, var(--mod-tray-entry-animation-duration)) cubic-bezier(0, 0, 0.4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay));
+ transition: transform var(--mod-tray-entry-animation-duration, var(--spectrum-tray-entry-animation-duration)) cubic-bezier(0, 0, 0.4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay)), opacity var(--spectrum-tray-entry-animation-duration, var(--mod-tray-entry-animation-duration)) cubic-bezier(0, 0, 0.4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay));
transform: translateY(0);
}
}
diff --git a/components/tray/package.json b/components/tray/package.json
index 2f18a40b63a..b82d5f6ea0d 100644
--- a/components/tray/package.json
+++ b/components/tray/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tray",
- "version": "3.2.0",
+ "version": "4.0.0-s2-foundations.15",
"description": "The Spectrum CSS tray component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/tray/stories/template.js b/components/tray/stories/template.js
index 2c3bec83c38..2f1d0421c4c 100644
--- a/components/tray/stories/template.js
+++ b/components/tray/stories/template.js
@@ -5,6 +5,9 @@ import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Tray",
diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js
index deda4258f1d..b0cd60e40a1 100644
--- a/components/tray/stories/tray.stories.js
+++ b/components/tray/stories/tray.stories.js
@@ -67,5 +67,6 @@ WithForcedColors.parameters = {
chromatic: {
forcedColors: "active",
modes: disableDefaultModes,
+ viewport: "mobile2",
},
};
diff --git a/components/tray/themes/express.css b/components/tray/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/tray/themes/express.css
+++ b/components/tray/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/tray/themes/spectrum-two.css b/components/tray/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/tray/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/tray/themes/spectrum.css b/components/tray/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/tray/themes/spectrum.css
+++ b/components/tray/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/treeview/CHANGELOG.md b/components/treeview/CHANGELOG.md
index e5f057b1432..a0d24ad0f2f 100644
--- a/components/treeview/CHANGELOG.md
+++ b/components/treeview/CHANGELOG.md
@@ -1,5 +1,225 @@
# Change Log
+## 11.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+### Patch Changes
+
+- Updated dependencies [[`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.17
+
+## 11.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 11.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 11.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3036](https://github.com/adobe/spectrum-css/pull/3036) [`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - [CSS-890]: adjusts --mods to be applied inside of index.css
+
+### Patch Changes
+
+- Updated dependencies [[`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.18
+
+## 11.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 11.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 11.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 11.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 11.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 11.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 11.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 11.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 11.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 11.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 11.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 11.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 11.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.0
+
## 10.4.0
### Minor Changes
diff --git a/components/treeview/index.css b/components/treeview/index.css
index 1e9b9b35cb1..41532fb288c 100644
--- a/components/treeview/index.css
+++ b/components/treeview/index.css
@@ -11,58 +11,46 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
-.spectrum-TreeView {
- --spectrum-treeview-line-height: var(--spectrum-line-height-200);
- --spectrum-treeview-margin-block: 1em;
- --spectrum-treeview-font-size: var(--spectrum-font-size-100);
-
- --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100);
- --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium);
-
- --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100);
- --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100);
-
- --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium);
- --spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100);
- --spectrum-treeview-heading-color: var(--spectrum-heading-color);
-
- --spectrum-treeview-item-border-size: var(--spectrum-border-width-200);
- --spectrum-treeview-item-border-size-selected: 1px;
- --spectrum-treeview-item-border-radius: 0px;
-
- --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800);
- --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700);
-
- --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200);
- --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200);
+@media (forced-colors: active) {
+ .spectrum-TreeView {
+ --highcontrast-treeview-item-background-color-selected: Highlight;
+ --highcontrast-treeview-item-border-color-selected: Highlight;
+ --highcontrast-treeview-item-text-color-selected: HighlightText;
+ --highcontrast-treeview-item-icon-color-selected: HighlightText;
- --spectrum-treeview-item-border-color-quiet-selected: transparent;
+ --highcontrast-treeview-item-icon-color: LinkText;
+ --highcontrast-treeview-item-text-color: LinkText;
- --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75);
- --spectrum-treeview-item-icon-color: var(--spectrum-gray-700);
- --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900);
- --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900);
- --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900);
- --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color);
+ --highcontrast-treeview-item-background-color-focus: Highlight;
+ --highcontrast-treeview-item-text-color-focus: HighlightText;
+ --highcontrast-treeview-item-border-color-focus: CanvasText;
+ --highcontrast-treeview-item-icon-color-focus: HighlightText;
- --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default);
- --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900);
- --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500);
- --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900);
- --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900);
+ --highcontrast-treeview-item-background-color-disabled: Canvas;
+ --highcontrast-treeview-item-text-color-disabled: GrayText;
+ --highcontrast-treeview-item-icon-color-disabled: GrayText;
- --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100));
- --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium);
+ --highcontrast-treeview-heading-color: CanvasText;
+ }
- --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px);
+ @supports (color: SelectedItem) {
+ .spectrum-TreeView {
+ --highcontrast-treeview-item-background-color-selected: SelectedItem;
+ --highcontrast-treeview-item-border-color-selected: SelectedItem;
+ --highcontrast-treeview-item-text-color-selected: SelectedItemText;
+ --highcontrast-treeview-item-icon-color-selected: SelectedItemText;
+ }
+ }
- --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100);
+ .spectrum-TreeView-itemLabel {
+ forced-color-adjust: none;
+ background: transparent;
+ }
- &:dir(rtl) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ .spectrum-TreeView-itemLink::before {
+ forced-color-adjust: none;
}
}
@@ -74,13 +62,29 @@
--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75);
--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75);
- --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75));
--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75);
+ --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75));
--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small);
--spectrum-treeview-item-min-block-size-thumbnail-offset: 6px;
}
+.spectrum-TreeView,
+.spectrum-TreeView--sizeM {
+ --spectrum-treeview-font-size: var(--spectrum-font-size-100);
+
+ --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100);
+ --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium);
+ --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100);
+
+ --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100);
+ --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100);
+ --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100));
+ --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium);
+
+ --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px);
+}
+
.spectrum-TreeView--sizeL {
--spectrum-treeview-font-size: var(--spectrum-font-size-200);
@@ -89,8 +93,8 @@
--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200);
--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200);
- --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200));
--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200);
+ --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200));
--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large);
--spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
@@ -104,8 +108,8 @@
--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300);
--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300);
- --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300));
--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300);
+ --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300));
--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large);
--spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
@@ -124,48 +128,38 @@
--mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100));
}
-@media (forced-colors: active) {
- .spectrum-TreeView {
- --highcontrast-treeview-item-background-color-selected: Highlight;
- --highcontrast-treeview-item-border-color-selected: Highlight;
- --highcontrast-treeview-item-text-color-selected: HighlightText;
- --highcontrast-treeview-item-icon-color-selected: HighlightText;
+.spectrum-TreeView {
+ --spectrum-treeview-line-height: var(--spectrum-line-height-200);
+ --spectrum-treeview-margin-block: 1em;
- --highcontrast-treeview-item-icon-color: LinkText;
- --highcontrast-treeview-item-text-color: LinkText;
+ --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium);
+ --spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-treeview-heading-color: var(--spectrum-heading-color);
- --highcontrast-treeview-item-background-color-focus: Highlight;
- --highcontrast-treeview-item-text-color-focus: HighlightText;
- --highcontrast-treeview-item-border-color-focus: CanvasText;
- --highcontrast-treeview-item-icon-color-focus: HighlightText;
+ --spectrum-treeview-item-border-size: var(--spectrum-border-width-200);
+ --spectrum-treeview-item-border-size-selected: 1px;
+ --spectrum-treeview-item-border-radius: 0px;
- --highcontrast-treeview-item-background-color-disabled: Canvas;
- --highcontrast-treeview-item-text-color-disabled: GrayText;
- --highcontrast-treeview-item-icon-color-disabled: GrayText;
+ --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800);
+ --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700);
- --highcontrast-treeview-heading-color: CanvasText;
- }
+ --spectrum-treeview-item-border-color-quiet-selected: transparent;
- @supports (color: SelectedItem) {
- .spectrum-TreeView {
- --highcontrast-treeview-item-background-color-selected: SelectedItem;
- --highcontrast-treeview-item-border-color-selected: SelectedItem;
- --highcontrast-treeview-item-text-color-selected: SelectedItemText;
- --highcontrast-treeview-item-icon-color-selected: SelectedItemText;
- }
- }
+ --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75);
+ --spectrum-treeview-item-icon-color: var(--spectrum-gray-700);
+ --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900);
+ --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900);
+ --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900);
+ --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color);
- .spectrum-TreeView-itemLabel {
- forced-color-adjust: none;
- background: transparent;
- }
+ --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900);
+ --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500);
+ --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900);
+ --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900);
- .spectrum-TreeView-itemLink::before {
- forced-color-adjust: none;
- }
-}
+ --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100);
-.spectrum-TreeView {
display: block;
position: relative;
padding: 0;
@@ -176,6 +170,10 @@
margin-block: var(--mod-treeview-margin-block, var(--spectrum-treeview-margin-block));
font-size: var(--mod-treeview-font-size, var(--spectrum-treeview-font-size));
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
+
/* Close (hide) nested treeviews by default. */
.spectrum-TreeView {
position: static;
@@ -408,9 +406,20 @@
}
/* ***** VARIANTS ***** */
+.spectrum-TreeView--quiet {
+ --mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected)));
+ --mod-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, var(--spectrum-treeview-item-border-color-quiet-selected)));
+}
+
.spectrum-TreeView--thumbnail {
+ --mod-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)));
+
.spectrum-TreeView-itemThumbnail {
flex-shrink: 0;
margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
}
}
+
+.spectrum-TreeView--detached {
+ --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100));
+}
diff --git a/components/treeview/metadata/metadata.json b/components/treeview/metadata/metadata.json
index 9902324dd1c..38feeafb5b0 100644
--- a/components/treeview/metadata/metadata.json
+++ b/components/treeview/metadata/metadata.json
@@ -6,6 +6,7 @@
".spectrum-TreeView--detached",
".spectrum-TreeView--quiet",
".spectrum-TreeView--sizeL",
+ ".spectrum-TreeView--sizeM",
".spectrum-TreeView--sizeS",
".spectrum-TreeView--sizeXL",
".spectrum-TreeView--thumbnail",
@@ -158,7 +159,7 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-200",
+ "--spectrum-gray-100",
"--spectrum-gray-500",
"--spectrum-gray-700",
"--spectrum-gray-900",
@@ -168,7 +169,10 @@
"--spectrum-neutral-content-color-default",
"--spectrum-text-to-visual-75"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-tree-view-item-background-color-focus",
+ "--system-tree-view-item-background-color-hover"
+ ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-treeview-heading-color",
diff --git a/components/treeview/package.json b/components/treeview/package.json
index ce535fb0cc0..2294ecdef72 100644
--- a/components/treeview/package.json
+++ b/components/treeview/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/treeview",
- "version": "10.4.0",
+ "version": "11.0.0-s2-foundations.16",
"description": "The Spectrum CSS Tree view component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/treeview/stories/template.js b/components/treeview/stories/template.js
index 9f5c0a787a0..f6db7f9756c 100644
--- a/components/treeview/stories/template.js
+++ b/components/treeview/stories/template.js
@@ -9,6 +9,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const TreeViewItem = ({
rootClass = "spectrum-TreeView",
diff --git a/components/treeview/stories/treeview.stories.js b/components/treeview/stories/treeview.stories.js
index f83b8385895..0d3a991ea10 100644
--- a/components/treeview/stories/treeview.stories.js
+++ b/components/treeview/stories/treeview.stories.js
@@ -37,6 +37,10 @@ export default {
actions: {
handles: ["click .spectrum-TreeView-itemLink"],
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=64762-1960",
+ },
packageJson,
metadata,
},
diff --git a/components/treeview/themes/express.css b/components/treeview/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/treeview/themes/express.css
+++ b/components/treeview/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/treeview/themes/spectrum-two.css b/components/treeview/themes/spectrum-two.css
new file mode 100644
index 00000000000..bcddefe7327
--- /dev/null
+++ b/components/treeview/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-TreeView {
+ --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100);
+ }
+}
diff --git a/components/treeview/themes/spectrum.css b/components/treeview/themes/spectrum.css
index 3b48a570c21..68ee94f3932 100644
--- a/components/treeview/themes/spectrum.css
+++ b/components/treeview/themes/spectrum.css
@@ -10,3 +10,14 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-TreeView {
+ --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200);
+ --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/typography/CHANGELOG.md b/components/typography/CHANGELOG.md
index 9c1f3d68b22..2b423b41ef9 100644
--- a/components/typography/CHANGELOG.md
+++ b/components/typography/CHANGELOG.md
@@ -1,5 +1,218 @@
# Change Log
+## 7.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 7.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 7.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0) Thanks [@pfulton](https://github.com/pfulton)! - ActionButton:
+
+ - Correct --spectrum-actionbutton-background-color-selected-disabled to be --spectrum-actionbutton-(background|border)-color-disabled-selected
+
+ Combobox:
+
+ - Move --spectrum-combobox-min-inline-size and --spectrum-combobox-button-width to the index.css
+
+ FieldGroup:
+
+ - Swap gap back to margin-inline-end on FieldGroup
+
+ Typography:
+
+ - Remap body size to xs if xxs provided
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9ae725f`](https://github.com/adobe/spectrum-css/commit/9ae725f10ebbb78b62070c4c477cb41cfc1b1ed6) Thanks [@pfulton](https://github.com/pfulton)! - Combobox moved the quiet min-inline-size property to index.css from theme to pick up the t-shirt sizing for the calc.
+
+ Typography increases specificity for the t-shirt sizing.
+
+ Stepper fixes for the disabled + hovered states as well as regressions fixed for the quiet variant.
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.12
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.11
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.10
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`494da11`](https://github.com/adobe/spectrum-css/commit/494da118554c2ecc425564e42d25424325efc331) Thanks [@pfulton](https://github.com/pfulton)! - ## Feature [@spectrum-css/icon]
+
+ Update source files to load the mappings from component-level to global tokens for size and transform values. This will allow for more consistent and predictable behavior when using the `size` and `transform` props on icons when switching between contexts for S1, S2, and Express.
+
+ ## Patch [@spectrum-css/typography]
+
+ Remove the sourcemap footer from compiled assets.
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
diff --git a/components/typography/index.css b/components/typography/index.css
index a0f708e0387..d737c79f030 100644
--- a/components/typography/index.css
+++ b/components/typography/index.css
@@ -11,18 +11,10 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
/* Typography - Default */
-/* stylelint-disable selector-class-pattern -- @todo update this in a future breaking change to :root or .spectrum-Typography */
-.spectrum {
- --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-
- --spectrum-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-font-style: var(--spectrum-default-font-style);
- --spectrum-font-size: var(--spectrum-font-size-100);
-
+.spectrum-Typography {
font-family: var(--spectrum-font-family);
font-style: var(--spectrum-font-style);
font-size: var(--spectrum-font-size);
@@ -34,23 +26,21 @@
&:lang(he) {
font-family: var(--spectrum-font-family-he);
}
-}
-/* stylelint-enable selector-class-pattern */
-
-/* Typography - Heading */
-
-/* Heading tokens */
-.spectrum-Heading {
- --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family-stack);
- --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack);
- --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
+ /* Add margin when inside a Typography component */
+ .spectrum-Heading {
+ --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier));
+ --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier));
+ }
- --spectrum-heading-font-color: var(--spectrum-heading-color);
+ .spectrum-Body {
+ --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
+ }
- --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier));
- --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier));
+ .spectrum-Detail {
+ --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier));
+ --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier));
+ }
}
/* Windows high contrast mode */
@@ -58,9 +48,21 @@
.spectrum-Heading {
--highcontrast-heading-font-color: Text;
}
+
+ .spectrum-Body {
+ --highcontrast-body-font-color: Text;
+ }
+
+ .spectrum-Detail {
+ --highcontrast-detail-font-color: Text;
+ }
+
+ .spectrum-Code {
+ --highcontrast-code-font-color: Text;
+ }
}
-/* Heading t-shirt sizes */
+/* Heading */
.spectrum-Heading--sizeXXS {
--spectrum-heading-font-size: var(--spectrum-heading-size-xxs);
--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs);
@@ -76,6 +78,7 @@
--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s);
}
+.spectrum-Heading,
.spectrum-Heading--sizeM {
--spectrum-heading-font-size: var(--spectrum-heading-size-m);
--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m);
@@ -101,16 +104,26 @@
--spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl);
}
-/* Heading styles */
.spectrum-Heading {
+ --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family-stack);
+
+ --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack);
+ --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
+
+ --spectrum-heading-font-color: var(--spectrum-heading-color);
+
+ --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier));
+ --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier));
+
font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family));
font-style: var(--mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style));
font-weight: var(--mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight));
font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size));
color: var(--highcontrast-heading-font-color, var(--mod-heading-font-color, var(--spectrum-heading-font-color)));
line-height: var(--mod-heading-line-height, var(--spectrum-heading-line-height));
- margin-block-start: 0;
- margin-block-end: 0;
+ margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start, 0));
+ margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end, 0));
strong,
.spectrum-Heading-strong {
@@ -341,35 +354,7 @@
}
}
-/* Add margin when inside a Typography component */
-.spectrum-Typography .spectrum-Heading {
- margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start));
- margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end));
-}
-
/* Body */
-
-/* Body tokens */
-.spectrum-Body {
- --spectrum-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack);
- --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack);
-
- --spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
-
- --spectrum-body-margin: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
-
- --spectrum-body-font-color: var(--spectrum-body-color);
-}
-
-/* Windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-Body {
- --highcontrast-body-font-color: Text;
- }
-}
-
-/* Body t-shirt sizes */
.spectrum-Body--sizeXS {
--spectrum-body-font-size: var(--spectrum-body-size-xs);
}
@@ -378,6 +363,7 @@
--spectrum-body-font-size: var(--spectrum-body-size-s);
}
+.spectrum-Body,
.spectrum-Body--sizeM {
--spectrum-body-font-size: var(--spectrum-body-size-m);
}
@@ -398,17 +384,23 @@
--spectrum-body-font-size: var(--spectrum-body-size-xxxl);
}
-/* Body styles */
-
-/* Body - Default */
.spectrum-Body {
+ --spectrum-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack);
+
+ --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack);
+ --spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
+
+ --spectrum-body-font-color: var(--spectrum-body-color);
+
font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family));
font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style));
font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight));
font-size: var(--mod-body-font-size, var(--spectrum-body-font-size));
color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color)));
- margin-block-start: 0;
- margin-block-end: 0;
+
+ margin-block-start: var(--mod-body-margin-start, var(--mod-body-margin, 0));
+ margin-block-end: var(--mod-body-margin-end, var(--mod-body-margin, var(--spectrum-body-margin-end, 0)));
line-height: var(--mod-body-line-height, var(--spectrum-body-line-height));
@@ -463,6 +455,7 @@
}
}
+/* Body - Serif */
.spectrum-Body--serif {
font-family: var(--mod-body-serif-font-family, var(--spectrum-body-serif-font-family));
font-weight: var(--mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight));
@@ -488,37 +481,12 @@
}
}
-/* Add margin when inside a Typography component */
-.spectrum-Typography .spectrum-Body {
- margin-block-end: var(--mod-body-margin, var(--spectrum-body-margin));
-}
-
/* Detail */
-
-/* Detail tokens */
-.spectrum-Detail {
- --spectrum-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family-stack);
- --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack);
-
- --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier));
- --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier));
-
- --spectrum-detail-font-color: var(--spectrum-detail-color);
-}
-
-/* Windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-Detail {
- --highcontrast-detail-font-color: Text;
- }
-}
-
-/* Detail t-shirt sizes */
.spectrum-Detail--sizeS {
--spectrum-detail-font-size: var(--spectrum-detail-size-s);
}
+.spectrum-Detail,
.spectrum-Detail--sizeM {
--spectrum-detail-font-size: var(--spectrum-detail-size-m);
}
@@ -531,14 +499,22 @@
--spectrum-detail-font-size: var(--spectrum-detail-size-xl);
}
-/* Detail styles */
.spectrum-Detail {
+ --spectrum-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family-stack);
+ --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack);
+
+ --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier));
+ --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier));
+
+ --spectrum-detail-font-color: var(--spectrum-detail-color);
+
font-family: var(--mod-detail-sans-serif-font-family, var(--spectrum-detail-sans-serif-font-family));
font-style: var(--mod-detail-sans-serif-font-style, var(--spectrum-detail-sans-serif-font-style));
font-weight: var(--mod-detail-sans-serif-font-weight, var(--spectrum-detail-sans-serif-font-weight));
font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size));
- margin-block-start: 0;
- margin-block-end: 0;
+ margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start, 0));
+ margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end, 0));
color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color)));
@@ -595,6 +571,7 @@
}
}
+/* Detail - Serif */
.spectrum-Detail--serif {
font-family: var(--mod-detail-serif-font-family, var(--spectrum-detail-serif-font-family));
font-style: var(--mod-detail-serif-font-style, var(--spectrum-detail-serif-font-style));
@@ -620,7 +597,7 @@
}
}
-/* Detail - Light */
+/* Detail - Light */
.spectrum-Detail--light {
font-style: var(--mod-detail-sans-serif-light-font-style, var(--spectrum-detail-sans-serif-light-font-style));
font-weight: var(--spectrum-detail-sans-serif-light-font-weight, var(--spectrum-detail-sans-serif-light-font-weight));
@@ -669,6 +646,7 @@
}
}
+/* Detail - Serif - Light */
.spectrum-Detail--serif.spectrum-Detail--light {
font-style: var(--mod-detail-serif-light-font-style, var(--spectrum-detail-serif-light-font-style));
font-weight: var(--mod-detail-serif-light-font-weight, var(--spectrum-detail-serif-light-font-weight));
@@ -693,29 +671,7 @@
}
}
-/* Add margin when inside a Typography component */
-.spectrum-Typography .spectrum-Detail {
- margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start));
- margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end));
-}
-
/* Code */
-
-/* Code tokens */
-.spectrum-Code {
- --spectrum-code-font-family: var(--spectrum-code-font-family-stack);
- --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
- --spectrum-code-font-color: var(--spectrum-code-color);
-}
-
-/* Windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-Code {
- --highcontrast-code-font-color: Text;
- }
-}
-
-/* Code t-shirt sizes */
.spectrum-Code--sizeXS {
--spectrum-code-font-size: var(--spectrum-code-size-xs);
}
@@ -724,6 +680,7 @@
--spectrum-code-font-size: var(--spectrum-code-size-s);
}
+.spectrum-Code,
.spectrum-Code--sizeM {
--spectrum-code-font-size: var(--spectrum-code-size-m);
}
@@ -736,14 +693,17 @@
--spectrum-code-font-size: var(--spectrum-code-size-xl);
}
-/* Code styles */
.spectrum-Code {
+ --spectrum-code-font-family: var(--spectrum-code-font-family-stack);
+ --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
+ --spectrum-code-font-color: var(--spectrum-code-color);
+
font-family: var(--mod-code-font-family, var(--spectrum-code-font-family));
font-style: var(--mod-code-font-style, var(--spectrum-code-font-style));
font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight));
font-size: var(--mod-code-font-size, var(--spectrum-code-font-size));
- margin-block-start: 0;
- margin-block-end: 0;
+ margin-block-start: var(--mod-code-margin-start, 0);
+ margin-block-end: var(--mod-code-margin-end, 0);
line-height: var(--mod-code-line-height, var(--spectrum-code-line-height));
diff --git a/components/typography/metadata/metadata.json b/components/typography/metadata/metadata.json
index 9235bb411b1..5d45be326da 100644
--- a/components/typography/metadata/metadata.json
+++ b/components/typography/metadata/metadata.json
@@ -291,11 +291,12 @@
".spectrum-Heading:lang(zh) em strong",
".spectrum-Heading:lang(zh) strong",
".spectrum-Heading:lang(zh) strong em",
+ ".spectrum-Typography",
".spectrum-Typography .spectrum-Body",
".spectrum-Typography .spectrum-Detail",
".spectrum-Typography .spectrum-Heading",
- ".spectrum:lang(ar)",
- ".spectrum:lang(he)"
+ ".spectrum-Typography:lang(ar)",
+ ".spectrum-Typography:lang(he)"
],
"modifiers": [
"--mod-body-cjk-emphasized-font-style",
@@ -313,6 +314,8 @@
"--mod-body-font-size",
"--mod-body-line-height",
"--mod-body-margin",
+ "--mod-body-margin-end",
+ "--mod-body-margin-start",
"--mod-body-sans-serif-emphasized-font-style",
"--mod-body-sans-serif-emphasized-font-weight",
"--mod-body-sans-serif-font-family",
@@ -350,6 +353,8 @@
"--mod-code-font-style",
"--mod-code-font-weight",
"--mod-code-line-height",
+ "--mod-code-margin-end",
+ "--mod-code-margin-start",
"--mod-code-strong-emphasized-font-style",
"--mod-code-strong-emphasized-font-weight",
"--mod-code-strong-font-style",
@@ -512,7 +517,7 @@
"--spectrum-body-font-color",
"--spectrum-body-font-size",
"--spectrum-body-line-height",
- "--spectrum-body-margin",
+ "--spectrum-body-margin-end",
"--spectrum-body-margin-multiplier",
"--spectrum-body-sans-serif-emphasized-font-style",
"--spectrum-body-sans-serif-emphasized-font-weight",
@@ -571,7 +576,6 @@
"--spectrum-code-strong-emphasized-font-weight",
"--spectrum-code-strong-font-style",
"--spectrum-code-strong-font-weight",
- "--spectrum-default-font-style",
"--spectrum-detail-cjk-emphasized-font-style",
"--spectrum-detail-cjk-emphasized-font-weight",
"--spectrum-detail-cjk-font-family",
@@ -641,7 +645,6 @@
"--spectrum-font-family-ar",
"--spectrum-font-family-he",
"--spectrum-font-size",
- "--spectrum-font-size-100",
"--spectrum-font-style",
"--spectrum-heading-cjk-emphasized-font-style",
"--spectrum-heading-cjk-emphasized-font-weight",
diff --git a/components/typography/metadata/mods.md b/components/typography/metadata/mods.md
index 25bd5b5f0e4..ba71cd43274 100644
--- a/components/typography/metadata/mods.md
+++ b/components/typography/metadata/mods.md
@@ -15,6 +15,8 @@
| `--mod-body-font-size` |
| `--mod-body-line-height` |
| `--mod-body-margin` |
+| `--mod-body-margin-end` |
+| `--mod-body-margin-start` |
| `--mod-body-sans-serif-emphasized-font-style` |
| `--mod-body-sans-serif-emphasized-font-weight` |
| `--mod-body-sans-serif-font-family` |
@@ -52,6 +54,8 @@
| `--mod-code-font-style` |
| `--mod-code-font-weight` |
| `--mod-code-line-height` |
+| `--mod-code-margin-end` |
+| `--mod-code-margin-start` |
| `--mod-code-strong-emphasized-font-style` |
| `--mod-code-strong-emphasized-font-weight` |
| `--mod-code-strong-font-style` |
diff --git a/components/typography/package.json b/components/typography/package.json
index 75fb05313c9..51d80cfcc9f 100644
--- a/components/typography/package.json
+++ b/components/typography/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/typography",
- "version": "6.2.0",
+ "version": "7.0.0-s2-foundations.17",
"description": "The Spectrum CSS typography component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/typography/stories/template.js b/components/typography/stories/template.js
index d246c7a24d4..dbf2b1d341b 100644
--- a/components/typography/stories/template.js
+++ b/components/typography/stories/template.js
@@ -7,6 +7,9 @@ import { when } from "lit/directives/when.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = (args = {}, context = {}) => {
let {
diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js
index ae6c313705f..fd7c687b6af 100644
--- a/components/typography/stories/typography.stories.js
+++ b/components/typography/stories/typography.stories.js
@@ -77,6 +77,10 @@ export default {
semantics: "body",
},
parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=1-3",
+ },
packageJson,
metadata,
},
diff --git a/components/typography/themes/express.css b/components/typography/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/typography/themes/express.css
+++ b/components/typography/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/typography/themes/spectrum-two.css b/components/typography/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/typography/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/typography/themes/spectrum.css b/components/typography/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/typography/themes/spectrum.css
+++ b/components/typography/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/underlay/CHANGELOG.md b/components/underlay/CHANGELOG.md
index 94a507a10f9..04f244987c0 100644
--- a/components/underlay/CHANGELOG.md
+++ b/components/underlay/CHANGELOG.md
@@ -1,5 +1,178 @@
# Change Log
+## 5.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 5.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 5.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 4.2.0
### Minor Changes
diff --git a/components/underlay/index.css b/components/underlay/index.css
index 48814e0d705..d749bb8248b 100644
--- a/components/underlay/index.css
+++ b/components/underlay/index.css
@@ -12,22 +12,19 @@
*/
@import "@spectrum-css/commons/overlay.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Underlay {
--spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
--spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in);
--spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out);
- --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100);
--spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300);
--spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
/* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */
--spectrum-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
-}
-.spectrum-Underlay {
@extend %spectrum-overlay;
position: fixed;
@@ -45,11 +42,11 @@
transition:
opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)) var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease)) var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)),
visibility 0ms linear calc(var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) + var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)));
-}
-.spectrum-Underlay.is-open {
- @extend %spectrum-overlay--open;
+ &.is-open {
+ @extend %spectrum-overlay--open;
- /* Entry animations */
- transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration)) var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease)) var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay));
+ /* Entry animations */
+ transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration)) var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease)) var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay));
+ }
}
diff --git a/components/underlay/metadata/metadata.json b/components/underlay/metadata/metadata.json
index d0931277542..153fe860999 100644
--- a/components/underlay/metadata/metadata.json
+++ b/components/underlay/metadata/metadata.json
@@ -1,6 +1,10 @@
{
"sourceFile": "index.css",
- "selectors": [".spectrum-Underlay", ".spectrum-Underlay.is-open"],
+ "selectors": [
+ ".is-open:scope",
+ ".spectrum-Underlay",
+ ".spectrum-Underlay.is-open"
+ ],
"modifiers": [
"--mod-overlay-animation-duration",
"--mod-overlay-animation-duration-opened",
diff --git a/components/underlay/package.json b/components/underlay/package.json
index a0b5c521bd2..c691b2f4dd8 100644
--- a/components/underlay/package.json
+++ b/components/underlay/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/underlay",
- "version": "4.2.0",
+ "version": "5.0.0-s2-foundations.15",
"description": "The Spectrum CSS underlay component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/underlay/stories/template.js b/components/underlay/stories/template.js
index b19acb1a625..837e51e9b1a 100644
--- a/components/underlay/stories/template.js
+++ b/components/underlay/stories/template.js
@@ -5,6 +5,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Underlay",
diff --git a/components/underlay/themes/express.css b/components/underlay/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/underlay/themes/express.css
+++ b/components/underlay/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/underlay/themes/spectrum-two.css b/components/underlay/themes/spectrum-two.css
new file mode 100644
index 00000000000..3b48a570c21
--- /dev/null
+++ b/components/underlay/themes/spectrum-two.css
@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
diff --git a/components/underlay/themes/spectrum.css b/components/underlay/themes/spectrum.css
index 3b48a570c21..3d81bc564b5 100644
--- a/components/underlay/themes/spectrum.css
+++ b/components/underlay/themes/spectrum.css
@@ -10,3 +10,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/well/CHANGELOG.md b/components/well/CHANGELOG.md
index 547c293d0f0..e4f67642067 100644
--- a/components/well/CHANGELOG.md
+++ b/components/well/CHANGELOG.md
@@ -1,5 +1,196 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a434c9a`](https://github.com/adobe/spectrum-css/commit/a434c9aa96509427e0faaa0eef4ffc2a21fa9908) Thanks [@pfulton](https://github.com/pfulton)! - Align selectors with the specificity that exists in S1 today
+
+## 6.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+### Patch Changes
+
+- Updated dependencies [[`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.22
+
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9df688a`](https://github.com/adobe/spectrum-css/commit/9df688a6a83be5f13bc4e0e732fed294af08bf3f) Thanks [@pfulton](https://github.com/pfulton)! - Replaces raw RGB value/direct token references with abstracted custom properties in theme/spectrum-two.css files
+
+ Asset card
+
+ - removes raw rgb value for box-shadow from `index.css`
+ - creates new `--spectrum-assetcard-selectionindicator-box-shadow-color`
+ in `themes/spectrum-two.css` with previous rgb value to use instead
+
+ Well
+
+ - removes `--spectrum-gray-800-rgb` for background-color from `index.css`
+ - creates new `--spectrum-well-background-color` in `themes/spectrum-two.css`
+ with previous `--spectrum-gray-800-rgb` property to use instead
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.3.0
### Minor Changes
diff --git a/components/well/index.css b/components/well/index.css
index c4f130e8690..26abcff0032 100644
--- a/components/well/index.css
+++ b/components/well/index.css
@@ -11,14 +11,13 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Well {
--spectrum-well-border-width: var(--spectrum-border-width-100);
--spectrum-well-content-color: var(--spectrum-body-color);
-}
+ --spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02);
-.spectrum-Well {
text-align: start;
display: block;
min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width));
@@ -27,7 +26,7 @@
border-width: var(--mod-well-border-width, var(--spectrum-well-border-width));
border-style: solid;
border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius));
- background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02));
+ background-color: var(--mod-well-background-color, var(--spectrum-well-background-color));
border-color: var(--mod-well-border-color, var(--spectrum-well-border-color));
color: var(--mod-well-content-color, var(--spectrum-well-content-color));
}
diff --git a/components/well/metadata/metadata.json b/components/well/metadata/metadata.json
index 3d2c12b361f..7382222cb26 100644
--- a/components/well/metadata/metadata.json
+++ b/components/well/metadata/metadata.json
@@ -12,6 +12,7 @@
"--mod-well-padding"
],
"component": [
+ "--spectrum-well-background-color",
"--spectrum-well-border-color",
"--spectrum-well-border-radius",
"--spectrum-well-border-width",
@@ -23,9 +24,10 @@
"global": [
"--spectrum-body-color",
"--spectrum-border-width-100",
+ "--spectrum-gray-1000",
"--spectrum-gray-800-rgb"
],
- "system-theme": [],
+ "system-theme": ["--system-well-border-color"],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/well/package.json b/components/well/package.json
index b52195d4b18..f58013e0844 100644
--- a/components/well/package.json
+++ b/components/well/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/well",
- "version": "5.3.0",
+ "version": "6.0.0-s2-foundations.16",
"description": "The Spectrum CSS well component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/well/stories/template.js b/components/well/stories/template.js
index 033c5b014ff..c9645cfdcdb 100644
--- a/components/well/stories/template.js
+++ b/components/well/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Well",
@@ -13,16 +16,18 @@ export const Template = ({
id = getRandomId("well"),
testId,
content = [],
-}, context) => html`
- ({ ...a, [c]: true }), {}),
- })}
- style=${styleMap(customStyles)}
- id=${ifDefined(id)}
- data-testid=${ifDefined(testId)}
- >
- ${renderContent(content, { context })}
-
-`;
+} = {}, context = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ style=${styleMap(customStyles)}
+ id=${ifDefined(id)}
+ data-testid=${ifDefined(testId)}
+ >
+ ${renderContent(content, { context })}
+
+ `;
+};
diff --git a/components/well/themes/express.css b/components/well/themes/express.css
index fad97bb3695..9fd550418f2 100644
--- a/components/well/themes/express.css
+++ b/components/well/themes/express.css
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
- @import "./spectrum.css";
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/well/themes/spectrum-two.css b/components/well/themes/spectrum-two.css
new file mode 100644
index 00000000000..79a9f9a41f3
--- /dev/null
+++ b/components/well/themes/spectrum-two.css
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * 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-Well {
+ --spectrum-well-border-color: rgba(var(--spectrum-gray-1000), .05);
+ }
+}
diff --git a/components/well/themes/spectrum.css b/components/well/themes/spectrum.css
index 3b48a570c21..5cfe7120396 100644
--- a/components/well/themes/spectrum.css
+++ b/components/well/themes/spectrum.css
@@ -10,3 +10,13 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Well {
+ --spectrum-well-border-color: rgba(var(--spectrum-gray-900-rgb), 0.05);
+ }
+}
diff --git a/generator/CHANGELOG.md b/generator/CHANGELOG.md
index c9027a9beca..4ee8f942050 100644
--- a/generator/CHANGELOG.md
+++ b/generator/CHANGELOG.md
@@ -1,5 +1,55 @@
# Change Log
+## 5.0.0-s2-foundations.7
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a4e0278`](https://github.com/adobe/spectrum-css/commit/a4e0278af07d97b668a73fabcbb18b37411ecb86) Thanks [@pfulton](https://github.com/pfulton)! - Update mdx template to include TaggedReleases and ComponentDetails
+
+## 5.0.0-s2-foundations.6
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+## 5.0.0-s2-foundations.5
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
## 4.1.0
### Minor Changes
diff --git a/generator/package.json b/generator/package.json
index 07c1ee3b2b7..fcd6c9976bf 100644
--- a/generator/package.json
+++ b/generator/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/generator",
- "version": "4.1.0",
+ "version": "5.0.0-s2-foundations.7",
"description": "A tool to quickly create standardized components",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/generator/templates/index.css.hbs b/generator/templates/index.css.hbs
index 6c3510c104a..cfb6f764d20 100644
--- a/generator/templates/index.css.hbs
+++ b/generator/templates/index.css.hbs
@@ -11,24 +11,18 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+ @import "./themes/spectrum-two.css";
.spectrum-{{ pascalCase name }} {
- /* Variables defined here */
- /* --spectrum-{{ folderName }}-... */
+ // color: var(--highcontrast-{{ folderName }}-content-color-default, var(--mod-{{ folderName }}-content-color-default, var(--spectrum-{{ folderName }}-content-color-default)));
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-{{ folderName }}-line-height-cjk: var(--spectrum-cjk-line-height-100);
- }
+ &.spectrum-{{ pascalCase name }}--sizeS {}
+ &,
+ &.spectrum-{{ pascalCase name }}--sizeM {}
+ &.spectrum-{{ pascalCase name }}--sizeL {}
+ &.spectrum-{{ pascalCase name }}--sizeXL {}
}
-.spectrum-{{ pascalCase name }}--sizeS {}
-.spectrum-{{ pascalCase name }}--sizeM {}
-.spectrum-{{ pascalCase name }}--sizeL {}
-.spectrum-{{ pascalCase name }}--sizeXL {}
-
@media (forced-colors: active) {
.spectrum-{{ pascalCase name }} {
--highcontrast-{{ folderName }}-content-color-default: CanvasText;
@@ -36,8 +30,3 @@
forced-color-adjust: none;
}
}
-
-.spectrum-{{ pascalCase name }} {
- /* Properties defined here */
- color: var(--highcontrast-{{ folderName }}-content-color-default, var(--mod-{{ folderName }}-content-color-default, var(--spectrum-{{ folderName }}-content-color-default)));
-}
diff --git a/generator/templates/project.json.hbs b/generator/templates/project.json.hbs
index c51870d07b1..6f68b7e48f7 100644
--- a/generator/templates/project.json.hbs
+++ b/generator/templates/project.json.hbs
@@ -8,6 +8,7 @@
"compare": {},
"format": {},
"lint": {},
+ "report": {},
"test": {
"defaultConfiguration": "scope"
},
diff --git a/generator/templates/stories/template.js.hbs b/generator/templates/stories/template.js.hbs
index 394ccd11658..af1047abb64 100644
--- a/generator/templates/stories/template.js.hbs
+++ b/generator/templates/stories/template.js.hbs
@@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/express.css";
+import "../themes/spectrum.css";
export const Template = ({
rootClass = "spectrum-{{ pascalCase name }}",
diff --git a/generator/templates/themes/express.css.hbs b/generator/templates/themes/express.css.hbs
index 914edf75de3..0312cb359b9 100644
--- a/generator/templates/themes/express.css.hbs
+++ b/generator/templates/themes/express.css.hbs
@@ -13,4 +13,4 @@
@import "./spectrum.css";
-@container (--system: express) {}
+@container style(--system: express) {}
diff --git a/tokens/dist/css/express/custom-medium-vars.css b/generator/templates/themes/spectrum-two.css.hbs
similarity index 57%
rename from tokens/dist/css/express/custom-medium-vars.css
rename to generator/templates/themes/spectrum-two.css.hbs
index 2fd3a95da3b..0760508568f 100644
--- a/tokens/dist/css/express/custom-medium-vars.css
+++ b/generator/templates/themes/spectrum-two.css.hbs
@@ -11,13 +11,12 @@
* governing permissions and limitations under the License.
*/
-.spectrum--express.spectrum--medium{
- --spectrum-colorwheel-path:"M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
- --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
+/* @combine .spectrum.spectrum--legacy */
- --spectrum-dialog-confirm-border-radius:6px;
+@import "./spectrum-two.css";
- --spectrum-dial-border-radius:12px;
-
- --spectrum-assetcard-focus-ring-border-radius:10px;
+@container style(--system: legacy) {
+ .spectrum-DropZone {
+ --spectrum-drop-zone-border-color: var(--spectrum-gray-300);
+ }
}
diff --git a/generator/templates/themes/spectrum.css.hbs b/generator/templates/themes/spectrum.css.hbs
index b0d4a7b1ab8..212e75ce8f7 100644
--- a/generator/templates/themes/spectrum.css.hbs
+++ b/generator/templates/themes/spectrum.css.hbs
@@ -11,4 +11,6 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {}
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {}
diff --git a/nx.json b/nx.json
index 28b05ff46ee..6a47731bd56 100644
--- a/nx.json
+++ b/nx.json
@@ -34,7 +34,8 @@
"cache": true,
"dependsOn": [
"^build",
- "clean"
+ "clean",
+ { "projects": "tokens", "target": "build" }
],
"executor": "nx:run-commands",
"inputs": [
@@ -42,20 +43,18 @@
"tools",
"{workspaceRoot}/tasks/component-builder.js",
"!{projectRoot}/stories/*.js",
+ "{workspaceRoot}/tasks/component-builder.js",
{ "externalDependencies": ["postcss"] },
{ "env": "NODE_ENV" }
],
"options": {
"commands": [
- "node --no-warnings -e 'require(\"./tasks/component-builder.js\").default()'"
+ "cross-env NODE_OPTIONS=\"--no-warnings\" node -e 'require(\"./tasks/component-builder.js\").default()'"
]
},
"outputs": [
- "{projectRoot}/dist/*.{css,json}",
- "{projectRoot}/dist/themes/*.css",
- "{projectRoot}/dist/*.map",
- "{projectRoot}/dist/themes/*.css.map",
- "{projectRoot}/metadata/mods.md"
+ "{projectRoot}/dist/*.css",
+ "{projectRoot}/dist/themes/*.css"
]
},
"clean": {
@@ -120,7 +119,7 @@
],
"options": {
"commands": [
- "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.css {projectRoot}/**/*.css && stylelint --fix --cache --allow-empty-input {projectRoot}/*.css {projectRoot}/**/*.css",
+ "stylelint --fix --cache --allow-empty-input {projectRoot}/*.css {projectRoot}/**/*.css",
"eslint --fix --cache --no-error-on-unmatched-pattern {projectRoot}/*.json {projectRoot}/stories/*.js",
"prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{md,mdx} {projectRoot}/**/*.{md,mdx}"
]
diff --git a/package.json b/package.json
index b1c15f22f84..ac517c86481 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
"build:preview": "nx build storybook",
"builder": "nx run-many --target build report --projects",
"changeset": "changeset",
- "ci": "cross-env NODE_ENV=production yarn build --skip-nx-cache",
+ "ci": "cross-env NODE_ENV=production yarn builder tag:component,ui-icons --skip-nx-cache",
"ci:storybook": "cross-env NODE_ENV=development nx run storybook:build:ci --skip-nx-cache",
"clean": "yarn cleaner tag:component",
"clean:docs": "rimraf dist",
@@ -63,10 +63,10 @@
"@commitlint/cli": "^19.5.0",
"@commitlint/config-conventional": "^19.5.0",
"@nx/devkit": "^19.8.2",
- "@spectrum-css/cyclebutton": "^3.1.3",
- "@spectrum-css/quickaction": "^3.1.1",
- "@spectrum-css/searchwithin": "^5.1.3",
- "@spectrum-css/splitbutton": "^8.1.2",
+ "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.6.0",
+ "@spectrum-tools/postcss-add-theming-layer": "workspace:^",
+ "@spectrum-tools/postcss-property-rollup": "workspace:^",
+ "@spectrum-tools/postcss-rgb-mapping": "workspace:^",
"at-rule-packer": "^0.4.2",
"autoprefixer": "^10.4.19",
"colors": "^1.4.0",
@@ -91,7 +91,6 @@
"open": "^10.1.0",
"pajv": "^1.2.0",
"postcss": "^8.4.49",
- "postcss-combininator": "workspace:^",
"postcss-extend": "^1.0.5",
"postcss-hover-media-feature": "^1.0.2",
"postcss-import": "^16.1.0",
@@ -100,10 +99,8 @@
"postcss-preset-env": "^9.5.13",
"postcss-pseudo-classes": "^0.4.0",
"postcss-reporter": "^7.1.0",
- "postcss-rgb-mapping": "workspace:^",
"postcss-selector-replace": "^1.0.2",
"postcss-sorting": "^9.1.0",
- "postcss-splitinator": "workspace:^",
"postcss-values-parser": "^6.0.2",
"prettier": "^3.2.5",
"rimraf": "^6.0.1",
diff --git a/plugins/postcss-splitinator/CHANGELOG.md b/plugins/postcss-add-theming-layer/CHANGELOG.md
similarity index 86%
rename from plugins/postcss-splitinator/CHANGELOG.md
rename to plugins/postcss-add-theming-layer/CHANGELOG.md
index fa9f3e2d31c..aab665df410 100644
--- a/plugins/postcss-splitinator/CHANGELOG.md
+++ b/plugins/postcss-add-theming-layer/CHANGELOG.md
@@ -1,5 +1,11 @@
# Change Log
+## 2.1.1-s2-foundations.0
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
## 2.1.0
### Minor Changes
diff --git a/plugins/postcss-add-theming-layer/README.md b/plugins/postcss-add-theming-layer/README.md
new file mode 100644
index 00000000000..cf496ca9ab5
--- /dev/null
+++ b/plugins/postcss-add-theming-layer/README.md
@@ -0,0 +1,115 @@
+# postcss-add-theming-layer
+
+> Leveraging style container queries to create an abstraction layer for supporting multiple theming systems.
+
+## Installation
+
+Add the dependency to your project:
+
+```sh
+npm install postcss-add-theming-layer
+```
+
+or
+
+```sh
+yarn add -DW postcss-add-theming-layer
+```
+
+Use the plugin in your PostCSS configuration:
+
+```js
+module.exports = {
+ plugins: {
+ "postcss-add-theming-layer": {},
+ },
+};
+```
+
+or as part of your CLI command:
+
+```sh
+postcss -u postcss-add-theming-layer -o dist/index.css src/index.css
+```
+
+## Options
+
+### `selectorPrefix` [string]
+
+This optional input will prefix the new theming layer selector with the provided string. This can be useful if you want to namespace the injected selectors for the new theming layer to avoid conflicts.
+
+### `skipMapping` [boolean=false]
+
+Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables.
+
+### `preserveVariables` [boolean=true]
+
+When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector.
+
+### `referencesOnly` [boolean=false]
+
+This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component.
+
+### `stripLocalSelectors` [boolean=false]
+
+This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions.
+
+### `processIdentifier` [(identifierValue: string, identifierName: string) => string]`
+
+Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. `identifierValue = spectrum` and `identifierName = system` for the example below. By default, `identifierName` is used as-is.
+
+## Usage
+
+This plugin turns this:
+
+```css
+@container style(--system: legacy) {
+ .component {
+ --background-color: blue;
+ }
+ .component.is-selected {
+ --background-color: darkblue;
+ }
+ .component .icon {
+ --color: gray;
+ }
+}
+
+@container style(--system: modern) {
+ .component {
+ --background-color: purple;
+ }
+ .component.is-selected {
+ --background-color: darkpurple;
+ }
+ .component .icon {
+ --color: white;
+ }
+}
+```
+
+Into this:
+
+```css
+.legacy {
+ --system-component-background-color: blue;
+ --system-component-selected-background-color: darkblue;
+}
+
+.modern {
+ --system-component-background-color: purple;
+ --system-component-selected-background-color: darkpurple;
+}
+
+.component {
+ --background-color: var(--system-component-background-color);
+}
+
+.component.is-selected {
+ --background-color: var(--system-component-selected-background-color);
+}
+```
+
+## Usage notes
+
+This plugin will ignore any underscore-prefixed variables, as they are considered private and not part of the theming layer.
diff --git a/plugins/postcss-add-theming-layer/expected/basic.css b/plugins/postcss-add-theming-layer/expected/basic.css
new file mode 100644
index 00000000000..711a906a74d
--- /dev/null
+++ b/plugins/postcss-add-theming-layer/expected/basic.css
@@ -0,0 +1,41 @@
+.legacy {
+ --system-component-background-color: blue;
+ --system-component-selected-background-color: darkblue;
+ --system-component-icon-color: gray;
+ --system-where-component-background-color: blue;
+ --system-component-where-selected-background-color: darkblue;
+ --system-component-has-icon-color: gray
+}
+
+.modern {
+ --system-component-background-color: purple;
+ --system-component-selected-background-color: indigo;
+ --system-component-icon-color: white;
+ --system-where-component-background-color: indigo;
+ --system-component-where-selected-background-color: darkpurple;
+ --system-component-has-icon-color: white
+}
+
+.component {
+ --background-color: var(--system-component-background-color)
+}
+
+.component.is-selected {
+ --background-color: var(--system-component-selected-background-color)
+}
+
+.component .icon {
+ --color: var(--system-component-icon-color)
+}
+
+:where(.component) {
+ --background-color: var(--system-where-component-background-color)
+}
+
+.component:where(:selected,.is-selected) {
+ --background-color: var(--system-component-where-selected-background-color)
+}
+
+.component:has(.icon) {
+ --color: var(--system-component-has-icon-color)
+}
diff --git a/plugins/postcss-add-theming-layer/fixtures/basic.css b/plugins/postcss-add-theming-layer/fixtures/basic.css
new file mode 100644
index 00000000000..50692d97093
--- /dev/null
+++ b/plugins/postcss-add-theming-layer/fixtures/basic.css
@@ -0,0 +1,49 @@
+@container style(--system: legacy) {
+ .component {
+ --background-color: blue;
+ }
+ .component.is-selected {
+ --background-color: darkblue;
+ }
+ .component .icon {
+ --color: gray;
+ }
+
+ :where(.component) {
+ --background-color: blue;
+ }
+
+ .component:where(:selected, .is-selected) {
+ --background-color: darkblue;
+ }
+
+ .component:has(.icon) {
+ --color: gray;
+ }
+}
+
+@container style(--system: modern) {
+ .component {
+ --background-color: purple;
+ }
+
+ .component.is-selected {
+ --background-color: indigo;
+ }
+
+ .component .icon {
+ --color: white;
+ }
+
+ :where(.component) {
+ --background-color: indigo;
+ }
+
+ .component:where(:selected, .is-selected) {
+ --background-color: darkpurple;
+ }
+
+ .component:has(.icon) {
+ --color: white;
+ }
+}
diff --git a/plugins/postcss-add-theming-layer/index.js b/plugins/postcss-add-theming-layer/index.js
new file mode 100644
index 00000000000..ad9543ffdcf
--- /dev/null
+++ b/plugins/postcss-add-theming-layer/index.js
@@ -0,0 +1,197 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+const selectorParser = require("postcss-selector-parser");
+const {
+ cleanPropertyName,
+ extractFallbackValue,
+ getVariableName,
+ checkForReplacement
+} = require("./utilities");
+
+/**
+ * @typedef Options
+ * @property {string} [selectorPrefix] - The prefix to use for the new selectors
+ * @property {boolean} [skipMapping=false] - Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables.
+ * @property {boolean} [preserveVariables=false] - When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector.
+ * @property {boolean} [referencesOnly=false] - This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component.
+ * @property {boolean} [stripLocalSelectors=false] - This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions.
+ * @property {(identifierValue: string, identifierName: string) => string} [processIdentifier] - A function that processes the identifier value and creates a new selector
+*/
+
+/** @type import('postcss').PluginCreator */
+module.exports = ({
+ selectorPrefix,
+ skipMapping = false,
+ preserveVariables = true,
+ referencesOnly = false,
+ stripLocalSelectors = false,
+ processIdentifier,
+}) => ({
+ postcssPlugin: "postcss-add-theming-layer",
+ OnceExit(root, { Rule, Declaration }) {
+ // Fallback function to process the identifier value and create a new selector
+ if (typeof processIdentifier !== "function") {
+ // If the base prefix exists and differs from the identifier value, append the identifier value to the base prefix as the new class name
+ processIdentifier = (identifierValue) => selectorPrefix && selectorPrefix !== identifierValue ? `.${selectorPrefix}--${identifierValue}` : `.${identifierValue}`;
+ }
+
+ // This object will store the mappings for each selector
+ const systemMap = new Map();
+ const conversionMap = new Map();
+
+ // Step 1: loop over all the container style queries and create a new selector for each
+ // to be used as a theming toggle for components where style queries are not natively supported
+ // @todo should there be a support check around this?
+ root.walkAtRules(/container/, (container) => {
+ if (skipMapping) {
+ if (preserveVariables) {
+ // Iterate over each rule in the container and append them to the root
+ container.walkRules((rule) => {
+ root.insertAfter(root.first, rule);
+ });
+ }
+
+ container.remove();
+ return;
+ }
+
+ // Extract the custom property name and it's value to use in creating the new selector
+ // Identifier name is the prefix used for the custom properties created for the bridge
+ // Identifier value is used to create the new selector
+ const [, identifierName, identifierValue] = container.params.match(
+ /\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/
+ );
+
+ const selectorMap = systemMap.get(identifierName) ?? {};
+
+ // Create a new rule using this selector to attach the new system-level custom properties
+ let rule;
+
+ // If we're only interested in references, we can skip the next step of appending the new rule
+ if (!referencesOnly) {
+ rule = new Rule({
+ selector: processIdentifier(identifierValue, identifierName),
+ source: container.source,
+ });
+
+ container.parent.insertAfter(container, rule);
+ }
+
+ // Iterate over each custom property in the container to create a new mapping that supports the new selector
+ container.walkDecls(/^--[A-Z|a-z]/, (decl) => {
+ selectorParser((selectors) => {
+ selectors.each((s) => {
+ // Check if the property is already mapped
+ const variableName = getVariableName(s, decl.prop, {
+ identifierName,
+ identifierValue,
+ selectorPrefix
+ });
+
+ const newDecl = decl.clone({
+ prop: variableName,
+ });
+ newDecl.raws.before = "\n ";
+
+ const uniqueSet = conversionMap.get(decl.prop) ?? new Set();
+ conversionMap.set(decl.prop, uniqueSet.add(variableName));
+
+ if (!referencesOnly) {
+ rule.append(newDecl);
+ }
+
+ const selector = s.toString();
+ selectorMap[selector] = selectorMap[selector] ?? {};
+
+ const selectorNode = selectorMap[selector];
+
+ // Check for fallbacks in the var() function
+ const fallbackValue = extractFallbackValue(decl.value);
+ if (fallbackValue) {
+ // The final declaration should have the override present
+ selectorNode[decl.prop] = `var(${fallbackValue}, var(${variableName}))`;
+
+ // The system-level declaration should only have the fallback
+ newDecl.value = `var(${fallbackValue})`;
+ }
+ else {
+ selectorNode[decl.prop] = `var(${variableName})`;
+ }
+
+ selectorMap[selector] = selectorNode;
+ });
+ }).processSync(decl.parent.selector, { lossless: false });
+ });
+
+ systemMap.set(identifierName, selectorMap);
+
+ if (rule) {
+ rule.walkDecls((decl) => {
+ const convertedProps = [...conversionMap.keys()];
+
+ if (!convertedProps.some((key) => decl.value.includes(key))) return;
+
+ // loop over all the updated properties and update internal references to the new variables
+ for (let [prop, mappedValues] of conversionMap.entries()) {
+ // Check if this key exists in the value
+ if (!decl.value.match(new RegExp(`${prop}[^-]`))) continue;
+
+ const systemValues = [...mappedValues];
+
+ // If there is only one system variable, replace all instances of the prop with the system variable
+ if (systemValues.length === 1) {
+ decl.value = decl.value.replace(new RegExp(prop, "g"), systemValues[0]);
+ continue;
+ }
+
+ const replacement = checkForReplacement(decl, prop, [
+ `--${identifierName}-${cleanPropertyName(prop, { selectorPrefix })}`,
+ ], systemValues);
+
+ if (replacement) {
+ decl.value = replacement;
+ continue;
+ }
+
+ // @note: this will be an empty variable because we didn't find a match but it will match the format of the other variables
+ decl.value = decl.value.replace(new RegExp(decl.prop, "g"), `--${identifierName}-${cleanPropertyName(decl.prop, { selectorPrefix })}`);
+ }
+ });
+ }
+
+ container.remove();
+ });
+
+ // Our job here is done
+ if (skipMapping || stripLocalSelectors) return;
+
+ for (let [, selectorMap] of systemMap.entries()) {
+ // This adds the new selectors to the root with their respective system-level mappings
+ for (let [selector, props] of Object.entries(selectorMap)) {
+ const rule = new Rule({ selector });
+
+ for (let [prop, value] of Object.entries(props)) {
+ const decl = new Declaration({ prop, value });
+ decl.raws.before = "\n ";
+
+ rule.append(decl);
+ }
+
+ root.insertAfter(root.first, rule);
+ }
+ }
+ },
+});
+
+module.exports.postcss = true;
diff --git a/plugins/postcss-add-theming-layer/package.json b/plugins/postcss-add-theming-layer/package.json
new file mode 100644
index 00000000000..16f0b7164ed
--- /dev/null
+++ b/plugins/postcss-add-theming-layer/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "@spectrum-tools/postcss-add-theming-layer",
+ "version": "0.0.0",
+ "description": "Leveraging style container queries to create an abstraction layer for supporting multiple theming systems",
+ "license": "Apache-2.0",
+ "author": "Adobe",
+ "contributors": [
+ "Cassondra Roberts "
+ ],
+ "main": "index.js",
+ "files": [
+ "package.json",
+ "index.js",
+ "*.md"
+ ],
+ "dependencies": {
+ "postcss-selector-parser": "^6.1.1",
+ "postcss-values-parser": "^6.0.2"
+ },
+ "peerDependencies": {
+ "postcss": ">=8"
+ },
+ "devDependencies": {
+ "ava": "^6.1.3",
+ "c8": "^10.1.2",
+ "postcss": "^8.4.45"
+ },
+ "keywords": [
+ "css",
+ "theming",
+ "custom properties",
+ "postcss",
+ "postcss-plugin"
+ ]
+}
diff --git a/plugins/postcss-splitinator/project.json b/plugins/postcss-add-theming-layer/project.json
similarity index 76%
rename from plugins/postcss-splitinator/project.json
rename to plugins/postcss-add-theming-layer/project.json
index 9dfb4ded7c9..7797edce0f8 100644
--- a/plugins/postcss-splitinator/project.json
+++ b/plugins/postcss-add-theming-layer/project.json
@@ -1,7 +1,7 @@
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
- "name": "postcss-splitinator",
- "tags": ["tooling", "postcss", "plugin"],
+ "name": "postcss-add-theming-layer",
+ "tags": ["tooling", "postcss"],
"targets": {
"format": {
"defaultConfiguration": "plugins"
diff --git a/plugins/postcss-splitinator/test.js b/plugins/postcss-add-theming-layer/test.js
similarity index 89%
rename from plugins/postcss-splitinator/test.js
rename to plugins/postcss-add-theming-layer/test.js
index 2e2923f7b91..ed431c85f20 100644
--- a/plugins/postcss-splitinator/test.js
+++ b/plugins/postcss-add-theming-layer/test.js
@@ -20,14 +20,7 @@ function compare(
t,
fixtureFilePath,
expectedFilePath,
- options = {
- processIdentifier: (identifier) => {
- if (identifier === "express") {
- return "spectrum--express";
- }
- return identifier;
- },
- }
+ options = {}
) {
return postcss([plugin(options)])
.process(readFile(`./fixtures/${fixtureFilePath}`), {
diff --git a/plugins/postcss-add-theming-layer/utilities.js b/plugins/postcss-add-theming-layer/utilities.js
new file mode 100644
index 00000000000..0988f27ce38
--- /dev/null
+++ b/plugins/postcss-add-theming-layer/utilities.js
@@ -0,0 +1,244 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+const valuesParser = require("postcss-values-parser");
+
+/**
+ * Clean the property name to be used as a variable name
+ * @param {string} prop
+ * @param {{ selectorPrefix: string }} options
+ * @returns {string} The clean variable name
+ */
+function cleanPropertyName(prop, { selectorPrefix = "" } = {}) {
+ if (!prop) return;
+ return (
+ prop
+ // Remove the provided prefix if used
+ .replace(new RegExp(selectorPrefix, "gi"), "")
+ // Remove mod from the new property name
+ .replace(/-?mod-/g, "-")
+ // Remove state-based prefix
+ .replace(/is-/g, "")
+ // Remove the internal identifier marker
+ .replace(/^_/g, "")
+ // If a string has a lowercase letter followed by an uppercase letter, insert a dash between them
+ .replace(/([a-z])([A-Z])/g, "$1-$2")
+ // If a string has two uppercase letters followed by a lowercase letter, insert a dash between them
+ .replace(/([A-Z])([A-Z])([a-z])/g, "$1-$2$3")
+ .replace(/([a-z])([0-9])/g, "$1-$2")
+ // Remove all whitespace
+ .replace(/\s+/g, "")
+ // Remove non-alphanumeric characters
+ .replace(/\W/g, "-")
+ // Replace multiple dashes with a single dash
+ .replace(/-+/g, "-")
+ // Remove any leading or trailing dashes
+ .replace(/^-/g, "")
+ .replace(/-$/g, "")
+ .toLowerCase()
+ );
+}
+
+/**
+ * Extract the fallback value from a var() function
+ * @param {string} declValue
+ * @returns {string} The fallback value
+ */
+function extractFallbackValue(declValue) {
+ const parsed = valuesParser.parse(declValue);
+ let fallbackValue;
+
+ parsed.walk((node) => {
+ if (node.type !== "func" || node.value !== "var") {
+ return;
+ }
+
+ // Assuming the second argument of the var() function is the fallback
+ const fallbackNode = node.nodes[2];
+ if (fallbackNode) {
+ // Convert the fallback node back to a string
+ fallbackValue = valuesParser.stringify(fallbackNode);
+ }
+ });
+
+ return fallbackValue;
+}
+
+/**
+ * Get the base selector for a given selector
+ * @param {string} selector
+ * @param {{ selectorPrefix: string }} options
+ * @returns {string} The base selector
+ */
+function getBaseSelector(selector, { selectorPrefix = "" } = {}) {
+ let baseSelector;
+
+ if (!selector || !selector.nodes) return baseSelector;
+
+ // This regex is designed to pull spectrum- out of a selector
+ const baseRegex = new RegExp(
+ `^(${selectorPrefix ? `${selectorPrefix}-` : ""}[A-Z][^\\W-.\\s]+)`,
+ );
+
+ // Iterate over the selector nodes to find a common root class name
+ const found = [];
+ selector.each((node) => {
+ if (node.type !== "class") return;
+ if (!node.value) return;
+
+ const value = node.value ?? node.toString();
+ const matches = value.match(baseRegex);
+ if (!matches) return;
+
+ const [, foundSelector] = matches;
+ if (foundSelector) found.push(foundSelector);
+ });
+
+ if (found.length === 1) {
+ return cleanPropertyName(found[0], { selectorPrefix });
+ }
+
+ let countMap = new Map();
+
+ // Find and return the most common base selector in the array
+ found.forEach((s) => countMap.set(s, (countMap.get(s) || 0) + 1));
+
+ let count = 0;
+ for (let [s, c] of countMap.entries()) {
+ if (c > count) {
+ baseSelector = s;
+ count = c;
+ }
+ }
+
+ // Remove the selector prefix from the returned base selector
+ return baseSelector ? cleanPropertyName(baseSelector, { selectorPrefix }) : baseSelector;
+}
+
+/**
+ * Fallback function to process the name of the new variable
+ * @param {string} selector
+ * @param {string} prop
+ * @param {{ identifierName: string, identifierValue: string, selectorPrefix: string }} options
+ * @returns {string} The new variable name
+ */
+function getVariableName(
+ selector,
+ prop,
+ { selectorPrefix = "", identifierName, identifierValue } = {},
+) {
+ const baseSelector = getBaseSelector(selector, { selectorPrefix }) ?? "";
+
+ const clean = (prop) =>
+ prop &&
+ cleanPropertyName(
+ prop
+ .replace(new RegExp(selectorPrefix, "gi"), "")
+ // Remove the identifers if they exist
+ .replace(new RegExp(baseSelector, "gi"), "")
+ // Check for identifiers in the property name that don't include the dash
+ .replace(new RegExp(baseSelector?.replace(/-/g, ""), "gi"), "")
+ .replace(new RegExp(identifierName, "gi"), "")
+ .replace(new RegExp(identifierValue, "gi"), ""),
+ { selectorPrefix }
+ );
+
+ let property = [];
+
+ function processSelector(node) {
+ if (node.type === "pseudo") {
+ property.push(node.value.slice(1));
+ }
+ else if (node.type === "tag") {
+ property.push(node.value);
+ }
+ else if (node.type === "combinator") {
+ switch (node.value) {
+ case " ": // Descendant combinator
+ break;
+ case ">":
+ property.push("child-of");
+ break;
+ case "+":
+ property.push("next-to");
+ break;
+ case "~":
+ property.push("sibling-of");
+ break;
+ }
+ }
+ else if (node.type === "class") {
+ if (node.value === baseSelector) return;
+ property.push(clean(node.value));
+ return;
+ }
+
+ if (!node.nodes) return;
+ node.each(processSelector);
+ }
+
+ selector.each(processSelector);
+
+ // Dedupe the property array, removing the 2nd instance of a property
+ property = property
+ .filter((value, index) => property.indexOf(value) === index)
+ .filter(Boolean);
+
+ return `--${[identifierName, baseSelector, clean([...property, prop].filter(Boolean).join("-"))].filter(Boolean).join("-").toLowerCase()}`;
+}
+
+/**
+ * Check for a replacement value based on the provided guesses
+ * @param {import('postcss').Declaration} decl
+ * @param {string} replace
+ * @param {string[]} guesses
+ * @param {string[]} systemValues
+ * @returns {string|undefined|void} The updated declaration value
+ */
+function checkForReplacement(
+ decl,
+ replace,
+ guesses = [],
+ systemValues = [],
+) {
+ if (!decl || !replace || guesses.length === 0) return;
+
+ const replacer = new RegExp(replace, "g");
+
+ for (const g of guesses) {
+ if (systemValues.includes(g)) {
+ return decl.value.replace(replacer, g);
+ }
+
+ const values = systemValues.filter((value) => value.startsWith(g));
+ if (values.length === 0) continue;
+
+ if (values.length === 1) {
+ return decl.value.replace(replacer, values[0]);
+ }
+
+ if (values.length > 1) {
+ return decl.value.replace(replacer, values[0]);
+ }
+
+ continue;
+ }
+}
+
+module.exports = {
+ cleanPropertyName,
+ extractFallbackValue,
+ getBaseSelector,
+ getVariableName,
+ checkForReplacement,
+};
diff --git a/plugins/postcss-combininator/README.md b/plugins/postcss-combininator/README.md
deleted file mode 100644
index 50c4b6d28c3..00000000000
--- a/plugins/postcss-combininator/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# postcss-combininator
-
-> Combines multiple blocks of custom properties
-
-## Installation
-
-```sh
-npm install postcss-combininator
-postcss -u postcss-combininator -o dist/index.css src/index.css
-```
-
-## Usage
-
-This plugin turns this:
-
-```css
-.spectrum {
- --spectrum-actionbutton-background-color: blue;
- --spectrum-actionbutton-border-color: transparent;
-}
-
-.spectrum--express {
- --spectrum-actionbutton-background-color: purple;
-}
-```
-
-Into this:
-
-```css
-.spectrum--express {
- --spectrum-actionbutton-border-color: transparent;
- --spectrum-actionbutton-background-color: purple;
-}
-```
-
-The resulting selector comes from the last rule, and all duplicate properties in the subsequent rules override the previous declarations.
diff --git a/plugins/postcss-combininator/index.js b/plugins/postcss-combininator/index.js
deleted file mode 100644
index 1a392d94637..00000000000
--- a/plugins/postcss-combininator/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/**
- * @typedef Options
- */
-
-/** @type import('postcss').PluginCreator */
-module.exports = () => {
- return {
- postcssPlugin: "postcss-combininator",
- OnceExit(root) {
- const rules = [];
- const declarations = {};
-
- root.walkRules((rule) => {
- rules.push(rule);
- rule.walkDecls(/^--/, (decl) => {
- declarations[decl.prop] = decl;
- decl.remove();
- });
- });
-
- if (!rules.length) return;
-
- const lastIdx = rules.length - 1;
- const lastRule = rules[lastIdx];
- if (!lastRule) return;
-
- rules.forEach((rule, index) => {
- if (index !== lastIdx) rule.remove();
- });
-
- for (const decl of Object.values(declarations)) {
- lastRule.append(decl);
- }
- },
- };
-};
-
-module.exports.postcss = true;
diff --git a/plugins/postcss-combininator/package.json b/plugins/postcss-combininator/package.json
deleted file mode 100644
index 23a64684f14..00000000000
--- a/plugins/postcss-combininator/package.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
- "private": true,
- "name": "postcss-combininator",
- "version": "2.0.1",
- "description": "Combines multiple blocks of custom properties",
- "license": "Apache-2.0",
- "author": "Adobe",
- "main": "index.js",
- "files": [
- "index.js"
- ],
- "scripts": {
- "coverage": "c8 yarn test",
- "prepublishOnly": "yarn test",
- "test": "ava"
- },
- "dependencies": {
- "postcss": "^8.4.49"
- },
- "peerDependencies": {
- "postcss": ">=8"
- },
- "devDependencies": {
- "ava": "^6.1.3",
- "c8": "^9.1.0",
- "postcss": "^8.4.49"
- },
- "keywords": [
- "css",
- "rgb",
- "plugin",
- "postcss"
- ]
-}
diff --git a/plugins/postcss-combininator/CHANGELOG.md b/plugins/postcss-property-rollup/CHANGELOG.md
similarity index 100%
rename from plugins/postcss-combininator/CHANGELOG.md
rename to plugins/postcss-property-rollup/CHANGELOG.md
diff --git a/plugins/postcss-property-rollup/README.md b/plugins/postcss-property-rollup/README.md
new file mode 100644
index 00000000000..20fe1c9f821
--- /dev/null
+++ b/plugins/postcss-property-rollup/README.md
@@ -0,0 +1,67 @@
+# postcss-property-rollup
+
+> Combines multiple blocks of custom properties
+
+## Installation
+
+```sh
+npm install postcss-property-rollup
+```
+
+## Usage
+
+On the command line:
+
+```sh
+postcss -u postcss-property-rollup -o dist/index.css src/index.css
+```
+
+or in the PostCSS configuration:
+
+```js
+module.exports = {
+ plugins: {
+ "postcss-property-rollup": {},
+ },
+};
+```
+
+This plugin turns this:
+
+```css
+.lorem {
+ --spectrum-actionbutton-background-color: blue;
+ --spectrum-actionbutton-border-color: transparent;
+}
+
+.ipsum {
+ --spectrum-actionbutton-background-color: purple;
+}
+```
+
+Into this:
+
+```css
+.ipsum {
+ --spectrum-actionbutton-border-color: transparent;
+ --spectrum-actionbutton-background-color: purple;
+}
+```
+
+The resulting selector comes from the last rule unless a `newSelector` option is provided, and all duplicate properties in the subsequent rules override the previous declarations.
+
+## Options
+
+### `newSelector`
+
+Type: `string`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * @typedef Options
+ * @property ignore {string[]} - List of selectors to ignore
+ * @property newSelector {string} - New selector to create with the combined declarations
+ */
+
+/** @type import('postcss').PluginCreator */
+module.exports = ({
+ ignore = [],
+ newSelector,
+} = {}) => {
+ return {
+ postcssPlugin: "postcss-property-rollup",
+ OnceExit(root, { Rule }) {
+ let shouldCombine = false;
+ let localSelector;
+ // Check the file for a comment with @combine and fetch the preceeding selector(s)
+ root.walkComments((comment) => {
+ if (!comment.text.includes("@combine")) return;
+
+ shouldCombine = true;
+
+ // Remove the @combine from the string
+ const selectors = comment.text.replace("@combine", "").trim();
+
+ comment.remove();
+
+ if (!selectors) return;
+
+ // Prefer the selectors from the comment over one provided in the config
+ if (!localSelector) localSelector = selectors;
+ });
+
+ if (!shouldCombine) return;
+
+ if (localSelector) newSelector = localSelector;
+
+ const rules = [];
+ const declarations = {};
+
+ root.walkRules((rule) => {
+ if (ignore.includes(rule.selector)) return;
+ rules.push(rule);
+ rule.walkDecls(/^--/, (decl) => {
+ declarations[decl.prop] = decl;
+ decl.remove();
+ });
+ });
+
+ if (!rules.length) return;
+
+ if (newSelector) {
+ // Create a new rule with the combined declarations
+ const newRule = new Rule({ selector: newSelector });
+ for (const decl of Object.values(declarations)) {
+ newRule.append(decl);
+ }
+ root.append(newRule);
+
+ // Remove the rules from the root
+ rules.forEach((rule) => {
+ rule.remove();
+ });
+
+ return;
+ }
+
+ // If no new selector is provided, combine the declarations into the last rule
+ const lastIdx = rules.length - 1;
+ const lastRule = rules[lastIdx];
+
+ if (!lastRule) return;
+
+ rules.forEach((rule, index) => {
+ if (index !== lastIdx) rule.remove();
+ });
+
+ for (const decl of Object.values(declarations)) {
+ lastRule.append(decl);
+ }
+ },
+ };
+};
+
+module.exports.postcss = true;
diff --git a/plugins/postcss-property-rollup/package.json b/plugins/postcss-property-rollup/package.json
new file mode 100644
index 00000000000..5c38926e1e6
--- /dev/null
+++ b/plugins/postcss-property-rollup/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "@spectrum-tools/postcss-property-rollup",
+ "version": "0.0.0",
+ "description": "Combines custom properties from multiple selectors into a single selector",
+ "license": "Apache-2.0",
+ "author": "Adobe",
+ "contributors": [
+ "Cassondra Roberts "
+ ],
+ "main": "index.js",
+ "files": [
+ "package.json",
+ "index.js",
+ "*.md"
+ ],
+ "peerDependencies": {
+ "postcss": ">=8"
+ },
+ "devDependencies": {
+ "ava": "^6.1.3",
+ "c8": "^10.1.2",
+ "postcss": "^8.4.45"
+ },
+ "keywords": [
+ "css",
+ "theming",
+ "custom properties",
+ "postcss",
+ "postcss-plugin"
+ ]
+}
diff --git a/plugins/postcss-combininator/project.json b/plugins/postcss-property-rollup/project.json
similarity index 76%
rename from plugins/postcss-combininator/project.json
rename to plugins/postcss-property-rollup/project.json
index f4846981224..681869f7a14 100644
--- a/plugins/postcss-combininator/project.json
+++ b/plugins/postcss-property-rollup/project.json
@@ -1,7 +1,7 @@
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
- "name": "postcss-combininator",
- "tags": ["tooling", "postcss", "plugin"],
+ "name": "postcss-property-rollup",
+ "tags": ["tooling", "postcss"],
"targets": {
"format": {
"defaultConfiguration": "plugins"
diff --git a/plugins/postcss-combininator/test.js b/plugins/postcss-property-rollup/test.js
similarity index 100%
rename from plugins/postcss-combininator/test.js
rename to plugins/postcss-property-rollup/test.js
diff --git a/plugins/postcss-rgb-mapping/CHANGELOG.md b/plugins/postcss-rgb-mapping/CHANGELOG.md
index 88dd518e315..6ca1f209e5f 100644
--- a/plugins/postcss-rgb-mapping/CHANGELOG.md
+++ b/plugins/postcss-rgb-mapping/CHANGELOG.md
@@ -1,5 +1,11 @@
# postcss-rgb-mapping
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to the rgb mapping plugin brought back rgb alias's to tokens output
+
## 2.1.0
### Minor Changes
diff --git a/plugins/postcss-rgb-mapping/README.md b/plugins/postcss-rgb-mapping/README.md
index 4111ac0efe7..198d3adecb4 100644
--- a/plugins/postcss-rgb-mapping/README.md
+++ b/plugins/postcss-rgb-mapping/README.md
@@ -5,7 +5,7 @@
## Installation
```sh
-yarn add -D postcss-rgb-mapping
+yarn add -D @spectrum-tools/postcss-rgb-mapping
postcss -u postcss-rgb-mapping -o dist/index.css src/index.css
```
diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js
index d38378a3059..155a1c68cfe 100644
--- a/plugins/postcss-rgb-mapping/index.js
+++ b/plugins/postcss-rgb-mapping/index.js
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-const valueParser = require("postcss-value-parser");
+const valuesParser = require("postcss-values-parser");
/** @typedef {object} Options */
@@ -35,9 +35,10 @@ function rgbMappingFunction ({
const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity");
/* Parse the value for it's parts */
- const parsedValue = valueParser(value) || [];
+ const parsedValue = valuesParser.parse(value) || [];
+
/* Determine if the value has an rgb or rgba value */
- const hasRGBValue = parsedValue.nodes.length ? parsedValue.nodes.some((node) => node.type === "function" && (["rgb", "rgba"].some(func => node.value === func))) : false;
+ const hasRGBValue = parsedValue.nodes.length ? parsedValue.nodes.some((node) => node.type === "func" && (["rgb", "rgba"].some(func => node.name === func))) : false;
/*
* If the property is not a custom prop, or
@@ -48,10 +49,17 @@ function rgbMappingFunction ({
*/
if (!isCustomProp || isProcessed || !hasRGBValue || parsedValue.nodes.length === 0) return;
- const rgba = parsedValue.nodes.find((node) => node.type === "function" && (["rgb", "rgba"].some(func => node.value === func)));
+ const rgba = parsedValue.nodes.find((node) => node.type === "func" && (["rgb", "rgba"].some(func => node.name === func)));
const [r,g,b,a] = rgba.nodes.reduce((acc, node) => {
- if (node.type === "word" && node.value) acc.push(node.value);
+ if (node.type === "numeric" && node.value) {
+ if (node?.unit && node.unit === "%") {
+ acc.push((node.value / 100).toFixed(2));
+ }
+ else {
+ acc.push(node.value);
+ }
+ }
return acc;
}, []);
diff --git a/plugins/postcss-rgb-mapping/package.json b/plugins/postcss-rgb-mapping/package.json
index 55b3dafab71..0e9705f78d1 100644
--- a/plugins/postcss-rgb-mapping/package.json
+++ b/plugins/postcss-rgb-mapping/package.json
@@ -1,31 +1,28 @@
{
"private": true,
- "name": "postcss-rgb-mapping",
- "version": "2.1.0",
+ "name": "@spectrum-tools/postcss-rgb-mapping",
+ "version": "3.0.0-s2-foundations.0",
"description": "Remaps rgb(a) values to an rgb postfixed variable",
"license": "Apache-2.0",
"author": "Adobe",
"contributors": [
- "Cassondra Roberts (https://allons-y.llc)"
+ "Cassondra Roberts "
],
"main": "index.js",
"files": [
- "index.js"
+ "package.json",
+ "index.js",
+ "*.md"
],
- "scripts": {
- "coverage": "c8 yarn test",
- "prepublishOnly": "yarn test",
- "test": "ava"
- },
"dependencies": {
- "postcss-value-parser": "^4.2.0"
+ "postcss-values-parser": "^6.0.2"
},
"peerDependencies": {
"postcss": ">=8"
},
"devDependencies": {
"ava": "^6.1.3",
- "c8": "^9.1.0",
+ "c8": "^10.1.2",
"postcss": "^8.4.49"
},
"keywords": [
diff --git a/plugins/postcss-splitinator/README.md b/plugins/postcss-splitinator/README.md
deleted file mode 100644
index 99adb64bb4d..00000000000
--- a/plugins/postcss-splitinator/README.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# postcss-splitinator
-
-> Splits custom properties organized by classes into named tokens
-
-## Installation
-
-Add the dependency to your project:
-
-```sh
-npm install postcss-splitinator
-```
-
-or
-
-```sh
-yarn add -DW postcss-splitinator
-```
-
-Use the plugin in your PostCSS configuration:
-
-```js
-module.exports = {
- plugins: [
- require("postcss-splitinator")({
- // options
- }),
- ],
-};
-```
-
-or as part of your CLI command:
-
-```sh
-postcss -u postcss-splitinator -o dist/index.css src/index.css
-```
-
-## Options
-
-### `options.getName = function(selector, prop)`
-
-Customize the creation of variable names. By default, as SUIT naming convention is assumed and variable names are created accordingly.
-
-### `options.processIdentifier = function(identifierValue, identifierName)`
-
-Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. `identifierValue = spectrum` and `identifierName = system` for the example below. By default, `identifierName` is used as-is.
-
-### `options.noFlatVariables = false`
-
-Whether to avoid including flat variables in the output.
-
-### `options.noSelectors = false`
-
-Whether to avoid including selectors that use the flat variables in the output.
-
-### `options.referencesOnly = false`
-
-This option will only output those variables that are referencing the newly created system variabes and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component.
-
-## Usage
-
-This plugin turns this:
-
-```css
-@container (--system: spectrum) {
- .component {
- --background-color: blue;
- }
- .component.is-selected {
- --background-color: darkblue;
- }
- .component .icon {
- --color: gray;
- }
-}
-
-@container (--system: express) {
- .component {
- --background-color: purple;
- }
- .component.is-selected {
- --background-color: darkpurple;
- }
- .component .icon {
- --color: white;
- }
-}
-```
-
-Into this:
-
-```css
-.spectrum {
- --system-component-background-color: blue;
- --system-component-selected-background-color: darkblue;
-}
-
-.spectrum--express {
- --system-component-background-color: purple;
- --system-component-selected-background-color: darkpurple;
-}
-
-.component {
- --background-color: var(--system-component-background-color);
-}
-
-.component.is-selected {
- --background-color: var(--system-component-selected-background-color);
-}
-```
diff --git a/plugins/postcss-splitinator/expected/basic.css b/plugins/postcss-splitinator/expected/basic.css
deleted file mode 100644
index e3e1349f65f..00000000000
--- a/plugins/postcss-splitinator/expected/basic.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.spectrum {
- --system-component-background-color: blue;
- --system-component-selected-background-color: darkblue;
- --system-component-icon-color: gray
-}
-
-.spectrum--express {
- --system-component-background-color: purple;
- --system-component-selected-background-color: darkpurple;
- --system-component-icon-color: white
-}
-
-.component {
- --background-color: var(--system-component-background-color)
-}
-
-.component.is-selected {
- --background-color: var(--system-component-selected-background-color)
-}
-
-.component .icon {
- --color: var(--system-component-icon-color)
-}
diff --git a/plugins/postcss-splitinator/fixtures/basic.css b/plugins/postcss-splitinator/fixtures/basic.css
deleted file mode 100644
index 3ad6289a5ee..00000000000
--- a/plugins/postcss-splitinator/fixtures/basic.css
+++ /dev/null
@@ -1,23 +0,0 @@
-@container (--system: spectrum) {
- .component {
- --background-color: blue;
- }
- .component.is-selected {
- --background-color: darkblue;
- }
- .component .icon {
- --color: gray;
- }
-}
-
-@container (--system: express) {
- .component {
- --background-color: purple;
- }
- .component.is-selected {
- --background-color: darkpurple;
- }
- .component .icon {
- --color: white;
- }
-}
diff --git a/plugins/postcss-splitinator/fixtures/where.css b/plugins/postcss-splitinator/fixtures/where.css
deleted file mode 100644
index 2c00ff4098b..00000000000
--- a/plugins/postcss-splitinator/fixtures/where.css
+++ /dev/null
@@ -1,23 +0,0 @@
-@container (--system: spectrum) {
- :where(.component) {
- --background-color: blue;
- }
- :where(.component.is-selected) {
- --background-color: darkblue;
- }
- :where(.component .icon) {
- --color: gray;
- }
-}
-
-@container (--system: express) {
- :where(.component) {
- --background-color: purple;
- }
- :where(.component.is-selected) {
- --background-color: darkpurple;
- }
- :where(.component .icon) {
- --color: white;
- }
-}
diff --git a/plugins/postcss-splitinator/index.js b/plugins/postcss-splitinator/index.js
deleted file mode 100644
index d51caf0b557..00000000000
--- a/plugins/postcss-splitinator/index.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/**
- * @typedef Options
- * @property {boolean} [noFlatVariables=false]
- * @property {boolean} [noSelectors=false]
- * @property {(identifierValue: string, identifierName: string) => string} [processIdentifier]
- * @property {(selector: string, prop: string) => string} [getName]
-*/
-
-/** @type import('postcss').PluginCreator */
-module.exports = ({
- noFlatVariables = false,
- noSelectors = false,
- referencesOnly = false,
- processIdentifier,
- getName = (selector, prop) => {
- selector = selector.replace(/^:where\((.*?)\)$/, "$1");
-
- // This regex is designed to pull spectrum-ActionButton out of a selector
- let baseSelectorMatch = selector.match(/^\.([a-z]+-[A-Z][^-. ]+)/);
- if (baseSelectorMatch) {
- const [, baseSelector] = baseSelectorMatch;
- const baseSelectorRegExp = new RegExp(baseSelector, "gi");
- prop = prop.replace(baseSelectorRegExp, "");
- selector = baseSelector + selector.replace(baseSelectorRegExp, "");
- }
-
- selector = selector.replace(/is-/g, "");
-
- let selectorParts = selector.replace(/\s+/g, "").replace(/,/g, "").split(".");
-
- return (
- "--" +
- (`system-${selectorParts.join("-")}-${prop.substr(2)}`)
- .replace(/-+/g, "-")
- .toLowerCase()
- );
- },
-}) => ({
- postcssPlugin: "postcss-splitinator",
- OnceExit(root, { Rule, Declaration }) {
- const selectorMap = {};
-
- root.walkAtRules(/container/, (container) => {
- const [, identifierName, identifierValue] = container.params.match(
- /\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/
- );
-
- const rule = new Rule({
- selector: `.${
- typeof processIdentifier === "function"
- ? processIdentifier(identifierValue, identifierName)
- : identifierValue
- }`,
- source: container.source,
- });
-
- if (!noFlatVariables) {
- container.parent.insertAfter(container, rule);
- }
-
- container.walkDecls(/^--/, (decl) => {
- // Process rules that match multiple selectors separately to avoid weird var names and edge cases
- // note: this doesn't support :where() and is likely brittle!
- const selectors = decl.parent.selector.split(/\s*,\s*/);
- selectors.forEach((selector) => {
- const variableName = getName(selector, decl.prop);
- const newDecl = decl.clone({
- prop: variableName,
- });
- newDecl.raws.before = "\n ";
-
- if (!noFlatVariables) {
- rule.append(newDecl);
- }
-
- const selectorNode = (selectorMap[selector] =
- selectorMap[selector] || {});
-
- // Check for fallbacks
- // todo: use valueparser instead of a regex
- const fallbackMatch = decl.value.match(
- /var\(\s*(.*?)\s*,\s*var\(\s*(.*?)\s*\)\)/
- );
- if (fallbackMatch) {
- const [, override, fallback] = fallbackMatch;
-
- // The final declaration should have the override present
- selectorNode[
- decl.prop
- ] = `var(${override}, var(${variableName}))`;
-
- // The system-level declaration should only have the fallback
- newDecl.value = `var(${fallback})`;
- } else {
- selectorNode[decl.prop] = `var(${variableName})`;
- }
- });
- });
-
- container.remove();
- });
-
- if (noSelectors) return;
-
- if (referencesOnly) {
- // Empty out the root so we only have the references to --system- variables
- // Keep the copyright notice at the top
- // Find the copyright comment
- let comment = root.first;
- while (comment?.type !== "comment") {
- comment = comment.next();
- // Check the comment for the word "Copyright"
- if (comment?.text.match(/Copyright/)) break;
- }
-
- root.removeAll();
- if (comment) root.append(comment);
- }
-
- for (let [selector, props] of Object.entries(selectorMap)) {
- const rule = new Rule({ selector });
-
- for (let [prop, value] of Object.entries(props)) {
- const decl = new Declaration({ prop, value });
- decl.raws.before = "\n ";
-
- rule.append(decl);
- }
-
- root.append(rule);
- }
- },
-});
-
-module.exports.postcss = true;
diff --git a/plugins/postcss-splitinator/package.json b/plugins/postcss-splitinator/package.json
deleted file mode 100644
index 3fcac08db7a..00000000000
--- a/plugins/postcss-splitinator/package.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
- "private": true,
- "name": "postcss-splitinator",
- "version": "2.1.0",
- "description": "Turn container queryies into the var hack",
- "license": "Apache-2.0",
- "author": "Adobe",
- "main": "index.js",
- "files": [
- "index.js"
- ],
- "scripts": {
- "coverage": "c8 yarn test",
- "prepublishOnly": "yarn test",
- "test": "ava"
- },
- "dependencies": {
- "postcss": "^8.4.49"
- },
- "peerDependencies": {
- "postcss": ">=8.0.0"
- },
- "devDependencies": {
- "ava": "^6.1.3",
- "c8": "^9.1.0",
- "postcss": "^8.4.49"
- },
- "keywords": [
- "css",
- "rgb",
- "plugin",
- "postcss"
- ],
- "publishConfig": {
- "access": "public"
- }
-}
diff --git a/plugins/stylelint-no-missing-var/CHANGELOG.md b/plugins/stylelint-no-missing-var/CHANGELOG.md
index 488fd55b0e5..bd31b1d758b 100644
--- a/plugins/stylelint-no-missing-var/CHANGELOG.md
+++ b/plugins/stylelint-no-missing-var/CHANGELOG.md
@@ -1,5 +1,11 @@
# Change Log
+## 2.0.2-s2-foundations.0
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`683871c`](https://github.com/adobe/spectrum-css/commit/683871c8cec3de3585c3d29fc63bd8bbf71e245a) Thanks [@pfulton](https://github.com/pfulton)! - Dependency updates to align with versions used in the parent repository.
+
## 2.0.1
### Patch Changes
diff --git a/plugins/stylelint-no-missing-var/package.json b/plugins/stylelint-no-missing-var/package.json
index 6b60cbd31c3..fb034990f24 100644
--- a/plugins/stylelint-no-missing-var/package.json
+++ b/plugins/stylelint-no-missing-var/package.json
@@ -1,14 +1,22 @@
{
"name": "@spectrum-tools/stylelint-no-missing-var",
- "version": "2.0.1",
+ "version": "2.0.2-s2-foundations.0",
"description": "Check for custom properties without a var function around them",
"license": "Apache-2.0",
"author": "Adobe",
+ "contributors": [
+ "Cassondra Roberts "
+ ],
"type": "module",
"main": "index.js",
"scripts": {
"test": "ava"
},
+ "files": [
+ "package.json",
+ "index.js",
+ "*.md"
+ ],
"dependencies": {
"colors": "^1.4.0"
},
diff --git a/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md b/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md
index 540536682d2..5e1c7cbb3d2 100644
--- a/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md
+++ b/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md
@@ -1,5 +1,11 @@
# Change Log
+## 2.0.2-s2-foundations.0
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`683871c`](https://github.com/adobe/spectrum-css/commit/683871c8cec3de3585c3d29fc63bd8bbf71e245a) Thanks [@pfulton](https://github.com/pfulton)! - Dependency updates to align with versions used in the parent repository.
+
## 2.0.1
### Patch Changes
diff --git a/plugins/stylelint-no-unknown-custom-properties/index.js b/plugins/stylelint-no-unknown-custom-properties/index.js
index 6afd483867b..443af61c20e 100644
--- a/plugins/stylelint-no-unknown-custom-properties/index.js
+++ b/plugins/stylelint-no-unknown-custom-properties/index.js
@@ -12,7 +12,7 @@
import { existsSync, readFileSync } from "fs";
import { createRequire } from "module";
-import { join, sep } from "path";
+import { extname, join, sep } from "path";
const require = createRequire(import.meta.url);
import stylelint from "stylelint";
@@ -94,10 +94,25 @@ const ruleFunction = (enabled, options = {}) => {
const content = readFileSync(req, "utf8");
if (!content) return;
- // Fetch all defined custom properties
- parse(content).walkDecls(/^--/, ({ prop }) => {
- sharedDefinitions.add(prop);
- });
+ // If the file is a CSS file, parse it for custom properties
+ if (extname(req) === ".css") {
+ // Fetch all defined custom properties
+ parse(content).walkDecls(/^--/, ({ prop }) => {
+ sharedDefinitions.add(prop);
+ });
+ }
+ else if (extname(req) === ".json") {
+ const data = JSON.parse(content);
+ Object.keys(data).forEach((key) => {
+ if (typeof key !== "string") return;
+ if (!key.startsWith("--")) {
+ sharedDefinitions.add(`--spectrum-${key.replace(".", "-")}`);
+ }
+ else {
+ sharedDefinitions.add(key);
+ }
+ });
+ }
}
// Check dependencies for custom properties
@@ -115,8 +130,7 @@ const ruleFunction = (enabled, options = {}) => {
if (allDependencies.size === 0) return;
- // @todo this is a hard-coded assumption that we only care about spectrum-css dependencies
- for (const dep of [...allDependencies].filter(dep => dep.startsWith("@spectrum-css"))) {
+ for (const dep of [...allDependencies]) {
try {
fetchResolutions(dep);
}
diff --git a/plugins/stylelint-no-unknown-custom-properties/package.json b/plugins/stylelint-no-unknown-custom-properties/package.json
index 1c818460724..9177346323d 100644
--- a/plugins/stylelint-no-unknown-custom-properties/package.json
+++ b/plugins/stylelint-no-unknown-custom-properties/package.json
@@ -1,7 +1,7 @@
{
"private": true,
"name": "@spectrum-tools/stylelint-no-unknown-custom-properties",
- "version": "2.0.1",
+ "version": "2.0.2-s2-foundations.0",
"description": "Report on any unknown custom property definitions",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/plugins/stylelint-no-unused-custom-properties/CHANGELOG.md b/plugins/stylelint-no-unused-custom-properties/CHANGELOG.md
index 19edc45626e..69bdd698284 100644
--- a/plugins/stylelint-no-unused-custom-properties/CHANGELOG.md
+++ b/plugins/stylelint-no-unused-custom-properties/CHANGELOG.md
@@ -1,5 +1,17 @@
# Change Log
+## 2.0.2-s2-foundations.0
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`683871c`](https://github.com/adobe/spectrum-css/commit/683871c8cec3de3585c3d29fc63bd8bbf71e245a) Thanks [@pfulton](https://github.com/pfulton)! - Dependency updates to align with versions used in the parent repository.
+
+## 2.0.2
+
+### Patch Changes
+
+- [#3300](https://github.com/adobe/spectrum-css/pull/3300) [`89797d0`](https://github.com/adobe/spectrum-css/commit/89797d0324bcbf2195a28840ce87ed6959da24a5) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor logic clean-up for more efficient escapes when checking for warnings.
+
## 2.0.2
### Patch Changes
diff --git a/plugins/stylelint-no-unused-custom-properties/package.json b/plugins/stylelint-no-unused-custom-properties/package.json
index 1017e8204e6..62bada245df 100644
--- a/plugins/stylelint-no-unused-custom-properties/package.json
+++ b/plugins/stylelint-no-unused-custom-properties/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-tools/stylelint-no-unused-custom-properties",
- "version": "2.0.2",
+ "version": "2.0.2-s2-foundations.0",
"description": "Report on any unused custom property definitions",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/plugins/stylelint-theme-alignment/CHANGELOG.md b/plugins/stylelint-theme-alignment/CHANGELOG.md
index d369f6a6213..98d56fc3a8e 100644
--- a/plugins/stylelint-theme-alignment/CHANGELOG.md
+++ b/plugins/stylelint-theme-alignment/CHANGELOG.md
@@ -1,5 +1,11 @@
# Change Log
+## 2.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`683871c`](https://github.com/adobe/spectrum-css/commit/683871c8cec3de3585c3d29fc63bd8bbf71e245a) Thanks [@pfulton](https://github.com/pfulton)! - Initial release of the stylelint theme alignment tool. This package uses the base file (themes/spectrum.css) for a Spectrum CSS component as a "source of truth" and validates the sub-themes (i.e., themes/express.css) use only selectors and custom properties defined in the base file.
+
## 1.0.0
### Major Changes
diff --git a/plugins/stylelint-theme-alignment/index.js b/plugins/stylelint-theme-alignment/index.js
index c66e5d4e423..44ca89ab62f 100644
--- a/plugins/stylelint-theme-alignment/index.js
+++ b/plugins/stylelint-theme-alignment/index.js
@@ -11,11 +11,12 @@
*/
import fs from "node:fs";
-import { relative, sep } from "node:path";
+import { basename, relative, sep } from "node:path";
import postcss from "postcss";
import valuesParser from "postcss-values-parser";
import stylelint from "stylelint";
+import { isString } from "stylelint/lib/utils/validateTypes.mjs";
const {
createPlugin,
@@ -34,7 +35,7 @@ const messages = ruleMessages(ruleName, {
});
/** @type {import('stylelint').Plugin} */
-const ruleFunction = (enabled) => {
+const ruleFunction = (enabled, options = {}) => {
return (root, result) => {
const validOptions = validateOptions(
result,
@@ -43,19 +44,29 @@ const ruleFunction = (enabled) => {
actual: enabled,
possible: [true],
},
+ {
+ actual: options,
+ possible: {
+ baseFilename: isString,
+ },
+ optional: true,
+ },
);
if (!validOptions) return;
+
+ const { baseFilename = "spectrum-two" } = options;
+
const sourceFile = root.source.input.file;
const parts = sourceFile ? sourceFile.split(sep) : [];
const isTheme = parts[parts.length - 2] === "themes";
const filename = parts[parts.length - 1];
- if (!isTheme || filename === "spectrum.css") return;
+ if (!isTheme || basename(filename, ".css") === baseFilename) return;
- // All the parts of the source file but replace the filename with spectrum-two.css
- const baseFile = [...parts.slice(0, -1), "spectrum.css"].join(sep);
+ // All the parts of the source file but replace the filename with the baseFilename
+ const baseFile = [...parts.slice(0, -1), `${baseFilename}.css`].join(sep);
const rootPath = parts.slice(0, -2).join(sep);
// If the base file doesn't exist, throw an error
@@ -81,8 +92,10 @@ const ruleFunction = (enabled) => {
/* Iterate over selectors in the base root */
baseRoot.walkRules((rule) => {
- // Add this selector to the selectors set
- baseSelectors.add(rule.selector);
+ rule.selectors.forEach((selector) => {
+ // Add this selector to the selectors set
+ baseSelectors.add(selector);
+ });
rule.walkDecls((decl) => {
// If this is a custom property, add it to the properties set
@@ -102,18 +115,20 @@ const ruleFunction = (enabled) => {
/* Iterate over selectors in the source root and validate that they align with the base */
root.walkRules((rule) => {
- // Check if this selector exists in the base
- if (!baseSelectors.has(rule.selector)) {
- // Report any selectors that don't exist in the base
- report({
- message: messages.expected,
- messageArgs: [rule.selector, baseFile, rootPath],
- node: rule,
- result,
- ruleName,
- });
- return;
- }
+ rule.selectors.forEach((selector) => {
+ // Check if this selector exists in the base
+ if (!baseSelectors.has(selector)) {
+ // Report any selectors that don't exist in the base
+ report({
+ message: messages.expected,
+ messageArgs: [selector, baseFile, rootPath],
+ node: rule,
+ result,
+ ruleName,
+ });
+ return;
+ }
+ });
rule.walkDecls((decl) => {
const isProperty = decl.prop.startsWith("--");
diff --git a/plugins/stylelint-theme-alignment/package.json b/plugins/stylelint-theme-alignment/package.json
index 3a5bd6734ac..275c5519424 100644
--- a/plugins/stylelint-theme-alignment/package.json
+++ b/plugins/stylelint-theme-alignment/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-tools/theme-alignment",
- "version": "1.0.0",
+ "version": "2.0.0-s2-foundations.0",
"description": "",
"license": "Apache-2.0",
"author": "Adobe",
@@ -20,7 +20,7 @@
"postcss-values-parser": "^6.0.2"
},
"peerDependencies": {
- "stylelint": ">=16.0.0"
+ "stylelint": ">=16"
},
"devDependencies": {
"stylelint": "^16.9.0"
diff --git a/postcss.config.js b/postcss.config.js
index 96e986f352b..5ef13c70f34 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -11,22 +11,19 @@
* governing permissions and limitations under the License.
*/
-const { join, sep, basename } = require("path");
+const { join } = require("path");
module.exports = ({
file,
- to,
- splitinatorOptions = {
- noSelectors: false,
- noFlatVariables: false,
- // @todo strip out all but the references to --system- variables
- // NOT --system- definitions, only references
- referencesOnly: false,
- },
+ skipMapping = false,
+ referencesOnly = false,
+ preserveVariables = true,
+ stripLocalSelectors = false,
resolveImports = true,
shouldCombine = false,
lint = true,
verbose = true,
+ minify = false,
additionalPlugins = {},
env = process.env.NODE_ENV ?? "development",
...options
@@ -37,25 +34,12 @@ module.exports = ({
options.map = isProduction ? false : { inline: false };
}
- const rootPath = __dirname;
- const outputFilepath = to ?? file;
- const relativePath = outputFilepath?.replace(rootPath, "");
-
- const outputFilename = outputFilepath ? basename(outputFilepath, ".css") : undefined;
- const pathParts = relativePath?.split(sep) ?? [];
-
- if (["themes", "spectrum", "express"].some(foldername => pathParts.includes(foldername)) || outputFilename === "index-theme") {
- splitinatorOptions.noSelectors = true;
- }
-
- if (outputFilename === "express" || pathParts.includes("express")) shouldCombine = true;
-
- if (outputFilename === "index-base") {
- splitinatorOptions.noFlatVariables = true;
- }
-
- if (pathParts.includes("bridge")) {
- splitinatorOptions.referencesOnly = true;
+ // If this is the legacy tokens file, update the .spectrum class to .spectrum--legacy
+ if (typeof file === "string" && file.includes("@spectrum-css/tokens-legacy")) {
+ additionalPlugins["postcss-selector-replace"] = {
+ before: [".spectrum"],
+ after: [".spectrum.spectrum--legacy"],
+ };
}
return {
@@ -68,21 +52,27 @@ module.exports = ({
/* --------------------------------------------------- */
/* ------------------- SASS-LIKE UTILITIES ----------- */
"postcss-extend": {},
- "postcss-hover-media-feature": {},
"postcss-pseudo-classes": !isProduction ? {
restrictTo: ["focus-visible", "focus-within", "hover", "active", "disabled"],
allCombinations: true,
preserveBeforeAfter: false,
prefix: "is-"
} : false,
+ "postcss-hover-media-feature": {},
+ "@spectrum-tools/postcss-rgb-mapping": {
+ colorFunctionalNotation: false,
+ },
/* --------------------------------------------------- */
/* ------------------- VARIABLE PARSING -------------- */
- "postcss-splitinator": {
- processIdentifier: (identifier) =>
- identifier === "express" ? "spectrum--express" : identifier,
- ...splitinatorOptions,
+ "@spectrum-tools/postcss-add-theming-layer": {
+ selectorPrefix: "spectrum",
+ skipMapping,
+ preserveVariables,
+ referencesOnly,
+ stripLocalSelectors,
+ debug: verbose,
},
- "postcss-combininator": shouldCombine ? {
+ "@spectrum-tools/postcss-property-rollup": shouldCombine ? {
newSelector: ".spectrum",
} : false,
...additionalPlugins,
@@ -125,12 +115,10 @@ module.exports = ({
colormin: false,
reduceIdents: false,
discardUnused: false,
- discardComments: {
- removeAll: true
- },
+ discardComments: { removeAll: true },
// @todo yarn add -DW css-declaration-sorter
cssDeclarationSorter: false, // @todo { order: "smacss" }
- normalizeWhitespace: isProduction,
+ normalizeWhitespace: minify
},
],
},
diff --git a/stylelint.config.js b/stylelint.config.js
index 77242777ede..0e40223fb6b 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -12,7 +12,7 @@ module.exports = {
"@spectrum-tools/stylelint-no-unused-custom-properties",
"@spectrum-tools/stylelint-no-unknown-custom-properties",
"@spectrum-tools/theme-alignment",
- "stylelint-high-performance-animation",
+ // "stylelint-high-performance-animation",
],
rules: {
/** --------------------------------------------------------------
@@ -63,8 +63,7 @@ module.exports = {
true,
{
ignoreProperties: {
- color: ["CanvasText"],
- "forced-color-adjust": ["preserve-parent-color"],
+ "/.+/": ["CanvasText", "preserve-parent-color"],
},
},
],
@@ -137,15 +136,16 @@ module.exports = {
},
],
/** Performance */
- "plugin/no-low-performance-animation-properties": [
- true,
- { severity: "warning" },
- ],
+ // "plugin/no-low-performance-animation-properties": [
+ // true,
+ // { severity: "warning" },
+ // ],
/** --------------------------------------------------------------
* Local/custom plugins
* -------------------------------------------------------------- */
"spectrum-tools/no-missing-var": true,
+ "spectrum-tools/theme-alignment": null,
"spectrum-tools/no-unknown-custom-properties": [
true,
{
@@ -185,8 +185,7 @@ module.exports = {
},
},
{
- /* Validate that the legacy themes don't introduce any new selectors or custom properties */
- files: ["components/*/themes/spectrum.css", "components/*/themes/express.css", "tokens/**/*.css"],
+ files: ["components/*/themes/*.css", "tokens/**/*.css"],
rules: {
"spectrum-tools/no-unused-custom-properties": null,
"spectrum-tools/no-unknown-custom-properties": null,
@@ -194,9 +193,14 @@ module.exports = {
},
{
/* Validate that the legacy themes don't introduce any new selectors or custom properties */
- files: ["components/*/themes/express.css", "!components/*/themes/spectrum.css"],
+ files: ["components/*/themes/spectrum.css", "components/*/themes/express.css", "!components/*/themes/spectrum-two.css"],
rules: {
- "spectrum-tools/theme-alignment": true,
+ "spectrum-tools/theme-alignment": [
+ true,
+ {
+ baseFilename: "spectrum-two",
+ },
+ ],
},
},
],
diff --git a/tasks/component-builder.js b/tasks/component-builder.js
index d3fca06ecca..6e914efdefb 100644
--- a/tasks/component-builder.js
+++ b/tasks/component-builder.js
@@ -26,12 +26,11 @@ require("colors");
const {
dirs,
relativePrint,
- bytesToSize,
+ writeAndReport,
getPackageFromPath,
cleanFolder,
validateComponentName,
fetchContent,
- copy,
} = require("./utilities.js");
/**
@@ -67,6 +66,7 @@ async function processCSS(
from: input,
to: output,
verbose: false,
+ shouldCombine: true,
...postCSSOptions,
};
@@ -107,36 +107,12 @@ async function processCSS(
}
const promises = [
- fsp
- .writeFile(output, formatted)
- .then(() => {
- const stats = fs.statSync(output);
- return `${"✓".green} ${relativePrint(output, { cwd }).padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`;
- })
- .catch((err) => {
- if (!err) return;
- console.log(
- `${"✗".red} ${relativePrint(output, { cwd }).yellow} not written`,
- );
- return Promise.reject(err);
- }),
+ writeAndReport(formatted, output, { cwd }),
];
if (result.map) {
promises.push(
- fsp
- .writeFile(`${output}.map`, result.map.toString().trimStart())
- .then(() => {
- const stats = fs.statSync(output);
- return `${"✓".green} ${relativePrint(`${output}.map`, { cwd }).padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`;
- })
- .catch((err) => {
- if (!err) return;
- console.log(
- `${"✗".red} ${relativePrint(`${output}.map`, { cwd }).yellow} not written`,
- );
- return Promise.reject(err);
- }),
+ writeAndReport(result.map.toString().trimStart(), `${output}.map`, { cwd }),
);
}
@@ -177,10 +153,6 @@ async function build({ cwd = process.cwd(), clean = false, componentName } = {})
referencesOnly: false,
preserveVariables: true,
stripLocalSelectors: false,
- }).then(async (reports) => {
- // Copy index.css to index-vars.css for backwards compat, log as deprecated
- return copy(indexOutputPath, path.join(cwd, "dist/index-vars.css"), { cwd })
- .then(r => [r, ...reports]);
}),
processCSS(
content,
@@ -189,9 +161,10 @@ async function build({ cwd = process.cwd(), clean = false, componentName } = {})
{
cwd,
clean,
- splitinatorOptions: {
- noFlatVariables: true,
- },
+ skipMapping: true,
+ referencesOnly: false,
+ preserveVariables: false,
+ stripLocalSelectors: false,
},
),
]);
@@ -235,8 +208,6 @@ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) {
// Only output the new selectors with the system mappings
stripLocalSelectors: true,
theme,
- map: false,
- env: "production",
},
);
});
@@ -250,9 +221,10 @@ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) {
{
cwd,
clean,
- splitinatorOptions: {
- noSelectors: true,
- },
+ skipMapping: false,
+ stripLocalSelectors: false,
+ referencesOnly: true,
+ shouldCombine: false,
map: false,
},
),
diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js
index 48bdf9bc582..97c186c45e4 100644
--- a/tasks/component-reporter.js
+++ b/tasks/component-reporter.js
@@ -172,7 +172,7 @@ async function main({
const content = await fsp.readFile(sourceCSS, "utf-8");
const processed = await processCSS(content, sourceCSS, undefined, {
cwd,
- skipMapping: true,
+ skipMapping: false,
referencesOnly: false,
preserveVariables: true,
stripLocalSelectors: false,
diff --git a/tasks/utilities.js b/tasks/utilities.js
index 5868c8b2e01..e301cdda295 100644
--- a/tasks/utilities.js
+++ b/tasks/utilities.js
@@ -84,9 +84,14 @@ function getAllComponentNames() {
// Get a list of all the component names in the components directory that have a package.json file
// and a list of all the deprecated components in the storybook directory
// then combine and deduplicate the lists to get a full list of all components
+ let deprecated = [];
+ if (fs.existsSync(path.join(dirs.storybook, "deprecated"))) {
+ deprecated = fs.readdirSync(path.join(dirs.storybook, "deprecated"));
+ }
+
return [...new Set([
...fs.readdirSync(dirs.components).filter((file) => fs.existsSync(path.join(dirs.components, file, "package.json"))),
- ...fs.readdirSync(path.join(dirs.storybook, "deprecated")),
+ ...deprecated,
])];
}
@@ -183,7 +188,11 @@ async function cleanFolder({ cwd = process.cwd() } = {}) {
*/
async function fetchContent(
globs = [],
- { cwd, shouldCombine = false, ...fastGlobOptions } = {},
+ {
+ cwd,
+ shouldCombine = false,
+ ...fastGlobOptions
+ } = {},
) {
const files = await fg(globs, {
onlyFiles: true,
@@ -203,8 +212,12 @@ async function fetchContent(
// Combine the content into 1 file; @todo do this in future using CSS imports
if (shouldCombine) {
let content = "";
- fileData.forEach((dataset) => {
- if (dataset.content) content += "\n\n" + dataset.content;
+ fileData.forEach((dataset, idx) => {
+ if (dataset.content) {
+ if (idx > 0) content += "\n\n";
+ content += `/* Sourced from ${relativePrint(dataset.input, { cwd })} */\n`;
+ content += dataset.content;
+ }
});
return Promise.resolve([
@@ -244,14 +257,35 @@ async function copy(from, to, { cwd, isDeprecated = true } = {}) {
});
}
+ // Check if the input is a file or a directory
+ const stats = fs.statSync(from);
+ if (stats.isDirectory()) {
+ console.log(`Copying directory ${from} to ${to}`);
+ return fsp
+ .cp(from, to, { recursive: true, force: true })
+ .then(async () => {
+ // Determine the number of files and the size of the copied files
+ const stats = await fg(path.join(cwd, "components") + "/**/*", { onlyFiles: true, stats: true });
+ return `${"✓".green} ${relativePrint(from, { cwd }).yellow} -> ${relativePrint(to, { cwd }).padEnd(20, " ").yellow} ${`copied ${stats.length >= 0 ? stats.length : "0"} files (${bytesToSize(stats.reduce((acc, details) => acc + details.stats.size, 0))})`.gray}`;
+ })
+ .catch((err) => {
+ if (!err) return;
+ console.log(
+ `${"✗".red} ${relativePrint(from, { cwd }).yellow} could not be copied to ${relativePrint(to, { cwd }).yellow}`,
+ );
+ return Promise.reject(err);
+ });
+ }
+
const content = await fsp.readFile(from, { encoding: "utf-8" });
if (!content) return;
+
/** @todo add support for injecting a deprecation notice as a comment after the copyright */
return fsp
.writeFile(to, content, { encoding: "utf-8" })
.then(
() =>
- `${"✓".green} ${relativePrint(to, { cwd }).padEnd(20, " ").yellow} ${isDeprecated ? "-- deprecated --".gray : ""}`,
+ `${"✓".green} ${relativePrint(from, { cwd }).yellow} -> ${relativePrint(to, { cwd }).padEnd(20, " ").yellow} ${(isDeprecated ? "-- deprecated --" : `copied ${stats.size ? `(${bytesToSize(stats.size)})` : ""}`).gray}`,
)
.catch((err) => {
if (!err) return;
diff --git a/tokens/CHANGELOG.md b/tokens/CHANGELOG.md
index 325fce160f0..4da7d59aa47 100644
--- a/tokens/CHANGELOG.md
+++ b/tokens/CHANGELOG.md
@@ -1,5 +1,213 @@
# Change Log
+## 15.0.0-s2-foundations.28
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`794904f`](https://github.com/adobe/spectrum-css/commit/794904fbbd8d9b817cf5917c457c5290a217ea91) Thanks [@pfulton](https://github.com/pfulton)! - Add a stylelint ignore for typography case
+
+## 15.0.0-s2-foundations.27
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`aedc167`](https://github.com/adobe/spectrum-css/commit/aedc167f86d810f54dea1b2aacb191e718ac9598) Thanks [@pfulton](https://github.com/pfulton)! - Border color for Swatch on light/dark mode switched to use gray instead of black so it responds to theme.
+
+## 15.0.0-s2-foundations.26
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57e187f`](https://github.com/adobe/spectrum-css/commit/57e187f5a52e9782e8573defc825cef0399b99e4) Thanks [@pfulton](https://github.com/pfulton)! - Minor bug fixes for datepicker and radio; tokens released for alignment
+
+## 15.0.0-s2-foundations.25
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9c6561b`](https://github.com/adobe/spectrum-css/commit/9c6561b38624307da9bca7499452c3cb8ea2095e) Thanks [@pfulton](https://github.com/pfulton)! - Bring in the latest S2 foundations release including updated corner rounding approach, colors, and icon spacing. Remapped corner rounding values for the -75 token to a static 2px value for spectrum themes.
+
+## 15.0.0-s2-foundations.24
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`70b8890`](https://github.com/adobe/spectrum-css/commit/70b889026174fa552cb8f2e7f205b923bf0b6e55) Thanks [@pfulton](https://github.com/pfulton)! - Updated tokens build with latest from recent bug fixes to components
+
+## 15.0.0-s2-foundations.23
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1da2494`](https://github.com/adobe/spectrum-css/commit/1da249479a0014287a6124dc0f900ee99ab6b946) Thanks [@pfulton](https://github.com/pfulton)! - added contextual-help-content-spacing custom property definition
+
+## 15.0.0-s2-foundations.22
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`57709c0`](https://github.com/adobe/spectrum-css/commit/57709c09f7cfddb67125fa96691ae869ff8840ca) Thanks [@pfulton](https://github.com/pfulton)! - Pull in the corner radii updates for S2
+
+## 15.0.0-s2-foundations.21
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+## 15.0.0-s2-foundations.20
+
+### Patch Changes
+
+- [#3049](https://github.com/adobe/spectrum-css/pull/3049) [`db528ce`](https://github.com/adobe/spectrum-css/commit/db528ce0a6f7d817e6124604014faf9f4accfc1e) Thanks [@TarunAdobe](https://github.com/TarunAdobe)! - updated content color for button primary variant and fixes swc-342
+
+## 15.0.0-s2-foundations.19
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to the rgb mapping plugin brought back rgb alias's to tokens output
+
+## 15.0.0-s2-foundations.18
+
+### Patch Changes
+
+- [#3036](https://github.com/adobe/spectrum-css/pull/3036) [`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - define undefined rgb tokens
+
+## 15.0.0-s2-foundations.17
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1a36744`](https://github.com/adobe/spectrum-css/commit/1a367440d81e87e241c19a6c3e691faa7c0669aa) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-248]: Selected, static black actionbutton content color should be white, not black (updates tokens)
+
+## 15.0.0-s2-foundations.16
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`fa60db9`](https://github.com/adobe/spectrum-css/commit/fa60db9159edb6b111e4e6c30b05c828224b81e4) Thanks [@pfulton](https://github.com/pfulton)! - Adds `--spectrum-gray-800-rgb` custom token for use in well component. The custom token values reflect the stripped RGB values for light and dark modes of `--spectrum-gray-800` values for S2.
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1d1cbfc`](https://github.com/adobe/spectrum-css/commit/1d1cbfcc80f8a78784edf9778c0f366be6b0efe6) Thanks [@pfulton](https://github.com/pfulton)! - Adds `--spectrum-blue-800-rgb` for light and `--spectrum-blue-900-rgb` for dark with s2 values to custom tokens to define stripped rgb token used in dropzone dragged background.
+
+## 15.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`58a89ea`](https://github.com/adobe/spectrum-css/commit/58a89ea464c387111511271a5f5afce044f11042) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-237] accordion item border height set to 0 for non-first-child elements
+
+## 15.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-238] t-shirt-based calc moved out of theme into base css
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-235] meter properties moved out of theme and into index.css
+
+## 15.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+## 15.0.0-s2-foundations.12
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+## 15.0.0-s2-foundations.11
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4265d20`](https://github.com/adobe/spectrum-css/commit/4265d208b6eb2db923e558fca100b4532b964e45) Thanks [@pfulton](https://github.com/pfulton)! - Fix unsupported variables created in components/actionbutton/themes/spectrum.css
+
+## 15.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+## 15.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+## 15.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+## 15.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+## 15.0.0-s2-foundations.6
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d) Thanks [@pfulton](https://github.com/pfulton)! - This update pre-resolves the bundler assets to make them easier to serve as a single entry point.
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+## 15.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+## 15.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+## 15.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+## 15.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+## 15.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+## 15.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+## 14.6.0
+
+### Minor Changes
+
+- [#3266](https://github.com/adobe/spectrum-css/pull/3266) [`4b818e1`](https://github.com/adobe/spectrum-css/commit/4b818e1062202e404de1350938ce2a19146aa0b0) Thanks [@5t3ph](https://github.com/5t3ph)! - For Coach indicator, marks "light" and "dark" variants for deprecation going into S2, and adds "static white" per direction from design.
+
+## 14.5.0
+
+### Minor Changes
+
+- [#3253](https://github.com/adobe/spectrum-css/pull/3253) [`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86) Thanks [@castastrophe](https://github.com/castastrophe)! - Add component-level token overrides from card, contextualhelp, swatch, and typography to ensure valid theme toggling.
+
+ Light/dark/darkest custom overrides added: `--spectrum-card-selected-background-color-rgb`, `--spectrum-swatch-border-color`, `--spectrum-swatch-border-color-light`
+ Medium/large custom overrides added: `--spectrum-contextual-help-content-spacing`
+ Global custom overrides added: `--spectrum-font-family-ar`, `--spectrum-font-family-he`, `--spectrum-font-family`, `--spectrum-font-style`, `--spectrum-font-size`
+
## 14.6.0
### Minor Changes
diff --git a/tokens/README.md b/tokens/README.md
index 1fea9503458..9bb1c73be0b 100644
--- a/tokens/README.md
+++ b/tokens/README.md
@@ -4,24 +4,112 @@
This package uses StyleDictionary to build Spectrum core tokens for CSS.
-## Output
+## Glossary
-The output is concatenated into a single `dist/index.css` for use in Spectrum CSS. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens.
+- **Core tokens**: The base set of design data that define the system. These are the key-value pairs that are used to build the design system and are sourced from the design team via @adobe/spectrum-tokens. You can find the relevant versioning information in the `package.json` file.
+- **Custom properties**: These are CSS variables generated from the core tokens using the StyleDictionary build process. These are used in the CSS base styles to apply the design system to the components in a way that can respond to changes in color, scale, or context.
+- **Context**: This terms refers to the design language an application wants to use. Contexts previously supported were Spectrum and Express. The current system supports only Spectrum but has committed to offering backward compatibility through at least December 2024.
+- **Color**: This term refers to the color mode. The current system supports light and dark only. The lightest and darkest color modes were deprecated in the final version for **14.x**.
+- **Scale**: This term refers to the scale of the design system. The current system supports medium and large scales. The large scale is used for mobile applications and the medium scale is used for desktop applications.
+- **System variables**: These are randomly generated variable names (prefixed with `--system`) that are used to map the component-level class styles to the core tokens from the desired context. These are generated by the `postcss-add-theming-layer` plugin as part of the build and should not be relied upon for naming consistency across releases. **Do not attempt to overwrite or extend these variables in your application.**
-On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to Express, add `.spectrum--express`.
+## Backwards compatibility for Spectrum 1 and Express
+
+Though the token data in this package focus on only the current context (Spectrum 2), our team is committed to offering backwards compatibility for Spectrum 1 and Express through at least December of 2024.
+
+To this end, we have included the component-level mappings for:
+
+- Spectrum 1: `dist/css/components/spectrum`
+- Express: `dist/css/components/express`
+- Spectrum 2: `dist/css/components/spectrum-two`
+
+Consumers should load only the mappings for the components they are using in their application. This will ensure that the component-level mappings are aligned with the base CSS for each component. Spectrum 1 and Express component mappings should be loaded with the `global-vars.css` and appropriate color and scale assets from the last version of the tokens package: **v14.x**. Loading the Spectrum 1 or Express component-level mappings with the Spectrum 2 global variables will result in incorrect values being applied to the components and will break the desired design for the component.
+
+## Usage
+
+The output is concatenated into a single `dist/index.css` for use in a vanilla HTML application. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens.
+
+On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to another context, add `.spectrum--legacy` or `.spectrum--express`.
+
+For additional guidance on which assets to load, see the architecture section below.
+
+## Architecture
+
+All compiled assets are shipped from the `dist` folder. Most of the assets are available in the `dist/css` folder. The `dist/css/components` folder contains the component-level mappings for Spectrum 1, Express, and Spectrum 2. These assets should be loaded with the appropriate global variables and color and scale assets from the last version of the tokens package: **v14.x**.
+
+### Global core tokens
+
+- `global-vars.css`: Shared global, unchanging tokens.
+- `light-vars.css`: Tokens specific to the light color.
+- `dark-vars.css`: Tokens specific to the dark color.
+- `medium-vars.css`: Tokens specific to the medium (desktop) scale.
+- `large-vars.css`: Tokens specific to the large (mobile) scale.
+- `index.css`: The above files rolled up into 1 css file for convenience; best for use in a vanilla HTML application.
+
+### Components
+
+Assets in this folder must be loaded together in order for the randomly generated system variables to line up.
+
+#### `bridge`
+
+- `index.css`: everything in the folder rolled up into 1 file.
+- `.css`: mappings from local component classes (i.e. `.spectrum-ActionBar.spectrum-ActionBar--quiet`) to system variables.
+
+These assets must be loaded with one of the matching `.css` files for the desired context, i.e., `dist/css/components/express/.css` or `dist/css/components/spectrum/.css`
+
+#### `spectrum-two`
+
+- `index.css`: Everything in the folder rolled up into 1 file
+- `.css`:
+ - All properties in these assets are attached to a specific root-level class: `.spectrum`.
+ - System variables are mapped to global token variables or custom values (i.e. `transparent` or `10px`, values not present in the token system).
+
+These assets must be loaded with the global token definitions found in this package at the following paths: - `dist/css/global-vars.css` - `dist/css/*-vars.css`: load only those assets relevant to the application context
+
+#### `express`
+
+Same contents as the `spectrum-two` folder but instead of `.spectrum`, properties are attached to `.spectrum--express`.
+
+**Note**: Do not load these assets with the `dist/css/global-vars.css` or `dist/css/*-vars.css` files. Instead, load global token definitions from the last version of the tokens package: **v14.x**: i.e.,
+
+- **@spectrum-css/tokens@v14.x**: `dist/css/global-vars.css`
+- **@spectrum-css/tokens@v14.x**: `dist/css/*-vars.css`
+
+When loading express styles, the following assets must be loaded last or be altered to use higher specificity:
+
+- **@spectrum-css/tokens@v14.x**: `dist/css/express/global-vars.css`
+- **@spectrum-css/tokens@v14.x**: `dist/css/express/*-vars.css`
+
+#### `spectrum`
+
+Same contents as the `spectrum-two` folder but instead of `.spectrum`, properties are attached to `.spectrum--legacy`.
+
+**Note**: Do not load these assets with the `dist/css/global-vars.css` or `dist/css/*-vars.css` files. Instead, load global token definitions from the last version of the tokens package: **v14.x**: i.e.,
+
+- **@spectrum-css/tokens@v14.x**: `dist/css/global-vars.css`
+- **@spectrum-css/tokens@v14.x**: `dist/css/*-vars.css`
+
+When loading legacy spectrum styles, the following assets must be loaded last or be altered to use higher specificity:
+
+- **@spectrum-css/tokens@v14.x**: `dist/css/spectrum/global-vars.css`
+- **@spectrum-css/tokens@v14.x**: `dist/css/spectrum/*-vars.css`
## Overrides and additions
-Overrides and additions to core tokens can be added to `custom.css`.
+Overrides and additions to core tokens can be added to `custom/*-vars.css`.
+
+Ensure that you add new values to the appropriate color, or scale file:
+
+- `global-vars.css` - Shared global, unchanging tokens
+- `light-vars.css` - Tokens specific to the light color
+- `dark-vars.css` - Tokens specific to the dark color
+- `medium-vars.css` - Tokens specific to the medium (desktop) scale
+- `large-vars.css` - Tokens specific to the large (mobile) scale
+
+Values added here will be copied over and concatenated with the custom properties being generated from the core tokens by StyleDictionary.
+
+## Breaking changes from v14 to v15
-Ensure that you correctly scope any added tokens:
+There are no additional contextual folders (i.e., `dist/css/spectrum/`) because this package supports no other theming systems outside of the component token mappings. All global tokens are found in the `dist/css` folder.
-- `.spectrum` - Global, unchanging tokens or tokens specific to the Spectrum flavor
-- `.spectrum--express` - Tokens specific to the Express flavor
-- `.spectrum--lightest` - Tokens specific to the light color stop (soon to be deprecated)
-- `.spectrum--light` - Tokens specific to the light color stop
-- `.spectrum--dark` - Tokens specific to the dark color stop
-- `.spectrum--darkest` - Tokens specific to the darkest color stop
-- `.spectrum--medium` - Tokens specific to the medium (desktop) scale
-- `.spectrum--large` - Tokens specific to the large (mobile) scale
-- `.spectrum--express.spectrum--*` - Tokens specific to the Express flavor for any of the above color stops and scales
+For more notes on how the token data has changed, see the [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens/releases) release documentation.
diff --git a/tokens/custom-express/custom-dark-vars.css b/tokens/custom-express/custom-dark-vars.css
deleted file mode 100644
index 25accff5f6f..00000000000
--- a/tokens/custom-express/custom-dark-vars.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express.spectrum--dark {
- /* Drop Zone background color rgb */
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/
- --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
-}
diff --git a/tokens/custom-express/custom-darkest-vars.css b/tokens/custom-express/custom-darkest-vars.css
deleted file mode 100644
index 36ef601d70a..00000000000
--- a/tokens/custom-express/custom-darkest-vars.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express.spectrum--darkest {
- /* Drop Zone background color rgb */
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/
- --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
-}
diff --git a/tokens/custom-express/custom-large-vars.css b/tokens/custom-express/custom-large-vars.css
deleted file mode 100644
index 7eb1e1b90c8..00000000000
--- a/tokens/custom-express/custom-large-vars.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express.spectrum--large {
- --spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
- --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-
- --spectrum-dialog-confirm-border-radius: 8px;
-
- --spectrum-dial-border-radius: 15px;
-
- --spectrum-assetcard-focus-ring-border-radius: 12px;
-}
diff --git a/tokens/custom-express/custom-light-vars.css b/tokens/custom-express/custom-light-vars.css
deleted file mode 100644
index b82ab862f49..00000000000
--- a/tokens/custom-express/custom-light-vars.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--express.spectrum--light,
-.spectrum--express.spectrum--lightest {
- /* Drop Zone background color rgb */
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); /* var(--spectrum-accent-color-800);*/
- --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900);
-}
diff --git a/tokens/custom-spectrum/custom-darkest-vars.css b/tokens/custom-spectrum/custom-darkest-vars.css
deleted file mode 100644
index 54278af3c68..00000000000
--- a/tokens/custom-spectrum/custom-darkest-vars.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* This file contains overrides and additions to core tokens */
-
-.spectrum--darkest {
- --spectrum-menu-item-background-color-default: rgba(255, 255, 255, 0); /* --spectrum-gray-900 */
- --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
-
- /* Drop Zone background color rgb */
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
-
- /* Drop Indicator color rgb */
- --spectrum-dropindicator-color: var(--spectrum-blue-700);
-
- --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
- --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08);
- --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-down: rgba(var(--spectrum-white-rgb), 0.15);
- --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08);
- --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-
- --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
-
- --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-
- --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
- --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-
- --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-
- --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08);
- --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-
- --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
- --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
- --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
- --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-
- --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
- --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
- --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-
- --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
- --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-
- --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
- --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-
- --spectrum-swatch-border-color: rgba(255, 255, 255, 51%);
- --spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%);
-}
diff --git a/tokens/custom-spectrum/custom-dark-vars.css b/tokens/custom/dark-vars.css
similarity index 80%
rename from tokens/custom-spectrum/custom-dark-vars.css
rename to tokens/custom/dark-vars.css
index 295917dab13..72dd46113a0 100644
--- a/tokens/custom-spectrum/custom-dark-vars.css
+++ b/tokens/custom/dark-vars.css
@@ -14,16 +14,21 @@
/* This file contains overrides and additions to core tokens */
.spectrum--dark {
- --spectrum-menu-item-background-color-default: rgba(255, 255, 255, 0); /* --spectrum-gray-900 */
- --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
+ /* stylelint-disable-next-line custom-property-pattern -- context identification */
+ --color-scheme: dark;
- /* Drop Zone background color rgb */
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/
+ /** COMPONENT-SPECIFIC OVERRIDES **/
+ --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
+ --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
+ --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
- /* Drop Indicator color rgb */
- --spectrum-dropindicator-color: var(--spectrum-blue-700);
+ --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
+ --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+ --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
+
+ --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
@@ -36,18 +41,11 @@
--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
- --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-
--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
- --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-
- --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
- --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
+ --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900); */
- --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
- --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
+ --spectrum-dropindicator-color: var(--spectrum-blue-700);
--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
@@ -59,16 +57,12 @@
--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
- --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
- --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
+ --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
- --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
- --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
+ --spectrum-swatch-border-color: rgb(255 255 255 / 51%);
+ --spectrum-swatch-border-color-light: rgb(255 255 255 / 20%);
+
+ --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
+ --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
- --spectrum-swatch-border-color: rgba(255, 255, 255, 51%);
- --spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%);
}
diff --git a/tokens/custom-spectrum/custom-vars.css b/tokens/custom/global-vars.css
similarity index 82%
rename from tokens/custom-spectrum/custom-vars.css
rename to tokens/custom/global-vars.css
index 70a2db63f6d..2e1313e6215 100644
--- a/tokens/custom-spectrum/custom-vars.css
+++ b/tokens/custom/global-vars.css
@@ -14,7 +14,7 @@
/* This file contains overrides and additions to core tokens */
.spectrum {
--system: spectrum;
- --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
+
--spectrum-animation-duration-0: 0ms;
--spectrum-animation-duration-100: 130ms;
--spectrum-animation-duration-200: 160ms;
@@ -29,11 +29,15 @@
--spectrum-animation-duration-2000: 1000ms;
--spectrum-animation-duration-4000: 2000ms;
--spectrum-animation-duration-6000: 3000ms;
+
+ --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
+
--spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
--spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
--spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
--spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
+ /* stylelint-disable value-keyword-case -- typography names should use their appropriate cases */
--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
--spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
@@ -42,8 +46,9 @@
--spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
- --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+ --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+ --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+ /* stylelint-enable value-keyword-case */
--spectrum-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-font-style: var(--spectrum-default-font-style);
@@ -52,9 +57,7 @@
--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
- /* static white / black background color for docs containers */
- --spectrum-docs-static-white-background-color: rgb(15, 121, 125);
- --spectrum-docs-static-black-background-color: rgb(181, 209, 211);
-
- --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
+ /* static white / black background color for docs containers */
+ --spectrum-docs-static-white-background-color: rgb(15 121 125);
+ --spectrum-docs-static-black-background-color: rgb(181 209 211);
}
diff --git a/tokens/custom-spectrum/custom-large-vars.css b/tokens/custom/large-vars.css
similarity index 96%
rename from tokens/custom-spectrum/custom-large-vars.css
rename to tokens/custom/large-vars.css
index d27039667c7..08b3d68561f 100644
--- a/tokens/custom-spectrum/custom-large-vars.css
+++ b/tokens/custom/large-vars.css
@@ -14,33 +14,22 @@
/* This file contains overrides and additions to core tokens */
.spectrum--large {
- --spectrum-slider-tick-mark-height: 13px;
- --spectrum-slider-ramp-track-height: 20px;
-
- --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
- --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
- --spectrum-colorwheel-colorarea-container-size: 182px;
+ /* stylelint-disable-next-line custom-property-pattern -- context identification */
+ --scale: large;
- --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
-
- --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
-
- --spectrum-menu-item-checkmark-height-small: 12px;
- --spectrum-menu-item-checkmark-height-medium: 14px;
- --spectrum-menu-item-checkmark-height-large: 16px;
- --spectrum-menu-item-checkmark-height-extra-large: 16px;
+ --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
+ --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
+ --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
+ --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
- --spectrum-menu-item-checkmark-width-small: 12px;
- --spectrum-menu-item-checkmark-width-medium: 14px;
- --spectrum-menu-item-checkmark-width-large: 16px;
- --spectrum-menu-item-checkmark-width-extra-large: 16px;
+ --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
+ --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
- --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+ --spectrum-assetcard-focus-ring-border-radius: 9px;
+ --spectrum-assetcard-selectionindicator-margin: 15px;
+ --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
+ --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
+ --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
--spectrum-button-top-to-text-small: 6px;
--spectrum-button-bottom-to-text-small: 5px;
@@ -51,14 +40,6 @@
--spectrum-button-top-to-text-extra-large: 16px;
--spectrum-button-bottom-to-text-extra-large: 17px;
- --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
- --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
-
- --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
- --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
-
--spectrum-coach-indicator-gap: 8px;
--spectrum-coach-indicator-ring-diameter: 20px;
--spectrum-coach-indicator-quiet-ring-diameter: 10px;
@@ -68,28 +49,14 @@
--spectrum-coachmark-menu-display: none;
--spectrum-coachmark-menu-mobile-display: inline-flex;
- --spectrum-well-padding: 20px;
- --spectrum-well-margin-top: 5px;
- --spectrum-well-min-width: 300px;
- --spectrum-well-border-radius: 5px;
- /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
- --spectrum-workflow-icon-size-xxl: 40px;
- --spectrum-workflow-icon-size-xxs: 15px;
+ --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
+ --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
+ --spectrum-colorwheel-colorarea-container-size: 182px;
- --spectrum-treeview-item-indentation-medium: 20px;
- --spectrum-treeview-item-indentation-small: 15px;
- --spectrum-treeview-item-indentation-large: 25px;
- --spectrum-treeview-item-indentation-extra-large: 30px;
- --spectrum-treeview-indicator-inset-block-start: 6px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
+ --spectrum-colorloupe-checkerboard-fill: url("#checkerboard-secondary");
- --spectrum-dialog-confirm-entry-animation-distance: 25px;
- --spectrum-dialog-confirm-hero-height: 160px;
- --spectrum-dialog-confirm-border-radius: 5px;
- --spectrum-dialog-confirm-title-text-size: 19px;
- --spectrum-dialog-confirm-description-text-size: 15px;
- --spectrum-dialog-confirm-padding-grid: 24px;
+ --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
--spectrum-datepicker-initial-width: 160px;
--spectrum-datepicker-generic-padding: 15px;
@@ -101,9 +68,6 @@
--spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
--spectrum-datepicker-input-datetime-width: 30px;
- --spectrum-pagination-textfield-width: 60px;
- --spectrum-pagination-item-inline-spacing: 6px;
-
--spectrum-dial-border-radius: 20px;
--spectrum-dial-handle-position: 10px;
--spectrum-dial-handle-block-margin: 20px;
@@ -112,14 +76,54 @@
--spectrum-dial-label-gap-y: 6px;
--spectrum-dial-label-container-top-to-text: 5px;
- --spectrum-assetcard-focus-ring-border-radius: 9px;
- --spectrum-assetcard-selectionindicator-margin: 15px;
- --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
+ --spectrum-dialog-confirm-entry-animation-distance: 25px;
+ --spectrum-dialog-confirm-hero-height: 160px;
+ --spectrum-dialog-confirm-border-radius: 5px;
+ --spectrum-dialog-confirm-title-text-size: 19px;
+ --spectrum-dialog-confirm-description-text-size: 15px;
+ --spectrum-dialog-confirm-padding-grid: 24px;
+
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
+
+ --spectrum-menu-item-checkmark-height-small: 12px;
+ --spectrum-menu-item-checkmark-height-medium: 14px;
+ --spectrum-menu-item-checkmark-height-large: 16px;
+ --spectrum-menu-item-checkmark-height-extra-large: 16px;
+
+ --spectrum-menu-item-checkmark-width-small: 12px;
+ --spectrum-menu-item-checkmark-width-medium: 14px;
+ --spectrum-menu-item-checkmark-width-large: 16px;
+ --spectrum-menu-item-checkmark-width-extra-large: 16px;
+
+ --spectrum-pagination-textfield-width: 60px;
+ --spectrum-pagination-item-inline-spacing: 6px;
+
+ --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+
+ --spectrum-slider-tick-mark-height: 13px;
+ --spectrum-slider-ramp-track-height: 20px;
+
+ --spectrum-treeview-item-indentation-medium: 20px;
+ --spectrum-treeview-item-indentation-small: 15px;
+ --spectrum-treeview-item-indentation-large: 25px;
+ --spectrum-treeview-item-indentation-extra-large: 30px;
+ --spectrum-treeview-indicator-inset-block-start: 6px;
+ --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
--spectrum-tooltip-animation-distance: 5px;
--spectrum-ui-icon-medium-display: none;
--spectrum-ui-icon-large-display: block;
+
+ --spectrum-well-border-radius: 5px;
+ --spectrum-well-margin-top: 5px;
+ --spectrum-well-min-width: 300px;
+ --spectrum-well-padding: 20px;
+
+ /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
+ --spectrum-workflow-icon-size-xxl: 40px;
+ --spectrum-workflow-icon-size-xxs: 15px;
}
diff --git a/tokens/custom-spectrum/custom-light-vars.css b/tokens/custom/light-vars.css
similarity index 80%
rename from tokens/custom-spectrum/custom-light-vars.css
rename to tokens/custom/light-vars.css
index a6e8be58d05..b70b909c167 100644
--- a/tokens/custom-spectrum/custom-light-vars.css
+++ b/tokens/custom/light-vars.css
@@ -12,19 +12,21 @@
*/
/* This file contains overrides and additions to core tokens */
+.spectrum--light {
+ /* stylelint-disable-next-line custom-property-pattern -- context identification */
+ --color-scheme: light;
-.spectrum--light,
-.spectrum--lightest {
- --spectrum-menu-item-background-color-default: rgba(0, 0, 0, 0); /* --spectrum-gray-900 */
- --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200);
- --spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200);
- --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200);
+ --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
+ --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
+ --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
- /* Drop Zone background color rgb */
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/
+ --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
+ --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+ --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
- /* Drop Indicator color rgb */
- --spectrum-dropindicator-color: var(--spectrum-blue-800);
+ --spectrum-badge-label-icon-color-primary: var(--spectrum-white);
--spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
--spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
@@ -37,18 +39,11 @@
--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
- --spectrum-badge-label-icon-color-primary: var(--spectrum-white);
-
--spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
- --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-
- --spectrum-well-border-color: var(--spectrum-black);
- --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
+ --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800); */
- --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
- --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
+ --spectrum-dropindicator-color: var(--spectrum-blue-800);
--spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
--spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
@@ -60,16 +55,11 @@
--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
- --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
- --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
+ --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
- --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
- --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
+ --spectrum-swatch-border-color: rgb(0 0 0 / 51%);
+ --spectrum-swatch-border-color-light: rgb(0 0 0 / 20%);
- --spectrum-swatch-border-color: rgba(0, 0, 0, 51%);
- --spectrum-swatch-border-color-light: rgba(0, 0, 0, 20%);
+ --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
+ --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
}
diff --git a/tokens/custom-spectrum/custom-medium-vars.css b/tokens/custom/medium-vars.css
similarity index 97%
rename from tokens/custom-spectrum/custom-medium-vars.css
rename to tokens/custom/medium-vars.css
index 7adc56b286c..bb928719a96 100644
--- a/tokens/custom-spectrum/custom-medium-vars.css
+++ b/tokens/custom/medium-vars.css
@@ -14,50 +14,31 @@
/* This file contains overrides and additions to core tokens */
.spectrum--medium {
- --spectrum-slider-tick-mark-height: 10px;
- --spectrum-slider-ramp-track-height: 16px;
-
- --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
- --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
- --spectrum-colorwheel-colorarea-container-size: 144px;
-
- --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
-
- --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
+ /* stylelint-disable-next-line custom-property-pattern -- context identification */
+ --scale: medium;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
-
- --spectrum-menu-item-checkmark-height-small: 10px;
- --spectrum-menu-item-checkmark-height-medium: 10px;
- --spectrum-menu-item-checkmark-height-large: 12px;
- --spectrum-menu-item-checkmark-height-extra-large: 14px;
+ --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
+ --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
+ --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
+ --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
- --spectrum-menu-item-checkmark-width-small: 10px;
- --spectrum-menu-item-checkmark-width-medium: 10px;
- --spectrum-menu-item-checkmark-width-large: 12px;
- --spectrum-menu-item-checkmark-width-extra-large: 14px;
+ --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
+ --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
- --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+ --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
+ --spectrum-assetcard-focus-ring-border-radius: 8px;
+ --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
+ --spectrum-assetcard-selectionindicator-margin: 12px;
+ --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
- --spectrum-button-top-to-text-small: 5px;
--spectrum-button-bottom-to-text-small: 4px;
- --spectrum-button-top-to-text-medium: 7px;
--spectrum-button-bottom-to-text-medium: 8px;
- --spectrum-button-top-to-text-large: 10px;
--spectrum-button-bottom-to-text-large: 10px;
- --spectrum-button-top-to-text-extra-large: 13px;
--spectrum-button-bottom-to-text-extra-large: 13px;
-
- --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
- --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
-
- --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
- --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
+ --spectrum-button-top-to-text-small: 5px;
+ --spectrum-button-top-to-text-medium: 7px;
+ --spectrum-button-top-to-text-large: 10px;
+ --spectrum-button-top-to-text-extra-large: 13px;
--spectrum-coach-indicator-gap: 6px;
--spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
@@ -67,58 +48,79 @@
--spectrum-coachmark-buttongroup-mobile-display: none;
--spectrum-coachmark-menu-display: inline-flex;
--spectrum-coachmark-menu-mobile-display: none;
- --spectrum-well-padding: var(--spectrum-spacing-300);
- --spectrum-well-margin-top: var(--spectrum-spacing-75);
- --spectrum-well-min-width: 240px;
- --spectrum-well-border-radius: var(--spectrum-spacing-75);
- /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
- --spectrum-workflow-icon-size-xxl: 32px;
- --spectrum-workflow-icon-size-xxs: 12px;
+ --spectrum-colorloupe-checkerboard-fill: url("#checkerboard-primary");
- --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
- --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
- --spectrum-treeview-item-indentation-large: 20px;
- --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
- --spectrum-treeview-indicator-inset-block-start: 5px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
+ --spectrum-colorwheel-colorarea-container-size: 144px;
+ --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
+ --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
- --spectrum-dialog-confirm-entry-animation-distance: 20px;
- --spectrum-dialog-confirm-hero-height: 128px;
- --spectrum-dialog-confirm-border-radius: 4px;
- --spectrum-dialog-confirm-title-text-size: 18px;
- --spectrum-dialog-confirm-description-text-size: 14px;
- --spectrum-dialog-confirm-padding-grid: 40px;
+ --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
- --spectrum-datepicker-initial-width: 128px;
- --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
--spectrum-datepicker-dash-line-height: 24px;
- --spectrum-datepicker-width-quiet-first: 72px;
- --spectrum-datepicker-width-quiet-second: 16px;
--spectrum-datepicker-datetime-width-first: 36px;
+ --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
+ --spectrum-datepicker-initial-width: 128px;
+ --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
--spectrum-datepicker-invalid-icon-to-button: 8px;
--spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
- --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
-
- --spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
- --spectrum-pagination-item-inline-spacing: 5px;
+ --spectrum-datepicker-width-quiet-first: 72px;
+ --spectrum-datepicker-width-quiet-second: 16px;
--spectrum-dial-border-radius: 16px;
- --spectrum-dial-handle-position: 8px;
+ --spectrum-dial-controls-margin: 8px;
--spectrum-dial-handle-block-margin: 16px;
--spectrum-dial-handle-inline-margin: 16px;
- --spectrum-dial-controls-margin: 8px;
- --spectrum-dial-label-gap-y: 5px;
+ --spectrum-dial-handle-position: 8px;
--spectrum-dial-label-container-top-to-text: 4px;
+ --spectrum-dial-label-gap-y: 5px;
- --spectrum-assetcard-focus-ring-border-radius: 8px;
- --spectrum-assetcard-selectionindicator-margin: 12px;
- --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
- --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
- --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
+ --spectrum-dialog-confirm-border-radius: 4px;
+ --spectrum-dialog-confirm-description-text-size: 14px;
+ --spectrum-dialog-confirm-entry-animation-distance: 20px;
+ --spectrum-dialog-confirm-hero-height: 128px;
+ --spectrum-dialog-confirm-padding-grid: 40px;
+ --spectrum-dialog-confirm-title-text-size: 18px;
+
+ --spectrum-menu-item-checkmark-height-small: 10px;
+ --spectrum-menu-item-checkmark-height-medium: 10px;
+ --spectrum-menu-item-checkmark-height-large: 12px;
+ --spectrum-menu-item-checkmark-height-extra-large: 14px;
+ --spectrum-menu-item-checkmark-width-small: 10px;
+ --spectrum-menu-item-checkmark-width-medium: 10px;
+ --spectrum-menu-item-checkmark-width-large: 12px;
+ --spectrum-menu-item-checkmark-width-extra-large: 14px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
+
+ --spectrum-pagination-item-inline-spacing: 5px;
+ --spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
+
+ --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+
+ --spectrum-slider-ramp-track-height: 16px;
+ --spectrum-slider-tick-mark-height: 10px;
+
+ --spectrum-treeview-indicator-inset-block-start: 5px;
+ --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
+ --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
+ --spectrum-treeview-item-indentation-large: 20px;
+ --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
+ --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
--spectrum-ui-icon-medium-display: block;
--spectrum-ui-icon-large-display: none;
+
+ --spectrum-well-border-radius: var(--spectrum-spacing-75);
+ --spectrum-well-margin-top: var(--spectrum-spacing-75);
+ --spectrum-well-min-width: 240px;
+ --spectrum-well-padding: var(--spectrum-spacing-300);
+
+ /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
+ --spectrum-workflow-icon-size-xxl: 32px;
+ --spectrum-workflow-icon-size-xxs: 12px;
}
diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css
index 4ae60835874..d9250f04732 100644
--- a/tokens/dist/css/dark-vars.css
+++ b/tokens/dist/css/dark-vars.css
@@ -12,58 +12,49 @@
*/
.spectrum--dark{
- --spectrum-overlay-opacity:0.5;
- --spectrum-drop-shadow-color-rgb:0, 0, 0;
- --spectrum-drop-shadow-color-opacity:0.5;
- --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
- --spectrum-background-base-color:var(--spectrum-gray-50);
- --spectrum-background-layer-1-color:var(--spectrum-gray-75);
- --spectrum-background-layer-2-color:var(--spectrum-gray-100);
- --spectrum-neutral-background-color-default:var(--spectrum-gray-400);
- --spectrum-neutral-background-color-hover:var(--spectrum-gray-300);
- --spectrum-neutral-background-color-down:var(--spectrum-gray-200);
- --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300);
- --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400);
- --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300);
- --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200);
- --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300);
- --spectrum-accent-background-color-default:var(--spectrum-accent-color-500);
- --spectrum-accent-background-color-hover:var(--spectrum-accent-color-400);
- --spectrum-accent-background-color-down:var(--spectrum-accent-color-300);
- --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-400);
- --spectrum-informative-background-color-default:var(--spectrum-informative-color-500);
- --spectrum-informative-background-color-hover:var(--spectrum-informative-color-400);
- --spectrum-informative-background-color-down:var(--spectrum-informative-color-300);
- --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-400);
- --spectrum-negative-background-color-default:var(--spectrum-negative-color-500);
- --spectrum-negative-background-color-hover:var(--spectrum-negative-color-400);
- --spectrum-negative-background-color-down:var(--spectrum-negative-color-300);
- --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-400);
- --spectrum-positive-background-color-default:var(--spectrum-positive-color-500);
- --spectrum-positive-background-color-hover:var(--spectrum-positive-color-400);
- --spectrum-positive-background-color-down:var(--spectrum-positive-color-300);
- --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-400);
- --spectrum-notice-background-color-default:var(--spectrum-notice-color-800);
- --spectrum-gray-background-color-default:var(--spectrum-gray-700);
- --spectrum-red-background-color-default:var(--spectrum-red-700);
- --spectrum-orange-background-color-default:var(--spectrum-orange-800);
- --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000);
- --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900);
- --spectrum-celery-background-color-default:var(--spectrum-celery-800);
- --spectrum-green-background-color-default:var(--spectrum-green-700);
- --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700);
- --spectrum-cyan-background-color-default:var(--spectrum-cyan-700);
- --spectrum-blue-background-color-default:var(--spectrum-blue-700);
- --spectrum-indigo-background-color-default:var(--spectrum-indigo-700);
- --spectrum-purple-background-color-default:var(--spectrum-purple-700);
- --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700);
- --spectrum-magenta-background-color-default:var(--spectrum-magenta-700);
+ --spectrum-overlay-opacity:0.6;
+ --spectrum-background-layer-2-color:var(--spectrum-gray-75);
+ --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-500);
+ --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-400);
+ --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-400);
+ --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-400);
+ --spectrum-accent-background-color-default:var(--spectrum-accent-color-800);
+ --spectrum-accent-background-color-hover:var(--spectrum-accent-color-700);
+ --spectrum-accent-background-color-down:var(--spectrum-accent-color-700);
+ --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-700);
+ --spectrum-informative-background-color-default:var(--spectrum-informative-color-800);
+ --spectrum-informative-background-color-hover:var(--spectrum-informative-color-700);
+ --spectrum-informative-background-color-down:var(--spectrum-informative-color-700);
+ --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-700);
+ --spectrum-negative-background-color-default:var(--spectrum-negative-color-800);
+ --spectrum-negative-background-color-hover:var(--spectrum-negative-color-700);
+ --spectrum-negative-background-color-down:var(--spectrum-negative-color-700);
+ --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-700);
+ --spectrum-positive-background-color-default:var(--spectrum-positive-color-800);
+ --spectrum-positive-background-color-hover:var(--spectrum-positive-color-700);
+ --spectrum-positive-background-color-down:var(--spectrum-positive-color-700);
+ --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-700);
+ --spectrum-notice-background-color-default:var(--spectrum-notice-color-900);
+ --spectrum-gray-background-color-default:var(--spectrum-gray-500);
+ --spectrum-red-background-color-default:var(--spectrum-red-800);
+ --spectrum-orange-background-color-default:var(--spectrum-orange-900);
+ --spectrum-yellow-background-color-default:var(--spectrum-yellow-1100);
+ --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-1000);
+ --spectrum-celery-background-color-default:var(--spectrum-celery-900);
+ --spectrum-green-background-color-default:var(--spectrum-green-800);
+ --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-800);
+ --spectrum-cyan-background-color-default:var(--spectrum-cyan-800);
+ --spectrum-blue-background-color-default:var(--spectrum-blue-800);
+ --spectrum-indigo-background-color-default:var(--spectrum-indigo-800);
+ --spectrum-purple-background-color-default:var(--spectrum-purple-800);
+ --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-800);
+ --spectrum-magenta-background-color-default:var(--spectrum-magenta-800);
--spectrum-neutral-visual-color:var(--spectrum-gray-600);
--spectrum-accent-visual-color:var(--spectrum-accent-color-900);
--spectrum-informative-visual-color:var(--spectrum-informative-color-900);
- --spectrum-negative-visual-color:var(--spectrum-negative-color-700);
+ --spectrum-negative-visual-color:var(--spectrum-negative-color-900);
--spectrum-notice-visual-color:var(--spectrum-notice-color-900);
- --spectrum-positive-visual-color:var(--spectrum-positive-color-800);
+ --spectrum-positive-visual-color:var(--spectrum-positive-color-900);
--spectrum-gray-visual-color:var(--spectrum-gray-600);
--spectrum-red-visual-color:var(--spectrum-red-700);
--spectrum-orange-visual-color:var(--spectrum-orange-900);
@@ -78,395 +69,787 @@
--spectrum-purple-visual-color:var(--spectrum-purple-900);
--spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900);
--spectrum-magenta-visual-color:var(--spectrum-magenta-900);
+ --spectrum-background-elevated-color:var(--spectrum-gray-75);
+ --spectrum-background-pasteboard-color:var(--spectrum-gray-25);
+ --spectrum-brown-visual-color:var(--spectrum-brown-900);
+ --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-900);
+ --spectrum-pink-visual-color:var(--spectrum-pink-900);
+ --spectrum-silver-visual-color:var(--spectrum-silver-900);
+ --spectrum-turquoise-visual-color:var(--spectrum-turquoise-900);
+ --spectrum-brown-background-color-default:var(--spectrum-brown-800);
+ --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-800);
+ --spectrum-pink-background-color-default:var(--spectrum-pink-800);
+ --spectrum-silver-background-color-default:var(--spectrum-silver-800);
+ --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-800);
+ --spectrum-drop-shadow-color-100-rgb:0, 0, 0;
+ --spectrum-drop-shadow-color-100-opacity:0.36;
+ --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+ --spectrum-drop-shadow-color-200-rgb:0, 0, 0;
+ --spectrum-drop-shadow-color-200-opacity:0.48;
+ --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
+ --spectrum-drop-shadow-color-300-rgb:0, 0, 0;
+ --spectrum-drop-shadow-color-300-opacity:0.6;
+ --spectrum-drop-shadow-color-300:rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity));
+ --spectrum-neutral-subtle-background-color-default:var(--spectrum-gray-300);
+ --spectrum-gray-subtle-background-color-default:var(--spectrum-gray-300);
+ --spectrum-blue-subtle-background-color-default:var(--spectrum-blue-300);
+ --spectrum-green-subtle-background-color-default:var(--spectrum-green-300);
+ --spectrum-orange-subtle-background-color-default:var(--spectrum-orange-300);
+ --spectrum-red-subtle-background-color-default:var(--spectrum-red-300);
+ --spectrum-brown-subtle-background-color-default:var(--spectrum-brown-300);
+ --spectrum-cinnamon-subtle-background-color-default:var(--spectrum-cinnamon-300);
+ --spectrum-celery-subtle-background-color-default:var(--spectrum-celery-300);
+ --spectrum-chartreuse-subtle-background-color-default:var(--spectrum-chartreuse-300);
+ --spectrum-cyan-subtle-background-color-default:var(--spectrum-cyan-300);
+ --spectrum-fuchsia-subtle-background-color-default:var(--spectrum-fuchsia-300);
+ --spectrum-indigo-subtle-background-color-default:var(--spectrum-indigo-300);
+ --spectrum-magenta-subtle-background-color-default:var(--spectrum-magenta-300);
+ --spectrum-pink-subtle-background-color-default:var(--spectrum-pink-300);
+ --spectrum-purple-subtle-background-color-default:var(--spectrum-purple-300);
+ --spectrum-seafoam-subtle-background-color-default:var(--spectrum-seafoam-300);
+ --spectrum-silver-subtle-background-color-default:var(--spectrum-silver-300);
+ --spectrum-turquoise-subtle-background-color-default:var(--spectrum-turquoise-300);
+ --spectrum-yellow-subtle-background-color-default:var(--spectrum-yellow-300);
--spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800);
- --spectrum-gray-50-rgb:29, 29, 29;
+ --spectrum-white-rgb:255, 255, 255;
+ --spectrum-white:rgba(var(--spectrum-white-rgb));
+ --spectrum-transparent-white-25-rgb:255, 255, 255;
+ --spectrum-transparent-white-25-opacity:0;
+ --spectrum-transparent-white-25:rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity));
+ --spectrum-transparent-white-50-rgb:255, 255, 255;
+ --spectrum-transparent-white-50-opacity:0.04;
+ --spectrum-transparent-white-50:rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity));
+ --spectrum-transparent-white-75-rgb:255, 255, 255;
+ --spectrum-transparent-white-75-opacity:0.07;
+ --spectrum-transparent-white-75:rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity));
+ --spectrum-transparent-white-100-rgb:255, 255, 255;
+ --spectrum-transparent-white-100-opacity:0.11;
+ --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+ --spectrum-transparent-white-200-rgb:255, 255, 255;
+ --spectrum-transparent-white-200-opacity:0.14;
+ --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
+ --spectrum-transparent-white-300-rgb:255, 255, 255;
+ --spectrum-transparent-white-300-opacity:0.17;
+ --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
+ --spectrum-transparent-white-400-rgb:255, 255, 255;
+ --spectrum-transparent-white-400-opacity:0.21;
+ --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
+ --spectrum-transparent-white-500-rgb:255, 255, 255;
+ --spectrum-transparent-white-500-opacity:0.39;
+ --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
+ --spectrum-transparent-white-600-rgb:255, 255, 255;
+ --spectrum-transparent-white-600-opacity:0.51;
+ --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
+ --spectrum-transparent-white-700-rgb:255, 255, 255;
+ --spectrum-transparent-white-700-opacity:0.66;
+ --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
+ --spectrum-transparent-white-800-rgb:255, 255, 255;
+ --spectrum-transparent-white-800-opacity:0.85;
+ --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
+ --spectrum-transparent-white-900-rgb:255, 255, 255;
+ --spectrum-transparent-white-900-opacity:0.94;
+ --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity));
+ --spectrum-transparent-white-1000-rgb:255, 255, 255;
+ --spectrum-transparent-white-1000:rgba(var(--spectrum-transparent-white-1000-rgb));
+ --spectrum-transparent-black-25-rgb:0, 0, 0;
+ --spectrum-transparent-black-25-opacity:0;
+ --spectrum-transparent-black-25:rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity));
+ --spectrum-transparent-black-50-rgb:0, 0, 0;
+ --spectrum-transparent-black-50-opacity:0.03;
+ --spectrum-transparent-black-50:rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity));
+ --spectrum-transparent-black-75-rgb:0, 0, 0;
+ --spectrum-transparent-black-75-opacity:0.05;
+ --spectrum-transparent-black-75:rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity));
+ --spectrum-transparent-black-100-rgb:0, 0, 0;
+ --spectrum-transparent-black-100-opacity:0.09;
+ --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
+ --spectrum-transparent-black-200-rgb:0, 0, 0;
+ --spectrum-transparent-black-200-opacity:0.12;
+ --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-transparent-black-300-rgb:0, 0, 0;
+ --spectrum-transparent-black-300-opacity:0.15;
+ --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
+ --spectrum-transparent-black-400-rgb:0, 0, 0;
+ --spectrum-transparent-black-400-opacity:0.22;
+ --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
+ --spectrum-transparent-black-500-rgb:0, 0, 0;
+ --spectrum-transparent-black-500-opacity:0.44;
+ --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
+ --spectrum-transparent-black-600-rgb:0, 0, 0;
+ --spectrum-transparent-black-600-opacity:0.56;
+ --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
+ --spectrum-transparent-black-700-rgb:0, 0, 0;
+ --spectrum-transparent-black-700-opacity:0.69;
+ --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
+ --spectrum-transparent-black-800-rgb:0, 0, 0;
+ --spectrum-transparent-black-800-opacity:0.84;
+ --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
+ --spectrum-transparent-black-900-rgb:0, 0, 0;
+ --spectrum-transparent-black-900-opacity:0.93;
+ --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity));
+ --spectrum-gray-25-rgb:17, 17, 17;
+ --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb));
+ --spectrum-gray-50-rgb:27, 27, 27;
--spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb));
- --spectrum-gray-75-rgb:38, 38, 38;
+ --spectrum-gray-75-rgb:34, 34, 34;
--spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb));
- --spectrum-gray-100-rgb:50, 50, 50;
+ --spectrum-gray-100-rgb:44, 44, 44;
--spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb));
- --spectrum-gray-200-rgb:63, 63, 63;
+ --spectrum-gray-200-rgb:50, 50, 50;
--spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb));
- --spectrum-gray-300-rgb:84, 84, 84;
+ --spectrum-gray-300-rgb:57, 57, 57;
--spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb));
- --spectrum-gray-400-rgb:112, 112, 112;
+ --spectrum-gray-400-rgb:68, 68, 68;
--spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb));
- --spectrum-gray-500-rgb:144, 144, 144;
+ --spectrum-gray-500-rgb:109, 109, 109;
--spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb));
- --spectrum-gray-600-rgb:178, 178, 178;
+ --spectrum-gray-600-rgb:138, 138, 138;
--spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb));
- --spectrum-gray-700-rgb:209, 209, 209;
+ --spectrum-gray-700-rgb:175, 175, 175;
--spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb));
- --spectrum-gray-800-rgb:235, 235, 235;
+ --spectrum-gray-800-rgb:219, 219, 219;
--spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb));
- --spectrum-gray-900-rgb:255, 255, 255;
+ --spectrum-gray-900-rgb:242, 242, 242;
--spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb));
- --spectrum-blue-100-rgb:0, 56, 119;
+ --spectrum-gray-1000-rgb:255, 255, 255;
+ --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb));
+ --spectrum-blue-100-rgb:14, 23, 63;
--spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb));
- --spectrum-blue-200-rgb:0, 65, 138;
+ --spectrum-blue-200-rgb:15, 28, 82;
--spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb));
- --spectrum-blue-300-rgb:0, 77, 163;
+ --spectrum-blue-300-rgb:12, 33, 117;
--spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb));
- --spectrum-blue-400-rgb:0, 89, 194;
+ --spectrum-blue-400-rgb:18, 45, 154;
--spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb));
- --spectrum-blue-500-rgb:3, 103, 224;
+ --spectrum-blue-500-rgb:26, 58, 195;
--spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb));
- --spectrum-blue-600-rgb:19, 121, 243;
+ --spectrum-blue-600-rgb:37, 73, 229;
--spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb));
- --spectrum-blue-700-rgb:52, 143, 244;
+ --spectrum-blue-700-rgb:52, 91, 248;
--spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb));
- --spectrum-blue-800-rgb:84, 163, 246;
+ --spectrum-blue-800-rgb:69, 110, 254;
--spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb));
- --spectrum-blue-900-rgb:114, 183, 249;
+ --spectrum-blue-900-rgb:86, 129, 255;
--spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb));
- --spectrum-blue-1000-rgb:143, 202, 252;
+ --spectrum-blue-1000-rgb:105, 149, 254;
--spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb));
- --spectrum-blue-1100-rgb:174, 219, 254;
+ --spectrum-blue-1100-rgb:124, 169, 252;
--spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb));
- --spectrum-blue-1200-rgb:204, 233, 255;
+ --spectrum-blue-1200-rgb:152, 192, 252;
--spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb));
- --spectrum-blue-1300-rgb:232, 246, 255;
+ --spectrum-blue-1300-rgb:181, 213, 253;
--spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb));
- --spectrum-blue-1400-rgb:255, 255, 255;
+ --spectrum-blue-1400-rgb:213, 231, 254;
--spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb));
- --spectrum-red-100-rgb:123, 0, 0;
+ --spectrum-blue-1500-rgb:238, 245, 255;
+ --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb));
+ --spectrum-blue-1600-rgb:255, 255, 255;
+ --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb));
+ --spectrum-red-100-rgb:54, 10, 3;
--spectrum-red-100:rgba(var(--spectrum-red-100-rgb));
- --spectrum-red-200-rgb:141, 0, 0;
+ --spectrum-red-200-rgb:68, 13, 5;
--spectrum-red-200:rgba(var(--spectrum-red-200-rgb));
- --spectrum-red-300-rgb:165, 0, 0;
+ --spectrum-red-300-rgb:87, 17, 7;
--spectrum-red-300:rgba(var(--spectrum-red-300-rgb));
- --spectrum-red-400-rgb:190, 4, 3;
+ --spectrum-red-400-rgb:115, 24, 11;
--spectrum-red-400:rgba(var(--spectrum-red-400-rgb));
- --spectrum-red-500-rgb:215, 25, 19;
+ --spectrum-red-500-rgb:147, 31, 17;
--spectrum-red-500:rgba(var(--spectrum-red-500-rgb));
- --spectrum-red-600-rgb:234, 56, 41;
+ --spectrum-red-600-rgb:177, 38, 23;
--spectrum-red-600:rgba(var(--spectrum-red-600-rgb));
- --spectrum-red-700-rgb:246, 88, 67;
+ --spectrum-red-700-rgb:205, 46, 29;
--spectrum-red-700:rgba(var(--spectrum-red-700-rgb));
- --spectrum-red-800-rgb:255, 117, 94;
+ --spectrum-red-800-rgb:230, 54, 35;
--spectrum-red-800:rgba(var(--spectrum-red-800-rgb));
- --spectrum-red-900-rgb:255, 149, 129;
+ --spectrum-red-900-rgb:252, 67, 46;
--spectrum-red-900:rgba(var(--spectrum-red-900-rgb));
- --spectrum-red-1000-rgb:255, 176, 161;
+ --spectrum-red-1000-rgb:255, 103, 86;
--spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb));
- --spectrum-red-1100-rgb:255, 201, 189;
+ --spectrum-red-1100-rgb:255, 134, 120;
--spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb));
- --spectrum-red-1200-rgb:255, 222, 216;
+ --spectrum-red-1200-rgb:255, 167, 157;
--spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb));
- --spectrum-red-1300-rgb:255, 241, 238;
+ --spectrum-red-1300-rgb:255, 196, 189;
--spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb));
- --spectrum-red-1400-rgb:255, 255, 255;
+ --spectrum-red-1400-rgb:255, 222, 219;
--spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb));
- --spectrum-orange-100-rgb:102, 37, 0;
+ --spectrum-red-1500-rgb:255, 242, 240;
+ --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb));
+ --spectrum-red-1600-rgb:255, 255, 255;
+ --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb));
+ --spectrum-orange-100-rgb:49, 16, 0;
--spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb));
- --spectrum-orange-200-rgb:117, 45, 0;
+ --spectrum-orange-200-rgb:61, 21, 0;
--spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb));
- --spectrum-orange-300-rgb:137, 55, 0;
+ --spectrum-orange-300-rgb:80, 27, 0;
--spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb));
- --spectrum-orange-400-rgb:158, 66, 0;
+ --spectrum-orange-400-rgb:106, 36, 0;
--spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb));
- --spectrum-orange-500-rgb:180, 78, 0;
+ --spectrum-orange-500-rgb:135, 47, 0;
--spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb));
- --spectrum-orange-600-rgb:202, 93, 0;
+ --spectrum-orange-600-rgb:162, 59, 0;
--spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb));
- --spectrum-orange-700-rgb:225, 109, 0;
+ --spectrum-orange-700-rgb:185, 73, 0;
--spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb));
- --spectrum-orange-800-rgb:244, 129, 12;
+ --spectrum-orange-800-rgb:205, 86, 0;
--spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb));
- --spectrum-orange-900-rgb:254, 154, 46;
+ --spectrum-orange-900-rgb:224, 100, 0;
--spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb));
- --spectrum-orange-1000-rgb:255, 181, 88;
+ --spectrum-orange-1000-rgb:243, 117, 0;
--spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb));
- --spectrum-orange-1100-rgb:253, 206, 136;
+ --spectrum-orange-1100-rgb:255, 137, 0;
--spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb));
- --spectrum-orange-1200-rgb:255, 225, 179;
+ --spectrum-orange-1200-rgb:255, 173, 45;
--spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb));
- --spectrum-orange-1300-rgb:255, 242, 221;
+ --spectrum-orange-1300-rgb:255, 201, 116;
--spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb));
- --spectrum-orange-1400-rgb:255, 253, 249;
+ --spectrum-orange-1400-rgb:255, 225, 178;
--spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb));
- --spectrum-yellow-100-rgb:76, 54, 0;
+ --spectrum-orange-1500-rgb:255, 243, 225;
+ --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb));
+ --spectrum-orange-1600-rgb:255, 255, 255;
+ --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb));
+ --spectrum-yellow-100-rgb:37, 23, 0;
--spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb));
- --spectrum-yellow-200-rgb:88, 64, 0;
+ --spectrum-yellow-200-rgb:47, 29, 0;
--spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb));
- --spectrum-yellow-300-rgb:103, 76, 0;
+ --spectrum-yellow-300-rgb:61, 39, 0;
--spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb));
- --spectrum-yellow-400-rgb:119, 89, 0;
+ --spectrum-yellow-400-rgb:83, 52, 0;
--spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb));
- --spectrum-yellow-500-rgb:136, 104, 0;
+ --spectrum-yellow-500-rgb:107, 67, 0;
--spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb));
- --spectrum-yellow-600-rgb:155, 120, 0;
+ --spectrum-yellow-600-rgb:130, 82, 0;
--spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb));
- --spectrum-yellow-700-rgb:174, 137, 0;
+ --spectrum-yellow-700-rgb:151, 97, 0;
--spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb));
- --spectrum-yellow-800-rgb:192, 156, 0;
+ --spectrum-yellow-800-rgb:169, 110, 0;
--spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb));
- --spectrum-yellow-900-rgb:211, 174, 0;
+ --spectrum-yellow-900-rgb:186, 124, 0;
--spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb));
- --spectrum-yellow-1000-rgb:228, 194, 0;
+ --spectrum-yellow-1000-rgb:203, 141, 0;
--spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb));
- --spectrum-yellow-1100-rgb:244, 213, 0;
+ --spectrum-yellow-1100-rgb:218, 159, 0;
--spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb));
- --spectrum-yellow-1200-rgb:249, 232, 92;
+ --spectrum-yellow-1200-rgb:235, 183, 0;
--spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb));
- --spectrum-yellow-1300-rgb:252, 246, 187;
+ --spectrum-yellow-1300-rgb:249, 206, 0;
--spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb));
- --spectrum-yellow-1400-rgb:255, 255, 255;
+ --spectrum-yellow-1400-rgb:255, 230, 86;
--spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb));
- --spectrum-chartreuse-100-rgb:48, 64, 0;
+ --spectrum-yellow-1500-rgb:255, 246, 195;
+ --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb));
+ --spectrum-yellow-1600-rgb:255, 255, 255;
+ --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb));
+ --spectrum-chartreuse-100-rgb:23, 28, 0;
--spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb));
- --spectrum-chartreuse-200-rgb:55, 74, 0;
+ --spectrum-chartreuse-200-rgb:30, 36, 0;
--spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb));
- --spectrum-chartreuse-300-rgb:65, 87, 0;
+ --spectrum-chartreuse-300-rgb:39, 47, 0;
--spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb));
- --spectrum-chartreuse-400-rgb:76, 102, 0;
+ --spectrum-chartreuse-400-rgb:53, 63, 0;
--spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb));
- --spectrum-chartreuse-500-rgb:89, 118, 0;
+ --spectrum-chartreuse-500-rgb:68, 82, 0;
--spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb));
- --spectrum-chartreuse-600-rgb:102, 136, 0;
+ --spectrum-chartreuse-600-rgb:83, 100, 0;
--spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb));
- --spectrum-chartreuse-700-rgb:117, 154, 0;
+ --spectrum-chartreuse-700-rgb:97, 116, 0;
--spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb));
- --spectrum-chartreuse-800-rgb:132, 173, 1;
+ --spectrum-chartreuse-800-rgb:109, 131, 0;
--spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb));
- --spectrum-chartreuse-900-rgb:148, 192, 8;
+ --spectrum-chartreuse-900-rgb:122, 147, 0;
--spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb));
- --spectrum-chartreuse-1000-rgb:166, 211, 18;
+ --spectrum-chartreuse-1000-rgb:136, 164, 0;
--spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb));
- --spectrum-chartreuse-1100-rgb:184, 229, 37;
+ --spectrum-chartreuse-1100-rgb:151, 181, 0;
--spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb));
- --spectrum-chartreuse-1200-rgb:205, 245, 71;
+ --spectrum-chartreuse-1200-rgb:169, 203, 0;
--spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb));
- --spectrum-chartreuse-1300-rgb:231, 254, 154;
+ --spectrum-chartreuse-1300-rgb:187, 225, 0;
--spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb));
- --spectrum-chartreuse-1400-rgb:255, 255, 255;
+ --spectrum-chartreuse-1400-rgb:219, 240, 117;
--spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb));
- --spectrum-celery-100-rgb:0, 69, 10;
+ --spectrum-chartreuse-1500-rgb:242, 249, 206;
+ --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb));
+ --spectrum-chartreuse-1600-rgb:255, 255, 255;
+ --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb));
+ --spectrum-celery-100-rgb:11, 31, 0;
--spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb));
- --spectrum-celery-200-rgb:0, 80, 12;
+ --spectrum-celery-200-rgb:15, 38, 0;
--spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb));
- --spectrum-celery-300-rgb:0, 94, 14;
+ --spectrum-celery-300-rgb:21, 51, 1;
--spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb));
- --spectrum-celery-400-rgb:0, 109, 15;
+ --spectrum-celery-400-rgb:31, 67, 4;
--spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb));
- --spectrum-celery-500-rgb:0, 127, 15;
+ --spectrum-celery-500-rgb:41, 86, 8;
--spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb));
- --spectrum-celery-600-rgb:0, 145, 18;
+ --spectrum-celery-600-rgb:50, 105, 11;
--spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb));
- --spectrum-celery-700-rgb:4, 165, 30;
+ --spectrum-celery-700-rgb:60, 122, 15;
--spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb));
- --spectrum-celery-800-rgb:34, 184, 51;
+ --spectrum-celery-800-rgb:69, 138, 19;
--spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb));
- --spectrum-celery-900-rgb:68, 202, 73;
+ --spectrum-celery-900-rgb:78, 154, 23;
--spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb));
- --spectrum-celery-1000-rgb:105, 220, 99;
+ --spectrum-celery-1000-rgb:88, 172, 28;
--spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb));
- --spectrum-celery-1100-rgb:142, 235, 127;
+ --spectrum-celery-1100-rgb:100, 190, 35;
--spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb));
- --spectrum-celery-1200-rgb:180, 247, 162;
+ --spectrum-celery-1200-rgb:116, 213, 46;
--spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb));
- --spectrum-celery-1300-rgb:221, 253, 211;
+ --spectrum-celery-1300-rgb:136, 234, 65;
--spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb));
- --spectrum-celery-1400-rgb:255, 255, 255;
+ --spectrum-celery-1400-rgb:170, 251, 112;
--spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb));
- --spectrum-green-100-rgb:4, 67, 41;
+ --spectrum-celery-1500-rgb:222, 255, 198;
+ --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb));
+ --spectrum-celery-1600-rgb:255, 255, 255;
+ --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb));
+ --spectrum-green-100-rgb:0, 30, 23;
--spectrum-green-100:rgba(var(--spectrum-green-100-rgb));
- --spectrum-green-200-rgb:0, 78, 47;
+ --spectrum-green-200-rgb:0, 38, 29;
--spectrum-green-200:rgba(var(--spectrum-green-200-rgb));
- --spectrum-green-300-rgb:0, 92, 56;
+ --spectrum-green-300-rgb:0, 51, 38;
--spectrum-green-300:rgba(var(--spectrum-green-300-rgb));
- --spectrum-green-400-rgb:0, 108, 67;
+ --spectrum-green-400-rgb:0, 68, 48;
--spectrum-green-400:rgba(var(--spectrum-green-400-rgb));
- --spectrum-green-500-rgb:0, 125, 78;
+ --spectrum-green-500-rgb:2, 87, 58;
--spectrum-green-500:rgba(var(--spectrum-green-500-rgb));
- --spectrum-green-600-rgb:0, 143, 93;
+ --spectrum-green-600-rgb:3, 106, 67;
--spectrum-green-600:rgba(var(--spectrum-green-600-rgb));
- --spectrum-green-700-rgb:18, 162, 108;
+ --spectrum-green-700-rgb:4, 124, 75;
--spectrum-green-700:rgba(var(--spectrum-green-700-rgb));
- --spectrum-green-800-rgb:43, 180, 125;
+ --spectrum-green-800-rgb:6, 140, 82;
--spectrum-green-800:rgba(var(--spectrum-green-800-rgb));
- --spectrum-green-900-rgb:67, 199, 143;
+ --spectrum-green-900-rgb:9, 157, 89;
--spectrum-green-900:rgba(var(--spectrum-green-900-rgb));
- --spectrum-green-1000-rgb:94, 217, 162;
+ --spectrum-green-1000-rgb:14, 175, 98;
--spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb));
- --spectrum-green-1100-rgb:129, 233, 184;
+ --spectrum-green-1100-rgb:24, 193, 110;
--spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb));
- --spectrum-green-1200-rgb:177, 244, 209;
+ --spectrum-green-1200-rgb:57, 215, 134;
--spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb));
- --spectrum-green-1300-rgb:223, 250, 234;
+ --spectrum-green-1300-rgb:126, 231, 172;
--spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb));
- --spectrum-green-1400-rgb:254, 255, 252;
+ --spectrum-green-1400-rgb:189, 241, 208;
--spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb));
- --spectrum-seafoam-100-rgb:18, 65, 63;
+ --spectrum-green-1500-rgb:229, 250, 236;
+ --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb));
+ --spectrum-green-1600-rgb:255, 255, 255;
+ --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb));
+ --spectrum-seafoam-100-rgb:0, 30, 27;
--spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb));
- --spectrum-seafoam-200-rgb:14, 76, 73;
+ --spectrum-seafoam-200-rgb:0, 39, 35;
--spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb));
- --spectrum-seafoam-300-rgb:4, 90, 87;
+ --spectrum-seafoam-300-rgb:0, 50, 44;
--spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb));
- --spectrum-seafoam-400-rgb:0, 105, 101;
+ --spectrum-seafoam-400-rgb:0, 67, 59;
--spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb));
- --spectrum-seafoam-500-rgb:0, 122, 117;
+ --spectrum-seafoam-500-rgb:2, 86, 75;
--spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb));
- --spectrum-seafoam-600-rgb:0, 140, 135;
+ --spectrum-seafoam-600-rgb:4, 105, 89;
--spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb));
- --spectrum-seafoam-700-rgb:0, 158, 152;
+ --spectrum-seafoam-700-rgb:6, 122, 103;
--spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb));
- --spectrum-seafoam-800-rgb:3, 178, 171;
+ --spectrum-seafoam-800-rgb:8, 138, 116;
--spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb));
- --spectrum-seafoam-900-rgb:54, 197, 189;
+ --spectrum-seafoam-900-rgb:10, 154, 128;
--spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb));
- --spectrum-seafoam-1000-rgb:93, 214, 207;
+ --spectrum-seafoam-1000-rgb:12, 173, 142;
--spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb));
- --spectrum-seafoam-1100-rgb:132, 230, 223;
+ --spectrum-seafoam-1100-rgb:14, 190, 156;
--spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb));
- --spectrum-seafoam-1200-rgb:176, 242, 236;
+ --spectrum-seafoam-1200-rgb:29, 214, 176;
--spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb));
- --spectrum-seafoam-1300-rgb:223, 249, 246;
+ --spectrum-seafoam-1300-rgb:122, 229, 203;
--spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb));
- --spectrum-seafoam-1400-rgb:254, 255, 254;
+ --spectrum-seafoam-1400-rgb:186, 241, 222;
--spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb));
- --spectrum-cyan-100-rgb:0, 61, 98;
+ --spectrum-seafoam-1500-rgb:229, 249, 243;
+ --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb));
+ --spectrum-seafoam-1600-rgb:255, 255, 255;
+ --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb));
+ --spectrum-cyan-100-rgb:0, 29, 39;
--spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb));
- --spectrum-cyan-200-rgb:0, 71, 111;
+ --spectrum-cyan-200-rgb:0, 36, 49;
--spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb));
- --spectrum-cyan-300-rgb:0, 85, 127;
+ --spectrum-cyan-300-rgb:0, 48, 65;
--spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb));
- --spectrum-cyan-400-rgb:0, 100, 145;
+ --spectrum-cyan-400-rgb:0, 64, 88;
--spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb));
- --spectrum-cyan-500-rgb:0, 116, 162;
+ --spectrum-cyan-500-rgb:0, 82, 113;
--spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb));
- --spectrum-cyan-600-rgb:0, 134, 180;
+ --spectrum-cyan-600-rgb:3, 99, 140;
--spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb));
- --spectrum-cyan-700-rgb:0, 153, 198;
+ --spectrum-cyan-700-rgb:8, 115, 168;
--spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb));
- --spectrum-cyan-800-rgb:14, 173, 215;
+ --spectrum-cyan-800-rgb:15, 128, 194;
--spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb));
- --spectrum-cyan-900-rgb:44, 193, 230;
+ --spectrum-cyan-900-rgb:24, 142, 220;
--spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb));
- --spectrum-cyan-1000-rgb:84, 211, 241;
+ --spectrum-cyan-1000-rgb:38, 159, 244;
--spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb));
- --spectrum-cyan-1100-rgb:127, 228, 249;
+ --spectrum-cyan-1100-rgb:63, 177, 255;
--spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb));
- --spectrum-cyan-1200-rgb:167, 241, 255;
+ --spectrum-cyan-1200-rgb:107, 199, 255;
--spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb));
- --spectrum-cyan-1300-rgb:215, 250, 255;
+ --spectrum-cyan-1300-rgb:152, 219, 255;
--spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb));
- --spectrum-cyan-1400-rgb:255, 255, 255;
+ --spectrum-cyan-1400-rgb:195, 236, 252;
--spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb));
- --spectrum-indigo-100-rgb:40, 44, 140;
+ --spectrum-cyan-1500-rgb:230, 248, 253;
+ --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb));
+ --spectrum-cyan-1600-rgb:255, 255, 255;
+ --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb));
+ --spectrum-indigo-100-rgb:30, 0, 93;
--spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb));
- --spectrum-indigo-200-rgb:47, 52, 163;
+ --spectrum-indigo-200-rgb:35, 0, 110;
--spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb));
- --spectrum-indigo-300-rgb:57, 63, 187;
+ --spectrum-indigo-300-rgb:47, 0, 140;
--spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb));
- --spectrum-indigo-400-rgb:70, 75, 211;
+ --spectrum-indigo-400-rgb:62, 12, 174;
--spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb));
- --spectrum-indigo-500-rgb:85, 91, 231;
+ --spectrum-indigo-500-rgb:79, 30, 209;
--spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb));
- --spectrum-indigo-600-rgb:104, 109, 244;
+ --spectrum-indigo-600-rgb:95, 52, 235;
--spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb));
- --spectrum-indigo-700-rgb:124, 129, 251;
+ --spectrum-indigo-700-rgb:109, 75, 248;
--spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb));
- --spectrum-indigo-800-rgb:145, 149, 255;
+ --spectrum-indigo-800-rgb:119, 97, 252;
--spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb));
- --spectrum-indigo-900-rgb:167, 170, 255;
+ --spectrum-indigo-900-rgb:128, 119, 254;
--spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb));
- --spectrum-indigo-1000-rgb:188, 190, 255;
+ --spectrum-indigo-1000-rgb:139, 141, 254;
--spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb));
- --spectrum-indigo-1100-rgb:208, 210, 255;
+ --spectrum-indigo-1100-rgb:153, 161, 255;
--spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb));
- --spectrum-indigo-1200-rgb:226, 228, 255;
+ --spectrum-indigo-1200-rgb:176, 186, 255;
--spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb));
- --spectrum-indigo-1300-rgb:243, 243, 254;
+ --spectrum-indigo-1300-rgb:199, 208, 255;
--spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb));
- --spectrum-indigo-1400-rgb:255, 255, 255;
+ --spectrum-indigo-1400-rgb:223, 228, 255;
--spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb));
- --spectrum-purple-100-rgb:76, 13, 157;
+ --spectrum-indigo-1500-rgb:243, 244, 255;
+ --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb));
+ --spectrum-indigo-1600-rgb:255, 255, 255;
+ --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb));
+ --spectrum-purple-100-rgb:41, 0, 79;
--spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb));
- --spectrum-purple-200-rgb:89, 17, 177;
+ --spectrum-purple-200-rgb:50, 0, 96;
--spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb));
- --spectrum-purple-300-rgb:105, 28, 200;
+ --spectrum-purple-300-rgb:64, 0, 122;
--spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb));
- --spectrum-purple-400-rgb:122, 45, 218;
+ --spectrum-purple-400-rgb:83, 0, 159;
--spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb));
- --spectrum-purple-500-rgb:140, 65, 233;
+ --spectrum-purple-500-rgb:107, 6, 195;
--spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb));
- --spectrum-purple-600-rgb:157, 87, 243;
+ --spectrum-purple-600-rgb:130, 34, 215;
--spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb));
- --spectrum-purple-700-rgb:172, 111, 249;
+ --spectrum-purple-700-rgb:148, 62, 224;
--spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb));
- --spectrum-purple-800-rgb:187, 135, 251;
+ --spectrum-purple-800-rgb:161, 84, 229;
--spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb));
- --spectrum-purple-900-rgb:202, 159, 252;
+ --spectrum-purple-900-rgb:173, 105, 233;
--spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb));
- --spectrum-purple-1000-rgb:215, 182, 254;
+ --spectrum-purple-1000-rgb:186, 127, 237;
--spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb));
- --spectrum-purple-1100-rgb:228, 204, 254;
+ --spectrum-purple-1100-rgb:197, 149, 240;
--spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb));
- --spectrum-purple-1200-rgb:239, 223, 255;
+ --spectrum-purple-1200-rgb:212, 176, 244;
--spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb));
- --spectrum-purple-1300-rgb:249, 240, 255;
+ --spectrum-purple-1300-rgb:225, 201, 247;
--spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb));
- --spectrum-purple-1400-rgb:255, 253, 255;
+ --spectrum-purple-1400-rgb:238, 224, 250;
--spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb));
- --spectrum-fuchsia-100-rgb:107, 3, 106;
+ --spectrum-purple-1500-rgb:248, 243, 253;
+ --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb));
+ --spectrum-purple-1600-rgb:255, 255, 255;
+ --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb));
+ --spectrum-fuchsia-100-rgb:50, 0, 61;
--spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb));
- --spectrum-fuchsia-200-rgb:123, 0, 123;
+ --spectrum-fuchsia-200-rgb:61, 0, 74;
--spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb));
- --spectrum-fuchsia-300-rgb:144, 0, 145;
+ --spectrum-fuchsia-300-rgb:79, 0, 95;
--spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb));
- --spectrum-fuchsia-400-rgb:165, 13, 166;
+ --spectrum-fuchsia-400-rgb:102, 9, 120;
--spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb));
- --spectrum-fuchsia-500-rgb:185, 37, 185;
+ --spectrum-fuchsia-500-rgb:127, 23, 146;
--spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb));
- --spectrum-fuchsia-600-rgb:205, 57, 206;
+ --spectrum-fuchsia-600-rgb:151, 38, 170;
--spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb));
- --spectrum-fuchsia-700-rgb:223, 81, 224;
+ --spectrum-fuchsia-700-rgb:173, 51, 192;
--spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb));
- --spectrum-fuchsia-800-rgb:235, 110, 236;
+ --spectrum-fuchsia-800-rgb:192, 64, 212;
--spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb));
- --spectrum-fuchsia-900-rgb:244, 140, 242;
+ --spectrum-fuchsia-900-rgb:213, 73, 235;
--spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb));
- --spectrum-fuchsia-1000-rgb:250, 168, 245;
+ --spectrum-fuchsia-1000-rgb:232, 91, 253;
--spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb));
- --spectrum-fuchsia-1100-rgb:254, 194, 248;
+ --spectrum-fuchsia-1100-rgb:240, 122, 255;
--spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb));
- --spectrum-fuchsia-1200-rgb:255, 219, 250;
+ --spectrum-fuchsia-1200-rgb:245, 159, 255;
--spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb));
- --spectrum-fuchsia-1300-rgb:255, 239, 252;
+ --spectrum-fuchsia-1300-rgb:248, 191, 255;
--spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb));
- --spectrum-fuchsia-1400-rgb:255, 253, 255;
+ --spectrum-fuchsia-1400-rgb:251, 219, 255;
--spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb));
- --spectrum-magenta-100-rgb:118, 0, 58;
+ --spectrum-fuchsia-1500-rgb:253, 241, 255;
+ --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb));
+ --spectrum-fuchsia-1600-rgb:255, 255, 255;
+ --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb));
+ --spectrum-magenta-100-rgb:59, 0, 22;
--spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb));
- --spectrum-magenta-200-rgb:137, 0, 66;
+ --spectrum-magenta-200-rgb:74, 0, 27;
--spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb));
- --spectrum-magenta-300-rgb:160, 0, 77;
+ --spectrum-magenta-300-rgb:93, 0, 34;
--spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb));
- --spectrum-magenta-400-rgb:182, 18, 90;
+ --spectrum-magenta-400-rgb:123, 0, 45;
--spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb));
- --spectrum-magenta-500-rgb:203, 38, 109;
+ --spectrum-magenta-500-rgb:152, 7, 60;
--spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb));
- --spectrum-magenta-600-rgb:222, 61, 130;
+ --spectrum-magenta-600-rgb:181, 19, 76;
--spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb));
- --spectrum-magenta-700-rgb:237, 87, 149;
+ --spectrum-magenta-700-rgb:207, 31, 92;
--spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb));
- --spectrum-magenta-800-rgb:249, 114, 167;
+ --spectrum-magenta-800-rgb:231, 41, 105;
--spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb));
- --spectrum-magenta-900-rgb:255, 143, 185;
+ --spectrum-magenta-900-rgb:255, 51, 119;
--spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb));
- --spectrum-magenta-1000-rgb:255, 172, 202;
+ --spectrum-magenta-1000-rgb:255, 96, 149;
--spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb));
- --spectrum-magenta-1100-rgb:255, 198, 218;
+ --spectrum-magenta-1100-rgb:255, 128, 171;
--spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb));
- --spectrum-magenta-1200-rgb:255, 221, 233;
+ --spectrum-magenta-1200-rgb:255, 163, 194;
--spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb));
- --spectrum-magenta-1300-rgb:255, 240, 245;
+ --spectrum-magenta-1300-rgb:255, 193, 214;
--spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb));
- --spectrum-magenta-1400-rgb:255, 252, 253;
+ --spectrum-magenta-1400-rgb:255, 220, 232;
--spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb));
+ --spectrum-magenta-1500-rgb:255, 241, 246;
+ --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb));
+ --spectrum-magenta-1600-rgb:255, 255, 255;
+ --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb));
+ --spectrum-pink-100-rgb:58, 0, 37;
+ --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb));
+ --spectrum-pink-200-rgb:71, 0, 44;
+ --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb));
+ --spectrum-pink-300-rgb:90, 0, 57;
+ --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb));
+ --spectrum-pink-400-rgb:115, 7, 75;
+ --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb));
+ --spectrum-pink-500-rgb:143, 18, 97;
+ --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb));
+ --spectrum-pink-600-rgb:171, 29, 119;
+ --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb));
+ --spectrum-pink-700-rgb:196, 39, 138;
+ --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb));
+ --spectrum-pink-800-rgb:220, 47, 156;
+ --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb));
+ --spectrum-pink-900-rgb:236, 67, 175;
+ --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb));
+ --spectrum-pink-1000-rgb:251, 90, 196;
+ --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb));
+ --spectrum-pink-1100-rgb:255, 122, 210;
+ --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb));
+ --spectrum-pink-1200-rgb:255, 159, 223;
+ --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb));
+ --spectrum-pink-1300-rgb:255, 191, 234;
+ --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb));
+ --spectrum-pink-1400-rgb:255, 219, 243;
+ --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb));
+ --spectrum-pink-1500-rgb:255, 241, 250;
+ --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb));
+ --spectrum-pink-1600-rgb:255, 255, 255;
+ --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb));
+ --spectrum-turquoise-100-rgb:0, 30, 33;
+ --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb));
+ --spectrum-turquoise-200-rgb:0, 37, 41;
+ --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb));
+ --spectrum-turquoise-300-rgb:0, 49, 54;
+ --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb));
+ --spectrum-turquoise-400-rgb:0, 66, 72;
+ --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb));
+ --spectrum-turquoise-500-rgb:3, 84, 92;
+ --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb));
+ --spectrum-turquoise-600-rgb:5, 103, 112;
+ --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb));
+ --spectrum-turquoise-700-rgb:7, 120, 131;
+ --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb));
+ --spectrum-turquoise-800-rgb:9, 135, 147;
+ --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb));
+ --spectrum-turquoise-900-rgb:11, 151, 164;
+ --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb));
+ --spectrum-turquoise-1000-rgb:13, 168, 182;
+ --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb));
+ --spectrum-turquoise-1100-rgb:16, 186, 202;
+ --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb));
+ --spectrum-turquoise-1200-rgb:64, 208, 220;
+ --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb));
+ --spectrum-turquoise-1300-rgb:128, 225, 231;
+ --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb));
+ --spectrum-turquoise-1400-rgb:183, 240, 240;
+ --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb));
+ --spectrum-turquoise-1500-rgb:228, 249, 249;
+ --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb));
+ --spectrum-turquoise-1600-rgb:255, 255, 255;
+ --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb));
+ --spectrum-brown-100-rgb:35, 24, 8;
+ --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb));
+ --spectrum-brown-200-rgb:44, 31, 11;
+ --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb));
+ --spectrum-brown-300-rgb:58, 40, 14;
+ --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb));
+ --spectrum-brown-400-rgb:78, 55, 19;
+ --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb));
+ --spectrum-brown-500-rgb:98, 71, 30;
+ --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb));
+ --spectrum-brown-600-rgb:115, 88, 47;
+ --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb));
+ --spectrum-brown-700-rgb:132, 104, 61;
+ --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb));
+ --spectrum-brown-800-rgb:148, 118, 73;
+ --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb));
+ --spectrum-brown-900-rgb:163, 132, 84;
+ --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb));
+ --spectrum-brown-1000-rgb:181, 147, 98;
+ --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb));
+ --spectrum-brown-1100-rgb:199, 163, 112;
+ --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb));
+ --spectrum-brown-1200-rgb:222, 185, 130;
+ --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb));
+ --spectrum-brown-1300-rgb:232, 207, 169;
+ --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb));
+ --spectrum-brown-1400-rgb:242, 227, 206;
+ --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb));
+ --spectrum-brown-1500-rgb:250, 244, 236;
+ --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb));
+ --spectrum-brown-1600-rgb:255, 255, 255;
+ --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb));
+ --spectrum-silver-100-rgb:26, 26, 26;
+ --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb));
+ --spectrum-silver-200-rgb:33, 33, 33;
+ --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb));
+ --spectrum-silver-300-rgb:44, 44, 44;
+ --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb));
+ --spectrum-silver-400-rgb:59, 59, 59;
+ --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb));
+ --spectrum-silver-500-rgb:76, 76, 76;
+ --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb));
+ --spectrum-silver-600-rgb:92, 92, 92;
+ --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb));
+ --spectrum-silver-700-rgb:108, 108, 108;
+ --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb));
+ --spectrum-silver-800-rgb:123, 123, 123;
+ --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb));
+ --spectrum-silver-900-rgb:137, 137, 137;
+ --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb));
+ --spectrum-silver-1000-rgb:152, 152, 152;
+ --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb));
+ --spectrum-silver-1100-rgb:169, 169, 169;
+ --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb));
+ --spectrum-silver-1200-rgb:190, 190, 190;
+ --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb));
+ --spectrum-silver-1300-rgb:211, 211, 211;
+ --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb));
+ --spectrum-silver-1400-rgb:229, 229, 229;
+ --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb));
+ --spectrum-silver-1500-rgb:244, 244, 244;
+ --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb));
+ --spectrum-silver-1600-rgb:255, 255, 255;
+ --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb));
+ --spectrum-cinnamon-100-rgb:48, 17, 4;
+ --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb));
+ --spectrum-cinnamon-200-rgb:59, 21, 5;
+ --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb));
+ --spectrum-cinnamon-300-rgb:79, 28, 7;
+ --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb));
+ --spectrum-cinnamon-400-rgb:100, 41, 15;
+ --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb));
+ --spectrum-cinnamon-500-rgb:122, 57, 28;
+ --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb));
+ --spectrum-cinnamon-600-rgb:143, 74, 40;
+ --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb));
+ --spectrum-cinnamon-700-rgb:163, 88, 52;
+ --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb));
+ --spectrum-cinnamon-800-rgb:179, 103, 64;
+ --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb));
+ --spectrum-cinnamon-900-rgb:192, 119, 80;
+ --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb));
+ --spectrum-cinnamon-1000-rgb:206, 136, 99;
+ --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb));
+ --spectrum-cinnamon-1100-rgb:220, 154, 118;
+ --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb));
+ --spectrum-cinnamon-1200-rgb:232, 179, 149;
+ --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb));
+ --spectrum-cinnamon-1300-rgb:239, 203, 183;
+ --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb));
+ --spectrum-cinnamon-1400-rgb:246, 225, 214;
+ --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb));
+ --spectrum-cinnamon-1500-rgb:252, 244, 239;
+ --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb));
+ --spectrum-cinnamon-1600-rgb:255, 255, 255;
+ --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb));
--spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800);
--spectrum-icon-color-green-primary-default:var(--spectrum-green-800);
--spectrum-icon-color-red-primary-default:var(--spectrum-red-700);
--spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000);
+ --spectrum-negative-subdued-background-color-default:var(--spectrum-negative-subtle-background-color-default);
+ --spectrum-accent-subtle-background-color-default:var(--spectrum-accent-color-300);
+ --spectrum-informative-subtle-background-color-default:var(--spectrum-informative-color-300);
+ --spectrum-positive-subtle-background-color-default:var(--spectrum-positive-color-300);
+ --spectrum-notice-subtle-background-color-default:var(--spectrum-notice-color-300);
+ --spectrum-negative-subtle-background-color-default:var(--spectrum-negative-color-300);
+ --color-scheme:dark;
+ --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800);
+ --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800);
+ --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900);
+ --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800);
+ --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700);
+
+ --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25);
+ --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15);
+ --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700);
+
+ --spectrum-badge-label-icon-color-primary:var(--spectrum-black);
+
+ --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15);
+ --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07);
+ --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25);
+ --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25);
+ --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200);
+ --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25);
+ --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07);
+ --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700);
+
+ --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-500-rgb);
+
+ --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700);
+
+ --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb);
+
+ --spectrum-dropindicator-color:var(--spectrum-blue-700);
+
+ --spectrum-logic-button-and-background-color:var(--spectrum-blue-800);
+ --spectrum-logic-button-and-border-color:var(--spectrum-blue-800);
+ --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000);
+ --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000);
+
+ --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700);
+ --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700);
+ --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900);
+ --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900);
+
+ --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700);
+
+ --spectrum-swatch-border-color-rgb:255, 255, 255;
+
+ --spectrum-swatch-border-color-opacity:0.51;
+
+ --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
+ --spectrum-swatch-border-color-light-rgb:255, 255, 255;
+ --spectrum-swatch-border-color-light-opacity:0.20;
+ --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
+
+ --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07);
+ --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15);
}
diff --git a/tokens/dist/css/darkest-vars.css b/tokens/dist/css/darkest-vars.css
deleted file mode 100644
index 084a3fc8753..00000000000
--- a/tokens/dist/css/darkest-vars.css
+++ /dev/null
@@ -1,472 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--darkest{
- --spectrum-overlay-opacity:0.6;
- --spectrum-drop-shadow-color-rgb:0, 0, 0;
- --spectrum-drop-shadow-color-opacity:0.8;
- --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
- --spectrum-background-base-color:var(--spectrum-gray-50);
- --spectrum-background-layer-1-color:var(--spectrum-gray-75);
- --spectrum-background-layer-2-color:var(--spectrum-gray-100);
- --spectrum-neutral-background-color-default:var(--spectrum-gray-400);
- --spectrum-neutral-background-color-hover:var(--spectrum-gray-300);
- --spectrum-neutral-background-color-down:var(--spectrum-gray-200);
- --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300);
- --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400);
- --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300);
- --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200);
- --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300);
- --spectrum-accent-background-color-default:var(--spectrum-accent-color-600);
- --spectrum-accent-background-color-hover:var(--spectrum-accent-color-500);
- --spectrum-accent-background-color-down:var(--spectrum-accent-color-400);
- --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-500);
- --spectrum-informative-background-color-default:var(--spectrum-informative-color-600);
- --spectrum-informative-background-color-hover:var(--spectrum-informative-color-500);
- --spectrum-informative-background-color-down:var(--spectrum-informative-color-400);
- --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-500);
- --spectrum-negative-background-color-default:var(--spectrum-negative-color-600);
- --spectrum-negative-background-color-hover:var(--spectrum-negative-color-500);
- --spectrum-negative-background-color-down:var(--spectrum-negative-color-400);
- --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-500);
- --spectrum-positive-background-color-default:var(--spectrum-positive-color-600);
- --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500);
- --spectrum-positive-background-color-down:var(--spectrum-positive-color-400);
- --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500);
- --spectrum-notice-background-color-default:var(--spectrum-notice-color-800);
- --spectrum-gray-background-color-default:var(--spectrum-gray-700);
- --spectrum-red-background-color-default:var(--spectrum-red-700);
- --spectrum-orange-background-color-default:var(--spectrum-orange-800);
- --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000);
- --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900);
- --spectrum-celery-background-color-default:var(--spectrum-celery-800);
- --spectrum-green-background-color-default:var(--spectrum-green-700);
- --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700);
- --spectrum-cyan-background-color-default:var(--spectrum-cyan-700);
- --spectrum-blue-background-color-default:var(--spectrum-blue-700);
- --spectrum-indigo-background-color-default:var(--spectrum-indigo-700);
- --spectrum-purple-background-color-default:var(--spectrum-purple-700);
- --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700);
- --spectrum-magenta-background-color-default:var(--spectrum-magenta-700);
- --spectrum-neutral-visual-color:var(--spectrum-gray-600);
- --spectrum-accent-visual-color:var(--spectrum-accent-color-900);
- --spectrum-informative-visual-color:var(--spectrum-informative-color-900);
- --spectrum-negative-visual-color:var(--spectrum-negative-color-700);
- --spectrum-notice-visual-color:var(--spectrum-notice-color-900);
- --spectrum-positive-visual-color:var(--spectrum-positive-color-800);
- --spectrum-gray-visual-color:var(--spectrum-gray-600);
- --spectrum-red-visual-color:var(--spectrum-red-700);
- --spectrum-orange-visual-color:var(--spectrum-orange-900);
- --spectrum-yellow-visual-color:var(--spectrum-yellow-1100);
- --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900);
- --spectrum-celery-visual-color:var(--spectrum-celery-800);
- --spectrum-green-visual-color:var(--spectrum-green-800);
- --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800);
- --spectrum-cyan-visual-color:var(--spectrum-cyan-900);
- --spectrum-blue-visual-color:var(--spectrum-blue-900);
- --spectrum-indigo-visual-color:var(--spectrum-indigo-900);
- --spectrum-purple-visual-color:var(--spectrum-purple-900);
- --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900);
- --spectrum-magenta-visual-color:var(--spectrum-magenta-900);
- --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800);
- --spectrum-gray-50-rgb:0, 0, 0;
- --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb));
- --spectrum-gray-75-rgb:14, 14, 14;
- --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb));
- --spectrum-gray-100-rgb:29, 29, 29;
- --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb));
- --spectrum-gray-200-rgb:48, 48, 48;
- --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb));
- --spectrum-gray-300-rgb:75, 75, 75;
- --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb));
- --spectrum-gray-400-rgb:106, 106, 106;
- --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb));
- --spectrum-gray-500-rgb:141, 141, 141;
- --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb));
- --spectrum-gray-600-rgb:176, 176, 176;
- --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb));
- --spectrum-gray-700-rgb:208, 208, 208;
- --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb));
- --spectrum-gray-800-rgb:235, 235, 235;
- --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb));
- --spectrum-gray-900-rgb:255, 255, 255;
- --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb));
- --spectrum-blue-100-rgb:0, 38, 81;
- --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb));
- --spectrum-blue-200-rgb:0, 50, 106;
- --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb));
- --spectrum-blue-300-rgb:0, 64, 135;
- --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb));
- --spectrum-blue-400-rgb:0, 78, 166;
- --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb));
- --spectrum-blue-500-rgb:0, 92, 200;
- --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb));
- --spectrum-blue-600-rgb:6, 108, 231;
- --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb));
- --spectrum-blue-700-rgb:29, 128, 245;
- --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb));
- --spectrum-blue-800-rgb:64, 150, 243;
- --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb));
- --spectrum-blue-900-rgb:94, 170, 247;
- --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb));
- --spectrum-blue-1000-rgb:124, 189, 250;
- --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb));
- --spectrum-blue-1100-rgb:152, 206, 253;
- --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb));
- --spectrum-blue-1200-rgb:179, 222, 254;
- --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb));
- --spectrum-blue-1300-rgb:206, 234, 255;
- --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb));
- --spectrum-blue-1400-rgb:227, 243, 255;
- --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb));
- --spectrum-red-100-rgb:87, 0, 0;
- --spectrum-red-100:rgba(var(--spectrum-red-100-rgb));
- --spectrum-red-200-rgb:110, 0, 0;
- --spectrum-red-200:rgba(var(--spectrum-red-200-rgb));
- --spectrum-red-300-rgb:138, 0, 0;
- --spectrum-red-300:rgba(var(--spectrum-red-300-rgb));
- --spectrum-red-400-rgb:167, 0, 0;
- --spectrum-red-400:rgba(var(--spectrum-red-400-rgb));
- --spectrum-red-500-rgb:196, 7, 6;
- --spectrum-red-500:rgba(var(--spectrum-red-500-rgb));
- --spectrum-red-600-rgb:221, 33, 24;
- --spectrum-red-600:rgba(var(--spectrum-red-600-rgb));
- --spectrum-red-700-rgb:238, 67, 49;
- --spectrum-red-700:rgba(var(--spectrum-red-700-rgb));
- --spectrum-red-800-rgb:249, 99, 76;
- --spectrum-red-800:rgba(var(--spectrum-red-800-rgb));
- --spectrum-red-900-rgb:255, 129, 107;
- --spectrum-red-900:rgba(var(--spectrum-red-900-rgb));
- --spectrum-red-1000-rgb:255, 158, 140;
- --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb));
- --spectrum-red-1100-rgb:255, 183, 169;
- --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb));
- --spectrum-red-1200-rgb:255, 205, 195;
- --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb));
- --spectrum-red-1300-rgb:255, 223, 217;
- --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb));
- --spectrum-red-1400-rgb:255, 237, 234;
- --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb));
- --spectrum-orange-100-rgb:72, 24, 1;
- --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb));
- --spectrum-orange-200-rgb:92, 32, 0;
- --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb));
- --spectrum-orange-300-rgb:115, 43, 0;
- --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb));
- --spectrum-orange-400-rgb:138, 55, 0;
- --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb));
- --spectrum-orange-500-rgb:162, 68, 0;
- --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb));
- --spectrum-orange-600-rgb:186, 82, 0;
- --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb));
- --spectrum-orange-700-rgb:210, 98, 0;
- --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb));
- --spectrum-orange-800-rgb:232, 116, 0;
- --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb));
- --spectrum-orange-900-rgb:249, 137, 23;
- --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb));
- --spectrum-orange-1000-rgb:255, 162, 59;
- --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb));
- --spectrum-orange-1100-rgb:255, 188, 102;
- --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb));
- --spectrum-orange-1200-rgb:253, 210, 145;
- --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb));
- --spectrum-orange-1300-rgb:255, 226, 181;
- --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb));
- --spectrum-orange-1400-rgb:255, 239, 213;
- --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb));
- --spectrum-yellow-100-rgb:53, 36, 0;
- --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb));
- --spectrum-yellow-200-rgb:68, 47, 0;
- --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb));
- --spectrum-yellow-300-rgb:86, 62, 0;
- --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb));
- --spectrum-yellow-400-rgb:103, 77, 0;
- --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb));
- --spectrum-yellow-500-rgb:122, 92, 0;
- --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb));
- --spectrum-yellow-600-rgb:141, 108, 0;
- --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb));
- --spectrum-yellow-700-rgb:161, 126, 0;
- --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb));
- --spectrum-yellow-800-rgb:180, 144, 0;
- --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb));
- --spectrum-yellow-900-rgb:199, 162, 0;
- --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb));
- --spectrum-yellow-1000-rgb:216, 181, 0;
- --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb));
- --spectrum-yellow-1100-rgb:233, 199, 0;
- --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb));
- --spectrum-yellow-1200-rgb:247, 216, 4;
- --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb));
- --spectrum-yellow-1300-rgb:249, 233, 97;
- --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb));
- --spectrum-yellow-1400-rgb:252, 243, 170;
- --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb));
- --spectrum-chartreuse-100-rgb:32, 43, 0;
- --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb));
- --spectrum-chartreuse-200-rgb:42, 56, 0;
- --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb));
- --spectrum-chartreuse-300-rgb:54, 72, 0;
- --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb));
- --spectrum-chartreuse-400-rgb:66, 88, 0;
- --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb));
- --spectrum-chartreuse-500-rgb:79, 105, 0;
- --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb));
- --spectrum-chartreuse-600-rgb:93, 123, 0;
- --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb));
- --spectrum-chartreuse-700-rgb:107, 142, 0;
- --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb));
- --spectrum-chartreuse-800-rgb:122, 161, 0;
- --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb));
- --spectrum-chartreuse-900-rgb:138, 180, 3;
- --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb));
- --spectrum-chartreuse-1000-rgb:154, 198, 11;
- --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb));
- --spectrum-chartreuse-1100-rgb:170, 216, 22;
- --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb));
- --spectrum-chartreuse-1200-rgb:187, 232, 41;
- --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb));
- --spectrum-chartreuse-1300-rgb:205, 246, 72;
- --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb));
- --spectrum-chartreuse-1400-rgb:225, 253, 132;
- --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb));
- --spectrum-celery-100-rgb:0, 47, 7;
- --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb));
- --spectrum-celery-200-rgb:0, 61, 9;
- --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb));
- --spectrum-celery-300-rgb:0, 77, 12;
- --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb));
- --spectrum-celery-400-rgb:0, 95, 15;
- --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb));
- --spectrum-celery-500-rgb:0, 113, 15;
- --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb));
- --spectrum-celery-600-rgb:0, 132, 15;
- --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb));
- --spectrum-celery-700-rgb:0, 151, 20;
- --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb));
- --spectrum-celery-800-rgb:13, 171, 37;
- --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb));
- --spectrum-celery-900-rgb:45, 191, 58;
- --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb));
- --spectrum-celery-1000-rgb:80, 208, 82;
- --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb));
- --spectrum-celery-1100-rgb:115, 224, 107;
- --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb));
- --spectrum-celery-1200-rgb:147, 237, 131;
- --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb));
- --spectrum-celery-1300-rgb:180, 247, 162;
- --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb));
- --spectrum-celery-1400-rgb:213, 252, 202;
- --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb));
- --spectrum-green-100-rgb:10, 44, 28;
- --spectrum-green-100:rgba(var(--spectrum-green-100-rgb));
- --spectrum-green-200-rgb:7, 59, 36;
- --spectrum-green-200:rgba(var(--spectrum-green-200-rgb));
- --spectrum-green-300-rgb:0, 76, 46;
- --spectrum-green-300:rgba(var(--spectrum-green-300-rgb));
- --spectrum-green-400-rgb:0, 93, 57;
- --spectrum-green-400:rgba(var(--spectrum-green-400-rgb));
- --spectrum-green-500-rgb:0, 111, 69;
- --spectrum-green-500:rgba(var(--spectrum-green-500-rgb));
- --spectrum-green-600-rgb:0, 130, 82;
- --spectrum-green-600:rgba(var(--spectrum-green-600-rgb));
- --spectrum-green-700-rgb:0, 149, 98;
- --spectrum-green-700:rgba(var(--spectrum-green-700-rgb));
- --spectrum-green-800-rgb:28, 168, 114;
- --spectrum-green-800:rgba(var(--spectrum-green-800-rgb));
- --spectrum-green-900-rgb:52, 187, 132;
- --spectrum-green-900:rgba(var(--spectrum-green-900-rgb));
- --spectrum-green-1000-rgb:75, 205, 149;
- --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb));
- --spectrum-green-1100-rgb:103, 222, 168;
- --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb));
- --spectrum-green-1200-rgb:137, 236, 188;
- --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb));
- --spectrum-green-1300-rgb:177, 244, 209;
- --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb));
- --spectrum-green-1400-rgb:214, 249, 228;
- --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb));
- --spectrum-seafoam-100-rgb:18, 43, 42;
- --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb));
- --spectrum-seafoam-200-rgb:19, 57, 55;
- --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb));
- --spectrum-seafoam-300-rgb:16, 73, 70;
- --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb));
- --spectrum-seafoam-400-rgb:3, 91, 88;
- --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb));
- --spectrum-seafoam-500-rgb:0, 108, 104;
- --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb));
- --spectrum-seafoam-600-rgb:0, 127, 121;
- --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb));
- --spectrum-seafoam-700-rgb:0, 146, 140;
- --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb));
- --spectrum-seafoam-800-rgb:0, 165, 159;
- --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb));
- --spectrum-seafoam-900-rgb:26, 185, 178;
- --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb));
- --spectrum-seafoam-1000-rgb:66, 202, 195;
- --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb));
- --spectrum-seafoam-1100-rgb:102, 218, 211;
- --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb));
- --spectrum-seafoam-1200-rgb:139, 232, 225;
- --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb));
- --spectrum-seafoam-1300-rgb:179, 242, 237;
- --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb));
- --spectrum-seafoam-1400-rgb:215, 248, 244;
- --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb));
- --spectrum-cyan-100-rgb:0, 41, 68;
- --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb));
- --spectrum-cyan-200-rgb:0, 54, 88;
- --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb));
- --spectrum-cyan-300-rgb:0, 69, 108;
- --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb));
- --spectrum-cyan-400-rgb:0, 86, 128;
- --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb));
- --spectrum-cyan-500-rgb:0, 103, 147;
- --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb));
- --spectrum-cyan-600-rgb:0, 121, 167;
- --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb));
- --spectrum-cyan-700-rgb:0, 140, 186;
- --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb));
- --spectrum-cyan-800-rgb:4, 160, 205;
- --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb));
- --spectrum-cyan-900-rgb:23, 180, 221;
- --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb));
- --spectrum-cyan-1000-rgb:57, 199, 234;
- --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb));
- --spectrum-cyan-1100-rgb:96, 216, 243;
- --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb));
- --spectrum-cyan-1200-rgb:134, 230, 250;
- --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb));
- --spectrum-cyan-1300-rgb:170, 242, 255;
- --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb));
- --spectrum-cyan-1400-rgb:206, 249, 255;
- --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb));
- --spectrum-indigo-100-rgb:26, 29, 97;
- --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb));
- --spectrum-indigo-200-rgb:35, 39, 125;
- --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb));
- --spectrum-indigo-300-rgb:46, 50, 158;
- --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb));
- --spectrum-indigo-400-rgb:58, 63, 189;
- --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb));
- --spectrum-indigo-500-rgb:73, 78, 216;
- --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb));
- --spectrum-indigo-600-rgb:90, 96, 235;
- --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb));
- --spectrum-indigo-700-rgb:110, 115, 246;
- --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb));
- --spectrum-indigo-800-rgb:132, 136, 253;
- --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb));
- --spectrum-indigo-900-rgb:153, 157, 255;
- --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb));
- --spectrum-indigo-1000-rgb:174, 177, 255;
- --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb));
- --spectrum-indigo-1100-rgb:194, 196, 255;
- --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb));
- --spectrum-indigo-1200-rgb:212, 213, 255;
- --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb));
- --spectrum-indigo-1300-rgb:227, 228, 255;
- --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb));
- --spectrum-indigo-1400-rgb:240, 240, 255;
- --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb));
- --spectrum-purple-100-rgb:50, 16, 104;
- --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb));
- --spectrum-purple-200-rgb:67, 13, 140;
- --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb));
- --spectrum-purple-300-rgb:86, 16, 173;
- --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb));
- --spectrum-purple-400-rgb:106, 29, 200;
- --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb));
- --spectrum-purple-500-rgb:126, 49, 222;
- --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb));
- --spectrum-purple-600-rgb:145, 70, 236;
- --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb));
- --spectrum-purple-700-rgb:162, 94, 246;
- --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb));
- --spectrum-purple-800-rgb:178, 119, 250;
- --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb));
- --spectrum-purple-900-rgb:192, 143, 252;
- --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb));
- --spectrum-purple-1000-rgb:206, 166, 253;
- --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb));
- --spectrum-purple-1100-rgb:219, 188, 254;
- --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb));
- --spectrum-purple-1200-rgb:230, 207, 255;
- --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb));
- --spectrum-purple-1300-rgb:240, 224, 255;
- --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb));
- --spectrum-purple-1400-rgb:248, 237, 255;
- --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb));
- --spectrum-fuchsia-100-rgb:70, 14, 68;
- --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb));
- --spectrum-fuchsia-200-rgb:93, 9, 92;
- --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb));
- --spectrum-fuchsia-300-rgb:120, 0, 120;
- --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb));
- --spectrum-fuchsia-400-rgb:146, 0, 147;
- --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb));
- --spectrum-fuchsia-500-rgb:169, 19, 170;
- --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb));
- --spectrum-fuchsia-600-rgb:191, 43, 191;
- --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb));
- --spectrum-fuchsia-700-rgb:211, 65, 213;
- --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb));
- --spectrum-fuchsia-800-rgb:228, 91, 229;
- --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb));
- --spectrum-fuchsia-900-rgb:239, 120, 238;
- --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb));
- --spectrum-fuchsia-1000-rgb:246, 149, 243;
- --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb));
- --spectrum-fuchsia-1100-rgb:251, 175, 246;
- --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb));
- --spectrum-fuchsia-1200-rgb:254, 199, 248;
- --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb));
- --spectrum-fuchsia-1300-rgb:255, 220, 250;
- --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb));
- --spectrum-fuchsia-1400-rgb:255, 235, 252;
- --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb));
- --spectrum-magenta-100-rgb:83, 3, 41;
- --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb));
- --spectrum-magenta-200-rgb:106, 0, 52;
- --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb));
- --spectrum-magenta-300-rgb:133, 0, 65;
- --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb));
- --spectrum-magenta-400-rgb:161, 0, 78;
- --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb));
- --spectrum-magenta-500-rgb:186, 22, 93;
- --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb));
- --spectrum-magenta-600-rgb:209, 43, 114;
- --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb));
- --spectrum-magenta-700-rgb:227, 69, 137;
- --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb));
- --spectrum-magenta-800-rgb:241, 97, 156;
- --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb));
- --spectrum-magenta-900-rgb:252, 124, 173;
- --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb));
- --spectrum-magenta-1000-rgb:255, 152, 191;
- --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb));
- --spectrum-magenta-1100-rgb:255, 179, 207;
- --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb));
- --spectrum-magenta-1200-rgb:255, 202, 221;
- --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb));
- --spectrum-magenta-1300-rgb:255, 221, 233;
- --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb));
- --spectrum-magenta-1400-rgb:255, 236, 243;
- --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb));
- --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800);
- --spectrum-icon-color-green-primary-default:var(--spectrum-green-800);
- --spectrum-icon-color-red-primary-default:var(--spectrum-red-700);
- --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000);
-}
diff --git a/tokens/dist/css/express/dark-vars.css b/tokens/dist/css/express/dark-vars.css
deleted file mode 100644
index bc153b58cf7..00000000000
--- a/tokens/dist/css/express/dark-vars.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--dark{
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb);
- --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700);
-}
diff --git a/tokens/dist/css/express/darkest-vars.css b/tokens/dist/css/express/darkest-vars.css
deleted file mode 100644
index 51b3a61df06..00000000000
--- a/tokens/dist/css/express/darkest-vars.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--darkest{
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb);
- --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700);
-}
diff --git a/tokens/dist/css/express/global-vars.css b/tokens/dist/css/express/global-vars.css
deleted file mode 100644
index 3e21dad6395..00000000000
--- a/tokens/dist/css/express/global-vars.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express{
- --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800);
- --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900);
- --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900);
- --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900);
- --spectrum-slider-track-thickness:4px;
- --spectrum-slider-handle-gap:0px;
- --spectrum-picker-border-width:0;
- --spectrum-in-field-button-fill-stacked-inner-border-rounding:1px;
- --spectrum-in-field-button-edge-to-fill:4px;
- --spectrum-in-field-button-stacked-inner-edge-to-fill:1px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:5px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:7px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:8px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:1px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:1px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:3px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:4px;
- --spectrum-border-width-100:2px;
- --spectrum-accent-color-100:var(--spectrum-indigo-100);
- --spectrum-accent-color-200:var(--spectrum-indigo-200);
- --spectrum-accent-color-300:var(--spectrum-indigo-300);
- --spectrum-accent-color-400:var(--spectrum-indigo-400);
- --spectrum-accent-color-500:var(--spectrum-indigo-500);
- --spectrum-accent-color-600:var(--spectrum-indigo-600);
- --spectrum-accent-color-700:var(--spectrum-indigo-700);
- --spectrum-accent-color-800:var(--spectrum-indigo-800);
- --spectrum-accent-color-900:var(--spectrum-indigo-900);
- --spectrum-accent-color-1000:var(--spectrum-indigo-1000);
- --spectrum-accent-color-1100:var(--spectrum-indigo-1100);
- --spectrum-accent-color-1200:var(--spectrum-indigo-1200);
- --spectrum-accent-color-1300:var(--spectrum-indigo-1300);
- --spectrum-accent-color-1400:var(--spectrum-indigo-1400);
- --spectrum-heading-sans-serif-font-weight:var(--spectrum-black-font-weight);
- --spectrum-heading-serif-font-weight:var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-font-weight:var(--spectrum-black-font-weight);
- --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-black-font-weight);
- --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-black-font-weight);
- --system:express;
-}
diff --git a/tokens/dist/css/express/index.css b/tokens/dist/css/express/index.css
deleted file mode 100644
index 6ce93008ee5..00000000000
--- a/tokens/dist/css/express/index.css
+++ /dev/null
@@ -1,195 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--dark,.spectrum--express.spectrum--darkest{
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb);
- --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700);
-}
-
-.spectrum--express{
- --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800);
- --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900);
- --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900);
- --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900);
- --spectrum-slider-track-thickness:4px;
- --spectrum-slider-handle-gap:0px;
- --spectrum-picker-border-width:0;
- --spectrum-in-field-button-fill-stacked-inner-border-rounding:1px;
- --spectrum-in-field-button-edge-to-fill:4px;
- --spectrum-in-field-button-stacked-inner-edge-to-fill:1px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:5px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:7px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:8px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:1px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:1px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:3px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:4px;
- --spectrum-border-width-100:2px;
- --spectrum-accent-color-100:var(--spectrum-indigo-100);
- --spectrum-accent-color-200:var(--spectrum-indigo-200);
- --spectrum-accent-color-300:var(--spectrum-indigo-300);
- --spectrum-accent-color-400:var(--spectrum-indigo-400);
- --spectrum-accent-color-500:var(--spectrum-indigo-500);
- --spectrum-accent-color-600:var(--spectrum-indigo-600);
- --spectrum-accent-color-700:var(--spectrum-indigo-700);
- --spectrum-accent-color-800:var(--spectrum-indigo-800);
- --spectrum-accent-color-900:var(--spectrum-indigo-900);
- --spectrum-accent-color-1000:var(--spectrum-indigo-1000);
- --spectrum-accent-color-1100:var(--spectrum-indigo-1100);
- --spectrum-accent-color-1200:var(--spectrum-indigo-1200);
- --spectrum-accent-color-1300:var(--spectrum-indigo-1300);
- --spectrum-accent-color-1400:var(--spectrum-indigo-1400);
- --spectrum-heading-sans-serif-font-weight:var(--spectrum-black-font-weight);
- --spectrum-heading-serif-font-weight:var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-font-weight:var(--spectrum-black-font-weight);
- --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-black-font-weight);
- --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-black-font-weight);
- --system:express;
-}
-
-.spectrum--express.spectrum--large{
- --spectrum-checkbox-control-size-small:18px;
- --spectrum-checkbox-control-size-medium:20px;
- --spectrum-checkbox-control-size-large:22px;
- --spectrum-checkbox-control-size-extra-large:26px;
- --spectrum-checkbox-top-to-control-small:6px;
- --spectrum-checkbox-top-to-control-medium:10px;
- --spectrum-checkbox-top-to-control-large:14px;
- --spectrum-checkbox-top-to-control-extra-large:17px;
- --spectrum-switch-control-width-small:32px;
- --spectrum-switch-control-width-medium:36px;
- --spectrum-switch-control-width-large:41px;
- --spectrum-switch-control-width-extra-large:46px;
- --spectrum-switch-control-height-small:18px;
- --spectrum-switch-control-height-medium:20px;
- --spectrum-switch-control-height-large:22px;
- --spectrum-switch-control-height-extra-large:26px;
- --spectrum-switch-top-to-control-small:6px;
- --spectrum-switch-top-to-control-medium:10px;
- --spectrum-switch-top-to-control-large:14px;
- --spectrum-switch-top-to-control-extra-large:17px;
- --spectrum-radio-button-control-size-small:18px;
- --spectrum-radio-button-control-size-medium:20px;
- --spectrum-radio-button-control-size-large:22px;
- --spectrum-radio-button-control-size-extra-large:26px;
- --spectrum-radio-button-top-to-control-small:6px;
- --spectrum-radio-button-top-to-control-medium:10px;
- --spectrum-radio-button-top-to-control-large:14px;
- --spectrum-radio-button-top-to-control-extra-large:17px;
- --spectrum-slider-control-height-small:22px;
- --spectrum-slider-control-height-medium:24px;
- --spectrum-slider-control-height-large:28px;
- --spectrum-slider-control-height-extra-large:30px;
- --spectrum-slider-handle-size-small:22px;
- --spectrum-slider-handle-size-medium:24px;
- --spectrum-slider-handle-size-large:28px;
- --spectrum-slider-handle-size-extra-large:30px;
- --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200);
- --spectrum-slider-bottom-to-handle-small:4px;
- --spectrum-slider-bottom-to-handle-medium:8px;
- --spectrum-slider-bottom-to-handle-large:12px;
- --spectrum-slider-bottom-to-handle-extra-large:15px;
- --spectrum-corner-radius-75:4px;
- --spectrum-corner-radius-100:8px;
- --spectrum-corner-radius-200:16px;
- --spectrum-drop-shadow-x:0px;
- --spectrum-drop-shadow-y:4px;
- --spectrum-drop-shadow-blur:16px;
- --spectrum-colorwheel-path:"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
- --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-
- --spectrum-dialog-confirm-border-radius:8px;
-
- --spectrum-dial-border-radius:15px;
-
- --spectrum-assetcard-focus-ring-border-radius:12px;
-}
-
-.spectrum--express.spectrum--light,.spectrum--express.spectrum--lightest{
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-800-rgb);
- --spectrum-well-border-color:rgba(var(--spectrum-black-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-900);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-900);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-1000);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-900);
-}
-
-.spectrum--express.spectrum--medium{
- --spectrum-checkbox-control-size-small:14px;
- --spectrum-checkbox-control-size-medium:16px;
- --spectrum-checkbox-control-size-large:18px;
- --spectrum-checkbox-control-size-extra-large:20px;
- --spectrum-checkbox-top-to-control-small:5px;
- --spectrum-checkbox-top-to-control-medium:8px;
- --spectrum-checkbox-top-to-control-large:11px;
- --spectrum-checkbox-top-to-control-extra-large:14px;
- --spectrum-switch-control-width-small:25px;
- --spectrum-switch-control-width-medium:28px;
- --spectrum-switch-control-width-large:32px;
- --spectrum-switch-control-width-extra-large:35px;
- --spectrum-switch-control-height-small:14px;
- --spectrum-switch-control-height-medium:16px;
- --spectrum-switch-control-height-large:18px;
- --spectrum-switch-control-height-extra-large:20px;
- --spectrum-switch-top-to-control-small:5px;
- --spectrum-switch-top-to-control-medium:8px;
- --spectrum-switch-top-to-control-large:11px;
- --spectrum-switch-top-to-control-extra-large:14px;
- --spectrum-radio-button-control-size-small:14px;
- --spectrum-radio-button-control-size-medium:16px;
- --spectrum-radio-button-control-size-large:18px;
- --spectrum-radio-button-control-size-extra-large:20px;
- --spectrum-radio-button-top-to-control-small:5px;
- --spectrum-radio-button-top-to-control-medium:8px;
- --spectrum-radio-button-top-to-control-large:11px;
- --spectrum-radio-button-top-to-control-extra-large:14px;
- --spectrum-slider-control-height-small:18px;
- --spectrum-slider-control-height-medium:20px;
- --spectrum-slider-control-height-large:22px;
- --spectrum-slider-control-height-extra-large:24px;
- --spectrum-slider-handle-size-small:18px;
- --spectrum-slider-handle-size-medium:20px;
- --spectrum-slider-handle-size-large:22px;
- --spectrum-slider-handle-size-extra-large:24px;
- --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200);
- --spectrum-slider-bottom-to-handle-small:3px;
- --spectrum-slider-bottom-to-handle-medium:6px;
- --spectrum-slider-bottom-to-handle-large:9px;
- --spectrum-slider-bottom-to-handle-extra-large:12px;
- --spectrum-corner-radius-75:3px;
- --spectrum-corner-radius-100:6px;
- --spectrum-corner-radius-200:12px;
- --spectrum-drop-shadow-x:0px;
- --spectrum-drop-shadow-y:4px;
- --spectrum-drop-shadow-blur:16px;
- --spectrum-colorwheel-path:"M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
- --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-
- --spectrum-dialog-confirm-border-radius:6px;
-
- --spectrum-dial-border-radius:12px;
-
- --spectrum-assetcard-focus-ring-border-radius:10px;
-}
diff --git a/tokens/dist/css/express/large-vars.css b/tokens/dist/css/express/large-vars.css
deleted file mode 100644
index 308dae90052..00000000000
--- a/tokens/dist/css/express/large-vars.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--large{
- --spectrum-checkbox-control-size-small:18px;
- --spectrum-checkbox-control-size-medium:20px;
- --spectrum-checkbox-control-size-large:22px;
- --spectrum-checkbox-control-size-extra-large:26px;
- --spectrum-checkbox-top-to-control-small:6px;
- --spectrum-checkbox-top-to-control-medium:10px;
- --spectrum-checkbox-top-to-control-large:14px;
- --spectrum-checkbox-top-to-control-extra-large:17px;
- --spectrum-switch-control-width-small:32px;
- --spectrum-switch-control-width-medium:36px;
- --spectrum-switch-control-width-large:41px;
- --spectrum-switch-control-width-extra-large:46px;
- --spectrum-switch-control-height-small:18px;
- --spectrum-switch-control-height-medium:20px;
- --spectrum-switch-control-height-large:22px;
- --spectrum-switch-control-height-extra-large:26px;
- --spectrum-switch-top-to-control-small:6px;
- --spectrum-switch-top-to-control-medium:10px;
- --spectrum-switch-top-to-control-large:14px;
- --spectrum-switch-top-to-control-extra-large:17px;
- --spectrum-radio-button-control-size-small:18px;
- --spectrum-radio-button-control-size-medium:20px;
- --spectrum-radio-button-control-size-large:22px;
- --spectrum-radio-button-control-size-extra-large:26px;
- --spectrum-radio-button-top-to-control-small:6px;
- --spectrum-radio-button-top-to-control-medium:10px;
- --spectrum-radio-button-top-to-control-large:14px;
- --spectrum-radio-button-top-to-control-extra-large:17px;
- --spectrum-slider-control-height-small:22px;
- --spectrum-slider-control-height-medium:24px;
- --spectrum-slider-control-height-large:28px;
- --spectrum-slider-control-height-extra-large:30px;
- --spectrum-slider-handle-size-small:22px;
- --spectrum-slider-handle-size-medium:24px;
- --spectrum-slider-handle-size-large:28px;
- --spectrum-slider-handle-size-extra-large:30px;
- --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200);
- --spectrum-slider-bottom-to-handle-small:4px;
- --spectrum-slider-bottom-to-handle-medium:8px;
- --spectrum-slider-bottom-to-handle-large:12px;
- --spectrum-slider-bottom-to-handle-extra-large:15px;
- --spectrum-corner-radius-75:4px;
- --spectrum-corner-radius-100:8px;
- --spectrum-corner-radius-200:16px;
- --spectrum-drop-shadow-x:0px;
- --spectrum-drop-shadow-y:4px;
- --spectrum-drop-shadow-blur:16px;
- --spectrum-colorwheel-path:"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
- --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-
- --spectrum-dialog-confirm-border-radius:8px;
-
- --spectrum-dial-border-radius:15px;
-
- --spectrum-assetcard-focus-ring-border-radius:12px;
-}
diff --git a/tokens/dist/css/express/light-vars.css b/tokens/dist/css/express/light-vars.css
deleted file mode 100644
index a3463408cde..00000000000
--- a/tokens/dist/css/express/light-vars.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--light,.spectrum--express.spectrum--lightest{
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-800-rgb);
- --spectrum-well-border-color:rgba(var(--spectrum-black-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-900);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-900);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-1000);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-900);
-}
diff --git a/tokens/dist/css/express/medium-vars.css b/tokens/dist/css/express/medium-vars.css
deleted file mode 100644
index 519c280781b..00000000000
--- a/tokens/dist/css/express/medium-vars.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--express.spectrum--medium{
- --spectrum-checkbox-control-size-small:14px;
- --spectrum-checkbox-control-size-medium:16px;
- --spectrum-checkbox-control-size-large:18px;
- --spectrum-checkbox-control-size-extra-large:20px;
- --spectrum-checkbox-top-to-control-small:5px;
- --spectrum-checkbox-top-to-control-medium:8px;
- --spectrum-checkbox-top-to-control-large:11px;
- --spectrum-checkbox-top-to-control-extra-large:14px;
- --spectrum-switch-control-width-small:25px;
- --spectrum-switch-control-width-medium:28px;
- --spectrum-switch-control-width-large:32px;
- --spectrum-switch-control-width-extra-large:35px;
- --spectrum-switch-control-height-small:14px;
- --spectrum-switch-control-height-medium:16px;
- --spectrum-switch-control-height-large:18px;
- --spectrum-switch-control-height-extra-large:20px;
- --spectrum-switch-top-to-control-small:5px;
- --spectrum-switch-top-to-control-medium:8px;
- --spectrum-switch-top-to-control-large:11px;
- --spectrum-switch-top-to-control-extra-large:14px;
- --spectrum-radio-button-control-size-small:14px;
- --spectrum-radio-button-control-size-medium:16px;
- --spectrum-radio-button-control-size-large:18px;
- --spectrum-radio-button-control-size-extra-large:20px;
- --spectrum-radio-button-top-to-control-small:5px;
- --spectrum-radio-button-top-to-control-medium:8px;
- --spectrum-radio-button-top-to-control-large:11px;
- --spectrum-radio-button-top-to-control-extra-large:14px;
- --spectrum-slider-control-height-small:18px;
- --spectrum-slider-control-height-medium:20px;
- --spectrum-slider-control-height-large:22px;
- --spectrum-slider-control-height-extra-large:24px;
- --spectrum-slider-handle-size-small:18px;
- --spectrum-slider-handle-size-medium:20px;
- --spectrum-slider-handle-size-large:22px;
- --spectrum-slider-handle-size-extra-large:24px;
- --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200);
- --spectrum-slider-bottom-to-handle-small:3px;
- --spectrum-slider-bottom-to-handle-medium:6px;
- --spectrum-slider-bottom-to-handle-large:9px;
- --spectrum-slider-bottom-to-handle-extra-large:12px;
- --spectrum-corner-radius-75:3px;
- --spectrum-corner-radius-100:6px;
- --spectrum-corner-radius-200:12px;
- --spectrum-drop-shadow-x:0px;
- --spectrum-drop-shadow-y:4px;
- --spectrum-drop-shadow-blur:16px;
- --spectrum-colorwheel-path:"M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
- --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-
- --spectrum-dialog-confirm-border-radius:6px;
-
- --spectrum-dial-border-radius:12px;
-
- --spectrum-assetcard-focus-ring-border-radius:10px;
-}
diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css
index 5a2d087885e..299b7641fe1 100644
--- a/tokens/dist/css/global-vars.css
+++ b/tokens/dist/css/global-vars.css
@@ -16,12 +16,23 @@
--spectrum-static-white-focus-indicator-color:var(--spectrum-white);
--spectrum-static-black-focus-indicator-color:var(--spectrum-black);
--spectrum-overlay-color:var(--spectrum-black);
+ --spectrum-drop-shadow-color:var(--spectrum-drop-shadow-color-100);
--spectrum-opacity-disabled:0.3;
+ --spectrum-background-base-color:var(--spectrum-gray-25);
+ --spectrum-background-layer-1-color:var(--spectrum-gray-50);
+ --spectrum-neutral-background-color-default:var(--spectrum-gray-800);
+ --spectrum-neutral-background-color-hover:var(--spectrum-gray-900);
+ --spectrum-neutral-background-color-down:var(--spectrum-gray-900);
+ --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900);
+ --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800);
+ --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900);
+ --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900);
+ --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900);
--spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down);
--spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down);
- --spectrum-disabled-background-color:var(--spectrum-gray-200);
- --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-200);
- --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-200);
+ --spectrum-disabled-background-color:var(--spectrum-gray-100);
+ --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100);
+ --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100);
--spectrum-background-opacity-default:0;
--spectrum-background-opacity-hover:0.1;
--spectrum-background-opacity-down:0.1;
@@ -34,19 +45,19 @@
--spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900);
--spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700);
--spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800);
- --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-900);
+ --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-800);
--spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800);
--spectrum-accent-content-color-default:var(--spectrum-accent-color-900);
--spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000);
- --spectrum-accent-content-color-down:var(--spectrum-accent-color-1100);
+ --spectrum-accent-content-color-down:var(--spectrum-accent-color-1000);
--spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000);
--spectrum-negative-content-color-default:var(--spectrum-negative-color-900);
--spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000);
- --spectrum-negative-content-color-down:var(--spectrum-negative-color-1100);
+ --spectrum-negative-content-color-down:var(--spectrum-negative-color-1000);
--spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000);
--spectrum-disabled-content-color:var(--spectrum-gray-400);
- --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-500);
- --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-500);
+ --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-400);
+ --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-400);
--spectrum-disabled-border-color:var(--spectrum-gray-300);
--spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300);
--spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300);
@@ -56,6 +67,18 @@
--spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down);
--spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000);
--spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000);
+ --spectrum-title-color:var(--spectrum-gray-900);
+ --spectrum-drop-shadow-emphasized-default-color:var(--spectrum-drop-shadow-color-100);
+ --spectrum-drop-shadow-emphasized-hover-color:var(--spectrum-drop-shadow-color-200);
+ --spectrum-drop-shadow-elevated-color:var(--spectrum-drop-shadow-color-200);
+ --spectrum-drop-shadow-dragged-color:var(--spectrum-drop-shadow-color-300);
+ --spectrum-static-black-text-color:var(--spectrum-black);
+ --spectrum-static-white-text-color:var(--spectrum-white);
+ --spectrum-track-color:var(--spectrum-gray-300);
+ --spectrum-static-black-track-color:var(--spectrum-transparent-black-300);
+ --spectrum-static-white-track-color:var(--spectrum-transparent-white-300);
+ --spectrum-static-black-track-indicator-color:var(--spectrum-transparent-black-900);
+ --spectrum-static-white-track-indicator-color:var(--spectrum-transparent-white-900);
--spectrum-swatch-border-color:var(--spectrum-gray-900);
--spectrum-swatch-border-opacity:0.51;
--spectrum-swatch-disabled-icon-border-color:var(--spectrum-black);
@@ -94,62 +117,10 @@
--spectrum-table-row-down-opacity:0.1;
--spectrum-table-selected-row-background-opacity-hover:0.15;
--spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15;
- --spectrum-white-rgb:255, 255, 255;
- --spectrum-white:rgba(var(--spectrum-white-rgb));
- --spectrum-transparent-white-100-rgb:255, 255, 255;
- --spectrum-transparent-white-100-opacity:0;
- --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
- --spectrum-transparent-white-200-rgb:255, 255, 255;
- --spectrum-transparent-white-200-opacity:0.1;
- --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
- --spectrum-transparent-white-300-rgb:255, 255, 255;
- --spectrum-transparent-white-300-opacity:0.25;
- --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
- --spectrum-transparent-white-400-rgb:255, 255, 255;
- --spectrum-transparent-white-400-opacity:0.4;
- --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
- --spectrum-transparent-white-500-rgb:255, 255, 255;
- --spectrum-transparent-white-500-opacity:0.55;
- --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
- --spectrum-transparent-white-600-rgb:255, 255, 255;
- --spectrum-transparent-white-600-opacity:0.7;
- --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
- --spectrum-transparent-white-700-rgb:255, 255, 255;
- --spectrum-transparent-white-700-opacity:0.8;
- --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
- --spectrum-transparent-white-800-rgb:255, 255, 255;
- --spectrum-transparent-white-800-opacity:0.9;
- --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
- --spectrum-transparent-white-900-rgb:255, 255, 255;
- --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb));
--spectrum-black-rgb:0, 0, 0;
--spectrum-black:rgba(var(--spectrum-black-rgb));
- --spectrum-transparent-black-100-rgb:0, 0, 0;
- --spectrum-transparent-black-100-opacity:0;
- --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
- --spectrum-transparent-black-200-rgb:0, 0, 0;
- --spectrum-transparent-black-200-opacity:0.1;
- --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
- --spectrum-transparent-black-300-rgb:0, 0, 0;
- --spectrum-transparent-black-300-opacity:0.25;
- --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
- --spectrum-transparent-black-400-rgb:0, 0, 0;
- --spectrum-transparent-black-400-opacity:0.4;
- --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
- --spectrum-transparent-black-500-rgb:0, 0, 0;
- --spectrum-transparent-black-500-opacity:0.55;
- --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
- --spectrum-transparent-black-600-rgb:0, 0, 0;
- --spectrum-transparent-black-600-opacity:0.7;
- --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
- --spectrum-transparent-black-700-rgb:0, 0, 0;
- --spectrum-transparent-black-700-opacity:0.8;
- --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
- --spectrum-transparent-black-800-rgb:0, 0, 0;
- --spectrum-transparent-black-800-opacity:0.9;
- --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
- --spectrum-transparent-black-900-rgb:0, 0, 0;
- --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb));
+ --spectrum-transparent-black-1000-rgb:0, 0, 0;
+ --spectrum-transparent-black-1000:rgba(var(--spectrum-transparent-black-1000-rgb));
--spectrum-icon-color-inverse:var(--spectrum-gray-50);
--spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default);
--spectrum-asterisk-icon-size-75:8px;
@@ -179,7 +150,10 @@
--spectrum-popover-tip-height:8px;
--spectrum-menu-item-label-to-description:1px;
--spectrum-menu-item-section-divider-height:8px;
+ --spectrum-slider-track-thickness:2px;
+ --spectrum-slider-handle-gap:4px;
--spectrum-picker-minimum-width-multiplier:2;
+ --spectrum-picker-border-width:var(--spectrum-border-width-100);
--spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet);
--spectrum-picker-end-edge-to-disclosure-icon-quiet:0px;
--spectrum-text-field-minimum-width-multiplier:1.5;
@@ -199,10 +173,10 @@
--spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text);
--spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text);
--spectrum-color-area-border-width:var(--spectrum-border-width-100);
- --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-100);
+ --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-medium-size-small);
--spectrum-color-wheel-color-area-margin:12px;
--spectrum-color-slider-border-width:1px;
- --spectrum-color-slider-border-rounding:4px;
+ --spectrum-color-slider-border-rounding:var(--spectrum-corner-radius-medium-size-small);
--spectrum-floating-action-button-drop-shadow-blur:12px;
--spectrum-floating-action-button-drop-shadow-y:4px;
--spectrum-illustrated-message-maximum-width:380px;
@@ -263,11 +237,48 @@
--spectrum-in-field-button-width-stacked-medium:28px;
--spectrum-in-field-button-width-stacked-large:36px;
--spectrum-in-field-button-width-stacked-extra-large:44px;
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px;
+ --spectrum-in-field-button-edge-to-fill:0px;
+ --spectrum-in-field-button-stacked-inner-edge-to-fill:0px;
--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px;
--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px;
--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px;
--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px;
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px;
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px;
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px;
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px;
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
+ --spectrum-corner-radius-0:0px;
+ --spectrum-corner-radius-75:4px;
+ --spectrum-corner-radius-100:8px;
+ --spectrum-corner-radius-200:10px;
+ --spectrum-corner-radius-300:6px;
+ --spectrum-corner-radius-400:7px;
+ --spectrum-corner-radius-500:8px;
+ --spectrum-corner-radius-600:9px;
+ --spectrum-corner-radius-700:10px;
+ --spectrum-corner-radius-800:16px;
+ --spectrum-corner-radius-1000:0.5;
+ --spectrum-corner-radius-none:var(--spectrum-corner-radius-0);
+ --spectrum-corner-radius-small-default:var(--spectrum-corner-radius-100);
+ --spectrum-corner-radius-medium-default:var(--spectrum-corner-radius-500);
+ --spectrum-corner-radius-large-default:var(--spectrum-corner-radius-700);
+ --spectrum-corner-radius-extra-large-default:var(--spectrum-corner-radius-800);
+ --spectrum-corner-radius-full:var(--spectrum-corner-radius-1000);
+ --spectrum-corner-radius-small-size-small:var(--spectrum-corner-radius-75);
+ --spectrum-corner-radius-small-size-medium:var(--spectrum-corner-radius-100);
+ --spectrum-corner-radius-small-size-large:var(--spectrum-corner-radius-200);
+ --spectrum-corner-radius-small-size-extra-large:var(--spectrum-corner-radius-300);
+ --spectrum-corner-radius-medium-size-extra-small:var(--spectrum-corner-radius-300);
+ --spectrum-corner-radius-medium-size-small:var(--spectrum-corner-radius-400);
+ --spectrum-corner-radius-medium-size-medium:var(--spectrum-corner-radius-500);
+ --spectrum-corner-radius-medium-size-large:var(--spectrum-corner-radius-600);
+ --spectrum-corner-radius-medium-size-extra-large:var(--spectrum-corner-radius-700);
+ --spectrum-drop-shadow-x:0px;
--spectrum-android-elevation:2dp;
--spectrum-spacing-50:2px;
--spectrum-spacing-75:4px;
@@ -283,6 +294,7 @@
--spectrum-spacing-1000:96px;
--spectrum-focus-indicator-thickness:2px;
--spectrum-focus-indicator-gap:2px;
+ --spectrum-border-width-100:1px;
--spectrum-border-width-200:2px;
--spectrum-border-width-400:4px;
--spectrum-field-edge-to-text-quiet:0px;
@@ -292,6 +304,22 @@
--spectrum-field-edge-to-validation-icon-quiet:0px;
--spectrum-text-underline-thickness:1px;
--spectrum-text-underline-gap:1px;
+ --spectrum-accent-color-100:var(--spectrum-blue-100);
+ --spectrum-accent-color-200:var(--spectrum-blue-200);
+ --spectrum-accent-color-300:var(--spectrum-blue-300);
+ --spectrum-accent-color-400:var(--spectrum-blue-400);
+ --spectrum-accent-color-500:var(--spectrum-blue-500);
+ --spectrum-accent-color-600:var(--spectrum-blue-600);
+ --spectrum-accent-color-700:var(--spectrum-blue-700);
+ --spectrum-accent-color-800:var(--spectrum-blue-800);
+ --spectrum-accent-color-900:var(--spectrum-blue-900);
+ --spectrum-accent-color-1000:var(--spectrum-blue-1000);
+ --spectrum-accent-color-1100:var(--spectrum-blue-1100);
+ --spectrum-accent-color-1200:var(--spectrum-blue-1200);
+ --spectrum-accent-color-1300:var(--spectrum-blue-1300);
+ --spectrum-accent-color-1400:var(--spectrum-blue-1400);
+ --spectrum-accent-color-1500:var(--spectrum-blue-1500);
+ --spectrum-accent-color-1600:var(--spectrum-blue-1600);
--spectrum-informative-color-100:var(--spectrum-blue-100);
--spectrum-informative-color-200:var(--spectrum-blue-200);
--spectrum-informative-color-300:var(--spectrum-blue-300);
@@ -306,6 +334,8 @@
--spectrum-informative-color-1200:var(--spectrum-blue-1200);
--spectrum-informative-color-1300:var(--spectrum-blue-1300);
--spectrum-informative-color-1400:var(--spectrum-blue-1400);
+ --spectrum-informative-color-1500:var(--spectrum-blue-1500);
+ --spectrum-informative-color-1600:var(--spectrum-blue-1600);
--spectrum-negative-color-100:var(--spectrum-red-100);
--spectrum-negative-color-200:var(--spectrum-red-200);
--spectrum-negative-color-300:var(--spectrum-red-300);
@@ -320,6 +350,8 @@
--spectrum-negative-color-1200:var(--spectrum-red-1200);
--spectrum-negative-color-1300:var(--spectrum-red-1300);
--spectrum-negative-color-1400:var(--spectrum-red-1400);
+ --spectrum-negative-color-1500:var(--spectrum-red-1500);
+ --spectrum-negative-color-1600:var(--spectrum-red-1600);
--spectrum-notice-color-100:var(--spectrum-orange-100);
--spectrum-notice-color-200:var(--spectrum-orange-200);
--spectrum-notice-color-300:var(--spectrum-orange-300);
@@ -334,6 +366,8 @@
--spectrum-notice-color-1200:var(--spectrum-orange-1200);
--spectrum-notice-color-1300:var(--spectrum-orange-1300);
--spectrum-notice-color-1400:var(--spectrum-orange-1400);
+ --spectrum-notice-color-1500:var(--spectrum-orange-1500);
+ --spectrum-notice-color-1600:var(--spectrum-orange-1600);
--spectrum-positive-color-100:var(--spectrum-green-100);
--spectrum-positive-color-200:var(--spectrum-green-200);
--spectrum-positive-color-300:var(--spectrum-green-300);
@@ -348,6 +382,11 @@
--spectrum-positive-color-1200:var(--spectrum-green-1200);
--spectrum-positive-color-1300:var(--spectrum-green-1300);
--spectrum-positive-color-1400:var(--spectrum-green-1400);
+ --spectrum-positive-color-1500:var(--spectrum-green-1500);
+ --spectrum-positive-color-1600:var(--spectrum-green-1600);
+ --spectrum-negative-subdued-background-color-hover:var(--spectrum-negative-color-300);
+ --spectrum-negative-subdued-background-color-down:var(--spectrum-negative-color-300);
+ --spectrum-negative-subdued-background-color-key-focus:var(--spectrum-negative-color-300);
--spectrum-default-font-family:var(--spectrum-sans-serif-font-family);
--spectrum-sans-serif-font-family:Adobe Clean;
--spectrum-serif-font-family:Adobe Clean Serif;
@@ -374,8 +413,11 @@
--spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style);
--spectrum-heading-cjk-light-font-weight:var(--spectrum-light-font-weight);
--spectrum-heading-cjk-light-font-style:var(--spectrum-default-font-style);
+ --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight);
--spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style);
+ --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight);
--spectrum-heading-serif-font-style:var(--spectrum-default-font-style);
+ --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight);
--spectrum-heading-cjk-font-style:var(--spectrum-default-font-style);
--spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight);
--spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style);
@@ -407,7 +449,9 @@
--spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style);
--spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight);
--spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style);
+ --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
--spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style);
+ --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
--spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style);
--spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight);
--spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style);
@@ -583,4 +627,48 @@
--spectrum-code-line-height:var(--spectrum-line-height-200);
--spectrum-code-cjk-line-height:var(--spectrum-cjk-line-height-200);
--spectrum-code-color:var(--spectrum-gray-800);
+ --system:spectrum;
+
+ --spectrum-animation-duration-0:0ms;
+ --spectrum-animation-duration-100:130ms;
+ --spectrum-animation-duration-200:160ms;
+ --spectrum-animation-duration-300:190ms;
+ --spectrum-animation-duration-400:220ms;
+ --spectrum-animation-duration-500:250ms;
+ --spectrum-animation-duration-600:300ms;
+ --spectrum-animation-duration-700:350ms;
+ --spectrum-animation-duration-800:400ms;
+ --spectrum-animation-duration-900:450ms;
+ --spectrum-animation-duration-1000:500ms;
+ --spectrum-animation-duration-2000:1000ms;
+ --spectrum-animation-duration-4000:2000ms;
+ --spectrum-animation-duration-6000:3000ms;
+
+ --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1);
+
+ --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1);
+ --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1);
+ --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1);
+ --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1);
+ --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+ --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack);
+
+ --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
+ --spectrum-serif-font:var(--spectrum-serif-font-family-stack);
+
+ --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace;
+
+ --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+ --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+
+ --spectrum-font-family:var(--spectrum-sans-font-family-stack);
+ --spectrum-font-style:var(--spectrum-default-font-style);
+ --spectrum-font-size:var(--spectrum-font-size-100);
+
+ --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
+ --spectrum-cjk-font:var(--spectrum-code-font-family-stack);
+ --spectrum-docs-static-white-background-color-rgb:15, 121, 125;
+ --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb));
+ --spectrum-docs-static-black-background-color-rgb:181, 209, 211;
+ --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb));
}
diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css
index 232dcfb2877..e9c815743fe 100644
--- a/tokens/dist/css/large-vars.css
+++ b/tokens/dist/css/large-vars.css
@@ -12,11 +12,11 @@
*/
.spectrum--large{
- --spectrum-workflow-icon-size-50:18px;
- --spectrum-workflow-icon-size-75:20px;
- --spectrum-workflow-icon-size-100:22px;
- --spectrum-workflow-icon-size-200:24px;
- --spectrum-workflow-icon-size-300:28px;
+ --spectrum-workflow-icon-size-50:16px;
+ --spectrum-workflow-icon-size-75:18px;
+ --spectrum-workflow-icon-size-100:24px;
+ --spectrum-workflow-icon-size-200:28px;
+ --spectrum-workflow-icon-size-300:30px;
--spectrum-arrow-icon-size-75:12px;
--spectrum-arrow-icon-size-100:14px;
--spectrum-arrow-icon-size-200:16px;
@@ -62,6 +62,34 @@
--spectrum-dash-icon-size-400:18px;
--spectrum-dash-icon-size-500:20px;
--spectrum-dash-icon-size-600:22px;
+ --spectrum-checkbox-control-size-small:16px;
+ --spectrum-checkbox-control-size-medium:18px;
+ --spectrum-checkbox-control-size-large:20px;
+ --spectrum-checkbox-control-size-extra-large:22px;
+ --spectrum-checkbox-top-to-control-small:7px;
+ --spectrum-checkbox-top-to-control-medium:11px;
+ --spectrum-checkbox-top-to-control-large:15px;
+ --spectrum-checkbox-top-to-control-extra-large:19px;
+ --spectrum-switch-control-width-small:32px;
+ --spectrum-switch-control-width-medium:36px;
+ --spectrum-switch-control-width-large:41px;
+ --spectrum-switch-control-width-extra-large:46px;
+ --spectrum-switch-control-height-small:16px;
+ --spectrum-switch-control-height-medium:18px;
+ --spectrum-switch-control-height-large:20px;
+ --spectrum-switch-control-height-extra-large:22px;
+ --spectrum-switch-top-to-control-small:7px;
+ --spectrum-switch-top-to-control-medium:11px;
+ --spectrum-switch-top-to-control-large:15px;
+ --spectrum-switch-top-to-control-extra-large:19px;
+ --spectrum-radio-button-control-size-small:16px;
+ --spectrum-radio-button-control-size-medium:18px;
+ --spectrum-radio-button-control-size-large:20px;
+ --spectrum-radio-button-control-size-extra-large:22px;
+ --spectrum-radio-button-top-to-control-small:7px;
+ --spectrum-radio-button-top-to-control-medium:11px;
+ --spectrum-radio-button-top-to-control-large:15px;
+ --spectrum-radio-button-top-to-control-extra-large:19px;
--spectrum-field-label-text-to-asterisk-small:5px;
--spectrum-field-label-text-to-asterisk-medium:5px;
--spectrum-field-label-text-to-asterisk-large:6px;
@@ -137,6 +165,22 @@
--spectrum-menu-item-top-to-selected-icon-medium:13px;
--spectrum-menu-item-top-to-selected-icon-large:17px;
--spectrum-menu-item-top-to-selected-icon-extra-large:22px;
+ --spectrum-slider-control-height-small:18px;
+ --spectrum-slider-control-height-medium:20px;
+ --spectrum-slider-control-height-large:22px;
+ --spectrum-slider-control-height-extra-large:26px;
+ --spectrum-slider-handle-size-small:18px;
+ --spectrum-slider-handle-size-medium:20px;
+ --spectrum-slider-handle-size-large:22px;
+ --spectrum-slider-handle-size-extra-large:26px;
+ --spectrum-slider-handle-border-width-down-small:7px;
+ --spectrum-slider-handle-border-width-down-medium:8px;
+ --spectrum-slider-handle-border-width-down-large:9px;
+ --spectrum-slider-handle-border-width-down-extra-large:11px;
+ --spectrum-slider-bottom-to-handle-small:6px;
+ --spectrum-slider-bottom-to-handle-medium:10px;
+ --spectrum-slider-bottom-to-handle-large:14px;
+ --spectrum-slider-bottom-to-handle-extra-large:17px;
--spectrum-slider-control-to-field-label-small:6px;
--spectrum-slider-control-to-field-label-medium:10px;
--spectrum-slider-control-to-field-label-large:14px;
@@ -365,11 +409,14 @@
--spectrum-side-navigation-bottom-to-text:10px;
--spectrum-tray-top-to-content-area:5px;
--spectrum-accordion-top-to-text-spacious-small:12px;
- --spectrum-text-to-visual-50:8px;
- --spectrum-text-to-visual-75:9px;
- --spectrum-text-to-visual-100:10px;
- --spectrum-text-to-visual-200:11px;
- --spectrum-text-to-visual-300:13px;
+ --spectrum-drop-shadow-y:2px;
+ --spectrum-drop-shadow-blur:6px;
+ --spectrum-text-to-visual-50:7px;
+ --spectrum-text-to-visual-75:7px;
+ --spectrum-text-to-visual-100:8px;
+ --spectrum-text-to-visual-200:9px;
+ --spectrum-text-to-visual-300:10px;
+ --spectrum-text-to-visual-400:11px;
--spectrum-text-to-control-75:11px;
--spectrum-text-to-control-100:13px;
--spectrum-text-to-control-200:14px;
@@ -381,38 +428,38 @@
--spectrum-component-height-300:60px;
--spectrum-component-height-400:70px;
--spectrum-component-height-500:80px;
- --spectrum-component-pill-edge-to-visual-75:13px;
+ --spectrum-component-pill-edge-to-visual-75:15px;
--spectrum-component-pill-edge-to-visual-100:17px;
- --spectrum-component-pill-edge-to-visual-200:22px;
- --spectrum-component-pill-edge-to-visual-300:27px;
- --spectrum-component-pill-edge-to-visual-only-75:5px;
- --spectrum-component-pill-edge-to-visual-only-100:9px;
- --spectrum-component-pill-edge-to-visual-only-200:13px;
- --spectrum-component-pill-edge-to-visual-only-300:16px;
- --spectrum-component-pill-edge-to-text-75:15px;
+ --spectrum-component-pill-edge-to-visual-200:21px;
+ --spectrum-component-pill-edge-to-visual-300:28px;
+ --spectrum-component-pill-edge-to-visual-only-75:6px;
+ --spectrum-component-pill-edge-to-visual-only-100:8px;
+ --spectrum-component-pill-edge-to-visual-only-200:11px;
+ --spectrum-component-pill-edge-to-visual-only-300:15px;
+ --spectrum-component-pill-edge-to-text-75:17px;
--spectrum-component-pill-edge-to-text-100:20px;
- --spectrum-component-pill-edge-to-text-200:25px;
+ --spectrum-component-pill-edge-to-text-200:24px;
--spectrum-component-pill-edge-to-text-300:30px;
- --spectrum-component-edge-to-visual-50:7px;
- --spectrum-component-edge-to-visual-75:9px;
+ --spectrum-component-edge-to-visual-50:9px;
+ --spectrum-component-edge-to-visual-75:11px;
--spectrum-component-edge-to-visual-100:12px;
- --spectrum-component-edge-to-visual-200:16px;
- --spectrum-component-edge-to-visual-300:19px;
- --spectrum-component-edge-to-visual-only-50:4px;
- --spectrum-component-edge-to-visual-only-75:5px;
- --spectrum-component-edge-to-visual-only-100:9px;
- --spectrum-component-edge-to-visual-only-200:13px;
- --spectrum-component-edge-to-visual-only-300:16px;
- --spectrum-component-edge-to-text-50:10px;
- --spectrum-component-edge-to-text-75:11px;
+ --spectrum-component-edge-to-visual-200:15px;
+ --spectrum-component-edge-to-visual-300:20px;
+ --spectrum-component-edge-to-visual-only-50:5px;
+ --spectrum-component-edge-to-visual-only-75:6px;
+ --spectrum-component-edge-to-visual-only-100:8px;
+ --spectrum-component-edge-to-visual-only-200:11px;
+ --spectrum-component-edge-to-visual-only-300:15px;
+ --spectrum-component-edge-to-text-50:11px;
+ --spectrum-component-edge-to-text-75:13px;
--spectrum-component-edge-to-text-100:15px;
- --spectrum-component-edge-to-text-200:19px;
+ --spectrum-component-edge-to-text-200:18px;
--spectrum-component-edge-to-text-300:22px;
- --spectrum-component-top-to-workflow-icon-50:4px;
- --spectrum-component-top-to-workflow-icon-75:5px;
- --spectrum-component-top-to-workflow-icon-100:9px;
- --spectrum-component-top-to-workflow-icon-200:13px;
- --spectrum-component-top-to-workflow-icon-300:16px;
+ --spectrum-component-top-to-workflow-icon-50:5px;
+ --spectrum-component-top-to-workflow-icon-75:6px;
+ --spectrum-component-top-to-workflow-icon-100:8px;
+ --spectrum-component-top-to-workflow-icon-200:11px;
+ --spectrum-component-top-to-workflow-icon-300:15px;
--spectrum-component-top-to-text-50:4px;
--spectrum-component-top-to-text-75:5px;
--spectrum-component-top-to-text-100:8px;
@@ -501,4 +548,113 @@
--spectrum-font-size-1100:55px;
--spectrum-font-size-1200:62px;
--spectrum-font-size-1300:70px;
+ --scale:large;
+
+ --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200);
+ --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200);
+ --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200);
+ --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200);
+
+ --spectrum-alert-dialog-padding:var(--spectrum-spacing-400);
+ --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600);
+
+ --spectrum-assetcard-focus-ring-border-radius:9px;
+ --spectrum-assetcard-selectionindicator-margin:15px;
+ --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);
+ --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);
+ --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);
+
+ --spectrum-button-top-to-text-small:6px;
+ --spectrum-button-bottom-to-text-small:5px;
+ --spectrum-button-top-to-text-medium:9px;
+ --spectrum-button-bottom-to-text-medium:10px;
+ --spectrum-button-top-to-text-large:12px;
+ --spectrum-button-bottom-to-text-large:13px;
+ --spectrum-button-top-to-text-extra-large:16px;
+ --spectrum-button-bottom-to-text-extra-large:17px;
+
+ --spectrum-coach-indicator-gap:8px;
+ --spectrum-coach-indicator-ring-diameter:20px;
+ --spectrum-coach-indicator-quiet-ring-diameter:10px;
+
+ --spectrum-coachmark-buttongroup-display:none;
+ --spectrum-coachmark-buttongroup-mobile-display:flex;
+ --spectrum-coachmark-menu-display:none;
+ --spectrum-coachmark-menu-mobile-display:inline-flex;
+
+
+ --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
+ --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
+ --spectrum-colorwheel-colorarea-container-size:182px;
+
+ --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary);
+
+ --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200);
+
+ --spectrum-datepicker-initial-width:160px;
+ --spectrum-datepicker-generic-padding:15px;
+ --spectrum-datepicker-dash-line-height:30px;
+ --spectrum-datepicker-width-quiet-first:90px;
+ --spectrum-datepicker-width-quiet-second:20px;
+ --spectrum-datepicker-datetime-width-first:45px;
+ --spectrum-datepicker-invalid-icon-to-button:10px;
+ --spectrum-datepicker-invalid-icon-to-button-quiet:9px;
+ --spectrum-datepicker-input-datetime-width:30px;
+
+ --spectrum-dial-border-radius:20px;
+ --spectrum-dial-handle-position:10px;
+ --spectrum-dial-handle-block-margin:20px;
+ --spectrum-dial-handle-inline-margin:20px;
+ --spectrum-dial-controls-margin:10px;
+ --spectrum-dial-label-gap-y:6px;
+ --spectrum-dial-label-container-top-to-text:5px;
+
+ --spectrum-dialog-confirm-entry-animation-distance:25px;
+ --spectrum-dialog-confirm-hero-height:160px;
+ --spectrum-dialog-confirm-border-radius:5px;
+ --spectrum-dialog-confirm-title-text-size:19px;
+ --spectrum-dialog-confirm-description-text-size:15px;
+ --spectrum-dialog-confirm-padding-grid:24px;
+
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px;
+
+ --spectrum-menu-item-checkmark-height-small:12px;
+ --spectrum-menu-item-checkmark-height-medium:14px;
+ --spectrum-menu-item-checkmark-height-large:16px;
+ --spectrum-menu-item-checkmark-height-extra-large:16px;
+
+ --spectrum-menu-item-checkmark-width-small:12px;
+ --spectrum-menu-item-checkmark-width-medium:14px;
+ --spectrum-menu-item-checkmark-width-large:16px;
+ --spectrum-menu-item-checkmark-width-extra-large:16px;
+
+ --spectrum-pagination-textfield-width:60px;
+ --spectrum-pagination-item-inline-spacing:6px;
+
+ --spectrum-rating-icon-spacing:var(--spectrum-spacing-100);
+
+ --spectrum-slider-tick-mark-height:13px;
+ --spectrum-slider-ramp-track-height:20px;
+
+ --spectrum-treeview-item-indentation-medium:20px;
+ --spectrum-treeview-item-indentation-small:15px;
+ --spectrum-treeview-item-indentation-large:25px;
+ --spectrum-treeview-item-indentation-extra-large:30px;
+ --spectrum-treeview-indicator-inset-block-start:6px;
+ --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px;
+
+ --spectrum-tooltip-animation-distance:5px;
+
+ --spectrum-ui-icon-medium-display:none;
+ --spectrum-ui-icon-large-display:block;
+
+ --spectrum-well-border-radius:5px;
+ --spectrum-well-margin-top:5px;
+ --spectrum-well-min-width:300px;
+ --spectrum-well-padding:20px;
+ --spectrum-workflow-icon-size-xxl:40px;
+ --spectrum-workflow-icon-size-xxs:15px;
}
diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css
index 5411d477c5f..d6c5deb5ba2 100644
--- a/tokens/dist/css/light-vars.css
+++ b/tokens/dist/css/light-vars.css
@@ -11,37 +11,28 @@
* governing permissions and limitations under the License.
*/
-.spectrum--light,.spectrum--lightest{
+.spectrum--light{
--spectrum-overlay-opacity:0.4;
- --spectrum-drop-shadow-color-rgb:0, 0, 0;
- --spectrum-drop-shadow-color-opacity:0.15;
- --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
- --spectrum-background-base-color:var(--spectrum-gray-200);
- --spectrum-background-layer-1-color:var(--spectrum-gray-100);
- --spectrum-background-layer-2-color:var(--spectrum-gray-50);
- --spectrum-neutral-background-color-default:var(--spectrum-gray-800);
- --spectrum-neutral-background-color-hover:var(--spectrum-gray-900);
- --spectrum-neutral-background-color-down:var(--spectrum-gray-900);
- --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900);
- --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-600);
- --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-700);
+ --spectrum-background-layer-2-color:var(--spectrum-gray-25);
+ --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700);
+ --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800);
--spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800);
- --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-700);
+ --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-800);
--spectrum-accent-background-color-default:var(--spectrum-accent-color-900);
--spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000);
- --spectrum-accent-background-color-down:var(--spectrum-accent-color-1100);
+ --spectrum-accent-background-color-down:var(--spectrum-accent-color-1000);
--spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000);
--spectrum-informative-background-color-default:var(--spectrum-informative-color-900);
--spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000);
- --spectrum-informative-background-color-down:var(--spectrum-informative-color-1100);
+ --spectrum-informative-background-color-down:var(--spectrum-informative-color-1000);
--spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000);
--spectrum-negative-background-color-default:var(--spectrum-negative-color-900);
--spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000);
- --spectrum-negative-background-color-down:var(--spectrum-negative-color-1100);
+ --spectrum-negative-background-color-down:var(--spectrum-negative-color-1000);
--spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000);
--spectrum-positive-background-color-default:var(--spectrum-positive-color-900);
--spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000);
- --spectrum-positive-background-color-down:var(--spectrum-positive-color-1100);
+ --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000);
--spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000);
--spectrum-notice-background-color-default:var(--spectrum-notice-color-600);
--spectrum-gray-background-color-default:var(--spectrum-gray-700);
@@ -62,8 +53,8 @@
--spectrum-accent-visual-color:var(--spectrum-accent-color-800);
--spectrum-informative-visual-color:var(--spectrum-informative-color-800);
--spectrum-negative-visual-color:var(--spectrum-negative-color-800);
- --spectrum-notice-visual-color:var(--spectrum-notice-color-700);
- --spectrum-positive-visual-color:var(--spectrum-positive-color-700);
+ --spectrum-notice-visual-color:var(--spectrum-notice-color-800);
+ --spectrum-positive-visual-color:var(--spectrum-positive-color-800);
--spectrum-gray-visual-color:var(--spectrum-gray-500);
--spectrum-red-visual-color:var(--spectrum-red-800);
--spectrum-orange-visual-color:var(--spectrum-orange-700);
@@ -78,395 +69,788 @@
--spectrum-purple-visual-color:var(--spectrum-purple-800);
--spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800);
--spectrum-magenta-visual-color:var(--spectrum-magenta-800);
+ --spectrum-background-elevated-color:var(--spectrum-gray-25);
+ --spectrum-background-pasteboard-color:var(--spectrum-gray-100);
+ --spectrum-brown-visual-color:var(--spectrum-brown-800);
+ --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-800);
+ --spectrum-pink-visual-color:var(--spectrum-pink-800);
+ --spectrum-silver-visual-color:var(--spectrum-silver-800);
+ --spectrum-turquoise-visual-color:var(--spectrum-turquoise-800);
+ --spectrum-brown-background-color-default:var(--spectrum-brown-900);
+ --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-900);
+ --spectrum-pink-background-color-default:var(--spectrum-pink-900);
+ --spectrum-silver-background-color-default:var(--spectrum-silver-900);
+ --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-900);
+ --spectrum-drop-shadow-color-100-rgb:0, 0, 0;
+ --spectrum-drop-shadow-color-100-opacity:0.12;
+ --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity));
+ --spectrum-drop-shadow-color-200-rgb:0, 0, 0;
+ --spectrum-drop-shadow-color-200-opacity:0.16;
+ --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity));
+ --spectrum-drop-shadow-color-300-rgb:0, 0, 0;
+ --spectrum-drop-shadow-color-300-opacity:0.2;
+ --spectrum-drop-shadow-color-300:rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity));
+ --spectrum-neutral-subtle-background-color-default:var(--spectrum-gray-100);
+ --spectrum-gray-subtle-background-color-default:var(--spectrum-gray-100);
+ --spectrum-blue-subtle-background-color-default:var(--spectrum-blue-200);
+ --spectrum-green-subtle-background-color-default:var(--spectrum-green-200);
+ --spectrum-orange-subtle-background-color-default:var(--spectrum-orange-200);
+ --spectrum-red-subtle-background-color-default:var(--spectrum-red-200);
+ --spectrum-brown-subtle-background-color-default:var(--spectrum-brown-200);
+ --spectrum-cinnamon-subtle-background-color-default:var(--spectrum-cinnamon-200);
+ --spectrum-celery-subtle-background-color-default:var(--spectrum-celery-200);
+ --spectrum-chartreuse-subtle-background-color-default:var(--spectrum-chartreuse-200);
+ --spectrum-cyan-subtle-background-color-default:var(--spectrum-cyan-200);
+ --spectrum-fuchsia-subtle-background-color-default:var(--spectrum-fuchsia-200);
+ --spectrum-indigo-subtle-background-color-default:var(--spectrum-indigo-200);
+ --spectrum-magenta-subtle-background-color-default:var(--spectrum-magenta-200);
+ --spectrum-pink-subtle-background-color-default:var(--spectrum-pink-200);
+ --spectrum-purple-subtle-background-color-default:var(--spectrum-purple-200);
+ --spectrum-seafoam-subtle-background-color-default:var(--spectrum-seafoam-200);
+ --spectrum-silver-subtle-background-color-default:var(--spectrum-silver-200);
+ --spectrum-turquoise-subtle-background-color-default:var(--spectrum-turquoise-200);
+ --spectrum-yellow-subtle-background-color-default:var(--spectrum-yellow-200);
--spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200);
- --spectrum-gray-50-rgb:255, 255, 255;
+ --spectrum-white-rgb:255, 255, 255;
+ --spectrum-white:rgba(var(--spectrum-white-rgb));
+ --spectrum-transparent-white-25-rgb:255, 255, 255;
+ --spectrum-transparent-white-25-opacity:0;
+ --spectrum-transparent-white-25:rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity));
+ --spectrum-transparent-white-50-rgb:255, 255, 255;
+ --spectrum-transparent-white-50-opacity:0.04;
+ --spectrum-transparent-white-50:rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity));
+ --spectrum-transparent-white-75-rgb:255, 255, 255;
+ --spectrum-transparent-white-75-opacity:0.07;
+ --spectrum-transparent-white-75:rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity));
+ --spectrum-transparent-white-100-rgb:255, 255, 255;
+ --spectrum-transparent-white-100-opacity:0.11;
+ --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+ --spectrum-transparent-white-200-rgb:255, 255, 255;
+ --spectrum-transparent-white-200-opacity:0.14;
+ --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
+ --spectrum-transparent-white-300-rgb:255, 255, 255;
+ --spectrum-transparent-white-300-opacity:0.17;
+ --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
+ --spectrum-transparent-white-400-rgb:255, 255, 255;
+ --spectrum-transparent-white-400-opacity:0.21;
+ --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
+ --spectrum-transparent-white-500-rgb:255, 255, 255;
+ --spectrum-transparent-white-500-opacity:0.39;
+ --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
+ --spectrum-transparent-white-600-rgb:255, 255, 255;
+ --spectrum-transparent-white-600-opacity:0.51;
+ --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
+ --spectrum-transparent-white-700-rgb:255, 255, 255;
+ --spectrum-transparent-white-700-opacity:0.66;
+ --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
+ --spectrum-transparent-white-800-rgb:255, 255, 255;
+ --spectrum-transparent-white-800-opacity:0.85;
+ --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
+ --spectrum-transparent-white-900-rgb:255, 255, 255;
+ --spectrum-transparent-white-900-opacity:0.94;
+ --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity));
+ --spectrum-transparent-white-1000-rgb:255, 255, 255;
+ --spectrum-transparent-white-1000:rgba(var(--spectrum-transparent-white-1000-rgb));
+ --spectrum-transparent-black-25-rgb:0, 0, 0;
+ --spectrum-transparent-black-25-opacity:0;
+ --spectrum-transparent-black-25:rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity));
+ --spectrum-transparent-black-50-rgb:0, 0, 0;
+ --spectrum-transparent-black-50-opacity:0.03;
+ --spectrum-transparent-black-50:rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity));
+ --spectrum-transparent-black-75-rgb:0, 0, 0;
+ --spectrum-transparent-black-75-opacity:0.05;
+ --spectrum-transparent-black-75:rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity));
+ --spectrum-transparent-black-100-rgb:0, 0, 0;
+ --spectrum-transparent-black-100-opacity:0.09;
+ --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
+ --spectrum-transparent-black-200-rgb:0, 0, 0;
+ --spectrum-transparent-black-200-opacity:0.12;
+ --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-transparent-black-300-rgb:0, 0, 0;
+ --spectrum-transparent-black-300-opacity:0.15;
+ --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
+ --spectrum-transparent-black-400-rgb:0, 0, 0;
+ --spectrum-transparent-black-400-opacity:0.22;
+ --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
+ --spectrum-transparent-black-500-rgb:0, 0, 0;
+ --spectrum-transparent-black-500-opacity:0.44;
+ --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
+ --spectrum-transparent-black-600-rgb:0, 0, 0;
+ --spectrum-transparent-black-600-opacity:0.56;
+ --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
+ --spectrum-transparent-black-700-rgb:0, 0, 0;
+ --spectrum-transparent-black-700-opacity:0.69;
+ --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
+ --spectrum-transparent-black-800-rgb:0, 0, 0;
+ --spectrum-transparent-black-800-opacity:0.84;
+ --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
+ --spectrum-transparent-black-900-rgb:0, 0, 0;
+ --spectrum-transparent-black-900-opacity:0.93;
+ --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity));
+ --spectrum-gray-25-rgb:255, 255, 255;
+ --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb));
+ --spectrum-gray-50-rgb:248, 248, 248;
--spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb));
- --spectrum-gray-75-rgb:253, 253, 253;
+ --spectrum-gray-75-rgb:243, 243, 243;
--spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb));
- --spectrum-gray-100-rgb:248, 248, 248;
+ --spectrum-gray-100-rgb:233, 233, 233;
--spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb));
- --spectrum-gray-200-rgb:230, 230, 230;
+ --spectrum-gray-200-rgb:225, 225, 225;
--spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb));
- --spectrum-gray-300-rgb:213, 213, 213;
+ --spectrum-gray-300-rgb:218, 218, 218;
--spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb));
- --spectrum-gray-400-rgb:177, 177, 177;
+ --spectrum-gray-400-rgb:198, 198, 198;
--spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb));
- --spectrum-gray-500-rgb:144, 144, 144;
+ --spectrum-gray-500-rgb:143, 143, 143;
--spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb));
- --spectrum-gray-600-rgb:109, 109, 109;
+ --spectrum-gray-600-rgb:113, 113, 113;
--spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb));
- --spectrum-gray-700-rgb:70, 70, 70;
+ --spectrum-gray-700-rgb:80, 80, 80;
--spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb));
- --spectrum-gray-800-rgb:34, 34, 34;
+ --spectrum-gray-800-rgb:41, 41, 41;
--spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb));
- --spectrum-gray-900-rgb:0, 0, 0;
+ --spectrum-gray-900-rgb:19, 19, 19;
--spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb));
- --spectrum-blue-100-rgb:224, 242, 255;
+ --spectrum-gray-1000-rgb:0, 0, 0;
+ --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb));
+ --spectrum-blue-100-rgb:245, 249, 255;
--spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb));
- --spectrum-blue-200-rgb:202, 232, 255;
+ --spectrum-blue-200-rgb:229, 240, 254;
--spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb));
- --spectrum-blue-300-rgb:181, 222, 255;
+ --spectrum-blue-300-rgb:203, 226, 254;
--spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb));
- --spectrum-blue-400-rgb:150, 206, 253;
+ --spectrum-blue-400-rgb:172, 207, 253;
--spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb));
- --spectrum-blue-500-rgb:120, 187, 250;
+ --spectrum-blue-500-rgb:142, 185, 252;
--spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb));
- --spectrum-blue-600-rgb:89, 167, 246;
+ --spectrum-blue-600-rgb:114, 158, 253;
--spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb));
- --spectrum-blue-700-rgb:56, 146, 243;
+ --spectrum-blue-700-rgb:93, 137, 255;
--spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb));
- --spectrum-blue-800-rgb:20, 122, 243;
+ --spectrum-blue-800-rgb:75, 117, 255;
--spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb));
- --spectrum-blue-900-rgb:2, 101, 220;
+ --spectrum-blue-900-rgb:59, 99, 251;
--spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb));
- --spectrum-blue-1000-rgb:0, 84, 182;
+ --spectrum-blue-1000-rgb:39, 77, 234;
--spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb));
- --spectrum-blue-1100-rgb:0, 68, 145;
+ --spectrum-blue-1100-rgb:29, 62, 207;
--spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb));
- --spectrum-blue-1200-rgb:0, 53, 113;
+ --spectrum-blue-1200-rgb:21, 50, 173;
--spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb));
- --spectrum-blue-1300-rgb:0, 39, 84;
+ --spectrum-blue-1300-rgb:16, 40, 140;
--spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb));
- --spectrum-blue-1400-rgb:0, 28, 60;
+ --spectrum-blue-1400-rgb:12, 31, 105;
--spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb));
- --spectrum-red-100-rgb:255, 235, 231;
+ --spectrum-blue-1500-rgb:14, 24, 67;
+ --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb));
+ --spectrum-blue-1600-rgb:7, 11, 30;
+ --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb));
+ --spectrum-red-100-rgb:255, 246, 245;
--spectrum-red-100:rgba(var(--spectrum-red-100-rgb));
- --spectrum-red-200-rgb:255, 221, 214;
+ --spectrum-red-200-rgb:255, 235, 232;
--spectrum-red-200:rgba(var(--spectrum-red-200-rgb));
- --spectrum-red-300-rgb:255, 205, 195;
+ --spectrum-red-300-rgb:255, 214, 209;
--spectrum-red-300:rgba(var(--spectrum-red-300-rgb));
- --spectrum-red-400-rgb:255, 183, 169;
+ --spectrum-red-400-rgb:255, 188, 180;
--spectrum-red-400:rgba(var(--spectrum-red-400-rgb));
- --spectrum-red-500-rgb:255, 155, 136;
+ --spectrum-red-500-rgb:255, 157, 145;
--spectrum-red-500:rgba(var(--spectrum-red-500-rgb));
- --spectrum-red-600-rgb:255, 124, 101;
+ --spectrum-red-600-rgb:255, 118, 101;
--spectrum-red-600:rgba(var(--spectrum-red-600-rgb));
- --spectrum-red-700-rgb:247, 92, 70;
+ --spectrum-red-700-rgb:255, 81, 61;
--spectrum-red-700:rgba(var(--spectrum-red-700-rgb));
- --spectrum-red-800-rgb:234, 56, 41;
+ --spectrum-red-800-rgb:240, 56, 35;
--spectrum-red-800:rgba(var(--spectrum-red-800-rgb));
- --spectrum-red-900-rgb:211, 21, 16;
+ --spectrum-red-900-rgb:215, 50, 32;
--spectrum-red-900:rgba(var(--spectrum-red-900-rgb));
- --spectrum-red-1000-rgb:180, 0, 0;
+ --spectrum-red-1000-rgb:183, 40, 24;
--spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb));
- --spectrum-red-1100-rgb:147, 0, 0;
+ --spectrum-red-1100-rgb:156, 33, 19;
--spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb));
- --spectrum-red-1200-rgb:116, 0, 0;
+ --spectrum-red-1200-rgb:129, 27, 14;
--spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb));
- --spectrum-red-1300-rgb:89, 0, 0;
+ --spectrum-red-1300-rgb:104, 21, 10;
--spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb));
- --spectrum-red-1400-rgb:67, 0, 0;
+ --spectrum-red-1400-rgb:80, 16, 6;
--spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb));
- --spectrum-orange-100-rgb:255, 236, 204;
+ --spectrum-red-1500-rgb:59, 11, 4;
+ --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb));
+ --spectrum-red-1600-rgb:29, 5, 2;
+ --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb));
+ --spectrum-orange-100-rgb:255, 246, 231;
--spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb));
- --spectrum-orange-200-rgb:255, 223, 173;
+ --spectrum-orange-200-rgb:255, 236, 207;
--spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb));
- --spectrum-orange-300-rgb:253, 210, 145;
+ --spectrum-orange-300-rgb:255, 218, 158;
--spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb));
- --spectrum-orange-400-rgb:255, 187, 99;
+ --spectrum-orange-400-rgb:255, 193, 94;
--spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb));
- --spectrum-orange-500-rgb:255, 160, 55;
+ --spectrum-orange-500-rgb:255, 162, 19;
--spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb));
- --spectrum-orange-600-rgb:246, 133, 17;
+ --spectrum-orange-600-rgb:252, 125, 0;
--spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb));
- --spectrum-orange-700-rgb:228, 111, 0;
+ --spectrum-orange-700-rgb:232, 106, 0;
--spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb));
- --spectrum-orange-800-rgb:203, 93, 0;
+ --spectrum-orange-800-rgb:212, 91, 0;
--spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb));
- --spectrum-orange-900-rgb:177, 76, 0;
+ --spectrum-orange-900-rgb:194, 78, 0;
--spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb));
- --spectrum-orange-1000-rgb:149, 61, 0;
+ --spectrum-orange-1000-rgb:167, 62, 0;
--spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb));
- --spectrum-orange-1100-rgb:122, 47, 0;
+ --spectrum-orange-1100-rgb:144, 51, 0;
--spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb));
- --spectrum-orange-1200-rgb:97, 35, 0;
+ --spectrum-orange-1200-rgb:118, 41, 0;
--spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb));
- --spectrum-orange-1300-rgb:73, 25, 1;
+ --spectrum-orange-1300-rgb:95, 32, 0;
--spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb));
- --spectrum-orange-1400-rgb:53, 18, 1;
+ --spectrum-orange-1400-rgb:73, 24, 0;
--spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb));
- --spectrum-yellow-100-rgb:251, 241, 152;
+ --spectrum-orange-1500-rgb:52, 18, 0;
+ --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb));
+ --spectrum-orange-1600-rgb:25, 8, 0;
+ --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb));
+ --spectrum-yellow-100-rgb:255, 248, 204;
--spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb));
- --spectrum-yellow-200-rgb:248, 231, 80;
+ --spectrum-yellow-200-rgb:255, 241, 151;
--spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb));
- --spectrum-yellow-300-rgb:248, 217, 4;
+ --spectrum-yellow-300-rgb:255, 222, 44;
--spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb));
- --spectrum-yellow-400-rgb:232, 198, 0;
+ --spectrum-yellow-400-rgb:245, 199, 0;
--spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb));
- --spectrum-yellow-500-rgb:215, 179, 0;
+ --spectrum-yellow-500-rgb:230, 175, 0;
--spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb));
- --spectrum-yellow-600-rgb:196, 159, 0;
+ --spectrum-yellow-600-rgb:210, 149, 0;
--spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb));
- --spectrum-yellow-700-rgb:176, 140, 0;
+ --spectrum-yellow-700-rgb:193, 131, 0;
--spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb));
- --spectrum-yellow-800-rgb:155, 120, 0;
+ --spectrum-yellow-800-rgb:175, 116, 0;
--spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb));
- --spectrum-yellow-900-rgb:133, 102, 0;
+ --spectrum-yellow-900-rgb:158, 102, 0;
--spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb));
- --spectrum-yellow-1000-rgb:112, 83, 0;
+ --spectrum-yellow-1000-rgb:134, 85, 0;
--spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb));
- --spectrum-yellow-1100-rgb:91, 67, 0;
+ --spectrum-yellow-1100-rgb:114, 72, 0;
--spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb));
- --spectrum-yellow-1200-rgb:72, 51, 0;
+ --spectrum-yellow-1200-rgb:93, 59, 0;
--spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb));
- --spectrum-yellow-1300-rgb:54, 37, 0;
+ --spectrum-yellow-1300-rgb:75, 47, 0;
--spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb));
- --spectrum-yellow-1400-rgb:40, 26, 0;
+ --spectrum-yellow-1400-rgb:56, 35, 0;
--spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb));
- --spectrum-chartreuse-100-rgb:219, 252, 110;
+ --spectrum-yellow-1500-rgb:40, 25, 0;
+ --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb));
+ --spectrum-yellow-1600-rgb:18, 11, 0;
+ --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb));
+ --spectrum-chartreuse-100-rgb:246, 251, 222;
--spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb));
- --spectrum-chartreuse-200-rgb:203, 244, 67;
+ --spectrum-chartreuse-200-rgb:234, 246, 173;
--spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb));
- --spectrum-chartreuse-300-rgb:188, 233, 42;
+ --spectrum-chartreuse-300-rgb:208, 236, 70;
--spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb));
- --spectrum-chartreuse-400-rgb:170, 216, 22;
+ --spectrum-chartreuse-400-rgb:182, 219, 0;
--spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb));
- --spectrum-chartreuse-500-rgb:152, 197, 10;
+ --spectrum-chartreuse-500-rgb:163, 196, 0;
--spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb));
- --spectrum-chartreuse-600-rgb:135, 177, 3;
+ --spectrum-chartreuse-600-rgb:143, 172, 0;
--spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb));
- --spectrum-chartreuse-700-rgb:118, 156, 0;
+ --spectrum-chartreuse-700-rgb:128, 153, 0;
--spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb));
- --spectrum-chartreuse-800-rgb:103, 136, 0;
+ --spectrum-chartreuse-800-rgb:114, 137, 0;
--spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb));
- --spectrum-chartreuse-900-rgb:87, 116, 0;
+ --spectrum-chartreuse-900-rgb:102, 122, 0;
--spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb));
- --spectrum-chartreuse-1000-rgb:72, 96, 0;
+ --spectrum-chartreuse-1000-rgb:86, 103, 0;
--spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb));
- --spectrum-chartreuse-1100-rgb:58, 77, 0;
+ --spectrum-chartreuse-1100-rgb:73, 87, 0;
--spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb));
- --spectrum-chartreuse-1200-rgb:44, 59, 0;
+ --spectrum-chartreuse-1200-rgb:60, 71, 0;
--spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb));
- --spectrum-chartreuse-1300-rgb:33, 44, 0;
+ --spectrum-chartreuse-1300-rgb:47, 57, 0;
--spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb));
- --spectrum-chartreuse-1400-rgb:24, 31, 0;
+ --spectrum-chartreuse-1400-rgb:35, 43, 0;
--spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb));
- --spectrum-celery-100-rgb:205, 252, 191;
+ --spectrum-chartreuse-1500-rgb:25, 30, 0;
+ --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb));
+ --spectrum-chartreuse-1600-rgb:11, 14, 0;
+ --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb));
+ --spectrum-celery-100-rgb:235, 255, 220;
--spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb));
- --spectrum-celery-200-rgb:174, 246, 157;
+ --spectrum-celery-200-rgb:197, 255, 156;
--spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb));
- --spectrum-celery-300-rgb:150, 238, 133;
+ --spectrum-celery-300-rgb:157, 247, 92;
--spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb));
- --spectrum-celery-400-rgb:114, 224, 106;
+ --spectrum-celery-400-rgb:129, 228, 58;
--spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb));
- --spectrum-celery-500-rgb:78, 207, 80;
+ --spectrum-celery-500-rgb:110, 206, 42;
--spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb));
- --spectrum-celery-600-rgb:39, 187, 54;
+ --spectrum-celery-600-rgb:93, 180, 31;
--spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb));
- --spectrum-celery-700-rgb:7, 167, 33;
+ --spectrum-celery-700-rgb:82, 161, 25;
--spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb));
- --spectrum-celery-800-rgb:0, 145, 18;
+ --spectrum-celery-800-rgb:72, 144, 20;
--spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb));
- --spectrum-celery-900-rgb:0, 124, 15;
+ --spectrum-celery-900-rgb:64, 129, 17;
--spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb));
- --spectrum-celery-1000-rgb:0, 103, 15;
+ --spectrum-celery-1000-rgb:52, 109, 12;
--spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb));
- --spectrum-celery-1100-rgb:0, 83, 13;
+ --spectrum-celery-1100-rgb:44, 92, 9;
--spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb));
- --spectrum-celery-1200-rgb:0, 64, 10;
+ --spectrum-celery-1200-rgb:35, 75, 6;
--spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb));
- --spectrum-celery-1300-rgb:0, 48, 7;
+ --spectrum-celery-1300-rgb:27, 60, 3;
--spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb));
- --spectrum-celery-1400-rgb:0, 34, 5;
+ --spectrum-celery-1400-rgb:19, 46, 0;
--spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb));
- --spectrum-green-100-rgb:206, 248, 224;
+ --spectrum-celery-1500-rgb:12, 33, 0;
+ --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb));
+ --spectrum-celery-1600-rgb:4, 15, 0;
+ --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb));
+ --spectrum-green-100-rgb:237, 252, 241;
--spectrum-green-100:rgba(var(--spectrum-green-100-rgb));
- --spectrum-green-200-rgb:173, 244, 206;
+ --spectrum-green-200-rgb:215, 247, 225;
--spectrum-green-200:rgba(var(--spectrum-green-200-rgb));
- --spectrum-green-300-rgb:137, 236, 188;
+ --spectrum-green-300-rgb:173, 238, 197;
--spectrum-green-300:rgba(var(--spectrum-green-300-rgb));
- --spectrum-green-400-rgb:103, 222, 168;
+ --spectrum-green-400-rgb:107, 227, 162;
--spectrum-green-400:rgba(var(--spectrum-green-400-rgb));
- --spectrum-green-500-rgb:73, 204, 147;
+ --spectrum-green-500-rgb:43, 209, 125;
--spectrum-green-500:rgba(var(--spectrum-green-500-rgb));
- --spectrum-green-600-rgb:47, 184, 128;
+ --spectrum-green-600-rgb:18, 184, 103;
--spectrum-green-600:rgba(var(--spectrum-green-600-rgb));
- --spectrum-green-700-rgb:21, 164, 110;
+ --spectrum-green-700-rgb:11, 164, 93;
--spectrum-green-700:rgba(var(--spectrum-green-700-rgb));
- --spectrum-green-800-rgb:0, 143, 93;
+ --spectrum-green-800-rgb:7, 147, 85;
--spectrum-green-800:rgba(var(--spectrum-green-800-rgb));
- --spectrum-green-900-rgb:0, 122, 77;
+ --spectrum-green-900-rgb:5, 131, 78;
--spectrum-green-900:rgba(var(--spectrum-green-900-rgb));
- --spectrum-green-1000-rgb:0, 101, 62;
+ --spectrum-green-1000-rgb:3, 110, 69;
--spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb));
- --spectrum-green-1100-rgb:0, 81, 50;
+ --spectrum-green-1100-rgb:2, 93, 60;
--spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb));
- --spectrum-green-1200-rgb:5, 63, 39;
+ --spectrum-green-1200-rgb:1, 76, 52;
--spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb));
- --spectrum-green-1300-rgb:10, 46, 29;
+ --spectrum-green-1300-rgb:0, 61, 44;
--spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb));
- --spectrum-green-1400-rgb:10, 32, 21;
+ --spectrum-green-1400-rgb:0, 46, 34;
--spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb));
- --spectrum-seafoam-100-rgb:206, 247, 243;
+ --spectrum-green-1500-rgb:0, 33, 25;
+ --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb));
+ --spectrum-green-1600-rgb:0, 15, 12;
+ --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb));
+ --spectrum-seafoam-100-rgb:235, 251, 246;
--spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb));
- --spectrum-seafoam-200-rgb:170, 241, 234;
+ --spectrum-seafoam-200-rgb:211, 246, 234;
--spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb));
- --spectrum-seafoam-300-rgb:140, 233, 226;
+ --spectrum-seafoam-300-rgb:169, 237, 216;
--spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb));
- --spectrum-seafoam-400-rgb:101, 218, 210;
+ --spectrum-seafoam-400-rgb:92, 225, 194;
--spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb));
- --spectrum-seafoam-500-rgb:63, 201, 193;
+ --spectrum-seafoam-500-rgb:16, 207, 169;
--spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb));
- --spectrum-seafoam-600-rgb:15, 181, 174;
+ --spectrum-seafoam-600-rgb:13, 181, 149;
--spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb));
- --spectrum-seafoam-700-rgb:0, 161, 154;
+ --spectrum-seafoam-700-rgb:11, 162, 134;
--spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb));
- --spectrum-seafoam-800-rgb:0, 140, 135;
+ --spectrum-seafoam-800-rgb:9, 144, 120;
--spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb));
- --spectrum-seafoam-900-rgb:0, 119, 114;
+ --spectrum-seafoam-900-rgb:7, 129, 109;
--spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb));
- --spectrum-seafoam-1000-rgb:0, 99, 95;
+ --spectrum-seafoam-1000-rgb:5, 108, 92;
--spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb));
- --spectrum-seafoam-1100-rgb:12, 79, 76;
+ --spectrum-seafoam-1100-rgb:3, 92, 80;
--spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb));
- --spectrum-seafoam-1200-rgb:18, 60, 58;
+ --spectrum-seafoam-1200-rgb:1, 75, 67;
--spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb));
- --spectrum-seafoam-1300-rgb:18, 44, 43;
+ --spectrum-seafoam-1300-rgb:0, 60, 54;
--spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb));
- --spectrum-seafoam-1400-rgb:15, 31, 30;
+ --spectrum-seafoam-1400-rgb:0, 46, 40;
--spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb));
- --spectrum-cyan-100-rgb:197, 248, 255;
+ --spectrum-seafoam-1500-rgb:0, 33, 29;
+ --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb));
+ --spectrum-seafoam-1600-rgb:0, 15, 14;
+ --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb));
+ --spectrum-cyan-100-rgb:238, 250, 254;
--spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb));
- --spectrum-cyan-200-rgb:164, 240, 255;
+ --spectrum-cyan-200-rgb:217, 244, 253;
--spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb));
- --spectrum-cyan-300-rgb:136, 231, 250;
+ --spectrum-cyan-300-rgb:183, 231, 252;
--spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb));
- --spectrum-cyan-400-rgb:96, 216, 243;
+ --spectrum-cyan-400-rgb:138, 213, 255;
--spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb));
- --spectrum-cyan-500-rgb:51, 197, 232;
+ --spectrum-cyan-500-rgb:92, 192, 255;
--spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb));
- --spectrum-cyan-600-rgb:18, 176, 218;
+ --spectrum-cyan-600-rgb:48, 167, 254;
--spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb));
- --spectrum-cyan-700-rgb:1, 156, 200;
+ --spectrum-cyan-700-rgb:29, 149, 231;
--spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb));
- --spectrum-cyan-800-rgb:0, 134, 180;
+ --spectrum-cyan-800-rgb:18, 134, 205;
--spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb));
- --spectrum-cyan-900-rgb:0, 113, 159;
+ --spectrum-cyan-900-rgb:11, 120, 179;
--spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb));
- --spectrum-cyan-1000-rgb:0, 93, 137;
+ --spectrum-cyan-1000-rgb:4, 102, 145;
--spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb));
- --spectrum-cyan-1100-rgb:0, 74, 115;
+ --spectrum-cyan-1100-rgb:0, 87, 121;
--spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb));
- --spectrum-cyan-1200-rgb:0, 57, 93;
+ --spectrum-cyan-1200-rgb:0, 71, 98;
--spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb));
- --spectrum-cyan-1300-rgb:0, 42, 70;
+ --spectrum-cyan-1300-rgb:0, 57, 78;
--spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb));
- --spectrum-cyan-1400-rgb:0, 30, 51;
+ --spectrum-cyan-1400-rgb:0, 43, 59;
--spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb));
- --spectrum-indigo-100-rgb:237, 238, 255;
+ --spectrum-cyan-1500-rgb:0, 31, 43;
+ --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb));
+ --spectrum-cyan-1600-rgb:0, 14, 20;
+ --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb));
+ --spectrum-indigo-100-rgb:247, 248, 255;
--spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb));
- --spectrum-indigo-200-rgb:224, 226, 255;
+ --spectrum-indigo-200-rgb:235, 238, 255;
--spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb));
- --spectrum-indigo-300-rgb:211, 213, 255;
+ --spectrum-indigo-300-rgb:216, 222, 255;
--spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb));
- --spectrum-indigo-400-rgb:193, 196, 255;
+ --spectrum-indigo-400-rgb:192, 201, 255;
--spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb));
- --spectrum-indigo-500-rgb:172, 175, 255;
+ --spectrum-indigo-500-rgb:167, 178, 255;
--spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb));
- --spectrum-indigo-600-rgb:149, 153, 255;
+ --spectrum-indigo-600-rgb:145, 151, 254;
--spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb));
- --spectrum-indigo-700-rgb:126, 132, 252;
+ --spectrum-indigo-700-rgb:132, 128, 254;
--spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb));
- --spectrum-indigo-800-rgb:104, 109, 244;
+ --spectrum-indigo-800-rgb:122, 106, 253;
--spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb));
- --spectrum-indigo-900-rgb:82, 88, 228;
+ --spectrum-indigo-900-rgb:113, 85, 250;
--spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb));
- --spectrum-indigo-1000-rgb:64, 70, 202;
+ --spectrum-indigo-1000-rgb:99, 56, 238;
--spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb));
- --spectrum-indigo-1100-rgb:50, 54, 168;
+ --spectrum-indigo-1100-rgb:84, 36, 219;
--spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb));
- --spectrum-indigo-1200-rgb:38, 41, 134;
+ --spectrum-indigo-1200-rgb:69, 19, 191;
--spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb));
- --spectrum-indigo-1300-rgb:27, 30, 100;
+ --spectrum-indigo-1300-rgb:55, 6, 160;
--spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb));
- --spectrum-indigo-1400-rgb:20, 22, 72;
+ --spectrum-indigo-1400-rgb:42, 0, 129;
--spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb));
- --spectrum-purple-100-rgb:246, 235, 255;
+ --spectrum-indigo-1500-rgb:31, 0, 98;
+ --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb));
+ --spectrum-indigo-1600-rgb:17, 0, 54;
+ --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb));
+ --spectrum-purple-100-rgb:251, 247, 254;
--spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb));
- --spectrum-purple-200-rgb:238, 221, 255;
+ --spectrum-purple-200-rgb:244, 235, 252;
--spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb));
- --spectrum-purple-300-rgb:230, 208, 255;
+ --spectrum-purple-300-rgb:235, 218, 249;
--spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb));
- --spectrum-purple-400-rgb:219, 187, 254;
+ --spectrum-purple-400-rgb:221, 193, 246;
--spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb));
- --spectrum-purple-500-rgb:204, 164, 253;
+ --spectrum-purple-500-rgb:208, 167, 243;
--spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb));
- --spectrum-purple-600-rgb:189, 139, 252;
+ --spectrum-purple-600-rgb:191, 138, 238;
--spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb));
- --spectrum-purple-700-rgb:174, 114, 249;
+ --spectrum-purple-700-rgb:178, 114, 235;
--spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb));
- --spectrum-purple-800-rgb:157, 87, 244;
+ --spectrum-purple-800-rgb:166, 92, 231;
--spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb));
- --spectrum-purple-900-rgb:137, 61, 231;
+ --spectrum-purple-900-rgb:154, 71, 226;
--spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb));
- --spectrum-purple-1000-rgb:115, 38, 211;
+ --spectrum-purple-1000-rgb:134, 40, 217;
--spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb));
- --spectrum-purple-1100-rgb:93, 19, 183;
+ --spectrum-purple-1100-rgb:115, 13, 204;
--spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb));
- --spectrum-purple-1200-rgb:71, 12, 148;
+ --spectrum-purple-1200-rgb:93, 0, 177;
--spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb));
- --spectrum-purple-1300-rgb:51, 16, 106;
+ --spectrum-purple-1300-rgb:75, 0, 144;
--spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb));
- --spectrum-purple-1400-rgb:35, 15, 73;
+ --spectrum-purple-1400-rgb:59, 0, 111;
--spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb));
- --spectrum-fuchsia-100-rgb:255, 233, 252;
+ --spectrum-purple-1500-rgb:44, 0, 84;
+ --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb));
+ --spectrum-purple-1600-rgb:23, 0, 45;
+ --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb));
+ --spectrum-fuchsia-100-rgb:254, 246, 255;
--spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb));
- --spectrum-fuchsia-200-rgb:255, 218, 250;
+ --spectrum-fuchsia-200-rgb:253, 233, 255;
--spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb));
- --spectrum-fuchsia-300-rgb:254, 199, 248;
+ --spectrum-fuchsia-300-rgb:250, 211, 255;
--spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb));
- --spectrum-fuchsia-400-rgb:251, 174, 246;
+ --spectrum-fuchsia-400-rgb:247, 181, 255;
--spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb));
- --spectrum-fuchsia-500-rgb:245, 146, 243;
+ --spectrum-fuchsia-500-rgb:243, 147, 255;
--spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb));
- --spectrum-fuchsia-600-rgb:237, 116, 237;
+ --spectrum-fuchsia-600-rgb:236, 105, 255;
--spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb));
- --spectrum-fuchsia-700-rgb:224, 85, 226;
+ --spectrum-fuchsia-700-rgb:223, 77, 245;
--spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb));
- --spectrum-fuchsia-800-rgb:205, 58, 206;
+ --spectrum-fuchsia-800-rgb:200, 68, 220;
--spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb));
- --spectrum-fuchsia-900-rgb:182, 34, 183;
+ --spectrum-fuchsia-900-rgb:181, 57, 200;
--spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb));
- --spectrum-fuchsia-1000-rgb:157, 3, 158;
+ --spectrum-fuchsia-1000-rgb:156, 40, 175;
--spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb));
- --spectrum-fuchsia-1100-rgb:128, 0, 129;
+ --spectrum-fuchsia-1100-rgb:135, 27, 154;
--spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb));
- --spectrum-fuchsia-1200-rgb:100, 6, 100;
+ --spectrum-fuchsia-1200-rgb:113, 15, 131;
--spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb));
- --spectrum-fuchsia-1300-rgb:71, 14, 70;
+ --spectrum-fuchsia-1300-rgb:92, 4, 109;
--spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb));
- --spectrum-fuchsia-1400-rgb:50, 13, 49;
+ --spectrum-fuchsia-1400-rgb:72, 0, 88;
--spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb));
- --spectrum-magenta-100-rgb:255, 234, 241;
+ --spectrum-fuchsia-1500-rgb:54, 0, 66;
+ --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb));
+ --spectrum-fuchsia-1600-rgb:29, 0, 35;
+ --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb));
+ --spectrum-magenta-100-rgb:255, 245, 248;
--spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb));
- --spectrum-magenta-200-rgb:255, 220, 232;
+ --spectrum-magenta-200-rgb:255, 232, 240;
--spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb));
- --spectrum-magenta-300-rgb:255, 202, 221;
+ --spectrum-magenta-300-rgb:255, 213, 227;
--spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb));
- --spectrum-magenta-400-rgb:255, 178, 206;
+ --spectrum-magenta-400-rgb:255, 185, 208;
--spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb));
- --spectrum-magenta-500-rgb:255, 149, 189;
+ --spectrum-magenta-500-rgb:255, 152, 187;
--spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb));
- --spectrum-magenta-600-rgb:250, 119, 170;
+ --spectrum-magenta-600-rgb:255, 112, 159;
--spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb));
- --spectrum-magenta-700-rgb:239, 90, 152;
+ --spectrum-magenta-700-rgb:255, 72, 133;
--spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb));
- --spectrum-magenta-800-rgb:222, 61, 130;
+ --spectrum-magenta-800-rgb:240, 45, 110;
--spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb));
- --spectrum-magenta-900-rgb:200, 34, 105;
+ --spectrum-magenta-900-rgb:217, 35, 97;
--spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb));
- --spectrum-magenta-1000-rgb:173, 9, 85;
+ --spectrum-magenta-1000-rgb:186, 22, 80;
--spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb));
- --spectrum-magenta-1100-rgb:142, 0, 69;
+ --spectrum-magenta-1100-rgb:163, 5, 62;
--spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb));
- --spectrum-magenta-1200-rgb:112, 0, 55;
+ --spectrum-magenta-1200-rgb:136, 0, 51;
--spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb));
- --spectrum-magenta-1300-rgb:84, 3, 42;
+ --spectrum-magenta-1300-rgb:111, 0, 40;
--spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb));
- --spectrum-magenta-1400-rgb:60, 6, 29;
+ --spectrum-magenta-1400-rgb:86, 0, 30;
--spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb));
+ --spectrum-magenta-1500-rgb:64, 0, 22;
+ --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb));
+ --spectrum-magenta-1600-rgb:35, 0, 12;
+ --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb));
+ --spectrum-pink-100-rgb:255, 246, 252;
+ --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb));
+ --spectrum-pink-200-rgb:255, 232, 247;
+ --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb));
+ --spectrum-pink-300-rgb:255, 211, 240;
+ --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb));
+ --spectrum-pink-400-rgb:255, 181, 230;
+ --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb));
+ --spectrum-pink-500-rgb:255, 148, 219;
+ --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb));
+ --spectrum-pink-600-rgb:255, 103, 204;
+ --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb));
+ --spectrum-pink-700-rgb:242, 76, 184;
+ --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb));
+ --spectrum-pink-800-rgb:228, 52, 163;
+ --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb));
+ --spectrum-pink-900-rgb:206, 42, 146;
+ --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb));
+ --spectrum-pink-1000-rgb:176, 31, 123;
+ --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb));
+ --spectrum-pink-1100-rgb:152, 22, 104;
+ --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb));
+ --spectrum-pink-1200-rgb:128, 12, 85;
+ --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb));
+ --spectrum-pink-1300-rgb:105, 3, 68;
+ --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb));
+ --spectrum-pink-1400-rgb:83, 0, 53;
+ --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb));
+ --spectrum-pink-1500-rgb:62, 0, 39;
+ --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb));
+ --spectrum-pink-1600-rgb:33, 0, 21;
+ --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb));
+ --spectrum-turquoise-100-rgb:238, 251, 251;
+ --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb));
+ --spectrum-turquoise-200-rgb:209, 245, 245;
+ --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb));
+ --spectrum-turquoise-300-rgb:169, 236, 237;
+ --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb));
+ --spectrum-turquoise-400-rgb:111, 221, 228;
+ --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb));
+ --spectrum-turquoise-500-rgb:39, 202, 216;
+ --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb));
+ --spectrum-turquoise-600-rgb:15, 177, 192;
+ --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb));
+ --spectrum-turquoise-700-rgb:12, 158, 171;
+ --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb));
+ --spectrum-turquoise-800-rgb:10, 141, 153;
+ --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb));
+ --spectrum-turquoise-900-rgb:8, 126, 137;
+ --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb));
+ --spectrum-turquoise-1000-rgb:5, 107, 116;
+ --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb));
+ --spectrum-turquoise-1100-rgb:3, 90, 98;
+ --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb));
+ --spectrum-turquoise-1200-rgb:1, 74, 81;
+ --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb));
+ --spectrum-turquoise-1300-rgb:0, 59, 65;
+ --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb));
+ --spectrum-turquoise-1400-rgb:0, 44, 49;
+ --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb));
+ --spectrum-turquoise-1500-rgb:0, 32, 35;
+ --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb));
+ --spectrum-turquoise-1600-rgb:0, 15, 17;
+ --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb));
+ --spectrum-brown-100-rgb:252, 247, 242;
+ --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb));
+ --spectrum-brown-200-rgb:247, 238, 225;
+ --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb));
+ --spectrum-brown-300-rgb:239, 221, 195;
+ --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb));
+ --spectrum-brown-400-rgb:229, 200, 157;
+ --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb));
+ --spectrum-brown-500-rgb:214, 177, 123;
+ --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb));
+ --spectrum-brown-600-rgb:190, 155, 104;
+ --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb));
+ --spectrum-brown-700-rgb:171, 138, 90;
+ --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb));
+ --spectrum-brown-800-rgb:154, 123, 77;
+ --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb));
+ --spectrum-brown-900-rgb:139, 109, 66;
+ --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb));
+ --spectrum-brown-1000-rgb:119, 91, 50;
+ --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb));
+ --spectrum-brown-1100-rgb:103, 76, 35;
+ --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb));
+ --spectrum-brown-1200-rgb:88, 61, 21;
+ --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb));
+ --spectrum-brown-1300-rgb:70, 49, 17;
+ --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb));
+ --spectrum-brown-1400-rgb:52, 37, 13;
+ --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb));
+ --spectrum-brown-1500-rgb:38, 26, 9;
+ --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb));
+ --spectrum-brown-1600-rgb:16, 12, 4;
+ --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb));
+ --spectrum-silver-100-rgb:247, 247, 247;
+ --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb));
+ --spectrum-silver-200-rgb:239, 239, 239;
+ --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb));
+ --spectrum-silver-300-rgb:223, 223, 223;
+ --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb));
+ --spectrum-silver-400-rgb:204, 204, 204;
+ --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb));
+ --spectrum-silver-500-rgb:183, 183, 183;
+ --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb));
+ --spectrum-silver-600-rgb:160, 160, 160;
+ --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb));
+ --spectrum-silver-700-rgb:143, 143, 143;
+ --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb));
+ --spectrum-silver-800-rgb:128, 128, 128;
+ --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb));
+ --spectrum-silver-900-rgb:114, 114, 114;
+ --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb));
+ --spectrum-silver-1000-rgb:96, 96, 96;
+ --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb));
+ --spectrum-silver-1100-rgb:81, 81, 81;
+ --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb));
+ --spectrum-silver-1200-rgb:66, 66, 66;
+ --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb));
+ --spectrum-silver-1300-rgb:52, 52, 52;
+ --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb));
+ --spectrum-silver-1400-rgb:39, 39, 39;
+ --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb));
+ --spectrum-silver-1500-rgb:28, 28, 28;
+ --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb));
+ --spectrum-silver-1600-rgb:12, 12, 12;
+ --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb));
+ --spectrum-cinnamon-100-rgb:253, 247, 243;
+ --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb));
+ --spectrum-cinnamon-200-rgb:249, 236, 229;
+ --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb));
+ --spectrum-cinnamon-300-rgb:244, 218, 203;
+ --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb));
+ --spectrum-cinnamon-400-rgb:237, 196, 172;
+ --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb));
+ --spectrum-cinnamon-500-rgb:229, 170, 136;
+ --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb));
+ --spectrum-cinnamon-600-rgb:212, 145, 108;
+ --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb));
+ --spectrum-cinnamon-700-rgb:198, 126, 88;
+ --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb));
+ --spectrum-cinnamon-800-rgb:184, 109, 70;
+ --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb));
+ --spectrum-cinnamon-900-rgb:170, 94, 56;
+ --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb));
+ --spectrum-cinnamon-1000-rgb:147, 77, 43;
+ --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb));
+ --spectrum-cinnamon-1100-rgb:128, 62, 32;
+ --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb));
+ --spectrum-cinnamon-1200-rgb:110, 48, 21;
+ --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb));
+ --spectrum-cinnamon-1300-rgb:92, 35, 11;
+ --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb));
+ --spectrum-cinnamon-1400-rgb:72, 25, 6;
+ --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb));
+ --spectrum-cinnamon-1500-rgb:52, 18, 4;
+ --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb));
+ --spectrum-cinnamon-1600-rgb:24, 8, 2;
+ --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb));
--spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900);
--spectrum-icon-color-green-primary-default:var(--spectrum-green-900);
--spectrum-icon-color-red-primary-default:var(--spectrum-red-900);
--spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-400);
+ --spectrum-negative-subdued-background-color-default:var(--spectrum-negative-subtle-background-color-default);
+ --spectrum-accent-subtle-background-color-default:var(--spectrum-accent-color-200);
+ --spectrum-informative-subtle-background-color-default:var(--spectrum-informative-color-200);
+ --spectrum-positive-subtle-background-color-default:var(--spectrum-positive-color-200);
+ --spectrum-notice-subtle-background-color-default:var(--spectrum-notice-color-200);
+ --spectrum-negative-subtle-background-color-default:var(--spectrum-negative-color-200);
+ --color-scheme:light;
+
+ --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900);
+ --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900);
+ --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000);
+ --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900);
+ --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800);
+
+ --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2);
+ --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1);
+ --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800);
+
+ --spectrum-badge-label-icon-color-primary:var(--spectrum-white);
+
+ --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1);
+ --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06);
+ --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2);
+ --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2);
+ --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200);
+ --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2);
+ --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06);
+ --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800);
+
+ --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-900-rgb);
+
+ --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800);
+
+ --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb);
+
+ --spectrum-dropindicator-color:var(--spectrum-blue-800);
+
+ --spectrum-logic-button-and-background-color:var(--spectrum-blue-900);
+ --spectrum-logic-button-and-border-color:var(--spectrum-blue-900);
+ --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100);
+ --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100);
+
+ --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900);
+ --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900);
+ --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100);
+ --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100);
+
+ --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800);
+
+ --spectrum-swatch-border-color-rgb:0, 0, 0;
+
+ --spectrum-swatch-border-color-opacity:0.51;
+
+ --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
+ --spectrum-swatch-border-color-light-rgb:0, 0, 0;
+ --spectrum-swatch-border-color-light-opacity:0.20;
+ --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
+
+ --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06);
+ --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1);
}
diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css
index 9756afa3545..51ac1c9f637 100644
--- a/tokens/dist/css/medium-vars.css
+++ b/tokens/dist/css/medium-vars.css
@@ -14,9 +14,9 @@
.spectrum--medium{
--spectrum-workflow-icon-size-50:14px;
--spectrum-workflow-icon-size-75:16px;
- --spectrum-workflow-icon-size-100:18px;
- --spectrum-workflow-icon-size-200:20px;
- --spectrum-workflow-icon-size-300:22px;
+ --spectrum-workflow-icon-size-100:20px;
+ --spectrum-workflow-icon-size-200:22px;
+ --spectrum-workflow-icon-size-300:26px;
--spectrum-arrow-icon-size-75:10px;
--spectrum-arrow-icon-size-100:10px;
--spectrum-arrow-icon-size-200:12px;
@@ -62,6 +62,34 @@
--spectrum-dash-icon-size-400:14px;
--spectrum-dash-icon-size-500:16px;
--spectrum-dash-icon-size-600:18px;
+ --spectrum-checkbox-control-size-small:12px;
+ --spectrum-checkbox-control-size-medium:14px;
+ --spectrum-checkbox-control-size-large:16px;
+ --spectrum-checkbox-control-size-extra-large:18px;
+ --spectrum-checkbox-top-to-control-small:6px;
+ --spectrum-checkbox-top-to-control-medium:9px;
+ --spectrum-checkbox-top-to-control-large:12px;
+ --spectrum-checkbox-top-to-control-extra-large:15px;
+ --spectrum-switch-control-width-small:23px;
+ --spectrum-switch-control-width-medium:26px;
+ --spectrum-switch-control-width-large:29px;
+ --spectrum-switch-control-width-extra-large:33px;
+ --spectrum-switch-control-height-small:12px;
+ --spectrum-switch-control-height-medium:14px;
+ --spectrum-switch-control-height-large:16px;
+ --spectrum-switch-control-height-extra-large:18px;
+ --spectrum-switch-top-to-control-small:6px;
+ --spectrum-switch-top-to-control-medium:9px;
+ --spectrum-switch-top-to-control-large:12px;
+ --spectrum-switch-top-to-control-extra-large:15px;
+ --spectrum-radio-button-control-size-small:12px;
+ --spectrum-radio-button-control-size-medium:14px;
+ --spectrum-radio-button-control-size-large:16px;
+ --spectrum-radio-button-control-size-extra-large:18px;
+ --spectrum-radio-button-top-to-control-small:6px;
+ --spectrum-radio-button-top-to-control-medium:9px;
+ --spectrum-radio-button-top-to-control-large:12px;
+ --spectrum-radio-button-top-to-control-extra-large:15px;
--spectrum-field-label-text-to-asterisk-small:4px;
--spectrum-field-label-text-to-asterisk-medium:4px;
--spectrum-field-label-text-to-asterisk-large:5px;
@@ -137,6 +165,22 @@
--spectrum-menu-item-top-to-selected-icon-medium:11px;
--spectrum-menu-item-top-to-selected-icon-large:14px;
--spectrum-menu-item-top-to-selected-icon-extra-large:17px;
+ --spectrum-slider-control-height-small:14px;
+ --spectrum-slider-control-height-medium:16px;
+ --spectrum-slider-control-height-large:18px;
+ --spectrum-slider-control-height-extra-large:20px;
+ --spectrum-slider-handle-size-small:14px;
+ --spectrum-slider-handle-size-medium:16px;
+ --spectrum-slider-handle-size-large:18px;
+ --spectrum-slider-handle-size-extra-large:20px;
+ --spectrum-slider-handle-border-width-down-small:5px;
+ --spectrum-slider-handle-border-width-down-medium:6px;
+ --spectrum-slider-handle-border-width-down-large:7px;
+ --spectrum-slider-handle-border-width-down-extra-large:8px;
+ --spectrum-slider-bottom-to-handle-small:5px;
+ --spectrum-slider-bottom-to-handle-medium:8px;
+ --spectrum-slider-bottom-to-handle-large:11px;
+ --spectrum-slider-bottom-to-handle-extra-large:14px;
--spectrum-slider-control-to-field-label-small:5px;
--spectrum-slider-control-to-field-label-medium:8px;
--spectrum-slider-control-to-field-label-large:11px;
@@ -365,11 +409,14 @@
--spectrum-side-navigation-bottom-to-text:8px;
--spectrum-tray-top-to-content-area:4px;
--spectrum-accordion-top-to-text-spacious-small:9px;
- --spectrum-text-to-visual-50:6px;
- --spectrum-text-to-visual-75:7px;
- --spectrum-text-to-visual-100:8px;
- --spectrum-text-to-visual-200:9px;
- --spectrum-text-to-visual-300:10px;
+ --spectrum-drop-shadow-y:1px;
+ --spectrum-drop-shadow-blur:4px;
+ --spectrum-text-to-visual-50:5px;
+ --spectrum-text-to-visual-75:5px;
+ --spectrum-text-to-visual-100:6px;
+ --spectrum-text-to-visual-200:7px;
+ --spectrum-text-to-visual-300:8px;
+ --spectrum-text-to-visual-400:9px;
--spectrum-text-to-control-75:9px;
--spectrum-text-to-control-100:10px;
--spectrum-text-to-control-200:11px;
@@ -381,38 +428,38 @@
--spectrum-component-height-300:48px;
--spectrum-component-height-400:56px;
--spectrum-component-height-500:64px;
- --spectrum-component-pill-edge-to-visual-75:10px;
+ --spectrum-component-pill-edge-to-visual-75:11px;
--spectrum-component-pill-edge-to-visual-100:14px;
--spectrum-component-pill-edge-to-visual-200:18px;
- --spectrum-component-pill-edge-to-visual-300:21px;
+ --spectrum-component-pill-edge-to-visual-300:20px;
--spectrum-component-pill-edge-to-visual-only-75:4px;
- --spectrum-component-pill-edge-to-visual-only-100:7px;
- --spectrum-component-pill-edge-to-visual-only-200:10px;
- --spectrum-component-pill-edge-to-visual-only-300:13px;
- --spectrum-component-pill-edge-to-text-75:12px;
+ --spectrum-component-pill-edge-to-visual-only-100:6px;
+ --spectrum-component-pill-edge-to-visual-only-200:9px;
+ --spectrum-component-pill-edge-to-visual-only-300:11px;
+ --spectrum-component-pill-edge-to-text-75:13px;
--spectrum-component-pill-edge-to-text-100:16px;
--spectrum-component-pill-edge-to-text-200:20px;
- --spectrum-component-pill-edge-to-text-300:24px;
- --spectrum-component-edge-to-visual-50:6px;
- --spectrum-component-edge-to-visual-75:7px;
+ --spectrum-component-pill-edge-to-text-300:23px;
+ --spectrum-component-edge-to-visual-50:7px;
+ --spectrum-component-edge-to-visual-75:8px;
--spectrum-component-edge-to-visual-100:10px;
--spectrum-component-edge-to-visual-200:13px;
- --spectrum-component-edge-to-visual-300:15px;
+ --spectrum-component-edge-to-visual-300:14px;
--spectrum-component-edge-to-visual-only-50:3px;
--spectrum-component-edge-to-visual-only-75:4px;
- --spectrum-component-edge-to-visual-only-100:7px;
- --spectrum-component-edge-to-visual-only-200:10px;
- --spectrum-component-edge-to-visual-only-300:13px;
+ --spectrum-component-edge-to-visual-only-100:6px;
+ --spectrum-component-edge-to-visual-only-200:9px;
+ --spectrum-component-edge-to-visual-only-300:11px;
--spectrum-component-edge-to-text-50:8px;
- --spectrum-component-edge-to-text-75:9px;
+ --spectrum-component-edge-to-text-75:10px;
--spectrum-component-edge-to-text-100:12px;
--spectrum-component-edge-to-text-200:15px;
- --spectrum-component-edge-to-text-300:18px;
+ --spectrum-component-edge-to-text-300:17px;
--spectrum-component-top-to-workflow-icon-50:3px;
--spectrum-component-top-to-workflow-icon-75:4px;
- --spectrum-component-top-to-workflow-icon-100:7px;
- --spectrum-component-top-to-workflow-icon-200:10px;
- --spectrum-component-top-to-workflow-icon-300:13px;
+ --spectrum-component-top-to-workflow-icon-100:6px;
+ --spectrum-component-top-to-workflow-icon-200:9px;
+ --spectrum-component-top-to-workflow-icon-300:11px;
--spectrum-component-top-to-text-50:3px;
--spectrum-component-top-to-text-75:4px;
--spectrum-component-top-to-text-100:6px;
@@ -501,4 +548,110 @@
--spectrum-font-size-1100:45px;
--spectrum-font-size-1200:50px;
--spectrum-font-size-1300:60px;
+ --scale:medium;
+
+ --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100);
+ --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100);
+ --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100);
+ --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100);
+
+ --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700);
+ --spectrum-alert-dialog-padding:var(--spectrum-spacing-500);
+
+ --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s);
+ --spectrum-assetcard-focus-ring-border-radius:8px;
+ --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs);
+ --spectrum-assetcard-selectionindicator-margin:12px;
+ --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs);
+
+ --spectrum-button-bottom-to-text-small:4px;
+ --spectrum-button-bottom-to-text-medium:8px;
+ --spectrum-button-bottom-to-text-large:10px;
+ --spectrum-button-bottom-to-text-extra-large:13px;
+ --spectrum-button-top-to-text-small:5px;
+ --spectrum-button-top-to-text-medium:7px;
+ --spectrum-button-top-to-text-large:10px;
+ --spectrum-button-top-to-text-extra-large:13px;
+
+ --spectrum-coach-indicator-gap:6px;
+ --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300);
+ --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100);
+
+ --spectrum-coachmark-buttongroup-display:flex;
+ --spectrum-coachmark-buttongroup-mobile-display:none;
+ --spectrum-coachmark-menu-display:inline-flex;
+ --spectrum-coachmark-menu-mobile-display:none;
+
+ --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary);
+
+ --spectrum-colorwheel-colorarea-container-size:144px;
+ --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
+ --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
+
+ --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100);
+
+ --spectrum-datepicker-dash-line-height:24px;
+ --spectrum-datepicker-datetime-width-first:36px;
+ --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200);
+ --spectrum-datepicker-initial-width:128px;
+ --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400);
+ --spectrum-datepicker-invalid-icon-to-button:8px;
+ --spectrum-datepicker-invalid-icon-to-button-quiet:7px;
+ --spectrum-datepicker-width-quiet-first:72px;
+ --spectrum-datepicker-width-quiet-second:16px;
+
+ --spectrum-dial-border-radius:16px;
+ --spectrum-dial-controls-margin:8px;
+ --spectrum-dial-handle-block-margin:16px;
+ --spectrum-dial-handle-inline-margin:16px;
+ --spectrum-dial-handle-position:8px;
+ --spectrum-dial-label-container-top-to-text:4px;
+ --spectrum-dial-label-gap-y:5px;
+
+ --spectrum-dialog-confirm-border-radius:4px;
+ --spectrum-dialog-confirm-description-text-size:14px;
+ --spectrum-dialog-confirm-entry-animation-distance:20px;
+ --spectrum-dialog-confirm-hero-height:128px;
+ --spectrum-dialog-confirm-padding-grid:40px;
+ --spectrum-dialog-confirm-title-text-size:18px;
+
+ --spectrum-menu-item-checkmark-height-small:10px;
+ --spectrum-menu-item-checkmark-height-medium:10px;
+ --spectrum-menu-item-checkmark-height-large:12px;
+ --spectrum-menu-item-checkmark-height-extra-large:14px;
+ --spectrum-menu-item-checkmark-width-small:10px;
+ --spectrum-menu-item-checkmark-width-medium:10px;
+ --spectrum-menu-item-checkmark-width-large:12px;
+ --spectrum-menu-item-checkmark-width-extra-large:14px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px;
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px;
+
+ --spectrum-pagination-item-inline-spacing:5px;
+ --spectrum-pagination-textfield-width:var(--spectrum-spacing-700);
+
+ --spectrum-rating-icon-spacing:var(--spectrum-spacing-75);
+
+ --spectrum-slider-ramp-track-height:16px;
+ --spectrum-slider-tick-mark-height:10px;
+
+ --spectrum-treeview-indicator-inset-block-start:5px;
+ --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200);
+ --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300);
+ --spectrum-treeview-item-indentation-large:20px;
+ --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400);
+ --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px;
+
+ --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);
+
+ --spectrum-ui-icon-medium-display:block;
+ --spectrum-ui-icon-large-display:none;
+
+ --spectrum-well-border-radius:var(--spectrum-spacing-75);
+ --spectrum-well-margin-top:var(--spectrum-spacing-75);
+ --spectrum-well-min-width:240px;
+ --spectrum-well-padding:var(--spectrum-spacing-300);
+ --spectrum-workflow-icon-size-xxl:32px;
+ --spectrum-workflow-icon-size-xxs:12px;
}
diff --git a/tokens/dist/css/spectrum/custom-large-vars.css b/tokens/dist/css/spectrum/custom-large-vars.css
deleted file mode 100644
index 3a22a849de0..00000000000
--- a/tokens/dist/css/spectrum/custom-large-vars.css
+++ /dev/null
@@ -1,121 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--large{
- --spectrum-slider-tick-mark-height:13px;
- --spectrum-slider-ramp-track-height:20px;
-
- --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
- --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
- --spectrum-colorwheel-colorarea-container-size:182px;
-
- --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary);
-
- --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px;
-
- --spectrum-menu-item-checkmark-height-small:12px;
- --spectrum-menu-item-checkmark-height-medium:14px;
- --spectrum-menu-item-checkmark-height-large:16px;
- --spectrum-menu-item-checkmark-height-extra-large:16px;
-
- --spectrum-menu-item-checkmark-width-small:12px;
- --spectrum-menu-item-checkmark-width-medium:14px;
- --spectrum-menu-item-checkmark-width-large:16px;
- --spectrum-menu-item-checkmark-width-extra-large:16px;
-
- --spectrum-rating-icon-spacing:var(--spectrum-spacing-100);
-
- --spectrum-button-top-to-text-small:6px;
- --spectrum-button-bottom-to-text-small:5px;
- --spectrum-button-top-to-text-medium:9px;
- --spectrum-button-bottom-to-text-medium:10px;
- --spectrum-button-top-to-text-large:12px;
- --spectrum-button-bottom-to-text-large:13px;
- --spectrum-button-top-to-text-extra-large:16px;
- --spectrum-button-bottom-to-text-extra-large:17px;
-
- --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200);
- --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200);
-
- --spectrum-alert-dialog-padding:var(--spectrum-spacing-400);
- --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600);
-
- --spectrum-coach-indicator-gap:8px;
- --spectrum-coach-indicator-ring-diameter:20px;
- --spectrum-coach-indicator-quiet-ring-diameter:10px;
-
- --spectrum-coachmark-buttongroup-display:none;
- --spectrum-coachmark-buttongroup-mobile-display:flex;
- --spectrum-coachmark-menu-display:none;
- --spectrum-coachmark-menu-mobile-display:inline-flex;
-
- --spectrum-well-padding:20px;
- --spectrum-well-margin-top:5px;
- --spectrum-well-min-width:300px;
- --spectrum-well-border-radius:5px;
- --spectrum-workflow-icon-size-xxl:40px;
- --spectrum-workflow-icon-size-xxs:15px;
-
- --spectrum-treeview-item-indentation-medium:20px;
- --spectrum-treeview-item-indentation-small:15px;
- --spectrum-treeview-item-indentation-large:25px;
- --spectrum-treeview-item-indentation-extra-large:30px;
- --spectrum-treeview-indicator-inset-block-start:6px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px;
-
- --spectrum-dialog-confirm-entry-animation-distance:25px;
- --spectrum-dialog-confirm-hero-height:160px;
- --spectrum-dialog-confirm-border-radius:5px;
- --spectrum-dialog-confirm-title-text-size:19px;
- --spectrum-dialog-confirm-description-text-size:15px;
- --spectrum-dialog-confirm-padding-grid:24px;
-
- --spectrum-datepicker-initial-width:160px;
- --spectrum-datepicker-generic-padding:15px;
- --spectrum-datepicker-dash-line-height:30px;
- --spectrum-datepicker-width-quiet-first:90px;
- --spectrum-datepicker-width-quiet-second:20px;
- --spectrum-datepicker-datetime-width-first:45px;
- --spectrum-datepicker-invalid-icon-to-button:10px;
- --spectrum-datepicker-invalid-icon-to-button-quiet:9px;
- --spectrum-datepicker-input-datetime-width:30px;
-
- --spectrum-pagination-textfield-width:60px;
- --spectrum-pagination-item-inline-spacing:6px;
-
- --spectrum-dial-border-radius:20px;
- --spectrum-dial-handle-position:10px;
- --spectrum-dial-handle-block-margin:20px;
- --spectrum-dial-handle-inline-margin:20px;
- --spectrum-dial-controls-margin:10px;
- --spectrum-dial-label-gap-y:6px;
- --spectrum-dial-label-container-top-to-text:5px;
-
- --spectrum-assetcard-focus-ring-border-radius:9px;
- --spectrum-assetcard-selectionindicator-margin:15px;
- --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);
-
- --spectrum-tooltip-animation-distance:5px;
-
- --spectrum-ui-icon-medium-display:none;
- --spectrum-ui-icon-large-display:block;
-}
diff --git a/tokens/dist/css/spectrum/custom-medium-vars.css b/tokens/dist/css/spectrum/custom-medium-vars.css
deleted file mode 100644
index 4e22b9302e5..00000000000
--- a/tokens/dist/css/spectrum/custom-medium-vars.css
+++ /dev/null
@@ -1,120 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--medium{
- --spectrum-slider-tick-mark-height:10px;
- --spectrum-slider-ramp-track-height:16px;
-
- --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
- --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
- --spectrum-colorwheel-colorarea-container-size:144px;
-
- --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary);
-
- --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px;
-
- --spectrum-menu-item-checkmark-height-small:10px;
- --spectrum-menu-item-checkmark-height-medium:10px;
- --spectrum-menu-item-checkmark-height-large:12px;
- --spectrum-menu-item-checkmark-height-extra-large:14px;
-
- --spectrum-menu-item-checkmark-width-small:10px;
- --spectrum-menu-item-checkmark-width-medium:10px;
- --spectrum-menu-item-checkmark-width-large:12px;
- --spectrum-menu-item-checkmark-width-extra-large:14px;
-
- --spectrum-rating-icon-spacing:var(--spectrum-spacing-75);
-
- --spectrum-button-top-to-text-small:5px;
- --spectrum-button-bottom-to-text-small:4px;
- --spectrum-button-top-to-text-medium:7px;
- --spectrum-button-bottom-to-text-medium:8px;
- --spectrum-button-top-to-text-large:10px;
- --spectrum-button-bottom-to-text-large:10px;
- --spectrum-button-top-to-text-extra-large:13px;
- --spectrum-button-bottom-to-text-extra-large:13px;
-
- --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100);
- --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100);
-
- --spectrum-alert-dialog-padding:var(--spectrum-spacing-500);
- --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700);
-
- --spectrum-coach-indicator-gap:6px;
- --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300);
- --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100);
-
- --spectrum-coachmark-buttongroup-display:flex;
- --spectrum-coachmark-buttongroup-mobile-display:none;
- --spectrum-coachmark-menu-display:inline-flex;
- --spectrum-coachmark-menu-mobile-display:none;
- --spectrum-well-padding:var(--spectrum-spacing-300);
- --spectrum-well-margin-top:var(--spectrum-spacing-75);
- --spectrum-well-min-width:240px;
- --spectrum-well-border-radius:var(--spectrum-spacing-75);
- --spectrum-workflow-icon-size-xxl:32px;
- --spectrum-workflow-icon-size-xxs:12px;
-
- --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300);
- --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200);
- --spectrum-treeview-item-indentation-large:20px;
- --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400);
- --spectrum-treeview-indicator-inset-block-start:5px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px;
-
- --spectrum-dialog-confirm-entry-animation-distance:20px;
- --spectrum-dialog-confirm-hero-height:128px;
- --spectrum-dialog-confirm-border-radius:4px;
- --spectrum-dialog-confirm-title-text-size:18px;
- --spectrum-dialog-confirm-description-text-size:14px;
- --spectrum-dialog-confirm-padding-grid:40px;
-
- --spectrum-datepicker-initial-width:128px;
- --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200);
- --spectrum-datepicker-dash-line-height:24px;
- --spectrum-datepicker-width-quiet-first:72px;
- --spectrum-datepicker-width-quiet-second:16px;
- --spectrum-datepicker-datetime-width-first:36px;
- --spectrum-datepicker-invalid-icon-to-button:8px;
- --spectrum-datepicker-invalid-icon-to-button-quiet:7px;
- --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400);
-
- --spectrum-pagination-textfield-width:var(--spectrum-spacing-700);
- --spectrum-pagination-item-inline-spacing:5px;
-
- --spectrum-dial-border-radius:16px;
- --spectrum-dial-handle-position:8px;
- --spectrum-dial-handle-block-margin:16px;
- --spectrum-dial-handle-inline-margin:16px;
- --spectrum-dial-controls-margin:8px;
- --spectrum-dial-label-gap-y:5px;
- --spectrum-dial-label-container-top-to-text:4px;
-
- --spectrum-assetcard-focus-ring-border-radius:8px;
- --spectrum-assetcard-selectionindicator-margin:12px;
- --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs);
- --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs);
- --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s);
-
- --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);
-
- --spectrum-ui-icon-medium-display:block;
- --spectrum-ui-icon-large-display:none;
-}
diff --git a/tokens/dist/css/spectrum/custom-vars.css b/tokens/dist/css/spectrum/custom-vars.css
deleted file mode 100644
index 6481b08241c..00000000000
--- a/tokens/dist/css/spectrum/custom-vars.css
+++ /dev/null
@@ -1,59 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum{
- --system:spectrum;
- --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1);
- --spectrum-animation-duration-0:0ms;
- --spectrum-animation-duration-100:130ms;
- --spectrum-animation-duration-200:160ms;
- --spectrum-animation-duration-300:190ms;
- --spectrum-animation-duration-400:220ms;
- --spectrum-animation-duration-500:250ms;
- --spectrum-animation-duration-600:300ms;
- --spectrum-animation-duration-700:350ms;
- --spectrum-animation-duration-800:400ms;
- --spectrum-animation-duration-900:450ms;
- --spectrum-animation-duration-1000:500ms;
- --spectrum-animation-duration-2000:1000ms;
- --spectrum-animation-duration-4000:2000ms;
- --spectrum-animation-duration-6000:3000ms;
- --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1);
- --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1);
- --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1);
- --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1);
-
- --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack);
-
- --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
- --spectrum-serif-font:var(--spectrum-serif-font-family-stack);
-
- --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace;
-
- --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-
- --spectrum-font-family:var(--spectrum-sans-font-family-stack);
- --spectrum-font-style:var(--spectrum-default-font-style);
- --spectrum-font-size:var(--spectrum-font-size-100);
-
- --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
- --spectrum-cjk-font:var(--spectrum-code-font-family-stack);
- --spectrum-docs-static-white-background-color-rgb:15, 121, 125;
- --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb));
- --spectrum-docs-static-black-background-color-rgb:181, 209, 211;
- --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb));
-
- --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white);
-}
diff --git a/tokens/dist/css/spectrum/dark-vars.css b/tokens/dist/css/spectrum/dark-vars.css
deleted file mode 100644
index c93a8ad02c3..00000000000
--- a/tokens/dist/css/spectrum/dark-vars.css
+++ /dev/null
@@ -1,76 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--dark{
- --spectrum-menu-item-background-color-default-rgb:255, 255, 255;
- --spectrum-menu-item-background-color-default-opacity:0;
- --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
- --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200);
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb);
- --spectrum-dropindicator-color:var(--spectrum-blue-700);
-
- --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15);
- --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07);
- --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200);
- --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07);
- --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-500-rgb);
-
- --spectrum-badge-label-icon-color-primary:var(--spectrum-black);
-
- --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700);
- --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50);
-
- --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07);
- --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15);
-
- --spectrum-logic-button-and-background-color:var(--spectrum-blue-800);
- --spectrum-logic-button-and-border-color:var(--spectrum-blue-800);
- --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000);
- --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000);
-
- --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700);
- --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700);
- --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800);
- --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700);
-
- --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15);
- --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-swatch-border-color-rgb:255, 255, 255;
-
- --spectrum-swatch-border-color-opacity:0.51;
-
- --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-border-color-light-rgb:255, 255, 255;
- --spectrum-swatch-border-color-light-opacity:0.2;
- --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
diff --git a/tokens/dist/css/spectrum/darkest-vars.css b/tokens/dist/css/spectrum/darkest-vars.css
deleted file mode 100644
index 810c81900d0..00000000000
--- a/tokens/dist/css/spectrum/darkest-vars.css
+++ /dev/null
@@ -1,76 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--darkest{
- --spectrum-menu-item-background-color-default-rgb:255, 255, 255;
- --spectrum-menu-item-background-color-default-opacity:0;
- --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
- --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200);
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb);
- --spectrum-dropindicator-color:var(--spectrum-blue-700);
-
- --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2);
- --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.08);
- --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-down:rgba(var(--spectrum-white-rgb), 0.15);
- --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08);
- --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-600-rgb);
-
- --spectrum-badge-label-icon-color-primary:var(--spectrum-black);
-
- --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700);
- --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50);
-
- --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.08);
- --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2);
-
- --spectrum-logic-button-and-background-color:var(--spectrum-blue-800);
- --spectrum-logic-button-and-border-color:var(--spectrum-blue-800);
- --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000);
- --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000);
-
- --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700);
- --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700);
- --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800);
- --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700);
-
- --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2);
- --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-swatch-border-color-rgb:255, 255, 255;
-
- --spectrum-swatch-border-color-opacity:0.51;
-
- --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-border-color-light-rgb:255, 255, 255;
- --spectrum-swatch-border-color-light-opacity:0.2;
- --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
diff --git a/tokens/dist/css/spectrum/global-vars.css b/tokens/dist/css/spectrum/global-vars.css
deleted file mode 100644
index d5e7de474ed..00000000000
--- a/tokens/dist/css/spectrum/global-vars.css
+++ /dev/null
@@ -1,98 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum{
- --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-700);
- --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-800);
- --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900);
- --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-800);
- --spectrum-slider-track-thickness:2px;
- --spectrum-slider-handle-gap:4px;
- --spectrum-picker-border-width:var(--spectrum-border-width-100);
- --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px;
- --spectrum-in-field-button-edge-to-fill:0px;
- --spectrum-in-field-button-stacked-inner-edge-to-fill:0px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
- --spectrum-corner-radius-75:2px;
- --spectrum-drop-shadow-x:0px;
- --spectrum-border-width-100:1px;
- --spectrum-accent-color-100:var(--spectrum-blue-100);
- --spectrum-accent-color-200:var(--spectrum-blue-200);
- --spectrum-accent-color-300:var(--spectrum-blue-300);
- --spectrum-accent-color-400:var(--spectrum-blue-400);
- --spectrum-accent-color-500:var(--spectrum-blue-500);
- --spectrum-accent-color-600:var(--spectrum-blue-600);
- --spectrum-accent-color-700:var(--spectrum-blue-700);
- --spectrum-accent-color-800:var(--spectrum-blue-800);
- --spectrum-accent-color-900:var(--spectrum-blue-900);
- --spectrum-accent-color-1000:var(--spectrum-blue-1000);
- --spectrum-accent-color-1100:var(--spectrum-blue-1100);
- --spectrum-accent-color-1200:var(--spectrum-blue-1200);
- --spectrum-accent-color-1300:var(--spectrum-blue-1300);
- --spectrum-accent-color-1400:var(--spectrum-blue-1400);
- --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight);
- --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight);
- --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight);
- --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
- --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
- --system:spectrum;
- --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1);
- --spectrum-animation-duration-0:0ms;
- --spectrum-animation-duration-100:130ms;
- --spectrum-animation-duration-200:160ms;
- --spectrum-animation-duration-300:190ms;
- --spectrum-animation-duration-400:220ms;
- --spectrum-animation-duration-500:250ms;
- --spectrum-animation-duration-600:300ms;
- --spectrum-animation-duration-700:350ms;
- --spectrum-animation-duration-800:400ms;
- --spectrum-animation-duration-900:450ms;
- --spectrum-animation-duration-1000:500ms;
- --spectrum-animation-duration-2000:1000ms;
- --spectrum-animation-duration-4000:2000ms;
- --spectrum-animation-duration-6000:3000ms;
- --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1);
- --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1);
- --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1);
- --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1);
-
- --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack);
-
- --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
- --spectrum-serif-font:var(--spectrum-serif-font-family-stack);
-
- --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace;
-
- --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-
- --spectrum-font-family:var(--spectrum-sans-font-family-stack);
- --spectrum-font-style:var(--spectrum-default-font-style);
- --spectrum-font-size:var(--spectrum-font-size-100);
-
- --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
- --spectrum-cjk-font:var(--spectrum-code-font-family-stack);
- --spectrum-docs-static-white-background-color-rgb:15, 121, 125;
- --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb));
- --spectrum-docs-static-black-background-color-rgb:181, 209, 211;
- --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb));
-
- --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white);
-}
diff --git a/tokens/dist/css/spectrum/index.css b/tokens/dist/css/spectrum/index.css
deleted file mode 100644
index 491fd946d45..00000000000
--- a/tokens/dist/css/spectrum/index.css
+++ /dev/null
@@ -1,603 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--dark{
- --spectrum-menu-item-background-color-default-rgb:255, 255, 255;
- --spectrum-menu-item-background-color-default-opacity:0;
- --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
- --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200);
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb);
- --spectrum-dropindicator-color:var(--spectrum-blue-700);
-
- --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15);
- --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07);
- --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200);
- --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07);
- --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-500-rgb);
-
- --spectrum-badge-label-icon-color-primary:var(--spectrum-black);
-
- --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700);
- --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50);
-
- --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07);
- --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15);
-
- --spectrum-logic-button-and-background-color:var(--spectrum-blue-800);
- --spectrum-logic-button-and-border-color:var(--spectrum-blue-800);
- --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000);
- --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000);
-
- --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700);
- --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700);
- --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800);
- --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700);
-
- --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15);
- --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-swatch-border-color-rgb:255, 255, 255;
-
- --spectrum-swatch-border-color-opacity:0.51;
-
- --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-border-color-light-rgb:255, 255, 255;
- --spectrum-swatch-border-color-light-opacity:0.2;
- --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-
-.spectrum--darkest{
- --spectrum-menu-item-background-color-default-rgb:255, 255, 255;
- --spectrum-menu-item-background-color-default-opacity:0;
- --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
- --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200);
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb);
- --spectrum-dropindicator-color:var(--spectrum-blue-700);
-
- --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2);
- --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.08);
- --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-down:rgba(var(--spectrum-white-rgb), 0.15);
- --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08);
- --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-600-rgb);
-
- --spectrum-badge-label-icon-color-primary:var(--spectrum-black);
-
- --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700);
- --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50);
-
- --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.08);
- --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2);
-
- --spectrum-logic-button-and-background-color:var(--spectrum-blue-800);
- --spectrum-logic-button-and-border-color:var(--spectrum-blue-800);
- --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000);
- --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000);
-
- --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700);
- --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700);
- --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800);
- --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700);
-
- --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2);
- --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700);
-
- --spectrum-swatch-border-color-rgb:255, 255, 255;
-
- --spectrum-swatch-border-color-opacity:0.51;
-
- --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-border-color-light-rgb:255, 255, 255;
- --spectrum-swatch-border-color-light-opacity:0.2;
- --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-
-.spectrum{
- --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-700);
- --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-800);
- --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900);
- --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-800);
- --spectrum-slider-track-thickness:2px;
- --spectrum-slider-handle-gap:4px;
- --spectrum-picker-border-width:var(--spectrum-border-width-100);
- --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px;
- --spectrum-in-field-button-edge-to-fill:0px;
- --spectrum-in-field-button-stacked-inner-edge-to-fill:0px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
- --spectrum-corner-radius-75:2px;
- --spectrum-drop-shadow-x:0px;
- --spectrum-border-width-100:1px;
- --spectrum-accent-color-100:var(--spectrum-blue-100);
- --spectrum-accent-color-200:var(--spectrum-blue-200);
- --spectrum-accent-color-300:var(--spectrum-blue-300);
- --spectrum-accent-color-400:var(--spectrum-blue-400);
- --spectrum-accent-color-500:var(--spectrum-blue-500);
- --spectrum-accent-color-600:var(--spectrum-blue-600);
- --spectrum-accent-color-700:var(--spectrum-blue-700);
- --spectrum-accent-color-800:var(--spectrum-blue-800);
- --spectrum-accent-color-900:var(--spectrum-blue-900);
- --spectrum-accent-color-1000:var(--spectrum-blue-1000);
- --spectrum-accent-color-1100:var(--spectrum-blue-1100);
- --spectrum-accent-color-1200:var(--spectrum-blue-1200);
- --spectrum-accent-color-1300:var(--spectrum-blue-1300);
- --spectrum-accent-color-1400:var(--spectrum-blue-1400);
- --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight);
- --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight);
- --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight);
- --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
- --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
- --system:spectrum;
- --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1);
- --spectrum-animation-duration-0:0ms;
- --spectrum-animation-duration-100:130ms;
- --spectrum-animation-duration-200:160ms;
- --spectrum-animation-duration-300:190ms;
- --spectrum-animation-duration-400:220ms;
- --spectrum-animation-duration-500:250ms;
- --spectrum-animation-duration-600:300ms;
- --spectrum-animation-duration-700:350ms;
- --spectrum-animation-duration-800:400ms;
- --spectrum-animation-duration-900:450ms;
- --spectrum-animation-duration-1000:500ms;
- --spectrum-animation-duration-2000:1000ms;
- --spectrum-animation-duration-4000:2000ms;
- --spectrum-animation-duration-6000:3000ms;
- --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1);
- --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1);
- --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1);
- --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1);
-
- --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack);
-
- --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
- --spectrum-serif-font:var(--spectrum-serif-font-family-stack);
-
- --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace;
-
- --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-
- --spectrum-font-family:var(--spectrum-sans-font-family-stack);
- --spectrum-font-style:var(--spectrum-default-font-style);
- --spectrum-font-size:var(--spectrum-font-size-100);
-
- --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
- --spectrum-cjk-font:var(--spectrum-code-font-family-stack);
- --spectrum-docs-static-white-background-color-rgb:15, 121, 125;
- --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb));
- --spectrum-docs-static-black-background-color-rgb:181, 209, 211;
- --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb));
-
- --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white);
-}
-
-.spectrum--large{
- --spectrum-checkbox-control-size-small:16px;
- --spectrum-checkbox-control-size-medium:18px;
- --spectrum-checkbox-control-size-large:20px;
- --spectrum-checkbox-control-size-extra-large:22px;
- --spectrum-checkbox-top-to-control-small:7px;
- --spectrum-checkbox-top-to-control-medium:11px;
- --spectrum-checkbox-top-to-control-large:15px;
- --spectrum-checkbox-top-to-control-extra-large:19px;
- --spectrum-switch-control-width-small:32px;
- --spectrum-switch-control-width-medium:36px;
- --spectrum-switch-control-width-large:41px;
- --spectrum-switch-control-width-extra-large:46px;
- --spectrum-switch-control-height-small:16px;
- --spectrum-switch-control-height-medium:18px;
- --spectrum-switch-control-height-large:20px;
- --spectrum-switch-control-height-extra-large:22px;
- --spectrum-switch-top-to-control-small:7px;
- --spectrum-switch-top-to-control-medium:11px;
- --spectrum-switch-top-to-control-large:15px;
- --spectrum-switch-top-to-control-extra-large:19px;
- --spectrum-radio-button-control-size-small:16px;
- --spectrum-radio-button-control-size-medium:18px;
- --spectrum-radio-button-control-size-large:20px;
- --spectrum-radio-button-control-size-extra-large:22px;
- --spectrum-radio-button-top-to-control-small:7px;
- --spectrum-radio-button-top-to-control-medium:11px;
- --spectrum-radio-button-top-to-control-large:15px;
- --spectrum-radio-button-top-to-control-extra-large:19px;
- --spectrum-slider-control-height-small:18px;
- --spectrum-slider-control-height-medium:20px;
- --spectrum-slider-control-height-large:22px;
- --spectrum-slider-control-height-extra-large:26px;
- --spectrum-slider-handle-size-small:18px;
- --spectrum-slider-handle-size-medium:20px;
- --spectrum-slider-handle-size-large:22px;
- --spectrum-slider-handle-size-extra-large:26px;
- --spectrum-slider-handle-border-width-down-small:7px;
- --spectrum-slider-handle-border-width-down-medium:8px;
- --spectrum-slider-handle-border-width-down-large:9px;
- --spectrum-slider-handle-border-width-down-extra-large:11px;
- --spectrum-slider-bottom-to-handle-small:6px;
- --spectrum-slider-bottom-to-handle-medium:10px;
- --spectrum-slider-bottom-to-handle-large:14px;
- --spectrum-slider-bottom-to-handle-extra-large:17px;
- --spectrum-corner-radius-100:5px;
- --spectrum-corner-radius-200:10px;
- --spectrum-drop-shadow-y:2px;
- --spectrum-drop-shadow-blur:6px;
- --spectrum-slider-tick-mark-height:13px;
- --spectrum-slider-ramp-track-height:20px;
-
- --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
- --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
- --spectrum-colorwheel-colorarea-container-size:182px;
-
- --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary);
-
- --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px;
-
- --spectrum-menu-item-checkmark-height-small:12px;
- --spectrum-menu-item-checkmark-height-medium:14px;
- --spectrum-menu-item-checkmark-height-large:16px;
- --spectrum-menu-item-checkmark-height-extra-large:16px;
-
- --spectrum-menu-item-checkmark-width-small:12px;
- --spectrum-menu-item-checkmark-width-medium:14px;
- --spectrum-menu-item-checkmark-width-large:16px;
- --spectrum-menu-item-checkmark-width-extra-large:16px;
-
- --spectrum-rating-icon-spacing:var(--spectrum-spacing-100);
-
- --spectrum-button-top-to-text-small:6px;
- --spectrum-button-bottom-to-text-small:5px;
- --spectrum-button-top-to-text-medium:9px;
- --spectrum-button-bottom-to-text-medium:10px;
- --spectrum-button-top-to-text-large:12px;
- --spectrum-button-bottom-to-text-large:13px;
- --spectrum-button-top-to-text-extra-large:16px;
- --spectrum-button-bottom-to-text-extra-large:17px;
-
- --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200);
- --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200);
-
- --spectrum-alert-dialog-padding:var(--spectrum-spacing-400);
- --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600);
-
- --spectrum-coach-indicator-gap:8px;
- --spectrum-coach-indicator-ring-diameter:20px;
- --spectrum-coach-indicator-quiet-ring-diameter:10px;
-
- --spectrum-coachmark-buttongroup-display:none;
- --spectrum-coachmark-buttongroup-mobile-display:flex;
- --spectrum-coachmark-menu-display:none;
- --spectrum-coachmark-menu-mobile-display:inline-flex;
-
- --spectrum-well-padding:20px;
- --spectrum-well-margin-top:5px;
- --spectrum-well-min-width:300px;
- --spectrum-well-border-radius:5px;
- --spectrum-workflow-icon-size-xxl:40px;
- --spectrum-workflow-icon-size-xxs:15px;
-
- --spectrum-treeview-item-indentation-medium:20px;
- --spectrum-treeview-item-indentation-small:15px;
- --spectrum-treeview-item-indentation-large:25px;
- --spectrum-treeview-item-indentation-extra-large:30px;
- --spectrum-treeview-indicator-inset-block-start:6px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px;
-
- --spectrum-dialog-confirm-entry-animation-distance:25px;
- --spectrum-dialog-confirm-hero-height:160px;
- --spectrum-dialog-confirm-border-radius:5px;
- --spectrum-dialog-confirm-title-text-size:19px;
- --spectrum-dialog-confirm-description-text-size:15px;
- --spectrum-dialog-confirm-padding-grid:24px;
-
- --spectrum-datepicker-initial-width:160px;
- --spectrum-datepicker-generic-padding:15px;
- --spectrum-datepicker-dash-line-height:30px;
- --spectrum-datepicker-width-quiet-first:90px;
- --spectrum-datepicker-width-quiet-second:20px;
- --spectrum-datepicker-datetime-width-first:45px;
- --spectrum-datepicker-invalid-icon-to-button:10px;
- --spectrum-datepicker-invalid-icon-to-button-quiet:9px;
- --spectrum-datepicker-input-datetime-width:30px;
-
- --spectrum-pagination-textfield-width:60px;
- --spectrum-pagination-item-inline-spacing:6px;
-
- --spectrum-dial-border-radius:20px;
- --spectrum-dial-handle-position:10px;
- --spectrum-dial-handle-block-margin:20px;
- --spectrum-dial-handle-inline-margin:20px;
- --spectrum-dial-controls-margin:10px;
- --spectrum-dial-label-gap-y:6px;
- --spectrum-dial-label-container-top-to-text:5px;
-
- --spectrum-assetcard-focus-ring-border-radius:9px;
- --spectrum-assetcard-selectionindicator-margin:15px;
- --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);
-
- --spectrum-tooltip-animation-distance:5px;
-
- --spectrum-ui-icon-medium-display:none;
- --spectrum-ui-icon-large-display:block;
-}
-
-.spectrum--light,.spectrum--lightest{
- --spectrum-menu-item-background-color-default-rgb:0, 0, 0;
- --spectrum-menu-item-background-color-default-opacity:0;
- --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
- --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-black-200);
- --spectrum-menu-item-background-color-down:var(--spectrum-transparent-black-200);
- --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-black-200);
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb);
- --spectrum-dropindicator-color:var(--spectrum-blue-800);
-
- --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1);
- --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06);
- --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200);
- --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06);
- --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800);
-
- --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-900-rgb);
-
- --spectrum-badge-label-icon-color-primary:var(--spectrum-white);
-
- --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800);
- --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50);
-
- --spectrum-well-border-color:var(--spectrum-black);
-
- --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800);
-
- --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06);
- --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1);
-
- --spectrum-logic-button-and-background-color:var(--spectrum-blue-900);
- --spectrum-logic-button-and-border-color:var(--spectrum-blue-900);
- --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100);
- --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100);
-
- --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900);
- --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100);
- --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900);
- --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800);
-
- --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1);
- --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800);
-
- --spectrum-swatch-border-color-rgb:0, 0, 0;
-
- --spectrum-swatch-border-color-opacity:0.51;
-
- --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-border-color-light-rgb:0, 0, 0;
- --spectrum-swatch-border-color-light-opacity:0.2;
- --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-
-.spectrum--medium{
- --spectrum-checkbox-control-size-small:12px;
- --spectrum-checkbox-control-size-medium:14px;
- --spectrum-checkbox-control-size-large:16px;
- --spectrum-checkbox-control-size-extra-large:18px;
- --spectrum-checkbox-top-to-control-small:6px;
- --spectrum-checkbox-top-to-control-medium:9px;
- --spectrum-checkbox-top-to-control-large:12px;
- --spectrum-checkbox-top-to-control-extra-large:15px;
- --spectrum-switch-control-width-small:23px;
- --spectrum-switch-control-width-medium:26px;
- --spectrum-switch-control-width-large:29px;
- --spectrum-switch-control-width-extra-large:33px;
- --spectrum-switch-control-height-small:12px;
- --spectrum-switch-control-height-medium:14px;
- --spectrum-switch-control-height-large:16px;
- --spectrum-switch-control-height-extra-large:18px;
- --spectrum-switch-top-to-control-small:6px;
- --spectrum-switch-top-to-control-medium:9px;
- --spectrum-switch-top-to-control-large:12px;
- --spectrum-switch-top-to-control-extra-large:15px;
- --spectrum-radio-button-control-size-small:12px;
- --spectrum-radio-button-control-size-medium:14px;
- --spectrum-radio-button-control-size-large:16px;
- --spectrum-radio-button-control-size-extra-large:18px;
- --spectrum-radio-button-top-to-control-small:6px;
- --spectrum-radio-button-top-to-control-medium:9px;
- --spectrum-radio-button-top-to-control-large:12px;
- --spectrum-radio-button-top-to-control-extra-large:15px;
- --spectrum-slider-control-height-small:14px;
- --spectrum-slider-control-height-medium:16px;
- --spectrum-slider-control-height-large:18px;
- --spectrum-slider-control-height-extra-large:20px;
- --spectrum-slider-handle-size-small:14px;
- --spectrum-slider-handle-size-medium:16px;
- --spectrum-slider-handle-size-large:18px;
- --spectrum-slider-handle-size-extra-large:20px;
- --spectrum-slider-handle-border-width-down-small:5px;
- --spectrum-slider-handle-border-width-down-medium:6px;
- --spectrum-slider-handle-border-width-down-large:7px;
- --spectrum-slider-handle-border-width-down-extra-large:8px;
- --spectrum-slider-bottom-to-handle-small:5px;
- --spectrum-slider-bottom-to-handle-medium:8px;
- --spectrum-slider-bottom-to-handle-large:11px;
- --spectrum-slider-bottom-to-handle-extra-large:14px;
- --spectrum-corner-radius-100:4px;
- --spectrum-corner-radius-200:8px;
- --spectrum-drop-shadow-y:1px;
- --spectrum-drop-shadow-blur:4px;
- --spectrum-slider-tick-mark-height:10px;
- --spectrum-slider-ramp-track-height:16px;
-
- --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
- --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
- --spectrum-colorwheel-colorarea-container-size:144px;
-
- --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary);
-
- --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px;
-
- --spectrum-menu-item-checkmark-height-small:10px;
- --spectrum-menu-item-checkmark-height-medium:10px;
- --spectrum-menu-item-checkmark-height-large:12px;
- --spectrum-menu-item-checkmark-height-extra-large:14px;
-
- --spectrum-menu-item-checkmark-width-small:10px;
- --spectrum-menu-item-checkmark-width-medium:10px;
- --spectrum-menu-item-checkmark-width-large:12px;
- --spectrum-menu-item-checkmark-width-extra-large:14px;
-
- --spectrum-rating-icon-spacing:var(--spectrum-spacing-75);
-
- --spectrum-button-top-to-text-small:5px;
- --spectrum-button-bottom-to-text-small:4px;
- --spectrum-button-top-to-text-medium:7px;
- --spectrum-button-bottom-to-text-medium:8px;
- --spectrum-button-top-to-text-large:10px;
- --spectrum-button-bottom-to-text-large:10px;
- --spectrum-button-top-to-text-extra-large:13px;
- --spectrum-button-bottom-to-text-extra-large:13px;
-
- --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100);
- --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100);
-
- --spectrum-alert-dialog-padding:var(--spectrum-spacing-500);
- --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700);
-
- --spectrum-coach-indicator-gap:6px;
- --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300);
- --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100);
-
- --spectrum-coachmark-buttongroup-display:flex;
- --spectrum-coachmark-buttongroup-mobile-display:none;
- --spectrum-coachmark-menu-display:inline-flex;
- --spectrum-coachmark-menu-mobile-display:none;
- --spectrum-well-padding:var(--spectrum-spacing-300);
- --spectrum-well-margin-top:var(--spectrum-spacing-75);
- --spectrum-well-min-width:240px;
- --spectrum-well-border-radius:var(--spectrum-spacing-75);
- --spectrum-workflow-icon-size-xxl:32px;
- --spectrum-workflow-icon-size-xxs:12px;
-
- --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300);
- --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200);
- --spectrum-treeview-item-indentation-large:20px;
- --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400);
- --spectrum-treeview-indicator-inset-block-start:5px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px;
-
- --spectrum-dialog-confirm-entry-animation-distance:20px;
- --spectrum-dialog-confirm-hero-height:128px;
- --spectrum-dialog-confirm-border-radius:4px;
- --spectrum-dialog-confirm-title-text-size:18px;
- --spectrum-dialog-confirm-description-text-size:14px;
- --spectrum-dialog-confirm-padding-grid:40px;
-
- --spectrum-datepicker-initial-width:128px;
- --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200);
- --spectrum-datepicker-dash-line-height:24px;
- --spectrum-datepicker-width-quiet-first:72px;
- --spectrum-datepicker-width-quiet-second:16px;
- --spectrum-datepicker-datetime-width-first:36px;
- --spectrum-datepicker-invalid-icon-to-button:8px;
- --spectrum-datepicker-invalid-icon-to-button-quiet:7px;
- --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400);
-
- --spectrum-pagination-textfield-width:var(--spectrum-spacing-700);
- --spectrum-pagination-item-inline-spacing:5px;
-
- --spectrum-dial-border-radius:16px;
- --spectrum-dial-handle-position:8px;
- --spectrum-dial-handle-block-margin:16px;
- --spectrum-dial-handle-inline-margin:16px;
- --spectrum-dial-controls-margin:8px;
- --spectrum-dial-label-gap-y:5px;
- --spectrum-dial-label-container-top-to-text:4px;
-
- --spectrum-assetcard-focus-ring-border-radius:8px;
- --spectrum-assetcard-selectionindicator-margin:12px;
- --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs);
- --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs);
- --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s);
-
- --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);
-
- --spectrum-ui-icon-medium-display:block;
- --spectrum-ui-icon-large-display:none;
-}
diff --git a/tokens/dist/css/spectrum/large-vars.css b/tokens/dist/css/spectrum/large-vars.css
deleted file mode 100644
index 8938d608258..00000000000
--- a/tokens/dist/css/spectrum/large-vars.css
+++ /dev/null
@@ -1,169 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--large{
- --spectrum-checkbox-control-size-small:16px;
- --spectrum-checkbox-control-size-medium:18px;
- --spectrum-checkbox-control-size-large:20px;
- --spectrum-checkbox-control-size-extra-large:22px;
- --spectrum-checkbox-top-to-control-small:7px;
- --spectrum-checkbox-top-to-control-medium:11px;
- --spectrum-checkbox-top-to-control-large:15px;
- --spectrum-checkbox-top-to-control-extra-large:19px;
- --spectrum-switch-control-width-small:32px;
- --spectrum-switch-control-width-medium:36px;
- --spectrum-switch-control-width-large:41px;
- --spectrum-switch-control-width-extra-large:46px;
- --spectrum-switch-control-height-small:16px;
- --spectrum-switch-control-height-medium:18px;
- --spectrum-switch-control-height-large:20px;
- --spectrum-switch-control-height-extra-large:22px;
- --spectrum-switch-top-to-control-small:7px;
- --spectrum-switch-top-to-control-medium:11px;
- --spectrum-switch-top-to-control-large:15px;
- --spectrum-switch-top-to-control-extra-large:19px;
- --spectrum-radio-button-control-size-small:16px;
- --spectrum-radio-button-control-size-medium:18px;
- --spectrum-radio-button-control-size-large:20px;
- --spectrum-radio-button-control-size-extra-large:22px;
- --spectrum-radio-button-top-to-control-small:7px;
- --spectrum-radio-button-top-to-control-medium:11px;
- --spectrum-radio-button-top-to-control-large:15px;
- --spectrum-radio-button-top-to-control-extra-large:19px;
- --spectrum-slider-control-height-small:18px;
- --spectrum-slider-control-height-medium:20px;
- --spectrum-slider-control-height-large:22px;
- --spectrum-slider-control-height-extra-large:26px;
- --spectrum-slider-handle-size-small:18px;
- --spectrum-slider-handle-size-medium:20px;
- --spectrum-slider-handle-size-large:22px;
- --spectrum-slider-handle-size-extra-large:26px;
- --spectrum-slider-handle-border-width-down-small:7px;
- --spectrum-slider-handle-border-width-down-medium:8px;
- --spectrum-slider-handle-border-width-down-large:9px;
- --spectrum-slider-handle-border-width-down-extra-large:11px;
- --spectrum-slider-bottom-to-handle-small:6px;
- --spectrum-slider-bottom-to-handle-medium:10px;
- --spectrum-slider-bottom-to-handle-large:14px;
- --spectrum-slider-bottom-to-handle-extra-large:17px;
- --spectrum-corner-radius-100:5px;
- --spectrum-corner-radius-200:10px;
- --spectrum-drop-shadow-y:2px;
- --spectrum-drop-shadow-blur:6px;
- --spectrum-slider-tick-mark-height:13px;
- --spectrum-slider-ramp-track-height:20px;
-
- --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
- --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
- --spectrum-colorwheel-colorarea-container-size:182px;
-
- --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary);
-
- --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px;
-
- --spectrum-menu-item-checkmark-height-small:12px;
- --spectrum-menu-item-checkmark-height-medium:14px;
- --spectrum-menu-item-checkmark-height-large:16px;
- --spectrum-menu-item-checkmark-height-extra-large:16px;
-
- --spectrum-menu-item-checkmark-width-small:12px;
- --spectrum-menu-item-checkmark-width-medium:14px;
- --spectrum-menu-item-checkmark-width-large:16px;
- --spectrum-menu-item-checkmark-width-extra-large:16px;
-
- --spectrum-rating-icon-spacing:var(--spectrum-spacing-100);
-
- --spectrum-button-top-to-text-small:6px;
- --spectrum-button-bottom-to-text-small:5px;
- --spectrum-button-top-to-text-medium:9px;
- --spectrum-button-bottom-to-text-medium:10px;
- --spectrum-button-top-to-text-large:12px;
- --spectrum-button-bottom-to-text-large:13px;
- --spectrum-button-top-to-text-extra-large:16px;
- --spectrum-button-bottom-to-text-extra-large:17px;
-
- --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200);
- --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200);
-
- --spectrum-alert-dialog-padding:var(--spectrum-spacing-400);
- --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600);
-
- --spectrum-coach-indicator-gap:8px;
- --spectrum-coach-indicator-ring-diameter:20px;
- --spectrum-coach-indicator-quiet-ring-diameter:10px;
-
- --spectrum-coachmark-buttongroup-display:none;
- --spectrum-coachmark-buttongroup-mobile-display:flex;
- --spectrum-coachmark-menu-display:none;
- --spectrum-coachmark-menu-mobile-display:inline-flex;
-
- --spectrum-well-padding:20px;
- --spectrum-well-margin-top:5px;
- --spectrum-well-min-width:300px;
- --spectrum-well-border-radius:5px;
- --spectrum-workflow-icon-size-xxl:40px;
- --spectrum-workflow-icon-size-xxs:15px;
-
- --spectrum-treeview-item-indentation-medium:20px;
- --spectrum-treeview-item-indentation-small:15px;
- --spectrum-treeview-item-indentation-large:25px;
- --spectrum-treeview-item-indentation-extra-large:30px;
- --spectrum-treeview-indicator-inset-block-start:6px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px;
-
- --spectrum-dialog-confirm-entry-animation-distance:25px;
- --spectrum-dialog-confirm-hero-height:160px;
- --spectrum-dialog-confirm-border-radius:5px;
- --spectrum-dialog-confirm-title-text-size:19px;
- --spectrum-dialog-confirm-description-text-size:15px;
- --spectrum-dialog-confirm-padding-grid:24px;
-
- --spectrum-datepicker-initial-width:160px;
- --spectrum-datepicker-generic-padding:15px;
- --spectrum-datepicker-dash-line-height:30px;
- --spectrum-datepicker-width-quiet-first:90px;
- --spectrum-datepicker-width-quiet-second:20px;
- --spectrum-datepicker-datetime-width-first:45px;
- --spectrum-datepicker-invalid-icon-to-button:10px;
- --spectrum-datepicker-invalid-icon-to-button-quiet:9px;
- --spectrum-datepicker-input-datetime-width:30px;
-
- --spectrum-pagination-textfield-width:60px;
- --spectrum-pagination-item-inline-spacing:6px;
-
- --spectrum-dial-border-radius:20px;
- --spectrum-dial-handle-position:10px;
- --spectrum-dial-handle-block-margin:20px;
- --spectrum-dial-handle-inline-margin:20px;
- --spectrum-dial-controls-margin:10px;
- --spectrum-dial-label-gap-y:6px;
- --spectrum-dial-label-container-top-to-text:5px;
-
- --spectrum-assetcard-focus-ring-border-radius:9px;
- --spectrum-assetcard-selectionindicator-margin:15px;
- --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);
-
- --spectrum-tooltip-animation-distance:5px;
-
- --spectrum-ui-icon-medium-display:none;
- --spectrum-ui-icon-large-display:block;
-}
diff --git a/tokens/dist/css/spectrum/light-vars.css b/tokens/dist/css/spectrum/light-vars.css
deleted file mode 100644
index 26da0b8bd9a..00000000000
--- a/tokens/dist/css/spectrum/light-vars.css
+++ /dev/null
@@ -1,76 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--light,.spectrum--lightest{
- --spectrum-menu-item-background-color-default-rgb:0, 0, 0;
- --spectrum-menu-item-background-color-default-opacity:0;
- --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
- --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-black-200);
- --spectrum-menu-item-background-color-down:var(--spectrum-transparent-black-200);
- --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-black-200);
- --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb);
- --spectrum-dropindicator-color:var(--spectrum-blue-800);
-
- --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1);
- --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06);
- --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200);
- --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06);
- --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800);
-
- --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-900-rgb);
-
- --spectrum-badge-label-icon-color-primary:var(--spectrum-white);
-
- --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800);
- --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50);
-
- --spectrum-well-border-color:var(--spectrum-black);
-
- --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800);
-
- --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06);
- --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1);
-
- --spectrum-logic-button-and-background-color:var(--spectrum-blue-900);
- --spectrum-logic-button-and-border-color:var(--spectrum-blue-900);
- --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100);
- --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100);
-
- --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900);
- --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100);
- --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100);
-
- --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900);
- --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900);
- --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000);
- --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900);
- --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800);
-
- --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1);
- --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800);
-
- --spectrum-swatch-border-color-rgb:0, 0, 0;
-
- --spectrum-swatch-border-color-opacity:0.51;
-
- --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-border-color-light-rgb:0, 0, 0;
- --spectrum-swatch-border-color-light-opacity:0.2;
- --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
diff --git a/tokens/dist/css/spectrum/medium-vars.css b/tokens/dist/css/spectrum/medium-vars.css
deleted file mode 100644
index 4f5e99009c8..00000000000
--- a/tokens/dist/css/spectrum/medium-vars.css
+++ /dev/null
@@ -1,168 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--medium{
- --spectrum-checkbox-control-size-small:12px;
- --spectrum-checkbox-control-size-medium:14px;
- --spectrum-checkbox-control-size-large:16px;
- --spectrum-checkbox-control-size-extra-large:18px;
- --spectrum-checkbox-top-to-control-small:6px;
- --spectrum-checkbox-top-to-control-medium:9px;
- --spectrum-checkbox-top-to-control-large:12px;
- --spectrum-checkbox-top-to-control-extra-large:15px;
- --spectrum-switch-control-width-small:23px;
- --spectrum-switch-control-width-medium:26px;
- --spectrum-switch-control-width-large:29px;
- --spectrum-switch-control-width-extra-large:33px;
- --spectrum-switch-control-height-small:12px;
- --spectrum-switch-control-height-medium:14px;
- --spectrum-switch-control-height-large:16px;
- --spectrum-switch-control-height-extra-large:18px;
- --spectrum-switch-top-to-control-small:6px;
- --spectrum-switch-top-to-control-medium:9px;
- --spectrum-switch-top-to-control-large:12px;
- --spectrum-switch-top-to-control-extra-large:15px;
- --spectrum-radio-button-control-size-small:12px;
- --spectrum-radio-button-control-size-medium:14px;
- --spectrum-radio-button-control-size-large:16px;
- --spectrum-radio-button-control-size-extra-large:18px;
- --spectrum-radio-button-top-to-control-small:6px;
- --spectrum-radio-button-top-to-control-medium:9px;
- --spectrum-radio-button-top-to-control-large:12px;
- --spectrum-radio-button-top-to-control-extra-large:15px;
- --spectrum-slider-control-height-small:14px;
- --spectrum-slider-control-height-medium:16px;
- --spectrum-slider-control-height-large:18px;
- --spectrum-slider-control-height-extra-large:20px;
- --spectrum-slider-handle-size-small:14px;
- --spectrum-slider-handle-size-medium:16px;
- --spectrum-slider-handle-size-large:18px;
- --spectrum-slider-handle-size-extra-large:20px;
- --spectrum-slider-handle-border-width-down-small:5px;
- --spectrum-slider-handle-border-width-down-medium:6px;
- --spectrum-slider-handle-border-width-down-large:7px;
- --spectrum-slider-handle-border-width-down-extra-large:8px;
- --spectrum-slider-bottom-to-handle-small:5px;
- --spectrum-slider-bottom-to-handle-medium:8px;
- --spectrum-slider-bottom-to-handle-large:11px;
- --spectrum-slider-bottom-to-handle-extra-large:14px;
- --spectrum-corner-radius-100:4px;
- --spectrum-corner-radius-200:8px;
- --spectrum-drop-shadow-y:1px;
- --spectrum-drop-shadow-blur:4px;
- --spectrum-slider-tick-mark-height:10px;
- --spectrum-slider-ramp-track-height:16px;
-
- --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
- --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
- --spectrum-colorwheel-colorarea-container-size:144px;
-
- --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary);
-
- --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px;
-
- --spectrum-menu-item-checkmark-height-small:10px;
- --spectrum-menu-item-checkmark-height-medium:10px;
- --spectrum-menu-item-checkmark-height-large:12px;
- --spectrum-menu-item-checkmark-height-extra-large:14px;
-
- --spectrum-menu-item-checkmark-width-small:10px;
- --spectrum-menu-item-checkmark-width-medium:10px;
- --spectrum-menu-item-checkmark-width-large:12px;
- --spectrum-menu-item-checkmark-width-extra-large:14px;
-
- --spectrum-rating-icon-spacing:var(--spectrum-spacing-75);
-
- --spectrum-button-top-to-text-small:5px;
- --spectrum-button-bottom-to-text-small:4px;
- --spectrum-button-top-to-text-medium:7px;
- --spectrum-button-bottom-to-text-medium:8px;
- --spectrum-button-top-to-text-large:10px;
- --spectrum-button-bottom-to-text-large:10px;
- --spectrum-button-top-to-text-extra-large:13px;
- --spectrum-button-bottom-to-text-extra-large:13px;
-
- --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100);
- --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100);
-
- --spectrum-alert-dialog-padding:var(--spectrum-spacing-500);
- --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700);
-
- --spectrum-coach-indicator-gap:6px;
- --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300);
- --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100);
-
- --spectrum-coachmark-buttongroup-display:flex;
- --spectrum-coachmark-buttongroup-mobile-display:none;
- --spectrum-coachmark-menu-display:inline-flex;
- --spectrum-coachmark-menu-mobile-display:none;
- --spectrum-well-padding:var(--spectrum-spacing-300);
- --spectrum-well-margin-top:var(--spectrum-spacing-75);
- --spectrum-well-min-width:240px;
- --spectrum-well-border-radius:var(--spectrum-spacing-75);
- --spectrum-workflow-icon-size-xxl:32px;
- --spectrum-workflow-icon-size-xxs:12px;
-
- --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300);
- --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200);
- --spectrum-treeview-item-indentation-large:20px;
- --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400);
- --spectrum-treeview-indicator-inset-block-start:5px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px;
-
- --spectrum-dialog-confirm-entry-animation-distance:20px;
- --spectrum-dialog-confirm-hero-height:128px;
- --spectrum-dialog-confirm-border-radius:4px;
- --spectrum-dialog-confirm-title-text-size:18px;
- --spectrum-dialog-confirm-description-text-size:14px;
- --spectrum-dialog-confirm-padding-grid:40px;
-
- --spectrum-datepicker-initial-width:128px;
- --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200);
- --spectrum-datepicker-dash-line-height:24px;
- --spectrum-datepicker-width-quiet-first:72px;
- --spectrum-datepicker-width-quiet-second:16px;
- --spectrum-datepicker-datetime-width-first:36px;
- --spectrum-datepicker-invalid-icon-to-button:8px;
- --spectrum-datepicker-invalid-icon-to-button-quiet:7px;
- --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400);
-
- --spectrum-pagination-textfield-width:var(--spectrum-spacing-700);
- --spectrum-pagination-item-inline-spacing:5px;
-
- --spectrum-dial-border-radius:16px;
- --spectrum-dial-handle-position:8px;
- --spectrum-dial-handle-block-margin:16px;
- --spectrum-dial-handle-inline-margin:16px;
- --spectrum-dial-controls-margin:8px;
- --spectrum-dial-label-gap-y:5px;
- --spectrum-dial-label-container-top-to-text:4px;
-
- --spectrum-assetcard-focus-ring-border-radius:8px;
- --spectrum-assetcard-selectionindicator-margin:12px;
- --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs);
- --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs);
- --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s);
-
- --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);
-
- --spectrum-ui-icon-medium-display:block;
- --spectrum-ui-icon-large-display:none;
-}
diff --git a/tokens/dist/index.css b/tokens/dist/index.css
deleted file mode 100644
index cb07bad1335..00000000000
--- a/tokens/dist/index.css
+++ /dev/null
@@ -1,3712 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum--dark {
- --spectrum-overlay-opacity: 0.5;
- --spectrum-drop-shadow-color-rgb: 0, 0, 0;
- --spectrum-drop-shadow-color-opacity: 0.5;
- --spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
- --spectrum-background-base-color: var(--spectrum-gray-50);
- --spectrum-background-layer-1-color: var(--spectrum-gray-75);
- --spectrum-background-layer-2-color: var(--spectrum-gray-100);
- --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
- --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
- --spectrum-neutral-background-color-down: var(--spectrum-gray-200);
- --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300);
- --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400);
- --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300);
- --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200);
- --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-300);
- --spectrum-accent-background-color-default: var(--spectrum-accent-color-500);
- --spectrum-accent-background-color-hover: var(--spectrum-accent-color-400);
- --spectrum-accent-background-color-down: var(--spectrum-accent-color-300);
- --spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-400);
- --spectrum-informative-background-color-default: var(--spectrum-informative-color-500);
- --spectrum-informative-background-color-hover: var(--spectrum-informative-color-400);
- --spectrum-informative-background-color-down: var(--spectrum-informative-color-300);
- --spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-400);
- --spectrum-negative-background-color-default: var(--spectrum-negative-color-500);
- --spectrum-negative-background-color-hover: var(--spectrum-negative-color-400);
- --spectrum-negative-background-color-down: var(--spectrum-negative-color-300);
- --spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-400);
- --spectrum-positive-background-color-default: var(--spectrum-positive-color-500);
- --spectrum-positive-background-color-hover: var(--spectrum-positive-color-400);
- --spectrum-positive-background-color-down: var(--spectrum-positive-color-300);
- --spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-400);
- --spectrum-notice-background-color-default: var(--spectrum-notice-color-800);
- --spectrum-gray-background-color-default: var(--spectrum-gray-700);
- --spectrum-red-background-color-default: var(--spectrum-red-700);
- --spectrum-orange-background-color-default: var(--spectrum-orange-800);
- --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
- --spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-900);
- --spectrum-celery-background-color-default: var(--spectrum-celery-800);
- --spectrum-green-background-color-default: var(--spectrum-green-700);
- --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
- --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
- --spectrum-blue-background-color-default: var(--spectrum-blue-700);
- --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
- --spectrum-purple-background-color-default: var(--spectrum-purple-700);
- --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
- --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
- --spectrum-neutral-visual-color: var(--spectrum-gray-600);
- --spectrum-accent-visual-color: var(--spectrum-accent-color-900);
- --spectrum-informative-visual-color: var(--spectrum-informative-color-900);
- --spectrum-negative-visual-color: var(--spectrum-negative-color-700);
- --spectrum-notice-visual-color: var(--spectrum-notice-color-900);
- --spectrum-positive-visual-color: var(--spectrum-positive-color-800);
- --spectrum-gray-visual-color: var(--spectrum-gray-600);
- --spectrum-red-visual-color: var(--spectrum-red-700);
- --spectrum-orange-visual-color: var(--spectrum-orange-900);
- --spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
- --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
- --spectrum-celery-visual-color: var(--spectrum-celery-800);
- --spectrum-green-visual-color: var(--spectrum-green-800);
- --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
- --spectrum-cyan-visual-color: var(--spectrum-cyan-900);
- --spectrum-blue-visual-color: var(--spectrum-blue-900);
- --spectrum-indigo-visual-color: var(--spectrum-indigo-900);
- --spectrum-purple-visual-color: var(--spectrum-purple-900);
- --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
- --spectrum-magenta-visual-color: var(--spectrum-magenta-900);
- --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800);
- --spectrum-gray-50-rgb: 29, 29, 29;
- --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
- --spectrum-gray-75-rgb: 38, 38, 38;
- --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
- --spectrum-gray-100-rgb: 50, 50, 50;
- --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
- --spectrum-gray-200-rgb: 63, 63, 63;
- --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
- --spectrum-gray-300-rgb: 84, 84, 84;
- --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
- --spectrum-gray-400-rgb: 112, 112, 112;
- --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
- --spectrum-gray-500-rgb: 144, 144, 144;
- --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
- --spectrum-gray-600-rgb: 178, 178, 178;
- --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
- --spectrum-gray-700-rgb: 209, 209, 209;
- --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
- --spectrum-gray-800-rgb: 235, 235, 235;
- --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
- --spectrum-gray-900-rgb: 255, 255, 255;
- --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
- --spectrum-blue-100-rgb: 0, 56, 119;
- --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
- --spectrum-blue-200-rgb: 0, 65, 138;
- --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
- --spectrum-blue-300-rgb: 0, 77, 163;
- --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
- --spectrum-blue-400-rgb: 0, 89, 194;
- --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
- --spectrum-blue-500-rgb: 3, 103, 224;
- --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
- --spectrum-blue-600-rgb: 19, 121, 243;
- --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
- --spectrum-blue-700-rgb: 52, 143, 244;
- --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
- --spectrum-blue-800-rgb: 84, 163, 246;
- --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
- --spectrum-blue-900-rgb: 114, 183, 249;
- --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
- --spectrum-blue-1000-rgb: 143, 202, 252;
- --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
- --spectrum-blue-1100-rgb: 174, 219, 254;
- --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
- --spectrum-blue-1200-rgb: 204, 233, 255;
- --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
- --spectrum-blue-1300-rgb: 232, 246, 255;
- --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
- --spectrum-blue-1400-rgb: 255, 255, 255;
- --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
- --spectrum-red-100-rgb: 123, 0, 0;
- --spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
- --spectrum-red-200-rgb: 141, 0, 0;
- --spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
- --spectrum-red-300-rgb: 165, 0, 0;
- --spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
- --spectrum-red-400-rgb: 190, 4, 3;
- --spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
- --spectrum-red-500-rgb: 215, 25, 19;
- --spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
- --spectrum-red-600-rgb: 234, 56, 41;
- --spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
- --spectrum-red-700-rgb: 246, 88, 67;
- --spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
- --spectrum-red-800-rgb: 255, 117, 94;
- --spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
- --spectrum-red-900-rgb: 255, 149, 129;
- --spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
- --spectrum-red-1000-rgb: 255, 176, 161;
- --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
- --spectrum-red-1100-rgb: 255, 201, 189;
- --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
- --spectrum-red-1200-rgb: 255, 222, 216;
- --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
- --spectrum-red-1300-rgb: 255, 241, 238;
- --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
- --spectrum-red-1400-rgb: 255, 255, 255;
- --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
- --spectrum-orange-100-rgb: 102, 37, 0;
- --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
- --spectrum-orange-200-rgb: 117, 45, 0;
- --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
- --spectrum-orange-300-rgb: 137, 55, 0;
- --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
- --spectrum-orange-400-rgb: 158, 66, 0;
- --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
- --spectrum-orange-500-rgb: 180, 78, 0;
- --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
- --spectrum-orange-600-rgb: 202, 93, 0;
- --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
- --spectrum-orange-700-rgb: 225, 109, 0;
- --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
- --spectrum-orange-800-rgb: 244, 129, 12;
- --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
- --spectrum-orange-900-rgb: 254, 154, 46;
- --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
- --spectrum-orange-1000-rgb: 255, 181, 88;
- --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
- --spectrum-orange-1100-rgb: 253, 206, 136;
- --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
- --spectrum-orange-1200-rgb: 255, 225, 179;
- --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
- --spectrum-orange-1300-rgb: 255, 242, 221;
- --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
- --spectrum-orange-1400-rgb: 255, 253, 249;
- --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
- --spectrum-yellow-100-rgb: 76, 54, 0;
- --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
- --spectrum-yellow-200-rgb: 88, 64, 0;
- --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
- --spectrum-yellow-300-rgb: 103, 76, 0;
- --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
- --spectrum-yellow-400-rgb: 119, 89, 0;
- --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
- --spectrum-yellow-500-rgb: 136, 104, 0;
- --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
- --spectrum-yellow-600-rgb: 155, 120, 0;
- --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
- --spectrum-yellow-700-rgb: 174, 137, 0;
- --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
- --spectrum-yellow-800-rgb: 192, 156, 0;
- --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
- --spectrum-yellow-900-rgb: 211, 174, 0;
- --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
- --spectrum-yellow-1000-rgb: 228, 194, 0;
- --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
- --spectrum-yellow-1100-rgb: 244, 213, 0;
- --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
- --spectrum-yellow-1200-rgb: 249, 232, 92;
- --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
- --spectrum-yellow-1300-rgb: 252, 246, 187;
- --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
- --spectrum-yellow-1400-rgb: 255, 255, 255;
- --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
- --spectrum-chartreuse-100-rgb: 48, 64, 0;
- --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
- --spectrum-chartreuse-200-rgb: 55, 74, 0;
- --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
- --spectrum-chartreuse-300-rgb: 65, 87, 0;
- --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
- --spectrum-chartreuse-400-rgb: 76, 102, 0;
- --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
- --spectrum-chartreuse-500-rgb: 89, 118, 0;
- --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
- --spectrum-chartreuse-600-rgb: 102, 136, 0;
- --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
- --spectrum-chartreuse-700-rgb: 117, 154, 0;
- --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
- --spectrum-chartreuse-800-rgb: 132, 173, 1;
- --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
- --spectrum-chartreuse-900-rgb: 148, 192, 8;
- --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
- --spectrum-chartreuse-1000-rgb: 166, 211, 18;
- --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
- --spectrum-chartreuse-1100-rgb: 184, 229, 37;
- --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
- --spectrum-chartreuse-1200-rgb: 205, 245, 71;
- --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
- --spectrum-chartreuse-1300-rgb: 231, 254, 154;
- --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
- --spectrum-chartreuse-1400-rgb: 255, 255, 255;
- --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
- --spectrum-celery-100-rgb: 0, 69, 10;
- --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
- --spectrum-celery-200-rgb: 0, 80, 12;
- --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
- --spectrum-celery-300-rgb: 0, 94, 14;
- --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
- --spectrum-celery-400-rgb: 0, 109, 15;
- --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
- --spectrum-celery-500-rgb: 0, 127, 15;
- --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
- --spectrum-celery-600-rgb: 0, 145, 18;
- --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
- --spectrum-celery-700-rgb: 4, 165, 30;
- --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
- --spectrum-celery-800-rgb: 34, 184, 51;
- --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
- --spectrum-celery-900-rgb: 68, 202, 73;
- --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
- --spectrum-celery-1000-rgb: 105, 220, 99;
- --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
- --spectrum-celery-1100-rgb: 142, 235, 127;
- --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
- --spectrum-celery-1200-rgb: 180, 247, 162;
- --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
- --spectrum-celery-1300-rgb: 221, 253, 211;
- --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
- --spectrum-celery-1400-rgb: 255, 255, 255;
- --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
- --spectrum-green-100-rgb: 4, 67, 41;
- --spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
- --spectrum-green-200-rgb: 0, 78, 47;
- --spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
- --spectrum-green-300-rgb: 0, 92, 56;
- --spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
- --spectrum-green-400-rgb: 0, 108, 67;
- --spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
- --spectrum-green-500-rgb: 0, 125, 78;
- --spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
- --spectrum-green-600-rgb: 0, 143, 93;
- --spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
- --spectrum-green-700-rgb: 18, 162, 108;
- --spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
- --spectrum-green-800-rgb: 43, 180, 125;
- --spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
- --spectrum-green-900-rgb: 67, 199, 143;
- --spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
- --spectrum-green-1000-rgb: 94, 217, 162;
- --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
- --spectrum-green-1100-rgb: 129, 233, 184;
- --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
- --spectrum-green-1200-rgb: 177, 244, 209;
- --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
- --spectrum-green-1300-rgb: 223, 250, 234;
- --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
- --spectrum-green-1400-rgb: 254, 255, 252;
- --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
- --spectrum-seafoam-100-rgb: 18, 65, 63;
- --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
- --spectrum-seafoam-200-rgb: 14, 76, 73;
- --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
- --spectrum-seafoam-300-rgb: 4, 90, 87;
- --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
- --spectrum-seafoam-400-rgb: 0, 105, 101;
- --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
- --spectrum-seafoam-500-rgb: 0, 122, 117;
- --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
- --spectrum-seafoam-600-rgb: 0, 140, 135;
- --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
- --spectrum-seafoam-700-rgb: 0, 158, 152;
- --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
- --spectrum-seafoam-800-rgb: 3, 178, 171;
- --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
- --spectrum-seafoam-900-rgb: 54, 197, 189;
- --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
- --spectrum-seafoam-1000-rgb: 93, 214, 207;
- --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
- --spectrum-seafoam-1100-rgb: 132, 230, 223;
- --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
- --spectrum-seafoam-1200-rgb: 176, 242, 236;
- --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
- --spectrum-seafoam-1300-rgb: 223, 249, 246;
- --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
- --spectrum-seafoam-1400-rgb: 254, 255, 254;
- --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
- --spectrum-cyan-100-rgb: 0, 61, 98;
- --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
- --spectrum-cyan-200-rgb: 0, 71, 111;
- --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
- --spectrum-cyan-300-rgb: 0, 85, 127;
- --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
- --spectrum-cyan-400-rgb: 0, 100, 145;
- --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
- --spectrum-cyan-500-rgb: 0, 116, 162;
- --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
- --spectrum-cyan-600-rgb: 0, 134, 180;
- --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
- --spectrum-cyan-700-rgb: 0, 153, 198;
- --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
- --spectrum-cyan-800-rgb: 14, 173, 215;
- --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
- --spectrum-cyan-900-rgb: 44, 193, 230;
- --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
- --spectrum-cyan-1000-rgb: 84, 211, 241;
- --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
- --spectrum-cyan-1100-rgb: 127, 228, 249;
- --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
- --spectrum-cyan-1200-rgb: 167, 241, 255;
- --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
- --spectrum-cyan-1300-rgb: 215, 250, 255;
- --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
- --spectrum-cyan-1400-rgb: 255, 255, 255;
- --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
- --spectrum-indigo-100-rgb: 40, 44, 140;
- --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
- --spectrum-indigo-200-rgb: 47, 52, 163;
- --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
- --spectrum-indigo-300-rgb: 57, 63, 187;
- --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
- --spectrum-indigo-400-rgb: 70, 75, 211;
- --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
- --spectrum-indigo-500-rgb: 85, 91, 231;
- --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
- --spectrum-indigo-600-rgb: 104, 109, 244;
- --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
- --spectrum-indigo-700-rgb: 124, 129, 251;
- --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
- --spectrum-indigo-800-rgb: 145, 149, 255;
- --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
- --spectrum-indigo-900-rgb: 167, 170, 255;
- --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
- --spectrum-indigo-1000-rgb: 188, 190, 255;
- --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
- --spectrum-indigo-1100-rgb: 208, 210, 255;
- --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
- --spectrum-indigo-1200-rgb: 226, 228, 255;
- --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
- --spectrum-indigo-1300-rgb: 243, 243, 254;
- --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
- --spectrum-indigo-1400-rgb: 255, 255, 255;
- --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
- --spectrum-purple-100-rgb: 76, 13, 157;
- --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
- --spectrum-purple-200-rgb: 89, 17, 177;
- --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
- --spectrum-purple-300-rgb: 105, 28, 200;
- --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
- --spectrum-purple-400-rgb: 122, 45, 218;
- --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
- --spectrum-purple-500-rgb: 140, 65, 233;
- --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
- --spectrum-purple-600-rgb: 157, 87, 243;
- --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
- --spectrum-purple-700-rgb: 172, 111, 249;
- --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
- --spectrum-purple-800-rgb: 187, 135, 251;
- --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
- --spectrum-purple-900-rgb: 202, 159, 252;
- --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
- --spectrum-purple-1000-rgb: 215, 182, 254;
- --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
- --spectrum-purple-1100-rgb: 228, 204, 254;
- --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
- --spectrum-purple-1200-rgb: 239, 223, 255;
- --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
- --spectrum-purple-1300-rgb: 249, 240, 255;
- --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
- --spectrum-purple-1400-rgb: 255, 253, 255;
- --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
- --spectrum-fuchsia-100-rgb: 107, 3, 106;
- --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
- --spectrum-fuchsia-200-rgb: 123, 0, 123;
- --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
- --spectrum-fuchsia-300-rgb: 144, 0, 145;
- --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
- --spectrum-fuchsia-400-rgb: 165, 13, 166;
- --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
- --spectrum-fuchsia-500-rgb: 185, 37, 185;
- --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
- --spectrum-fuchsia-600-rgb: 205, 57, 206;
- --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
- --spectrum-fuchsia-700-rgb: 223, 81, 224;
- --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
- --spectrum-fuchsia-800-rgb: 235, 110, 236;
- --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
- --spectrum-fuchsia-900-rgb: 244, 140, 242;
- --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
- --spectrum-fuchsia-1000-rgb: 250, 168, 245;
- --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
- --spectrum-fuchsia-1100-rgb: 254, 194, 248;
- --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
- --spectrum-fuchsia-1200-rgb: 255, 219, 250;
- --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
- --spectrum-fuchsia-1300-rgb: 255, 239, 252;
- --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
- --spectrum-fuchsia-1400-rgb: 255, 253, 255;
- --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
- --spectrum-magenta-100-rgb: 118, 0, 58;
- --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
- --spectrum-magenta-200-rgb: 137, 0, 66;
- --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
- --spectrum-magenta-300-rgb: 160, 0, 77;
- --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
- --spectrum-magenta-400-rgb: 182, 18, 90;
- --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
- --spectrum-magenta-500-rgb: 203, 38, 109;
- --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
- --spectrum-magenta-600-rgb: 222, 61, 130;
- --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
- --spectrum-magenta-700-rgb: 237, 87, 149;
- --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
- --spectrum-magenta-800-rgb: 249, 114, 167;
- --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
- --spectrum-magenta-900-rgb: 255, 143, 185;
- --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
- --spectrum-magenta-1000-rgb: 255, 172, 202;
- --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
- --spectrum-magenta-1100-rgb: 255, 198, 218;
- --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
- --spectrum-magenta-1200-rgb: 255, 221, 233;
- --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
- --spectrum-magenta-1300-rgb: 255, 240, 245;
- --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
- --spectrum-magenta-1400-rgb: 255, 252, 253;
- --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
- --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800);
- --spectrum-icon-color-green-primary-default: var(--spectrum-green-800);
- --spectrum-icon-color-red-primary-default: var(--spectrum-red-700);
- --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000);
-}
-.spectrum--darkest {
- --spectrum-overlay-opacity: 0.6;
- --spectrum-drop-shadow-color-rgb: 0, 0, 0;
- --spectrum-drop-shadow-color-opacity: 0.8;
- --spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
- --spectrum-background-base-color: var(--spectrum-gray-50);
- --spectrum-background-layer-1-color: var(--spectrum-gray-75);
- --spectrum-background-layer-2-color: var(--spectrum-gray-100);
- --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
- --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
- --spectrum-neutral-background-color-down: var(--spectrum-gray-200);
- --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300);
- --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400);
- --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300);
- --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200);
- --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-300);
- --spectrum-accent-background-color-default: var(--spectrum-accent-color-600);
- --spectrum-accent-background-color-hover: var(--spectrum-accent-color-500);
- --spectrum-accent-background-color-down: var(--spectrum-accent-color-400);
- --spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-500);
- --spectrum-informative-background-color-default: var(--spectrum-informative-color-600);
- --spectrum-informative-background-color-hover: var(--spectrum-informative-color-500);
- --spectrum-informative-background-color-down: var(--spectrum-informative-color-400);
- --spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-500);
- --spectrum-negative-background-color-default: var(--spectrum-negative-color-600);
- --spectrum-negative-background-color-hover: var(--spectrum-negative-color-500);
- --spectrum-negative-background-color-down: var(--spectrum-negative-color-400);
- --spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-500);
- --spectrum-positive-background-color-default: var(--spectrum-positive-color-600);
- --spectrum-positive-background-color-hover: var(--spectrum-positive-color-500);
- --spectrum-positive-background-color-down: var(--spectrum-positive-color-400);
- --spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-500);
- --spectrum-notice-background-color-default: var(--spectrum-notice-color-800);
- --spectrum-gray-background-color-default: var(--spectrum-gray-700);
- --spectrum-red-background-color-default: var(--spectrum-red-700);
- --spectrum-orange-background-color-default: var(--spectrum-orange-800);
- --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
- --spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-900);
- --spectrum-celery-background-color-default: var(--spectrum-celery-800);
- --spectrum-green-background-color-default: var(--spectrum-green-700);
- --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
- --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
- --spectrum-blue-background-color-default: var(--spectrum-blue-700);
- --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
- --spectrum-purple-background-color-default: var(--spectrum-purple-700);
- --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
- --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
- --spectrum-neutral-visual-color: var(--spectrum-gray-600);
- --spectrum-accent-visual-color: var(--spectrum-accent-color-900);
- --spectrum-informative-visual-color: var(--spectrum-informative-color-900);
- --spectrum-negative-visual-color: var(--spectrum-negative-color-700);
- --spectrum-notice-visual-color: var(--spectrum-notice-color-900);
- --spectrum-positive-visual-color: var(--spectrum-positive-color-800);
- --spectrum-gray-visual-color: var(--spectrum-gray-600);
- --spectrum-red-visual-color: var(--spectrum-red-700);
- --spectrum-orange-visual-color: var(--spectrum-orange-900);
- --spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
- --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
- --spectrum-celery-visual-color: var(--spectrum-celery-800);
- --spectrum-green-visual-color: var(--spectrum-green-800);
- --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
- --spectrum-cyan-visual-color: var(--spectrum-cyan-900);
- --spectrum-blue-visual-color: var(--spectrum-blue-900);
- --spectrum-indigo-visual-color: var(--spectrum-indigo-900);
- --spectrum-purple-visual-color: var(--spectrum-purple-900);
- --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
- --spectrum-magenta-visual-color: var(--spectrum-magenta-900);
- --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800);
- --spectrum-gray-50-rgb: 0, 0, 0;
- --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
- --spectrum-gray-75-rgb: 14, 14, 14;
- --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
- --spectrum-gray-100-rgb: 29, 29, 29;
- --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
- --spectrum-gray-200-rgb: 48, 48, 48;
- --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
- --spectrum-gray-300-rgb: 75, 75, 75;
- --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
- --spectrum-gray-400-rgb: 106, 106, 106;
- --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
- --spectrum-gray-500-rgb: 141, 141, 141;
- --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
- --spectrum-gray-600-rgb: 176, 176, 176;
- --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
- --spectrum-gray-700-rgb: 208, 208, 208;
- --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
- --spectrum-gray-800-rgb: 235, 235, 235;
- --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
- --spectrum-gray-900-rgb: 255, 255, 255;
- --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
- --spectrum-blue-100-rgb: 0, 38, 81;
- --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
- --spectrum-blue-200-rgb: 0, 50, 106;
- --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
- --spectrum-blue-300-rgb: 0, 64, 135;
- --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
- --spectrum-blue-400-rgb: 0, 78, 166;
- --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
- --spectrum-blue-500-rgb: 0, 92, 200;
- --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
- --spectrum-blue-600-rgb: 6, 108, 231;
- --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
- --spectrum-blue-700-rgb: 29, 128, 245;
- --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
- --spectrum-blue-800-rgb: 64, 150, 243;
- --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
- --spectrum-blue-900-rgb: 94, 170, 247;
- --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
- --spectrum-blue-1000-rgb: 124, 189, 250;
- --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
- --spectrum-blue-1100-rgb: 152, 206, 253;
- --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
- --spectrum-blue-1200-rgb: 179, 222, 254;
- --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
- --spectrum-blue-1300-rgb: 206, 234, 255;
- --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
- --spectrum-blue-1400-rgb: 227, 243, 255;
- --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
- --spectrum-red-100-rgb: 87, 0, 0;
- --spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
- --spectrum-red-200-rgb: 110, 0, 0;
- --spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
- --spectrum-red-300-rgb: 138, 0, 0;
- --spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
- --spectrum-red-400-rgb: 167, 0, 0;
- --spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
- --spectrum-red-500-rgb: 196, 7, 6;
- --spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
- --spectrum-red-600-rgb: 221, 33, 24;
- --spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
- --spectrum-red-700-rgb: 238, 67, 49;
- --spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
- --spectrum-red-800-rgb: 249, 99, 76;
- --spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
- --spectrum-red-900-rgb: 255, 129, 107;
- --spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
- --spectrum-red-1000-rgb: 255, 158, 140;
- --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
- --spectrum-red-1100-rgb: 255, 183, 169;
- --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
- --spectrum-red-1200-rgb: 255, 205, 195;
- --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
- --spectrum-red-1300-rgb: 255, 223, 217;
- --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
- --spectrum-red-1400-rgb: 255, 237, 234;
- --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
- --spectrum-orange-100-rgb: 72, 24, 1;
- --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
- --spectrum-orange-200-rgb: 92, 32, 0;
- --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
- --spectrum-orange-300-rgb: 115, 43, 0;
- --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
- --spectrum-orange-400-rgb: 138, 55, 0;
- --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
- --spectrum-orange-500-rgb: 162, 68, 0;
- --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
- --spectrum-orange-600-rgb: 186, 82, 0;
- --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
- --spectrum-orange-700-rgb: 210, 98, 0;
- --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
- --spectrum-orange-800-rgb: 232, 116, 0;
- --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
- --spectrum-orange-900-rgb: 249, 137, 23;
- --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
- --spectrum-orange-1000-rgb: 255, 162, 59;
- --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
- --spectrum-orange-1100-rgb: 255, 188, 102;
- --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
- --spectrum-orange-1200-rgb: 253, 210, 145;
- --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
- --spectrum-orange-1300-rgb: 255, 226, 181;
- --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
- --spectrum-orange-1400-rgb: 255, 239, 213;
- --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
- --spectrum-yellow-100-rgb: 53, 36, 0;
- --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
- --spectrum-yellow-200-rgb: 68, 47, 0;
- --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
- --spectrum-yellow-300-rgb: 86, 62, 0;
- --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
- --spectrum-yellow-400-rgb: 103, 77, 0;
- --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
- --spectrum-yellow-500-rgb: 122, 92, 0;
- --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
- --spectrum-yellow-600-rgb: 141, 108, 0;
- --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
- --spectrum-yellow-700-rgb: 161, 126, 0;
- --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
- --spectrum-yellow-800-rgb: 180, 144, 0;
- --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
- --spectrum-yellow-900-rgb: 199, 162, 0;
- --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
- --spectrum-yellow-1000-rgb: 216, 181, 0;
- --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
- --spectrum-yellow-1100-rgb: 233, 199, 0;
- --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
- --spectrum-yellow-1200-rgb: 247, 216, 4;
- --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
- --spectrum-yellow-1300-rgb: 249, 233, 97;
- --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
- --spectrum-yellow-1400-rgb: 252, 243, 170;
- --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
- --spectrum-chartreuse-100-rgb: 32, 43, 0;
- --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
- --spectrum-chartreuse-200-rgb: 42, 56, 0;
- --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
- --spectrum-chartreuse-300-rgb: 54, 72, 0;
- --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
- --spectrum-chartreuse-400-rgb: 66, 88, 0;
- --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
- --spectrum-chartreuse-500-rgb: 79, 105, 0;
- --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
- --spectrum-chartreuse-600-rgb: 93, 123, 0;
- --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
- --spectrum-chartreuse-700-rgb: 107, 142, 0;
- --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
- --spectrum-chartreuse-800-rgb: 122, 161, 0;
- --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
- --spectrum-chartreuse-900-rgb: 138, 180, 3;
- --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
- --spectrum-chartreuse-1000-rgb: 154, 198, 11;
- --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
- --spectrum-chartreuse-1100-rgb: 170, 216, 22;
- --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
- --spectrum-chartreuse-1200-rgb: 187, 232, 41;
- --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
- --spectrum-chartreuse-1300-rgb: 205, 246, 72;
- --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
- --spectrum-chartreuse-1400-rgb: 225, 253, 132;
- --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
- --spectrum-celery-100-rgb: 0, 47, 7;
- --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
- --spectrum-celery-200-rgb: 0, 61, 9;
- --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
- --spectrum-celery-300-rgb: 0, 77, 12;
- --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
- --spectrum-celery-400-rgb: 0, 95, 15;
- --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
- --spectrum-celery-500-rgb: 0, 113, 15;
- --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
- --spectrum-celery-600-rgb: 0, 132, 15;
- --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
- --spectrum-celery-700-rgb: 0, 151, 20;
- --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
- --spectrum-celery-800-rgb: 13, 171, 37;
- --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
- --spectrum-celery-900-rgb: 45, 191, 58;
- --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
- --spectrum-celery-1000-rgb: 80, 208, 82;
- --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
- --spectrum-celery-1100-rgb: 115, 224, 107;
- --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
- --spectrum-celery-1200-rgb: 147, 237, 131;
- --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
- --spectrum-celery-1300-rgb: 180, 247, 162;
- --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
- --spectrum-celery-1400-rgb: 213, 252, 202;
- --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
- --spectrum-green-100-rgb: 10, 44, 28;
- --spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
- --spectrum-green-200-rgb: 7, 59, 36;
- --spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
- --spectrum-green-300-rgb: 0, 76, 46;
- --spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
- --spectrum-green-400-rgb: 0, 93, 57;
- --spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
- --spectrum-green-500-rgb: 0, 111, 69;
- --spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
- --spectrum-green-600-rgb: 0, 130, 82;
- --spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
- --spectrum-green-700-rgb: 0, 149, 98;
- --spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
- --spectrum-green-800-rgb: 28, 168, 114;
- --spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
- --spectrum-green-900-rgb: 52, 187, 132;
- --spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
- --spectrum-green-1000-rgb: 75, 205, 149;
- --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
- --spectrum-green-1100-rgb: 103, 222, 168;
- --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
- --spectrum-green-1200-rgb: 137, 236, 188;
- --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
- --spectrum-green-1300-rgb: 177, 244, 209;
- --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
- --spectrum-green-1400-rgb: 214, 249, 228;
- --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
- --spectrum-seafoam-100-rgb: 18, 43, 42;
- --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
- --spectrum-seafoam-200-rgb: 19, 57, 55;
- --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
- --spectrum-seafoam-300-rgb: 16, 73, 70;
- --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
- --spectrum-seafoam-400-rgb: 3, 91, 88;
- --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
- --spectrum-seafoam-500-rgb: 0, 108, 104;
- --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
- --spectrum-seafoam-600-rgb: 0, 127, 121;
- --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
- --spectrum-seafoam-700-rgb: 0, 146, 140;
- --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
- --spectrum-seafoam-800-rgb: 0, 165, 159;
- --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
- --spectrum-seafoam-900-rgb: 26, 185, 178;
- --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
- --spectrum-seafoam-1000-rgb: 66, 202, 195;
- --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
- --spectrum-seafoam-1100-rgb: 102, 218, 211;
- --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
- --spectrum-seafoam-1200-rgb: 139, 232, 225;
- --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
- --spectrum-seafoam-1300-rgb: 179, 242, 237;
- --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
- --spectrum-seafoam-1400-rgb: 215, 248, 244;
- --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
- --spectrum-cyan-100-rgb: 0, 41, 68;
- --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
- --spectrum-cyan-200-rgb: 0, 54, 88;
- --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
- --spectrum-cyan-300-rgb: 0, 69, 108;
- --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
- --spectrum-cyan-400-rgb: 0, 86, 128;
- --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
- --spectrum-cyan-500-rgb: 0, 103, 147;
- --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
- --spectrum-cyan-600-rgb: 0, 121, 167;
- --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
- --spectrum-cyan-700-rgb: 0, 140, 186;
- --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
- --spectrum-cyan-800-rgb: 4, 160, 205;
- --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
- --spectrum-cyan-900-rgb: 23, 180, 221;
- --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
- --spectrum-cyan-1000-rgb: 57, 199, 234;
- --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
- --spectrum-cyan-1100-rgb: 96, 216, 243;
- --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
- --spectrum-cyan-1200-rgb: 134, 230, 250;
- --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
- --spectrum-cyan-1300-rgb: 170, 242, 255;
- --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
- --spectrum-cyan-1400-rgb: 206, 249, 255;
- --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
- --spectrum-indigo-100-rgb: 26, 29, 97;
- --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
- --spectrum-indigo-200-rgb: 35, 39, 125;
- --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
- --spectrum-indigo-300-rgb: 46, 50, 158;
- --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
- --spectrum-indigo-400-rgb: 58, 63, 189;
- --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
- --spectrum-indigo-500-rgb: 73, 78, 216;
- --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
- --spectrum-indigo-600-rgb: 90, 96, 235;
- --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
- --spectrum-indigo-700-rgb: 110, 115, 246;
- --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
- --spectrum-indigo-800-rgb: 132, 136, 253;
- --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
- --spectrum-indigo-900-rgb: 153, 157, 255;
- --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
- --spectrum-indigo-1000-rgb: 174, 177, 255;
- --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
- --spectrum-indigo-1100-rgb: 194, 196, 255;
- --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
- --spectrum-indigo-1200-rgb: 212, 213, 255;
- --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
- --spectrum-indigo-1300-rgb: 227, 228, 255;
- --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
- --spectrum-indigo-1400-rgb: 240, 240, 255;
- --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
- --spectrum-purple-100-rgb: 50, 16, 104;
- --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
- --spectrum-purple-200-rgb: 67, 13, 140;
- --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
- --spectrum-purple-300-rgb: 86, 16, 173;
- --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
- --spectrum-purple-400-rgb: 106, 29, 200;
- --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
- --spectrum-purple-500-rgb: 126, 49, 222;
- --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
- --spectrum-purple-600-rgb: 145, 70, 236;
- --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
- --spectrum-purple-700-rgb: 162, 94, 246;
- --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
- --spectrum-purple-800-rgb: 178, 119, 250;
- --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
- --spectrum-purple-900-rgb: 192, 143, 252;
- --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
- --spectrum-purple-1000-rgb: 206, 166, 253;
- --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
- --spectrum-purple-1100-rgb: 219, 188, 254;
- --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
- --spectrum-purple-1200-rgb: 230, 207, 255;
- --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
- --spectrum-purple-1300-rgb: 240, 224, 255;
- --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
- --spectrum-purple-1400-rgb: 248, 237, 255;
- --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
- --spectrum-fuchsia-100-rgb: 70, 14, 68;
- --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
- --spectrum-fuchsia-200-rgb: 93, 9, 92;
- --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
- --spectrum-fuchsia-300-rgb: 120, 0, 120;
- --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
- --spectrum-fuchsia-400-rgb: 146, 0, 147;
- --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
- --spectrum-fuchsia-500-rgb: 169, 19, 170;
- --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
- --spectrum-fuchsia-600-rgb: 191, 43, 191;
- --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
- --spectrum-fuchsia-700-rgb: 211, 65, 213;
- --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
- --spectrum-fuchsia-800-rgb: 228, 91, 229;
- --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
- --spectrum-fuchsia-900-rgb: 239, 120, 238;
- --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
- --spectrum-fuchsia-1000-rgb: 246, 149, 243;
- --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
- --spectrum-fuchsia-1100-rgb: 251, 175, 246;
- --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
- --spectrum-fuchsia-1200-rgb: 254, 199, 248;
- --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
- --spectrum-fuchsia-1300-rgb: 255, 220, 250;
- --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
- --spectrum-fuchsia-1400-rgb: 255, 235, 252;
- --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
- --spectrum-magenta-100-rgb: 83, 3, 41;
- --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
- --spectrum-magenta-200-rgb: 106, 0, 52;
- --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
- --spectrum-magenta-300-rgb: 133, 0, 65;
- --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
- --spectrum-magenta-400-rgb: 161, 0, 78;
- --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
- --spectrum-magenta-500-rgb: 186, 22, 93;
- --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
- --spectrum-magenta-600-rgb: 209, 43, 114;
- --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
- --spectrum-magenta-700-rgb: 227, 69, 137;
- --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
- --spectrum-magenta-800-rgb: 241, 97, 156;
- --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
- --spectrum-magenta-900-rgb: 252, 124, 173;
- --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
- --spectrum-magenta-1000-rgb: 255, 152, 191;
- --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
- --spectrum-magenta-1100-rgb: 255, 179, 207;
- --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
- --spectrum-magenta-1200-rgb: 255, 202, 221;
- --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
- --spectrum-magenta-1300-rgb: 255, 221, 233;
- --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
- --spectrum-magenta-1400-rgb: 255, 236, 243;
- --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
- --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800);
- --spectrum-icon-color-green-primary-default: var(--spectrum-green-800);
- --spectrum-icon-color-red-primary-default: var(--spectrum-red-700);
- --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000);
-}
-.spectrum {
- --spectrum-focus-indicator-color: var(--spectrum-blue-800);
- --spectrum-static-white-focus-indicator-color: var(--spectrum-white);
- --spectrum-static-black-focus-indicator-color: var(--spectrum-black);
- --spectrum-overlay-color: var(--spectrum-black);
- --spectrum-opacity-disabled: 0.3;
- --spectrum-neutral-subdued-content-color-selected: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-accent-content-color-selected: var(--spectrum-accent-content-color-down);
- --spectrum-disabled-background-color: var(--spectrum-gray-200);
- --spectrum-disabled-static-white-background-color: var(--spectrum-transparent-white-200);
- --spectrum-disabled-static-black-background-color: var(--spectrum-transparent-black-200);
- --spectrum-background-opacity-default: 0;
- --spectrum-background-opacity-hover: 0.1;
- --spectrum-background-opacity-down: 0.1;
- --spectrum-background-opacity-key-focus: 0.1;
- --spectrum-neutral-content-color-default: var(--spectrum-gray-800);
- --spectrum-neutral-content-color-hover: var(--spectrum-gray-900);
- --spectrum-neutral-content-color-down: var(--spectrum-gray-900);
- --spectrum-neutral-content-color-focus-hover: var(--spectrum-neutral-content-color-down);
- --spectrum-neutral-content-color-focus: var(--spectrum-neutral-content-color-down);
- --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900);
- --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700);
- --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800);
- --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900);
- --spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800);
- --spectrum-accent-content-color-default: var(--spectrum-accent-color-900);
- --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-accent-content-color-down: var(--spectrum-accent-color-1100);
- --spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000);
- --spectrum-negative-content-color-default: var(--spectrum-negative-color-900);
- --spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000);
- --spectrum-negative-content-color-down: var(--spectrum-negative-color-1100);
- --spectrum-negative-content-color-key-focus: var(--spectrum-negative-color-1000);
- --spectrum-disabled-content-color: var(--spectrum-gray-400);
- --spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-500);
- --spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-500);
- --spectrum-disabled-border-color: var(--spectrum-gray-300);
- --spectrum-disabled-static-white-border-color: var(--spectrum-transparent-white-300);
- --spectrum-disabled-static-black-border-color: var(--spectrum-transparent-black-300);
- --spectrum-negative-border-color-default: var(--spectrum-negative-color-900);
- --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000);
- --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100);
- --spectrum-negative-border-color-focus-hover: var(--spectrum-negative-border-color-down);
- --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000);
- --spectrum-negative-border-color-key-focus: var(--spectrum-negative-color-1000);
- --spectrum-swatch-border-color: var(--spectrum-gray-900);
- --spectrum-swatch-border-opacity: 0.51;
- --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black);
- --spectrum-swatch-disabled-icon-border-opacity: 0.51;
- --spectrum-thumbnail-border-color: var(--spectrum-gray-800);
- --spectrum-thumbnail-border-opacity: 0.1;
- --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled);
- --spectrum-opacity-checkerboard-square-light: var(--spectrum-white);
- --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled);
- --spectrum-color-area-border-color: var(--spectrum-gray-900);
- --spectrum-color-area-border-opacity: 0.1;
- --spectrum-color-slider-border-color: var(--spectrum-gray-900);
- --spectrum-color-slider-border-opacity: 0.1;
- --spectrum-color-loupe-drop-shadow-color: var(--spectrum-transparent-black-300);
- --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200);
- --spectrum-color-loupe-outer-border: var(--spectrum-white);
- --spectrum-card-selection-background-color: var(--spectrum-gray-100);
- --spectrum-card-selection-background-color-opacity: 0.95;
- --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color);
- --spectrum-drop-zone-background-color-opacity: 0.1;
- --spectrum-drop-zone-background-color-opacity-filled: 0.3;
- --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600);
- --spectrum-color-handle-inner-border-color: var(--spectrum-black);
- --spectrum-color-handle-inner-border-opacity: 0.42;
- --spectrum-color-handle-outer-border-color: var(--spectrum-black);
- --spectrum-color-handle-outer-border-opacity: var(--spectrum-color-handle-inner-border-opacity);
- --spectrum-color-handle-drop-shadow-color: var(--spectrum-drop-shadow-color);
- --spectrum-floating-action-button-drop-shadow-color: var(--spectrum-transparent-black-300);
- --spectrum-floating-action-button-shadow-color: var(--spectrum-floating-action-button-drop-shadow-color);
- --spectrum-table-row-hover-color: var(--spectrum-gray-900);
- --spectrum-table-row-hover-opacity: 0.07;
- --spectrum-table-selected-row-background-color: var(--spectrum-informative-background-color-default);
- --spectrum-table-selected-row-background-opacity: 0.1;
- --spectrum-table-selected-row-background-color-non-emphasized: var(--spectrum-neutral-background-color-selected-default);
- --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1;
- --spectrum-table-row-down-opacity: 0.1;
- --spectrum-table-selected-row-background-opacity-hover: 0.15;
- --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15;
- --spectrum-white-rgb: 255, 255, 255;
- --spectrum-white: rgba(var(--spectrum-white-rgb));
- --spectrum-transparent-white-100-rgb: 255, 255, 255;
- --spectrum-transparent-white-100-opacity: 0;
- --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
- --spectrum-transparent-white-200-rgb: 255, 255, 255;
- --spectrum-transparent-white-200-opacity: 0.1;
- --spectrum-transparent-white-200: rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity));
- --spectrum-transparent-white-300-rgb: 255, 255, 255;
- --spectrum-transparent-white-300-opacity: 0.25;
- --spectrum-transparent-white-300: rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity));
- --spectrum-transparent-white-400-rgb: 255, 255, 255;
- --spectrum-transparent-white-400-opacity: 0.4;
- --spectrum-transparent-white-400: rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity));
- --spectrum-transparent-white-500-rgb: 255, 255, 255;
- --spectrum-transparent-white-500-opacity: 0.55;
- --spectrum-transparent-white-500: rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity));
- --spectrum-transparent-white-600-rgb: 255, 255, 255;
- --spectrum-transparent-white-600-opacity: 0.7;
- --spectrum-transparent-white-600: rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity));
- --spectrum-transparent-white-700-rgb: 255, 255, 255;
- --spectrum-transparent-white-700-opacity: 0.8;
- --spectrum-transparent-white-700: rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity));
- --spectrum-transparent-white-800-rgb: 255, 255, 255;
- --spectrum-transparent-white-800-opacity: 0.9;
- --spectrum-transparent-white-800: rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity));
- --spectrum-transparent-white-900-rgb: 255, 255, 255;
- --spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb));
- --spectrum-black-rgb: 0, 0, 0;
- --spectrum-black: rgba(var(--spectrum-black-rgb));
- --spectrum-transparent-black-100-rgb: 0, 0, 0;
- --spectrum-transparent-black-100-opacity: 0;
- --spectrum-transparent-black-100: rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity));
- --spectrum-transparent-black-200-rgb: 0, 0, 0;
- --spectrum-transparent-black-200-opacity: 0.1;
- --spectrum-transparent-black-200: rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity));
- --spectrum-transparent-black-300-rgb: 0, 0, 0;
- --spectrum-transparent-black-300-opacity: 0.25;
- --spectrum-transparent-black-300: rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity));
- --spectrum-transparent-black-400-rgb: 0, 0, 0;
- --spectrum-transparent-black-400-opacity: 0.4;
- --spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity));
- --spectrum-transparent-black-500-rgb: 0, 0, 0;
- --spectrum-transparent-black-500-opacity: 0.55;
- --spectrum-transparent-black-500: rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity));
- --spectrum-transparent-black-600-rgb: 0, 0, 0;
- --spectrum-transparent-black-600-opacity: 0.7;
- --spectrum-transparent-black-600: rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity));
- --spectrum-transparent-black-700-rgb: 0, 0, 0;
- --spectrum-transparent-black-700-opacity: 0.8;
- --spectrum-transparent-black-700: rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity));
- --spectrum-transparent-black-800-rgb: 0, 0, 0;
- --spectrum-transparent-black-800-opacity: 0.9;
- --spectrum-transparent-black-800: rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity));
- --spectrum-transparent-black-900-rgb: 0, 0, 0;
- --spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb));
- --spectrum-icon-color-inverse: var(--spectrum-gray-50);
- --spectrum-icon-color-primary-default: var(--spectrum-neutral-content-color-default);
- --spectrum-asterisk-icon-size-75: 8px;
- --spectrum-radio-button-selection-indicator: 4px;
- --spectrum-field-label-top-margin-small: 0px;
- --spectrum-field-label-to-component: 0px;
- --spectrum-help-text-to-component: 0px;
- --spectrum-status-light-dot-size-small: 8px;
- --spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
- --spectrum-action-button-edge-to-hold-icon-small: 3px;
- --spectrum-button-minimum-width-multiplier: 2.25;
- --spectrum-divider-thickness-small: 1px;
- --spectrum-divider-thickness-medium: 2px;
- --spectrum-divider-thickness-large: 4px;
- --spectrum-swatch-rectangle-width-multiplier: 2;
- --spectrum-swatch-slash-thickness-extra-small: 2px;
- --spectrum-swatch-slash-thickness-small: 3px;
- --spectrum-swatch-slash-thickness-medium: 4px;
- --spectrum-swatch-slash-thickness-large: 5px;
- --spectrum-progress-bar-minimum-width: 48px;
- --spectrum-progress-bar-maximum-width: 768px;
- --spectrum-meter-minimum-width: 48px;
- --spectrum-meter-maximum-width: 768px;
- --spectrum-meter-default-width: var(--spectrum-meter-width);
- --spectrum-in-line-alert-minimum-width: 240px;
- --spectrum-popover-tip-width: 16px;
- --spectrum-popover-tip-height: 8px;
- --spectrum-menu-item-label-to-description: 1px;
- --spectrum-menu-item-section-divider-height: 8px;
- --spectrum-picker-minimum-width-multiplier: 2;
- --spectrum-picker-end-edge-to-disclousure-icon-quiet: var(--spectrum-picker-end-edge-to-disclosure-icon-quiet);
- --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px;
- --spectrum-text-field-minimum-width-multiplier: 1.5;
- --spectrum-combo-box-minimum-width-multiplier: 2.5;
- --spectrum-combo-box-quiet-minimum-width-multiplier: 2;
- --spectrum-combo-box-visual-to-field-button-quiet: 0px;
- --spectrum-alert-dialog-minimum-width: 288px;
- --spectrum-alert-dialog-maximum-width: 480px;
- --spectrum-contextual-help-minimum-width: 268px;
- --spectrum-breadcrumbs-height: var(--spectrum-component-height-300);
- --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200);
- --spectrum-breadcrumbs-end-edge-to-text: 0px;
- --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px;
- --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px;
- --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px;
- --spectrum-alert-banner-to-top-workflow-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
- --spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text);
- --spectrum-alert-banner-to-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
- --spectrum-color-area-border-width: var(--spectrum-border-width-100);
- --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100);
- --spectrum-color-wheel-color-area-margin: 12px;
- --spectrum-color-slider-border-width: 1px;
- --spectrum-color-slider-border-rounding: 4px;
- --spectrum-floating-action-button-drop-shadow-blur: 12px;
- --spectrum-floating-action-button-drop-shadow-y: 4px;
- --spectrum-illustrated-message-maximum-width: 380px;
- --spectrum-search-field-minimum-width-multiplier: 3;
- --spectrum-color-loupe-height: 64px;
- --spectrum-color-loupe-width: 48px;
- --spectrum-color-loupe-bottom-to-color-handle: 12px;
- --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200);
- --spectrum-color-loupe-inner-border-width: 1px;
- --spectrum-color-loupe-drop-shadow-y: 2px;
- --spectrum-color-loupe-drop-shadow-blur: 8px;
- --spectrum-card-minimum-width: 100px;
- --spectrum-card-preview-minimum-height: 130px;
- --spectrum-card-selection-background-size: 40px;
- --spectrum-drop-zone-width: 428px;
- --spectrum-drop-zone-content-maximum-width: var(--spectrum-illustrated-message-maximum-width);
- --spectrum-drop-zone-border-dash-length: 8px;
- --spectrum-drop-zone-border-dash-gap: 4px;
- --spectrum-drop-zone-title-size: var(--spectrum-illustrated-message-title-size);
- --spectrum-drop-zone-cjk-title-size: var(--spectrum-illustrated-message-cjk-title-size);
- --spectrum-drop-zone-body-size: var(--spectrum-illustrated-message-body-size);
- --spectrum-accordion-top-to-text-compact-small: 2px;
- --spectrum-accordion-top-to-text-compact-medium: 4px;
- --spectrum-accordion-disclosure-indicator-to-text: 0px;
- --spectrum-accordion-edge-to-disclosure-indicator: 0px;
- --spectrum-accordion-edge-to-text: 0px;
- --spectrum-accordion-focus-indicator-gap: 0px;
- --spectrum-color-handle-border-width: var(--spectrum-border-width-200);
- --spectrum-color-handle-inner-border-width: 1px;
- --spectrum-color-handle-outer-border-width: 1px;
- --spectrum-color-handle-drop-shadow-x: 0;
- --spectrum-color-handle-drop-shadow-y: 0;
- --spectrum-color-handle-drop-shadow-blur: 0;
- --spectrum-table-row-height-small-compact: var(--spectrum-component-height-75);
- --spectrum-table-row-height-medium-compact: var(--spectrum-component-height-100);
- --spectrum-table-row-height-large-compact: var(--spectrum-component-height-200);
- --spectrum-table-row-height-extra-large-compact: var(--spectrum-component-height-300);
- --spectrum-table-row-top-to-text-small-compact: var(--spectrum-component-top-to-text-75);
- --spectrum-table-row-top-to-text-medium-compact: var(--spectrum-component-top-to-text-100);
- --spectrum-table-row-top-to-text-large-compact: var(--spectrum-component-top-to-text-200);
- --spectrum-table-row-top-to-text-extra-large-compact: var(--spectrum-component-top-to-text-300);
- --spectrum-table-row-bottom-to-text-small-compact: var(--spectrum-component-bottom-to-text-75);
- --spectrum-table-row-bottom-to-text-medium-compact: var(--spectrum-component-bottom-to-text-100);
- --spectrum-table-row-bottom-to-text-large-compact: var(--spectrum-component-bottom-to-text-200);
- --spectrum-table-row-bottom-to-text-extra-large-compact: var(--spectrum-component-bottom-to-text-300);
- --spectrum-table-edge-to-content: 16px;
- --spectrum-table-border-divider-width: 1px;
- --spectrum-tab-item-height-small: var(--spectrum-component-height-200);
- --spectrum-tab-item-height-medium: var(--spectrum-component-height-300);
- --spectrum-tab-item-height-large: var(--spectrum-component-height-400);
- --spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500);
- --spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75);
- --spectrum-tab-item-compact-height-medium: var(--spectrum-component-height-100);
- --spectrum-tab-item-compact-height-large: var(--spectrum-component-height-200);
- --spectrum-tab-item-compact-height-extra-large: var(--spectrum-component-height-300);
- --spectrum-tab-item-start-to-edge-quiet: 0px;
- --spectrum-in-field-button-width-stacked-small: 20px;
- --spectrum-in-field-button-width-stacked-medium: 28px;
- --spectrum-in-field-button-width-stacked-large: 36px;
- --spectrum-in-field-button-width-stacked-extra-large: 44px;
- --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px;
- --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px;
- --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px;
- --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px;
- --spectrum-android-elevation: 2dp;
- --spectrum-spacing-50: 2px;
- --spectrum-spacing-75: 4px;
- --spectrum-spacing-100: 8px;
- --spectrum-spacing-200: 12px;
- --spectrum-spacing-300: 16px;
- --spectrum-spacing-400: 24px;
- --spectrum-spacing-500: 32px;
- --spectrum-spacing-600: 40px;
- --spectrum-spacing-700: 48px;
- --spectrum-spacing-800: 64px;
- --spectrum-spacing-900: 80px;
- --spectrum-spacing-1000: 96px;
- --spectrum-focus-indicator-thickness: 2px;
- --spectrum-focus-indicator-gap: 2px;
- --spectrum-border-width-200: 2px;
- --spectrum-border-width-400: 4px;
- --spectrum-field-edge-to-text-quiet: 0px;
- --spectrum-field-edge-to-visual-quiet: 0px;
- --spectrum-field-edge-to-border-quiet: 0px;
- --spectrum-field-edge-to-alert-icon-quiet: 0px;
- --spectrum-field-edge-to-validation-icon-quiet: 0px;
- --spectrum-text-underline-thickness: 1px;
- --spectrum-text-underline-gap: 1px;
- --spectrum-informative-color-100: var(--spectrum-blue-100);
- --spectrum-informative-color-200: var(--spectrum-blue-200);
- --spectrum-informative-color-300: var(--spectrum-blue-300);
- --spectrum-informative-color-400: var(--spectrum-blue-400);
- --spectrum-informative-color-500: var(--spectrum-blue-500);
- --spectrum-informative-color-600: var(--spectrum-blue-600);
- --spectrum-informative-color-700: var(--spectrum-blue-700);
- --spectrum-informative-color-800: var(--spectrum-blue-800);
- --spectrum-informative-color-900: var(--spectrum-blue-900);
- --spectrum-informative-color-1000: var(--spectrum-blue-1000);
- --spectrum-informative-color-1100: var(--spectrum-blue-1100);
- --spectrum-informative-color-1200: var(--spectrum-blue-1200);
- --spectrum-informative-color-1300: var(--spectrum-blue-1300);
- --spectrum-informative-color-1400: var(--spectrum-blue-1400);
- --spectrum-negative-color-100: var(--spectrum-red-100);
- --spectrum-negative-color-200: var(--spectrum-red-200);
- --spectrum-negative-color-300: var(--spectrum-red-300);
- --spectrum-negative-color-400: var(--spectrum-red-400);
- --spectrum-negative-color-500: var(--spectrum-red-500);
- --spectrum-negative-color-600: var(--spectrum-red-600);
- --spectrum-negative-color-700: var(--spectrum-red-700);
- --spectrum-negative-color-800: var(--spectrum-red-800);
- --spectrum-negative-color-900: var(--spectrum-red-900);
- --spectrum-negative-color-1000: var(--spectrum-red-1000);
- --spectrum-negative-color-1100: var(--spectrum-red-1100);
- --spectrum-negative-color-1200: var(--spectrum-red-1200);
- --spectrum-negative-color-1300: var(--spectrum-red-1300);
- --spectrum-negative-color-1400: var(--spectrum-red-1400);
- --spectrum-notice-color-100: var(--spectrum-orange-100);
- --spectrum-notice-color-200: var(--spectrum-orange-200);
- --spectrum-notice-color-300: var(--spectrum-orange-300);
- --spectrum-notice-color-400: var(--spectrum-orange-400);
- --spectrum-notice-color-500: var(--spectrum-orange-500);
- --spectrum-notice-color-600: var(--spectrum-orange-600);
- --spectrum-notice-color-700: var(--spectrum-orange-700);
- --spectrum-notice-color-800: var(--spectrum-orange-800);
- --spectrum-notice-color-900: var(--spectrum-orange-900);
- --spectrum-notice-color-1000: var(--spectrum-orange-1000);
- --spectrum-notice-color-1100: var(--spectrum-orange-1100);
- --spectrum-notice-color-1200: var(--spectrum-orange-1200);
- --spectrum-notice-color-1300: var(--spectrum-orange-1300);
- --spectrum-notice-color-1400: var(--spectrum-orange-1400);
- --spectrum-positive-color-100: var(--spectrum-green-100);
- --spectrum-positive-color-200: var(--spectrum-green-200);
- --spectrum-positive-color-300: var(--spectrum-green-300);
- --spectrum-positive-color-400: var(--spectrum-green-400);
- --spectrum-positive-color-500: var(--spectrum-green-500);
- --spectrum-positive-color-600: var(--spectrum-green-600);
- --spectrum-positive-color-700: var(--spectrum-green-700);
- --spectrum-positive-color-800: var(--spectrum-green-800);
- --spectrum-positive-color-900: var(--spectrum-green-900);
- --spectrum-positive-color-1000: var(--spectrum-green-1000);
- --spectrum-positive-color-1100: var(--spectrum-green-1100);
- --spectrum-positive-color-1200: var(--spectrum-green-1200);
- --spectrum-positive-color-1300: var(--spectrum-green-1300);
- --spectrum-positive-color-1400: var(--spectrum-green-1400);
- --spectrum-default-font-family: var(--spectrum-sans-serif-font-family);
- --spectrum-sans-serif-font-family: Adobe Clean;
- --spectrum-serif-font-family: Adobe Clean Serif;
- --spectrum-cjk-font-family: Adobe Clean Han;
- --spectrum-light-font-weight: 300;
- --spectrum-regular-font-weight: 400;
- --spectrum-medium-font-weight: 500;
- --spectrum-bold-font-weight: 700;
- --spectrum-extra-bold-font-weight: 800;
- --spectrum-black-font-weight: 900;
- --spectrum-italic-font-style: italic;
- --spectrum-default-font-style: normal;
- --spectrum-line-height-100: 1.3;
- --spectrum-line-height-200: 1.5;
- --spectrum-cjk-line-height-100: 1.5;
- --spectrum-cjk-line-height-200: 1.7;
- --spectrum-cjk-letter-spacing: 0.05em;
- --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
- --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family);
- --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family);
- --spectrum-heading-sans-serif-light-font-weight: var(--spectrum-light-font-weight);
- --spectrum-heading-sans-serif-light-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-serif-light-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight);
- --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-serif-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-heavy-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-sans-serif-heavy-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-light-strong-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-heading-sans-serif-light-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-serif-light-strong-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-heading-serif-light-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight);
- --spectrum-heading-cjk-light-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-strong-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-sans-serif-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-serif-strong-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-serif-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-sans-serif-heavy-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-serif-heavy-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-cjk-heavy-strong-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-heavy-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-light-emphasized-font-weight: var(--spectrum-light-font-weight);
- --spectrum-heading-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-heading-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-heading-cjk-light-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-serif-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-cjk-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-sans-serif-heavy-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-serif-heavy-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-serif-heavy-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-cjk-heavy-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-heavy-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-heading-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
- --spectrum-heading-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-serif-heavy-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300);
- --spectrum-heading-size-xxl: var(--spectrum-font-size-1100);
- --spectrum-heading-size-xl: var(--spectrum-font-size-900);
- --spectrum-heading-size-l: var(--spectrum-font-size-700);
- --spectrum-heading-size-m: var(--spectrum-font-size-500);
- --spectrum-heading-size-s: var(--spectrum-font-size-300);
- --spectrum-heading-size-xs: var(--spectrum-font-size-200);
- --spectrum-heading-size-xxs: var(--spectrum-font-size-100);
- --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300);
- --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900);
- --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800);
- --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600);
- --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400);
- --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300);
- --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200);
- --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100);
- --spectrum-heading-line-height: var(--spectrum-line-height-100);
- --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100);
- --spectrum-heading-margin-top-multiplier: 0.88888889;
- --spectrum-heading-margin-bottom-multiplier: 0.25;
- --spectrum-heading-color: var(--spectrum-gray-900);
- --spectrum-body-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
- --spectrum-body-serif-font-family: var(--spectrum-serif-font-family);
- --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family);
- --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style);
- --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-body-serif-font-style: var(--spectrum-default-font-style);
- --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-body-cjk-font-style: var(--spectrum-default-font-style);
- --spectrum-body-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-body-sans-serif-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight);
- --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-body-sans-serif-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-body-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-body-serif-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-body-serif-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-body-cjk-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
- --spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-body-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-body-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-body-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-body-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-body-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-body-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-body-size-xxxl: var(--spectrum-font-size-600);
- --spectrum-body-size-xxl: var(--spectrum-font-size-500);
- --spectrum-body-size-xl: var(--spectrum-font-size-400);
- --spectrum-body-size-l: var(--spectrum-font-size-300);
- --spectrum-body-size-m: var(--spectrum-font-size-200);
- --spectrum-body-size-s: var(--spectrum-font-size-100);
- --spectrum-body-size-xs: var(--spectrum-font-size-75);
- --spectrum-body-line-height: var(--spectrum-line-height-200);
- --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200);
- --spectrum-body-margin-multiplier: 0.75;
- --spectrum-body-color: var(--spectrum-gray-800);
- --spectrum-detail-sans-serif-font-family: var(--spectrum-sans-serif-font-family);
- --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family);
- --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family);
- --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-detail-serif-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
- --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-sans-serif-light-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-detail-sans-serif-light-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-serif-light-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight);
- --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-detail-sans-serif-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight);
- --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-sans-serif-light-strong-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-detail-sans-serif-light-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-serif-light-strong-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-detail-serif-light-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight);
- --spectrum-detail-cjk-light-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-detail-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-detail-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-detail-serif-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-detail-cjk-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-detail-cjk-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-sans-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-detail-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-detail-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-detail-serif-light-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-detail-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-detail-cjk-light-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-detail-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-detail-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-detail-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-detail-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-detail-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-detail-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-detail-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-detail-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight);
- --spectrum-detail-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-detail-size-xl: var(--spectrum-font-size-200);
- --spectrum-detail-size-l: var(--spectrum-font-size-100);
- --spectrum-detail-size-m: var(--spectrum-font-size-75);
- --spectrum-detail-size-s: var(--spectrum-font-size-50);
- --spectrum-detail-line-height: var(--spectrum-line-height-100);
- --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100);
- --spectrum-detail-margin-top-multiplier: 0.88888889;
- --spectrum-detail-margin-bottom-multiplier: 0.25;
- --spectrum-detail-letter-spacing: 0.06em;
- --spectrum-detail-sans-serif-text-transform: uppercase;
- --spectrum-detail-serif-text-transform: uppercase;
- --spectrum-detail-color: var(--spectrum-gray-900);
- --spectrum-code-font-family: Source Code Pro;
- --spectrum-code-cjk-font-family: var(--spectrum-code-font-family);
- --spectrum-code-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-code-font-style: var(--spectrum-default-font-style);
- --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-code-cjk-font-style: var(--spectrum-default-font-style);
- --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-code-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight);
- --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style);
- --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-code-strong-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-code-strong-emphasized-font-style: var(--spectrum-italic-font-style);
- --spectrum-code-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-code-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style);
- --spectrum-code-size-xl: var(--spectrum-font-size-400);
- --spectrum-code-size-l: var(--spectrum-font-size-300);
- --spectrum-code-size-m: var(--spectrum-font-size-200);
- --spectrum-code-size-s: var(--spectrum-font-size-100);
- --spectrum-code-size-xs: var(--spectrum-font-size-75);
- --spectrum-code-line-height: var(--spectrum-line-height-200);
- --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200);
- --spectrum-code-color: var(--spectrum-gray-800);
-}
-.spectrum--large {
- --spectrum-workflow-icon-size-50: 18px;
- --spectrum-workflow-icon-size-75: 20px;
- --spectrum-workflow-icon-size-100: 22px;
- --spectrum-workflow-icon-size-200: 24px;
- --spectrum-workflow-icon-size-300: 28px;
- --spectrum-arrow-icon-size-75: 12px;
- --spectrum-arrow-icon-size-100: 14px;
- --spectrum-arrow-icon-size-200: 16px;
- --spectrum-arrow-icon-size-300: 16px;
- --spectrum-arrow-icon-size-400: 18px;
- --spectrum-arrow-icon-size-500: 22px;
- --spectrum-arrow-icon-size-600: 24px;
- --spectrum-asterisk-icon-size-100: 10px;
- --spectrum-asterisk-icon-size-200: 12px;
- --spectrum-asterisk-icon-size-300: 12px;
- --spectrum-checkmark-icon-size-50: 12px;
- --spectrum-checkmark-icon-size-75: 12px;
- --spectrum-checkmark-icon-size-100: 14px;
- --spectrum-checkmark-icon-size-200: 14px;
- --spectrum-checkmark-icon-size-300: 16px;
- --spectrum-checkmark-icon-size-400: 18px;
- --spectrum-checkmark-icon-size-500: 20px;
- --spectrum-checkmark-icon-size-600: 24px;
- --spectrum-chevron-icon-size-50: 8px;
- --spectrum-chevron-icon-size-75: 12px;
- --spectrum-chevron-icon-size-100: 14px;
- --spectrum-chevron-icon-size-200: 14px;
- --spectrum-chevron-icon-size-300: 16px;
- --spectrum-chevron-icon-size-400: 18px;
- --spectrum-chevron-icon-size-500: 20px;
- --spectrum-chevron-icon-size-600: 24px;
- --spectrum-corner-triangle-icon-size-75: 6px;
- --spectrum-corner-triangle-icon-size-100: 7px;
- --spectrum-corner-triangle-icon-size-200: 8px;
- --spectrum-corner-triangle-icon-size-300: 8px;
- --spectrum-cross-icon-size-75: 10px;
- --spectrum-cross-icon-size-100: 10px;
- --spectrum-cross-icon-size-200: 12px;
- --spectrum-cross-icon-size-300: 14px;
- --spectrum-cross-icon-size-400: 16px;
- --spectrum-cross-icon-size-500: 16px;
- --spectrum-cross-icon-size-600: 18px;
- --spectrum-dash-icon-size-50: 10px;
- --spectrum-dash-icon-size-75: 10px;
- --spectrum-dash-icon-size-100: 12px;
- --spectrum-dash-icon-size-200: 14px;
- --spectrum-dash-icon-size-300: 16px;
- --spectrum-dash-icon-size-400: 18px;
- --spectrum-dash-icon-size-500: 20px;
- --spectrum-dash-icon-size-600: 22px;
- --spectrum-field-label-text-to-asterisk-small: 5px;
- --spectrum-field-label-text-to-asterisk-medium: 5px;
- --spectrum-field-label-text-to-asterisk-large: 6px;
- --spectrum-field-label-text-to-asterisk-extra-large: 6px;
- --spectrum-field-label-top-to-asterisk-small: 11px;
- --spectrum-field-label-top-to-asterisk-medium: 15px;
- --spectrum-field-label-top-to-asterisk-large: 19px;
- --spectrum-field-label-top-to-asterisk-extra-large: 24px;
- --spectrum-field-label-top-margin-medium: 5px;
- --spectrum-field-label-top-margin-large: 6px;
- --spectrum-field-label-top-margin-extra-large: 6px;
- --spectrum-field-label-to-component-quiet-small: -10px;
- --spectrum-field-label-to-component-quiet-medium: -10px;
- --spectrum-field-label-to-component-quiet-large: -15px;
- --spectrum-field-label-to-component-quiet-extra-large: -19px;
- --spectrum-help-text-top-to-workflow-icon-small: 5px;
- --spectrum-help-text-top-to-workflow-icon-medium: 4px;
- --spectrum-help-text-top-to-workflow-icon-large: 8px;
- --spectrum-help-text-top-to-workflow-icon-extra-large: 11px;
- --spectrum-status-light-dot-size-medium: 10px;
- --spectrum-status-light-dot-size-large: 12px;
- --spectrum-status-light-dot-size-extra-large: 12px;
- --spectrum-status-light-top-to-dot-small: 11px;
- --spectrum-status-light-top-to-dot-medium: 15px;
- --spectrum-status-light-top-to-dot-large: 19px;
- --spectrum-status-light-top-to-dot-extra-large: 24px;
- --spectrum-action-button-edge-to-hold-icon-medium: 5px;
- --spectrum-action-button-edge-to-hold-icon-large: 6px;
- --spectrum-action-button-edge-to-hold-icon-extra-large: 7px;
- --spectrum-tooltip-tip-width: 10px;
- --spectrum-tooltip-tip-height: 5px;
- --spectrum-tooltip-maximum-width: 200px;
- --spectrum-progress-circle-size-small: 20px;
- --spectrum-progress-circle-size-medium: 40px;
- --spectrum-progress-circle-size-large: 80px;
- --spectrum-progress-circle-thickness-small: 3px;
- --spectrum-progress-circle-thickness-medium: 4px;
- --spectrum-progress-circle-thickness-large: 5px;
- --spectrum-toast-height: 56px;
- --spectrum-toast-maximum-width: 420px;
- --spectrum-toast-top-to-workflow-icon: 17px;
- --spectrum-toast-top-to-text: 16px;
- --spectrum-toast-bottom-to-text: 19px;
- --spectrum-action-bar-height: 56px;
- --spectrum-action-bar-top-to-item-counter: 16px;
- --spectrum-swatch-size-extra-small: 20px;
- --spectrum-swatch-size-small: 30px;
- --spectrum-swatch-size-medium: 40px;
- --spectrum-swatch-size-large: 50px;
- --spectrum-progress-bar-thickness-small: 5px;
- --spectrum-progress-bar-thickness-medium: 8px;
- --spectrum-progress-bar-thickness-large: 10px;
- --spectrum-progress-bar-thickness-extra-large: 13px;
- --spectrum-meter-width: 240px;
- --spectrum-meter-thickness-small: 5px;
- --spectrum-meter-thickness-large: 8px;
- --spectrum-tag-top-to-avatar-small: 5px;
- --spectrum-tag-top-to-avatar-medium: 7px;
- --spectrum-tag-top-to-avatar-large: 11px;
- --spectrum-tag-top-to-cross-icon-small: 10px;
- --spectrum-tag-top-to-cross-icon-medium: 15px;
- --spectrum-tag-top-to-cross-icon-large: 19px;
- --spectrum-popover-top-to-content-area: 5px;
- --spectrum-menu-item-edge-to-content-not-selected-small: 24px;
- --spectrum-menu-item-edge-to-content-not-selected-medium: 42px;
- --spectrum-menu-item-edge-to-content-not-selected-large: 47px;
- --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px;
- --spectrum-menu-item-top-to-disclosure-icon-small: 9px;
- --spectrum-menu-item-top-to-disclosure-icon-medium: 13px;
- --spectrum-menu-item-top-to-disclosure-icon-large: 17px;
- --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px;
- --spectrum-menu-item-top-to-selected-icon-small: 9px;
- --spectrum-menu-item-top-to-selected-icon-medium: 13px;
- --spectrum-menu-item-top-to-selected-icon-large: 17px;
- --spectrum-menu-item-top-to-selected-icon-extra-large: 22px;
- --spectrum-slider-control-to-field-label-small: 6px;
- --spectrum-slider-control-to-field-label-medium: 10px;
- --spectrum-slider-control-to-field-label-large: 14px;
- --spectrum-slider-control-to-field-label-extra-large: 17px;
- --spectrum-picker-visual-to-disclosure-icon-small: 9px;
- --spectrum-picker-visual-to-disclosure-icon-medium: 10px;
- --spectrum-picker-visual-to-disclosure-icon-large: 11px;
- --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px;
- --spectrum-text-area-minimum-width: 140px;
- --spectrum-text-area-minimum-height: 70px;
- --spectrum-combo-box-visual-to-field-button-small: 9px;
- --spectrum-combo-box-visual-to-field-button-medium: 10px;
- --spectrum-combo-box-visual-to-field-button-large: 11px;
- --spectrum-combo-box-visual-to-field-button-extra-large: 13px;
- --spectrum-thumbnail-size-50: 20px;
- --spectrum-thumbnail-size-75: 22px;
- --spectrum-thumbnail-size-100: 26px;
- --spectrum-thumbnail-size-200: 28px;
- --spectrum-thumbnail-size-300: 32px;
- --spectrum-thumbnail-size-400: 36px;
- --spectrum-thumbnail-size-500: 40px;
- --spectrum-thumbnail-size-600: 46px;
- --spectrum-thumbnail-size-700: 50px;
- --spectrum-thumbnail-size-800: 55px;
- --spectrum-thumbnail-size-900: 62px;
- --spectrum-thumbnail-size-1000: 70px;
- --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs);
- --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs);
- --spectrum-opacity-checkerboard-square-size: 10px;
- --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs);
- --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs);
- --spectrum-breadcrumbs-height-multiline: 84px;
- --spectrum-breadcrumbs-top-to-text: 17px;
- --spectrum-breadcrumbs-top-to-text-compact: 16px;
- --spectrum-breadcrumbs-top-to-text-multiline: 15px;
- --spectrum-breadcrumbs-bottom-to-text: 19px;
- --spectrum-breadcrumbs-bottom-to-text-compact: 19px;
- --spectrum-breadcrumbs-bottom-to-text-multiline: 10px;
- --spectrum-breadcrumbs-start-edge-to-text: 9px;
- --spectrum-breadcrumbs-top-text-to-bottom-text: 11px;
- --spectrum-breadcrumbs-top-to-separator-icon: 25px;
- --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px;
- --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px;
- --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px;
- --spectrum-breadcrumbs-top-to-truncated-menu: 10px;
- --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px;
- --spectrum-avatar-size-50: 20px;
- --spectrum-avatar-size-75: 22px;
- --spectrum-avatar-size-100: 26px;
- --spectrum-avatar-size-200: 28px;
- --spectrum-avatar-size-300: 32px;
- --spectrum-avatar-size-400: 36px;
- --spectrum-avatar-size-500: 40px;
- --spectrum-avatar-size-600: 46px;
- --spectrum-avatar-size-700: 50px;
- --spectrum-alert-banner-minimum-height: 64px;
- --spectrum-alert-banner-width: 680px;
- --spectrum-alert-banner-top-to-workflow-icon: 21px;
- --spectrum-alert-banner-top-to-text: 21px;
- --spectrum-alert-banner-bottom-to-text: 22px;
- --spectrum-rating-indicator-width: 22px;
- --spectrum-rating-indicator-to-icon: 5px;
- --spectrum-color-area-width: 240px;
- --spectrum-color-area-minimum-width: 80px;
- --spectrum-color-area-height: 240px;
- --spectrum-color-area-minimum-height: 80px;
- --spectrum-color-wheel-width: 240px;
- --spectrum-color-wheel-minimum-width: 219px;
- --spectrum-color-slider-length: 240px;
- --spectrum-color-slider-minimum-length: 100px;
- --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s);
- --spectrum-illustrated-message-cjk-title-size: var(--spectrum-heading-cjk-size-s);
- --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs);
- --spectrum-coach-mark-width: 216px;
- --spectrum-coach-mark-minimum-width: 216px;
- --spectrum-coach-mark-maximum-width: 248px;
- --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300);
- --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px;
- --spectrum-coach-mark-media-height: 162px;
- --spectrum-coach-mark-media-minimum-height: 121px;
- --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs);
- --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs);
- --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs);
- --spectrum-accordion-top-to-text-regular-small: 7px;
- --spectrum-accordion-small-top-to-text-spacious: 12px;
- --spectrum-accordion-top-to-text-regular-medium: 9px;
- --spectrum-accordion-top-to-text-spacious-medium: 14px;
- --spectrum-accordion-top-to-text-compact-large: 7px;
- --spectrum-accordion-top-to-text-regular-large: 12px;
- --spectrum-accordion-top-to-text-spacious-large: 14px;
- --spectrum-accordion-top-to-text-compact-extra-large: 7px;
- --spectrum-accordion-top-to-text-regular-extra-large: 12px;
- --spectrum-accordion-top-to-text-spacious-extra-large: 14px;
- --spectrum-accordion-bottom-to-text-compact-small: 4px;
- --spectrum-accordion-bottom-to-text-regular-small: 9px;
- --spectrum-accordion-bottom-to-text-spacious-small: 14px;
- --spectrum-accordion-bottom-to-text-compact-medium: 8px;
- --spectrum-accordion-bottom-to-text-regular-medium: 13px;
- --spectrum-accordion-bottom-to-text-spacious-medium: 18px;
- --spectrum-accordion-bottom-to-text-compact-large: 9px;
- --spectrum-accordion-bottom-to-text-regular-large: 14px;
- --spectrum-accordion-bottom-to-text-spacious-large: 19px;
- --spectrum-accordion-bottom-to-text-compact-extra-large: 10px;
- --spectrum-accordion-bottom-to-text-regular-extra-large: 15px;
- --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px;
- --spectrum-accordion-minimum-width: 250px;
- --spectrum-accordion-content-area-top-to-content: 10px;
- --spectrum-accordion-content-area-bottom-to-content: 20px;
- --spectrum-color-handle-size: 20px;
- --spectrum-color-handle-size-key-focus: 40px;
- --spectrum-table-column-header-row-top-to-text-small: 10px;
- --spectrum-table-column-header-row-top-to-text-medium: 9px;
- --spectrum-table-column-header-row-top-to-text-large: 13px;
- --spectrum-table-column-header-row-top-to-text-extra-large: 16px;
- --spectrum-table-column-header-row-bottom-to-text-small: 11px;
- --spectrum-table-column-header-row-bottom-to-text-medium: 10px;
- --spectrum-table-column-header-row-bottom-to-text-large: 13px;
- --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px;
- --spectrum-table-row-height-small-regular: 40px;
- --spectrum-table-row-height-medium-regular: 50px;
- --spectrum-table-row-height-large-regular: 60px;
- --spectrum-table-row-height-extra-large-regular: 70px;
- --spectrum-table-row-height-small-spacious: 50px;
- --spectrum-table-row-height-medium-spacious: 60px;
- --spectrum-table-row-height-large-spacious: 70px;
- --spectrum-table-row-height-extra-large-spacious: 80px;
- --spectrum-table-row-top-to-text-small-regular: 10px;
- --spectrum-table-row-top-to-text-medium-regular: 14px;
- --spectrum-table-row-top-to-text-large-regular: 18px;
- --spectrum-table-row-top-to-text-extra-large-regular: 21px;
- --spectrum-table-row-bottom-to-text-small-regular: 11px;
- --spectrum-table-row-bottom-to-text-medium-regular: 15px;
- --spectrum-table-row-bottom-to-text-large-regular: 18px;
- --spectrum-table-row-bottom-to-text-extra-large-regular: 22px;
- --spectrum-table-row-top-to-text-small-spacious: 15px;
- --spectrum-table-row-top-to-text-medium-spacious: 18px;
- --spectrum-table-row-top-to-text-large-spacious: 23px;
- --spectrum-table-row-top-to-text-extra-large-spacious: 26px;
- --spectrum-table-row-bottom-to-text-small-spacious: 16px;
- --spectrum-table-row-bottom-to-text-medium-spacious: 18px;
- --spectrum-table-row-bottom-to-text-large-spacious: 23px;
- --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px;
- --spectrum-table-checkbox-to-text: 30px;
- --spectrum-table-header-row-checkbox-to-top-small: 14px;
- --spectrum-table-header-row-checkbox-to-top-medium: 13px;
- --spectrum-table-header-row-checkbox-to-top-large: 17px;
- --spectrum-table-header-row-checkbox-to-top-extra-large: 21px;
- --spectrum-table-row-checkbox-to-top-small-compact: 9px;
- --spectrum-table-row-checkbox-to-top-small-regular: 14px;
- --spectrum-table-row-checkbox-to-top-small-spacious: 19px;
- --spectrum-table-row-checkbox-to-top-medium-compact: 13px;
- --spectrum-table-row-checkbox-to-top-medium-regular: 18px;
- --spectrum-table-row-checkbox-to-top-medium-spacious: 23px;
- --spectrum-table-row-checkbox-to-top-large-compact: 17px;
- --spectrum-table-row-checkbox-to-top-large-regular: 22px;
- --spectrum-table-row-checkbox-to-top-large-spacious: 27px;
- --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px;
- --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px;
- --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px;
- --spectrum-table-section-header-row-height-small: 30px;
- --spectrum-table-section-header-row-height-medium: 40px;
- --spectrum-table-section-header-row-height-large: 50px;
- --spectrum-table-section-header-row-height-extra-large: 60px;
- --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px;
- --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px;
- --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px;
- --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px;
- --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px;
- --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px;
- --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px;
- --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px;
- --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px;
- --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px;
- --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px;
- --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px;
- --spectrum-tab-item-to-tab-item-horizontal-small: 27px;
- --spectrum-tab-item-to-tab-item-horizontal-medium: 30px;
- --spectrum-tab-item-to-tab-item-horizontal-large: 33px;
- --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px;
- --spectrum-tab-item-to-tab-item-vertical-small: 5px;
- --spectrum-tab-item-to-tab-item-vertical-medium: 5px;
- --spectrum-tab-item-to-tab-item-vertical-large: 6px;
- --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px;
- --spectrum-tab-item-start-to-edge-small: 13px;
- --spectrum-tab-item-start-to-edge-medium: 15px;
- --spectrum-tab-item-start-to-edge-large: 17px;
- --spectrum-tab-item-start-to-edge-extra-large: 19px;
- --spectrum-tab-item-top-to-text-small: 14px;
- --spectrum-tab-item-bottom-to-text-small: 15px;
- --spectrum-tab-item-top-to-text-medium: 18px;
- --spectrum-tab-item-bottom-to-text-medium: 19px;
- --spectrum-tab-item-top-to-text-large: 22px;
- --spectrum-tab-item-bottom-to-text-large: 22px;
- --spectrum-tab-item-top-to-text-extra-large: 25px;
- --spectrum-tab-item-bottom-to-text-extra-large: 25px;
- --spectrum-tab-item-top-to-text-compact-small: 5px;
- --spectrum-tab-item-bottom-to-text-compact-small: 6px;
- --spectrum-tab-item-top-to-text-compact-medium: 9px;
- --spectrum-tab-item-bottom-to-text-compact-medium: 10px;
- --spectrum-tab-item-top-to-text-compact-large: 12px;
- --spectrum-tab-item-bottom-to-text-compact-large: 14px;
- --spectrum-tab-item-top-to-text-compact-extra-large: 15px;
- --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px;
- --spectrum-tab-item-top-to-workflow-icon-small: 15px;
- --spectrum-tab-item-top-to-workflow-icon-medium: 19px;
- --spectrum-tab-item-top-to-workflow-icon-large: 23px;
- --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px;
- --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px;
- --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px;
- --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px;
- --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px;
- --spectrum-tab-item-focus-indicator-gap-small: 9px;
- --spectrum-tab-item-focus-indicator-gap-medium: 10px;
- --spectrum-tab-item-focus-indicator-gap-large: 11px;
- --spectrum-tab-item-focus-indicator-gap-extra-large: 12px;
- --spectrum-side-navigation-width: 240px;
- --spectrum-side-navigation-minimum-width: 200px;
- --spectrum-side-navigation-maximum-width: 300px;
- --spectrum-side-navigation-second-level-edge-to-text: 30px;
- --spectrum-side-navigation-third-level-edge-to-text: 45px;
- --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px;
- --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px;
- --spectrum-side-navigation-item-to-item: 5px;
- --spectrum-side-navigation-item-to-header: 30px;
- --spectrum-side-navigation-header-to-item: 10px;
- --spectrum-side-navigation-bottom-to-text: 10px;
- --spectrum-tray-top-to-content-area: 5px;
- --spectrum-accordion-top-to-text-spacious-small: 12px;
- --spectrum-text-to-visual-50: 8px;
- --spectrum-text-to-visual-75: 9px;
- --spectrum-text-to-visual-100: 10px;
- --spectrum-text-to-visual-200: 11px;
- --spectrum-text-to-visual-300: 13px;
- --spectrum-text-to-control-75: 11px;
- --spectrum-text-to-control-100: 13px;
- --spectrum-text-to-control-200: 14px;
- --spectrum-text-to-control-300: 16px;
- --spectrum-component-height-50: 26px;
- --spectrum-component-height-75: 30px;
- --spectrum-component-height-100: 40px;
- --spectrum-component-height-200: 50px;
- --spectrum-component-height-300: 60px;
- --spectrum-component-height-400: 70px;
- --spectrum-component-height-500: 80px;
- --spectrum-component-pill-edge-to-visual-75: 13px;
- --spectrum-component-pill-edge-to-visual-100: 17px;
- --spectrum-component-pill-edge-to-visual-200: 22px;
- --spectrum-component-pill-edge-to-visual-300: 27px;
- --spectrum-component-pill-edge-to-visual-only-75: 5px;
- --spectrum-component-pill-edge-to-visual-only-100: 9px;
- --spectrum-component-pill-edge-to-visual-only-200: 13px;
- --spectrum-component-pill-edge-to-visual-only-300: 16px;
- --spectrum-component-pill-edge-to-text-75: 15px;
- --spectrum-component-pill-edge-to-text-100: 20px;
- --spectrum-component-pill-edge-to-text-200: 25px;
- --spectrum-component-pill-edge-to-text-300: 30px;
- --spectrum-component-edge-to-visual-50: 7px;
- --spectrum-component-edge-to-visual-75: 9px;
- --spectrum-component-edge-to-visual-100: 12px;
- --spectrum-component-edge-to-visual-200: 16px;
- --spectrum-component-edge-to-visual-300: 19px;
- --spectrum-component-edge-to-visual-only-50: 4px;
- --spectrum-component-edge-to-visual-only-75: 5px;
- --spectrum-component-edge-to-visual-only-100: 9px;
- --spectrum-component-edge-to-visual-only-200: 13px;
- --spectrum-component-edge-to-visual-only-300: 16px;
- --spectrum-component-edge-to-text-50: 10px;
- --spectrum-component-edge-to-text-75: 11px;
- --spectrum-component-edge-to-text-100: 15px;
- --spectrum-component-edge-to-text-200: 19px;
- --spectrum-component-edge-to-text-300: 22px;
- --spectrum-component-top-to-workflow-icon-50: 4px;
- --spectrum-component-top-to-workflow-icon-75: 5px;
- --spectrum-component-top-to-workflow-icon-100: 9px;
- --spectrum-component-top-to-workflow-icon-200: 13px;
- --spectrum-component-top-to-workflow-icon-300: 16px;
- --spectrum-component-top-to-text-50: 4px;
- --spectrum-component-top-to-text-75: 5px;
- --spectrum-component-top-to-text-100: 8px;
- --spectrum-component-top-to-text-200: 12px;
- --spectrum-component-top-to-text-300: 15px;
- --spectrum-component-bottom-to-text-50: 6px;
- --spectrum-component-bottom-to-text-75: 6px;
- --spectrum-component-bottom-to-text-100: 11px;
- --spectrum-component-bottom-to-text-200: 14px;
- --spectrum-component-bottom-to-text-300: 18px;
- --spectrum-component-to-menu-small: 7px;
- --spectrum-component-to-menu-medium: 8px;
- --spectrum-component-to-menu-large: 9px;
- --spectrum-component-to-menu-extra-large: 10px;
- --spectrum-field-edge-to-disclosure-icon-75: 9px;
- --spectrum-field-edge-to-disclosure-icon-100: 13px;
- --spectrum-field-edge-to-disclosure-icon-200: 17px;
- --spectrum-field-edge-to-disclosure-icon-300: 22px;
- --spectrum-field-end-edge-to-disclosure-icon-75: 9px;
- --spectrum-field-end-edge-to-disclosure-icon-100: 13px;
- --spectrum-field-end-edge-to-disclosure-icon-200: 17px;
- --spectrum-field-end-edge-to-disclosure-icon-300: 22px;
- --spectrum-field-top-to-disclosure-icon-75: 9px;
- --spectrum-field-top-to-disclosure-icon-100: 13px;
- --spectrum-field-top-to-disclosure-icon-200: 17px;
- --spectrum-field-top-to-disclosure-icon-300: 22px;
- --spectrum-field-top-to-alert-icon-small: 5px;
- --spectrum-field-top-to-alert-icon-medium: 9px;
- --spectrum-field-top-to-alert-icon-large: 13px;
- --spectrum-field-top-to-alert-icon-extra-large: 16px;
- --spectrum-field-top-to-validation-icon-small: 9px;
- --spectrum-field-top-to-validation-icon-medium: 13px;
- --spectrum-field-top-to-validation-icon-large: 17px;
- --spectrum-field-top-to-validation-icon-extra-large: 22px;
- --spectrum-field-top-to-progress-circle-small: 7px;
- --spectrum-field-top-to-progress-circle-medium: 12px;
- --spectrum-field-top-to-progress-circle-large: 17px;
- --spectrum-field-top-to-progress-circle-extra-large: 22px;
- --spectrum-field-edge-to-alert-icon-small: 11px;
- --spectrum-field-edge-to-alert-icon-medium: 15px;
- --spectrum-field-edge-to-alert-icon-large: 19px;
- --spectrum-field-edge-to-alert-icon-extra-large: 22px;
- --spectrum-field-edge-to-validation-icon-small: 11px;
- --spectrum-field-edge-to-validation-icon-medium: 15px;
- --spectrum-field-edge-to-validation-icon-large: 19px;
- --spectrum-field-edge-to-validation-icon-extra-large: 22px;
- --spectrum-field-text-to-alert-icon-small: 10px;
- --spectrum-field-text-to-alert-icon-medium: 15px;
- --spectrum-field-text-to-alert-icon-large: 19px;
- --spectrum-field-text-to-alert-icon-extra-large: 22px;
- --spectrum-field-text-to-validation-icon-small: 10px;
- --spectrum-field-text-to-validation-icon-medium: 15px;
- --spectrum-field-text-to-validation-icon-large: 19px;
- --spectrum-field-text-to-validation-icon-extra-large: 22px;
- --spectrum-field-width: 240px;
- --spectrum-character-count-to-field-quiet-small: -4px;
- --spectrum-character-count-to-field-quiet-medium: -4px;
- --spectrum-character-count-to-field-quiet-large: -4px;
- --spectrum-character-count-to-field-quiet-extra-large: -5px;
- --spectrum-side-label-character-count-to-field: 15px;
- --spectrum-side-label-character-count-top-margin-small: 5px;
- --spectrum-side-label-character-count-top-margin-medium: 10px;
- --spectrum-side-label-character-count-top-margin-large: 14px;
- --spectrum-side-label-character-count-top-margin-extra-large: 18px;
- --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px;
- --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px;
- --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px;
- --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px;
- --spectrum-navigational-indicator-top-to-back-icon-small: 7px;
- --spectrum-navigational-indicator-top-to-back-icon-medium: 12px;
- --spectrum-navigational-indicator-top-to-back-icon-large: 16px;
- --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px;
- --spectrum-color-control-track-width: 30px;
- --spectrum-font-size-50: 13px;
- --spectrum-font-size-75: 15px;
- --spectrum-font-size-100: 17px;
- --spectrum-font-size-200: 19px;
- --spectrum-font-size-300: 22px;
- --spectrum-font-size-400: 24px;
- --spectrum-font-size-500: 27px;
- --spectrum-font-size-600: 31px;
- --spectrum-font-size-700: 34px;
- --spectrum-font-size-800: 39px;
- --spectrum-font-size-900: 44px;
- --spectrum-font-size-1000: 49px;
- --spectrum-font-size-1100: 55px;
- --spectrum-font-size-1200: 62px;
- --spectrum-font-size-1300: 70px;
-}
-.spectrum--light,
-.spectrum--lightest {
- --spectrum-overlay-opacity: 0.4;
- --spectrum-drop-shadow-color-rgb: 0, 0, 0;
- --spectrum-drop-shadow-color-opacity: 0.15;
- --spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
- --spectrum-background-base-color: var(--spectrum-gray-200);
- --spectrum-background-layer-1-color: var(--spectrum-gray-100);
- --spectrum-background-layer-2-color: var(--spectrum-gray-50);
- --spectrum-neutral-background-color-default: var(--spectrum-gray-800);
- --spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
- --spectrum-neutral-background-color-down: var(--spectrum-gray-900);
- --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900);
- --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-600);
- --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-700);
- --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800);
- --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-700);
- --spectrum-accent-background-color-default: var(--spectrum-accent-color-900);
- --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-accent-background-color-down: var(--spectrum-accent-color-1100);
- --spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-1000);
- --spectrum-informative-background-color-default: var(--spectrum-informative-color-900);
- --spectrum-informative-background-color-hover: var(--spectrum-informative-color-1000);
- --spectrum-informative-background-color-down: var(--spectrum-informative-color-1100);
- --spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-1000);
- --spectrum-negative-background-color-default: var(--spectrum-negative-color-900);
- --spectrum-negative-background-color-hover: var(--spectrum-negative-color-1000);
- --spectrum-negative-background-color-down: var(--spectrum-negative-color-1100);
- --spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-1000);
- --spectrum-positive-background-color-default: var(--spectrum-positive-color-900);
- --spectrum-positive-background-color-hover: var(--spectrum-positive-color-1000);
- --spectrum-positive-background-color-down: var(--spectrum-positive-color-1100);
- --spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-1000);
- --spectrum-notice-background-color-default: var(--spectrum-notice-color-600);
- --spectrum-gray-background-color-default: var(--spectrum-gray-700);
- --spectrum-red-background-color-default: var(--spectrum-red-900);
- --spectrum-orange-background-color-default: var(--spectrum-orange-600);
- --spectrum-yellow-background-color-default: var(--spectrum-yellow-400);
- --spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-500);
- --spectrum-celery-background-color-default: var(--spectrum-celery-600);
- --spectrum-green-background-color-default: var(--spectrum-green-900);
- --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900);
- --spectrum-cyan-background-color-default: var(--spectrum-cyan-900);
- --spectrum-blue-background-color-default: var(--spectrum-blue-900);
- --spectrum-indigo-background-color-default: var(--spectrum-indigo-900);
- --spectrum-purple-background-color-default: var(--spectrum-purple-900);
- --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900);
- --spectrum-magenta-background-color-default: var(--spectrum-magenta-900);
- --spectrum-neutral-visual-color: var(--spectrum-gray-500);
- --spectrum-accent-visual-color: var(--spectrum-accent-color-800);
- --spectrum-informative-visual-color: var(--spectrum-informative-color-800);
- --spectrum-negative-visual-color: var(--spectrum-negative-color-800);
- --spectrum-notice-visual-color: var(--spectrum-notice-color-700);
- --spectrum-positive-visual-color: var(--spectrum-positive-color-700);
- --spectrum-gray-visual-color: var(--spectrum-gray-500);
- --spectrum-red-visual-color: var(--spectrum-red-800);
- --spectrum-orange-visual-color: var(--spectrum-orange-700);
- --spectrum-yellow-visual-color: var(--spectrum-yellow-600);
- --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600);
- --spectrum-celery-visual-color: var(--spectrum-celery-700);
- --spectrum-green-visual-color: var(--spectrum-green-700);
- --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700);
- --spectrum-cyan-visual-color: var(--spectrum-cyan-600);
- --spectrum-blue-visual-color: var(--spectrum-blue-800);
- --spectrum-indigo-visual-color: var(--spectrum-indigo-800);
- --spectrum-purple-visual-color: var(--spectrum-purple-800);
- --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800);
- --spectrum-magenta-visual-color: var(--spectrum-magenta-800);
- --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200);
- --spectrum-gray-50-rgb: 255, 255, 255;
- --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb));
- --spectrum-gray-75-rgb: 253, 253, 253;
- --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb));
- --spectrum-gray-100-rgb: 248, 248, 248;
- --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb));
- --spectrum-gray-200-rgb: 230, 230, 230;
- --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb));
- --spectrum-gray-300-rgb: 213, 213, 213;
- --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb));
- --spectrum-gray-400-rgb: 177, 177, 177;
- --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb));
- --spectrum-gray-500-rgb: 144, 144, 144;
- --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb));
- --spectrum-gray-600-rgb: 109, 109, 109;
- --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb));
- --spectrum-gray-700-rgb: 70, 70, 70;
- --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb));
- --spectrum-gray-800-rgb: 34, 34, 34;
- --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb));
- --spectrum-gray-900-rgb: 0, 0, 0;
- --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb));
- --spectrum-blue-100-rgb: 224, 242, 255;
- --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb));
- --spectrum-blue-200-rgb: 202, 232, 255;
- --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb));
- --spectrum-blue-300-rgb: 181, 222, 255;
- --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb));
- --spectrum-blue-400-rgb: 150, 206, 253;
- --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb));
- --spectrum-blue-500-rgb: 120, 187, 250;
- --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb));
- --spectrum-blue-600-rgb: 89, 167, 246;
- --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb));
- --spectrum-blue-700-rgb: 56, 146, 243;
- --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb));
- --spectrum-blue-800-rgb: 20, 122, 243;
- --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb));
- --spectrum-blue-900-rgb: 2, 101, 220;
- --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb));
- --spectrum-blue-1000-rgb: 0, 84, 182;
- --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb));
- --spectrum-blue-1100-rgb: 0, 68, 145;
- --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb));
- --spectrum-blue-1200-rgb: 0, 53, 113;
- --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb));
- --spectrum-blue-1300-rgb: 0, 39, 84;
- --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb));
- --spectrum-blue-1400-rgb: 0, 28, 60;
- --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb));
- --spectrum-red-100-rgb: 255, 235, 231;
- --spectrum-red-100: rgba(var(--spectrum-red-100-rgb));
- --spectrum-red-200-rgb: 255, 221, 214;
- --spectrum-red-200: rgba(var(--spectrum-red-200-rgb));
- --spectrum-red-300-rgb: 255, 205, 195;
- --spectrum-red-300: rgba(var(--spectrum-red-300-rgb));
- --spectrum-red-400-rgb: 255, 183, 169;
- --spectrum-red-400: rgba(var(--spectrum-red-400-rgb));
- --spectrum-red-500-rgb: 255, 155, 136;
- --spectrum-red-500: rgba(var(--spectrum-red-500-rgb));
- --spectrum-red-600-rgb: 255, 124, 101;
- --spectrum-red-600: rgba(var(--spectrum-red-600-rgb));
- --spectrum-red-700-rgb: 247, 92, 70;
- --spectrum-red-700: rgba(var(--spectrum-red-700-rgb));
- --spectrum-red-800-rgb: 234, 56, 41;
- --spectrum-red-800: rgba(var(--spectrum-red-800-rgb));
- --spectrum-red-900-rgb: 211, 21, 16;
- --spectrum-red-900: rgba(var(--spectrum-red-900-rgb));
- --spectrum-red-1000-rgb: 180, 0, 0;
- --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb));
- --spectrum-red-1100-rgb: 147, 0, 0;
- --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb));
- --spectrum-red-1200-rgb: 116, 0, 0;
- --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb));
- --spectrum-red-1300-rgb: 89, 0, 0;
- --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb));
- --spectrum-red-1400-rgb: 67, 0, 0;
- --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb));
- --spectrum-orange-100-rgb: 255, 236, 204;
- --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb));
- --spectrum-orange-200-rgb: 255, 223, 173;
- --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb));
- --spectrum-orange-300-rgb: 253, 210, 145;
- --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb));
- --spectrum-orange-400-rgb: 255, 187, 99;
- --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb));
- --spectrum-orange-500-rgb: 255, 160, 55;
- --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb));
- --spectrum-orange-600-rgb: 246, 133, 17;
- --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb));
- --spectrum-orange-700-rgb: 228, 111, 0;
- --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb));
- --spectrum-orange-800-rgb: 203, 93, 0;
- --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb));
- --spectrum-orange-900-rgb: 177, 76, 0;
- --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb));
- --spectrum-orange-1000-rgb: 149, 61, 0;
- --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb));
- --spectrum-orange-1100-rgb: 122, 47, 0;
- --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb));
- --spectrum-orange-1200-rgb: 97, 35, 0;
- --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb));
- --spectrum-orange-1300-rgb: 73, 25, 1;
- --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb));
- --spectrum-orange-1400-rgb: 53, 18, 1;
- --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb));
- --spectrum-yellow-100-rgb: 251, 241, 152;
- --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb));
- --spectrum-yellow-200-rgb: 248, 231, 80;
- --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb));
- --spectrum-yellow-300-rgb: 248, 217, 4;
- --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb));
- --spectrum-yellow-400-rgb: 232, 198, 0;
- --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb));
- --spectrum-yellow-500-rgb: 215, 179, 0;
- --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb));
- --spectrum-yellow-600-rgb: 196, 159, 0;
- --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb));
- --spectrum-yellow-700-rgb: 176, 140, 0;
- --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb));
- --spectrum-yellow-800-rgb: 155, 120, 0;
- --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb));
- --spectrum-yellow-900-rgb: 133, 102, 0;
- --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb));
- --spectrum-yellow-1000-rgb: 112, 83, 0;
- --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb));
- --spectrum-yellow-1100-rgb: 91, 67, 0;
- --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb));
- --spectrum-yellow-1200-rgb: 72, 51, 0;
- --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb));
- --spectrum-yellow-1300-rgb: 54, 37, 0;
- --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb));
- --spectrum-yellow-1400-rgb: 40, 26, 0;
- --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb));
- --spectrum-chartreuse-100-rgb: 219, 252, 110;
- --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb));
- --spectrum-chartreuse-200-rgb: 203, 244, 67;
- --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb));
- --spectrum-chartreuse-300-rgb: 188, 233, 42;
- --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb));
- --spectrum-chartreuse-400-rgb: 170, 216, 22;
- --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb));
- --spectrum-chartreuse-500-rgb: 152, 197, 10;
- --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb));
- --spectrum-chartreuse-600-rgb: 135, 177, 3;
- --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb));
- --spectrum-chartreuse-700-rgb: 118, 156, 0;
- --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb));
- --spectrum-chartreuse-800-rgb: 103, 136, 0;
- --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb));
- --spectrum-chartreuse-900-rgb: 87, 116, 0;
- --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb));
- --spectrum-chartreuse-1000-rgb: 72, 96, 0;
- --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb));
- --spectrum-chartreuse-1100-rgb: 58, 77, 0;
- --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb));
- --spectrum-chartreuse-1200-rgb: 44, 59, 0;
- --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb));
- --spectrum-chartreuse-1300-rgb: 33, 44, 0;
- --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb));
- --spectrum-chartreuse-1400-rgb: 24, 31, 0;
- --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb));
- --spectrum-celery-100-rgb: 205, 252, 191;
- --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb));
- --spectrum-celery-200-rgb: 174, 246, 157;
- --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb));
- --spectrum-celery-300-rgb: 150, 238, 133;
- --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb));
- --spectrum-celery-400-rgb: 114, 224, 106;
- --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb));
- --spectrum-celery-500-rgb: 78, 207, 80;
- --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb));
- --spectrum-celery-600-rgb: 39, 187, 54;
- --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb));
- --spectrum-celery-700-rgb: 7, 167, 33;
- --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb));
- --spectrum-celery-800-rgb: 0, 145, 18;
- --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb));
- --spectrum-celery-900-rgb: 0, 124, 15;
- --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb));
- --spectrum-celery-1000-rgb: 0, 103, 15;
- --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb));
- --spectrum-celery-1100-rgb: 0, 83, 13;
- --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb));
- --spectrum-celery-1200-rgb: 0, 64, 10;
- --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb));
- --spectrum-celery-1300-rgb: 0, 48, 7;
- --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb));
- --spectrum-celery-1400-rgb: 0, 34, 5;
- --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb));
- --spectrum-green-100-rgb: 206, 248, 224;
- --spectrum-green-100: rgba(var(--spectrum-green-100-rgb));
- --spectrum-green-200-rgb: 173, 244, 206;
- --spectrum-green-200: rgba(var(--spectrum-green-200-rgb));
- --spectrum-green-300-rgb: 137, 236, 188;
- --spectrum-green-300: rgba(var(--spectrum-green-300-rgb));
- --spectrum-green-400-rgb: 103, 222, 168;
- --spectrum-green-400: rgba(var(--spectrum-green-400-rgb));
- --spectrum-green-500-rgb: 73, 204, 147;
- --spectrum-green-500: rgba(var(--spectrum-green-500-rgb));
- --spectrum-green-600-rgb: 47, 184, 128;
- --spectrum-green-600: rgba(var(--spectrum-green-600-rgb));
- --spectrum-green-700-rgb: 21, 164, 110;
- --spectrum-green-700: rgba(var(--spectrum-green-700-rgb));
- --spectrum-green-800-rgb: 0, 143, 93;
- --spectrum-green-800: rgba(var(--spectrum-green-800-rgb));
- --spectrum-green-900-rgb: 0, 122, 77;
- --spectrum-green-900: rgba(var(--spectrum-green-900-rgb));
- --spectrum-green-1000-rgb: 0, 101, 62;
- --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb));
- --spectrum-green-1100-rgb: 0, 81, 50;
- --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb));
- --spectrum-green-1200-rgb: 5, 63, 39;
- --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb));
- --spectrum-green-1300-rgb: 10, 46, 29;
- --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb));
- --spectrum-green-1400-rgb: 10, 32, 21;
- --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb));
- --spectrum-seafoam-100-rgb: 206, 247, 243;
- --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
- --spectrum-seafoam-200-rgb: 170, 241, 234;
- --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb));
- --spectrum-seafoam-300-rgb: 140, 233, 226;
- --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb));
- --spectrum-seafoam-400-rgb: 101, 218, 210;
- --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb));
- --spectrum-seafoam-500-rgb: 63, 201, 193;
- --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb));
- --spectrum-seafoam-600-rgb: 15, 181, 174;
- --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb));
- --spectrum-seafoam-700-rgb: 0, 161, 154;
- --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb));
- --spectrum-seafoam-800-rgb: 0, 140, 135;
- --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb));
- --spectrum-seafoam-900-rgb: 0, 119, 114;
- --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb));
- --spectrum-seafoam-1000-rgb: 0, 99, 95;
- --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb));
- --spectrum-seafoam-1100-rgb: 12, 79, 76;
- --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb));
- --spectrum-seafoam-1200-rgb: 18, 60, 58;
- --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb));
- --spectrum-seafoam-1300-rgb: 18, 44, 43;
- --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb));
- --spectrum-seafoam-1400-rgb: 15, 31, 30;
- --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb));
- --spectrum-cyan-100-rgb: 197, 248, 255;
- --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb));
- --spectrum-cyan-200-rgb: 164, 240, 255;
- --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb));
- --spectrum-cyan-300-rgb: 136, 231, 250;
- --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb));
- --spectrum-cyan-400-rgb: 96, 216, 243;
- --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb));
- --spectrum-cyan-500-rgb: 51, 197, 232;
- --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb));
- --spectrum-cyan-600-rgb: 18, 176, 218;
- --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb));
- --spectrum-cyan-700-rgb: 1, 156, 200;
- --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb));
- --spectrum-cyan-800-rgb: 0, 134, 180;
- --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb));
- --spectrum-cyan-900-rgb: 0, 113, 159;
- --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb));
- --spectrum-cyan-1000-rgb: 0, 93, 137;
- --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb));
- --spectrum-cyan-1100-rgb: 0, 74, 115;
- --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb));
- --spectrum-cyan-1200-rgb: 0, 57, 93;
- --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb));
- --spectrum-cyan-1300-rgb: 0, 42, 70;
- --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb));
- --spectrum-cyan-1400-rgb: 0, 30, 51;
- --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb));
- --spectrum-indigo-100-rgb: 237, 238, 255;
- --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb));
- --spectrum-indigo-200-rgb: 224, 226, 255;
- --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb));
- --spectrum-indigo-300-rgb: 211, 213, 255;
- --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb));
- --spectrum-indigo-400-rgb: 193, 196, 255;
- --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb));
- --spectrum-indigo-500-rgb: 172, 175, 255;
- --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb));
- --spectrum-indigo-600-rgb: 149, 153, 255;
- --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb));
- --spectrum-indigo-700-rgb: 126, 132, 252;
- --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb));
- --spectrum-indigo-800-rgb: 104, 109, 244;
- --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb));
- --spectrum-indigo-900-rgb: 82, 88, 228;
- --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb));
- --spectrum-indigo-1000-rgb: 64, 70, 202;
- --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb));
- --spectrum-indigo-1100-rgb: 50, 54, 168;
- --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb));
- --spectrum-indigo-1200-rgb: 38, 41, 134;
- --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb));
- --spectrum-indigo-1300-rgb: 27, 30, 100;
- --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb));
- --spectrum-indigo-1400-rgb: 20, 22, 72;
- --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb));
- --spectrum-purple-100-rgb: 246, 235, 255;
- --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb));
- --spectrum-purple-200-rgb: 238, 221, 255;
- --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb));
- --spectrum-purple-300-rgb: 230, 208, 255;
- --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb));
- --spectrum-purple-400-rgb: 219, 187, 254;
- --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb));
- --spectrum-purple-500-rgb: 204, 164, 253;
- --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb));
- --spectrum-purple-600-rgb: 189, 139, 252;
- --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb));
- --spectrum-purple-700-rgb: 174, 114, 249;
- --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb));
- --spectrum-purple-800-rgb: 157, 87, 244;
- --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb));
- --spectrum-purple-900-rgb: 137, 61, 231;
- --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb));
- --spectrum-purple-1000-rgb: 115, 38, 211;
- --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb));
- --spectrum-purple-1100-rgb: 93, 19, 183;
- --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb));
- --spectrum-purple-1200-rgb: 71, 12, 148;
- --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb));
- --spectrum-purple-1300-rgb: 51, 16, 106;
- --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb));
- --spectrum-purple-1400-rgb: 35, 15, 73;
- --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb));
- --spectrum-fuchsia-100-rgb: 255, 233, 252;
- --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb));
- --spectrum-fuchsia-200-rgb: 255, 218, 250;
- --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb));
- --spectrum-fuchsia-300-rgb: 254, 199, 248;
- --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb));
- --spectrum-fuchsia-400-rgb: 251, 174, 246;
- --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb));
- --spectrum-fuchsia-500-rgb: 245, 146, 243;
- --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb));
- --spectrum-fuchsia-600-rgb: 237, 116, 237;
- --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb));
- --spectrum-fuchsia-700-rgb: 224, 85, 226;
- --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb));
- --spectrum-fuchsia-800-rgb: 205, 58, 206;
- --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb));
- --spectrum-fuchsia-900-rgb: 182, 34, 183;
- --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb));
- --spectrum-fuchsia-1000-rgb: 157, 3, 158;
- --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb));
- --spectrum-fuchsia-1100-rgb: 128, 0, 129;
- --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb));
- --spectrum-fuchsia-1200-rgb: 100, 6, 100;
- --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb));
- --spectrum-fuchsia-1300-rgb: 71, 14, 70;
- --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb));
- --spectrum-fuchsia-1400-rgb: 50, 13, 49;
- --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb));
- --spectrum-magenta-100-rgb: 255, 234, 241;
- --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb));
- --spectrum-magenta-200-rgb: 255, 220, 232;
- --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb));
- --spectrum-magenta-300-rgb: 255, 202, 221;
- --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb));
- --spectrum-magenta-400-rgb: 255, 178, 206;
- --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb));
- --spectrum-magenta-500-rgb: 255, 149, 189;
- --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb));
- --spectrum-magenta-600-rgb: 250, 119, 170;
- --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb));
- --spectrum-magenta-700-rgb: 239, 90, 152;
- --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb));
- --spectrum-magenta-800-rgb: 222, 61, 130;
- --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb));
- --spectrum-magenta-900-rgb: 200, 34, 105;
- --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb));
- --spectrum-magenta-1000-rgb: 173, 9, 85;
- --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb));
- --spectrum-magenta-1100-rgb: 142, 0, 69;
- --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb));
- --spectrum-magenta-1200-rgb: 112, 0, 55;
- --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb));
- --spectrum-magenta-1300-rgb: 84, 3, 42;
- --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
- --spectrum-magenta-1400-rgb: 60, 6, 29;
- --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
- --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900);
- --spectrum-icon-color-green-primary-default: var(--spectrum-green-900);
- --spectrum-icon-color-red-primary-default: var(--spectrum-red-900);
- --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400);
-}
-.spectrum--medium {
- --spectrum-workflow-icon-size-50: 14px;
- --spectrum-workflow-icon-size-75: 16px;
- --spectrum-workflow-icon-size-100: 18px;
- --spectrum-workflow-icon-size-200: 20px;
- --spectrum-workflow-icon-size-300: 22px;
- --spectrum-arrow-icon-size-75: 10px;
- --spectrum-arrow-icon-size-100: 10px;
- --spectrum-arrow-icon-size-200: 12px;
- --spectrum-arrow-icon-size-300: 14px;
- --spectrum-arrow-icon-size-400: 16px;
- --spectrum-arrow-icon-size-500: 18px;
- --spectrum-arrow-icon-size-600: 20px;
- --spectrum-asterisk-icon-size-100: 8px;
- --spectrum-asterisk-icon-size-200: 10px;
- --spectrum-asterisk-icon-size-300: 10px;
- --spectrum-checkmark-icon-size-50: 10px;
- --spectrum-checkmark-icon-size-75: 10px;
- --spectrum-checkmark-icon-size-100: 10px;
- --spectrum-checkmark-icon-size-200: 12px;
- --spectrum-checkmark-icon-size-300: 14px;
- --spectrum-checkmark-icon-size-400: 16px;
- --spectrum-checkmark-icon-size-500: 16px;
- --spectrum-checkmark-icon-size-600: 18px;
- --spectrum-chevron-icon-size-50: 6px;
- --spectrum-chevron-icon-size-75: 10px;
- --spectrum-chevron-icon-size-100: 10px;
- --spectrum-chevron-icon-size-200: 12px;
- --spectrum-chevron-icon-size-300: 14px;
- --spectrum-chevron-icon-size-400: 16px;
- --spectrum-chevron-icon-size-500: 16px;
- --spectrum-chevron-icon-size-600: 18px;
- --spectrum-corner-triangle-icon-size-75: 5px;
- --spectrum-corner-triangle-icon-size-100: 5px;
- --spectrum-corner-triangle-icon-size-200: 6px;
- --spectrum-corner-triangle-icon-size-300: 7px;
- --spectrum-cross-icon-size-75: 8px;
- --spectrum-cross-icon-size-100: 8px;
- --spectrum-cross-icon-size-200: 10px;
- --spectrum-cross-icon-size-300: 12px;
- --spectrum-cross-icon-size-400: 12px;
- --spectrum-cross-icon-size-500: 14px;
- --spectrum-cross-icon-size-600: 16px;
- --spectrum-dash-icon-size-50: 8px;
- --spectrum-dash-icon-size-75: 8px;
- --spectrum-dash-icon-size-100: 10px;
- --spectrum-dash-icon-size-200: 12px;
- --spectrum-dash-icon-size-300: 12px;
- --spectrum-dash-icon-size-400: 14px;
- --spectrum-dash-icon-size-500: 16px;
- --spectrum-dash-icon-size-600: 18px;
- --spectrum-field-label-text-to-asterisk-small: 4px;
- --spectrum-field-label-text-to-asterisk-medium: 4px;
- --spectrum-field-label-text-to-asterisk-large: 5px;
- --spectrum-field-label-text-to-asterisk-extra-large: 5px;
- --spectrum-field-label-top-to-asterisk-small: 8px;
- --spectrum-field-label-top-to-asterisk-medium: 12px;
- --spectrum-field-label-top-to-asterisk-large: 15px;
- --spectrum-field-label-top-to-asterisk-extra-large: 19px;
- --spectrum-field-label-top-margin-medium: 4px;
- --spectrum-field-label-top-margin-large: 5px;
- --spectrum-field-label-top-margin-extra-large: 5px;
- --spectrum-field-label-to-component-quiet-small: -8px;
- --spectrum-field-label-to-component-quiet-medium: -8px;
- --spectrum-field-label-to-component-quiet-large: -12px;
- --spectrum-field-label-to-component-quiet-extra-large: -15px;
- --spectrum-help-text-top-to-workflow-icon-small: 4px;
- --spectrum-help-text-top-to-workflow-icon-medium: 3px;
- --spectrum-help-text-top-to-workflow-icon-large: 6px;
- --spectrum-help-text-top-to-workflow-icon-extra-large: 9px;
- --spectrum-status-light-dot-size-medium: 8px;
- --spectrum-status-light-dot-size-large: 10px;
- --spectrum-status-light-dot-size-extra-large: 10px;
- --spectrum-status-light-top-to-dot-small: 8px;
- --spectrum-status-light-top-to-dot-medium: 12px;
- --spectrum-status-light-top-to-dot-large: 15px;
- --spectrum-status-light-top-to-dot-extra-large: 19px;
- --spectrum-action-button-edge-to-hold-icon-medium: 4px;
- --spectrum-action-button-edge-to-hold-icon-large: 5px;
- --spectrum-action-button-edge-to-hold-icon-extra-large: 6px;
- --spectrum-tooltip-tip-width: 8px;
- --spectrum-tooltip-tip-height: 4px;
- --spectrum-tooltip-maximum-width: 160px;
- --spectrum-progress-circle-size-small: 16px;
- --spectrum-progress-circle-size-medium: 32px;
- --spectrum-progress-circle-size-large: 64px;
- --spectrum-progress-circle-thickness-small: 2px;
- --spectrum-progress-circle-thickness-medium: 3px;
- --spectrum-progress-circle-thickness-large: 4px;
- --spectrum-toast-height: 48px;
- --spectrum-toast-maximum-width: 336px;
- --spectrum-toast-top-to-workflow-icon: 15px;
- --spectrum-toast-top-to-text: 14px;
- --spectrum-toast-bottom-to-text: 17px;
- --spectrum-action-bar-height: 48px;
- --spectrum-action-bar-top-to-item-counter: 14px;
- --spectrum-swatch-size-extra-small: 16px;
- --spectrum-swatch-size-small: 24px;
- --spectrum-swatch-size-medium: 32px;
- --spectrum-swatch-size-large: 40px;
- --spectrum-progress-bar-thickness-small: 4px;
- --spectrum-progress-bar-thickness-medium: 6px;
- --spectrum-progress-bar-thickness-large: 8px;
- --spectrum-progress-bar-thickness-extra-large: 10px;
- --spectrum-meter-width: 192px;
- --spectrum-meter-thickness-small: 4px;
- --spectrum-meter-thickness-large: 6px;
- --spectrum-tag-top-to-avatar-small: 4px;
- --spectrum-tag-top-to-avatar-medium: 6px;
- --spectrum-tag-top-to-avatar-large: 9px;
- --spectrum-tag-top-to-cross-icon-small: 8px;
- --spectrum-tag-top-to-cross-icon-medium: 12px;
- --spectrum-tag-top-to-cross-icon-large: 15px;
- --spectrum-popover-top-to-content-area: 4px;
- --spectrum-menu-item-edge-to-content-not-selected-small: 28px;
- --spectrum-menu-item-edge-to-content-not-selected-medium: 32px;
- --spectrum-menu-item-edge-to-content-not-selected-large: 38px;
- --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px;
- --spectrum-menu-item-top-to-disclosure-icon-small: 7px;
- --spectrum-menu-item-top-to-disclosure-icon-medium: 11px;
- --spectrum-menu-item-top-to-disclosure-icon-large: 14px;
- --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px;
- --spectrum-menu-item-top-to-selected-icon-small: 7px;
- --spectrum-menu-item-top-to-selected-icon-medium: 11px;
- --spectrum-menu-item-top-to-selected-icon-large: 14px;
- --spectrum-menu-item-top-to-selected-icon-extra-large: 17px;
- --spectrum-slider-control-to-field-label-small: 5px;
- --spectrum-slider-control-to-field-label-medium: 8px;
- --spectrum-slider-control-to-field-label-large: 11px;
- --spectrum-slider-control-to-field-label-extra-large: 14px;
- --spectrum-picker-visual-to-disclosure-icon-small: 7px;
- --spectrum-picker-visual-to-disclosure-icon-medium: 8px;
- --spectrum-picker-visual-to-disclosure-icon-large: 9px;
- --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px;
- --spectrum-text-area-minimum-width: 112px;
- --spectrum-text-area-minimum-height: 56px;
- --spectrum-combo-box-visual-to-field-button-small: 7px;
- --spectrum-combo-box-visual-to-field-button-medium: 8px;
- --spectrum-combo-box-visual-to-field-button-large: 9px;
- --spectrum-combo-box-visual-to-field-button-extra-large: 10px;
- --spectrum-thumbnail-size-50: 16px;
- --spectrum-thumbnail-size-75: 18px;
- --spectrum-thumbnail-size-100: 20px;
- --spectrum-thumbnail-size-200: 22px;
- --spectrum-thumbnail-size-300: 26px;
- --spectrum-thumbnail-size-400: 28px;
- --spectrum-thumbnail-size-500: 32px;
- --spectrum-thumbnail-size-600: 36px;
- --spectrum-thumbnail-size-700: 40px;
- --spectrum-thumbnail-size-800: 44px;
- --spectrum-thumbnail-size-900: 50px;
- --spectrum-thumbnail-size-1000: 56px;
- --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s);
- --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s);
- --spectrum-opacity-checkerboard-square-size: 8px;
- --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs);
- --spectrum-contextual-help-body-size: var(--spectrum-body-size-s);
- --spectrum-breadcrumbs-height-multiline: 72px;
- --spectrum-breadcrumbs-top-to-text: 13px;
- --spectrum-breadcrumbs-top-to-text-compact: 11px;
- --spectrum-breadcrumbs-top-to-text-multiline: 12px;
- --spectrum-breadcrumbs-bottom-to-text: 15px;
- --spectrum-breadcrumbs-bottom-to-text-compact: 12px;
- --spectrum-breadcrumbs-bottom-to-text-multiline: 9px;
- --spectrum-breadcrumbs-start-edge-to-text: 8px;
- --spectrum-breadcrumbs-top-text-to-bottom-text: 9px;
- --spectrum-breadcrumbs-top-to-separator-icon: 19px;
- --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px;
- --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px;
- --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px;
- --spectrum-breadcrumbs-top-to-truncated-menu: 8px;
- --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px;
- --spectrum-avatar-size-50: 16px;
- --spectrum-avatar-size-75: 18px;
- --spectrum-avatar-size-100: 20px;
- --spectrum-avatar-size-200: 22px;
- --spectrum-avatar-size-300: 26px;
- --spectrum-avatar-size-400: 28px;
- --spectrum-avatar-size-500: 32px;
- --spectrum-avatar-size-600: 36px;
- --spectrum-avatar-size-700: 40px;
- --spectrum-alert-banner-minimum-height: 48px;
- --spectrum-alert-banner-width: 832px;
- --spectrum-alert-banner-top-to-workflow-icon: 15px;
- --spectrum-alert-banner-top-to-text: 14px;
- --spectrum-alert-banner-bottom-to-text: 17px;
- --spectrum-rating-indicator-width: 18px;
- --spectrum-rating-indicator-to-icon: 4px;
- --spectrum-color-area-width: 192px;
- --spectrum-color-area-minimum-width: 64px;
- --spectrum-color-area-height: 192px;
- --spectrum-color-area-minimum-height: 64px;
- --spectrum-color-wheel-width: 192px;
- --spectrum-color-wheel-minimum-width: 175px;
- --spectrum-color-slider-length: 192px;
- --spectrum-color-slider-minimum-length: 80px;
- --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m);
- --spectrum-illustrated-message-cjk-title-size: var(--spectrum-heading-cjk-size-m);
- --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s);
- --spectrum-coach-mark-width: 296px;
- --spectrum-coach-mark-minimum-width: 296px;
- --spectrum-coach-mark-maximum-width: 380px;
- --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400);
- --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px;
- --spectrum-coach-mark-media-height: 222px;
- --spectrum-coach-mark-media-minimum-height: 166px;
- --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs);
- --spectrum-coach-mark-body-size: var(--spectrum-body-size-s);
- --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s);
- --spectrum-accordion-top-to-text-regular-small: 5px;
- --spectrum-accordion-small-top-to-text-spacious: 9px;
- --spectrum-accordion-top-to-text-regular-medium: 8px;
- --spectrum-accordion-top-to-text-spacious-medium: 12px;
- --spectrum-accordion-top-to-text-compact-large: 4px;
- --spectrum-accordion-top-to-text-regular-large: 9px;
- --spectrum-accordion-top-to-text-spacious-large: 12px;
- --spectrum-accordion-top-to-text-compact-extra-large: 5px;
- --spectrum-accordion-top-to-text-regular-extra-large: 9px;
- --spectrum-accordion-top-to-text-spacious-extra-large: 13px;
- --spectrum-accordion-bottom-to-text-compact-small: 2px;
- --spectrum-accordion-bottom-to-text-regular-small: 7px;
- --spectrum-accordion-bottom-to-text-spacious-small: 11px;
- --spectrum-accordion-bottom-to-text-compact-medium: 5px;
- --spectrum-accordion-bottom-to-text-regular-medium: 9px;
- --spectrum-accordion-bottom-to-text-spacious-medium: 13px;
- --spectrum-accordion-bottom-to-text-compact-large: 8px;
- --spectrum-accordion-bottom-to-text-regular-large: 11px;
- --spectrum-accordion-bottom-to-text-spacious-large: 16px;
- --spectrum-accordion-bottom-to-text-compact-extra-large: 8px;
- --spectrum-accordion-bottom-to-text-regular-extra-large: 12px;
- --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px;
- --spectrum-accordion-minimum-width: 200px;
- --spectrum-accordion-content-area-top-to-content: 8px;
- --spectrum-accordion-content-area-bottom-to-content: 16px;
- --spectrum-color-handle-size: 16px;
- --spectrum-color-handle-size-key-focus: 32px;
- --spectrum-table-column-header-row-top-to-text-small: 8px;
- --spectrum-table-column-header-row-top-to-text-medium: 7px;
- --spectrum-table-column-header-row-top-to-text-large: 10px;
- --spectrum-table-column-header-row-top-to-text-extra-large: 13px;
- --spectrum-table-column-header-row-bottom-to-text-small: 9px;
- --spectrum-table-column-header-row-bottom-to-text-medium: 8px;
- --spectrum-table-column-header-row-bottom-to-text-large: 10px;
- --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px;
- --spectrum-table-row-height-small-regular: 32px;
- --spectrum-table-row-height-medium-regular: 40px;
- --spectrum-table-row-height-large-regular: 48px;
- --spectrum-table-row-height-extra-large-regular: 56px;
- --spectrum-table-row-height-small-spacious: 40px;
- --spectrum-table-row-height-medium-spacious: 48px;
- --spectrum-table-row-height-large-spacious: 56px;
- --spectrum-table-row-height-extra-large-spacious: 64px;
- --spectrum-table-row-top-to-text-small-regular: 8px;
- --spectrum-table-row-top-to-text-medium-regular: 11px;
- --spectrum-table-row-top-to-text-large-regular: 14px;
- --spectrum-table-row-top-to-text-extra-large-regular: 17px;
- --spectrum-table-row-bottom-to-text-small-regular: 9px;
- --spectrum-table-row-bottom-to-text-medium-regular: 12px;
- --spectrum-table-row-bottom-to-text-large-regular: 14px;
- --spectrum-table-row-bottom-to-text-extra-large-regular: 17px;
- --spectrum-table-row-top-to-text-small-spacious: 12px;
- --spectrum-table-row-top-to-text-medium-spacious: 15px;
- --spectrum-table-row-top-to-text-large-spacious: 18px;
- --spectrum-table-row-top-to-text-extra-large-spacious: 21px;
- --spectrum-table-row-bottom-to-text-small-spacious: 13px;
- --spectrum-table-row-bottom-to-text-medium-spacious: 16px;
- --spectrum-table-row-bottom-to-text-large-spacious: 18px;
- --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px;
- --spectrum-table-checkbox-to-text: 24px;
- --spectrum-table-header-row-checkbox-to-top-small: 10px;
- --spectrum-table-header-row-checkbox-to-top-medium: 9px;
- --spectrum-table-header-row-checkbox-to-top-large: 12px;
- --spectrum-table-header-row-checkbox-to-top-extra-large: 15px;
- --spectrum-table-row-checkbox-to-top-small-compact: 6px;
- --spectrum-table-row-checkbox-to-top-small-regular: 10px;
- --spectrum-table-row-checkbox-to-top-small-spacious: 14px;
- --spectrum-table-row-checkbox-to-top-medium-compact: 9px;
- --spectrum-table-row-checkbox-to-top-medium-regular: 13px;
- --spectrum-table-row-checkbox-to-top-medium-spacious: 17px;
- --spectrum-table-row-checkbox-to-top-large-compact: 12px;
- --spectrum-table-row-checkbox-to-top-large-regular: 16px;
- --spectrum-table-row-checkbox-to-top-large-spacious: 20px;
- --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px;
- --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px;
- --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px;
- --spectrum-table-section-header-row-height-small: 24px;
- --spectrum-table-section-header-row-height-medium: 32px;
- --spectrum-table-section-header-row-height-large: 40px;
- --spectrum-table-section-header-row-height-extra-large: 48px;
- --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px;
- --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px;
- --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px;
- --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px;
- --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px;
- --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px;
- --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px;
- --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px;
- --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px;
- --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px;
- --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px;
- --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px;
- --spectrum-tab-item-to-tab-item-horizontal-small: 21px;
- --spectrum-tab-item-to-tab-item-horizontal-medium: 24px;
- --spectrum-tab-item-to-tab-item-horizontal-large: 27px;
- --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px;
- --spectrum-tab-item-to-tab-item-vertical-small: 4px;
- --spectrum-tab-item-to-tab-item-vertical-medium: 4px;
- --spectrum-tab-item-to-tab-item-vertical-large: 5px;
- --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px;
- --spectrum-tab-item-start-to-edge-small: 12px;
- --spectrum-tab-item-start-to-edge-medium: 12px;
- --spectrum-tab-item-start-to-edge-large: 13px;
- --spectrum-tab-item-start-to-edge-extra-large: 13px;
- --spectrum-tab-item-top-to-text-small: 11px;
- --spectrum-tab-item-bottom-to-text-small: 12px;
- --spectrum-tab-item-top-to-text-medium: 14px;
- --spectrum-tab-item-bottom-to-text-medium: 14px;
- --spectrum-tab-item-top-to-text-large: 16px;
- --spectrum-tab-item-bottom-to-text-large: 18px;
- --spectrum-tab-item-top-to-text-extra-large: 19px;
- --spectrum-tab-item-bottom-to-text-extra-large: 20px;
- --spectrum-tab-item-top-to-text-compact-small: 4px;
- --spectrum-tab-item-bottom-to-text-compact-small: 5px;
- --spectrum-tab-item-top-to-text-compact-medium: 6px;
- --spectrum-tab-item-bottom-to-text-compact-medium: 8px;
- --spectrum-tab-item-top-to-text-compact-large: 10px;
- --spectrum-tab-item-bottom-to-text-compact-large: 12px;
- --spectrum-tab-item-top-to-text-compact-extra-large: 12px;
- --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px;
- --spectrum-tab-item-top-to-workflow-icon-small: 13px;
- --spectrum-tab-item-top-to-workflow-icon-medium: 15px;
- --spectrum-tab-item-top-to-workflow-icon-large: 17px;
- --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px;
- --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px;
- --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px;
- --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px;
- --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px;
- --spectrum-tab-item-focus-indicator-gap-small: 7px;
- --spectrum-tab-item-focus-indicator-gap-medium: 8px;
- --spectrum-tab-item-focus-indicator-gap-large: 9px;
- --spectrum-tab-item-focus-indicator-gap-extra-large: 10px;
- --spectrum-side-navigation-width: 192px;
- --spectrum-side-navigation-minimum-width: 160px;
- --spectrum-side-navigation-maximum-width: 240px;
- --spectrum-side-navigation-second-level-edge-to-text: 24px;
- --spectrum-side-navigation-third-level-edge-to-text: 36px;
- --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px;
- --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px;
- --spectrum-side-navigation-item-to-item: 4px;
- --spectrum-side-navigation-item-to-header: 24px;
- --spectrum-side-navigation-header-to-item: 8px;
- --spectrum-side-navigation-bottom-to-text: 8px;
- --spectrum-tray-top-to-content-area: 4px;
- --spectrum-accordion-top-to-text-spacious-small: 9px;
- --spectrum-text-to-visual-50: 6px;
- --spectrum-text-to-visual-75: 7px;
- --spectrum-text-to-visual-100: 8px;
- --spectrum-text-to-visual-200: 9px;
- --spectrum-text-to-visual-300: 10px;
- --spectrum-text-to-control-75: 9px;
- --spectrum-text-to-control-100: 10px;
- --spectrum-text-to-control-200: 11px;
- --spectrum-text-to-control-300: 13px;
- --spectrum-component-height-50: 20px;
- --spectrum-component-height-75: 24px;
- --spectrum-component-height-100: 32px;
- --spectrum-component-height-200: 40px;
- --spectrum-component-height-300: 48px;
- --spectrum-component-height-400: 56px;
- --spectrum-component-height-500: 64px;
- --spectrum-component-pill-edge-to-visual-75: 10px;
- --spectrum-component-pill-edge-to-visual-100: 14px;
- --spectrum-component-pill-edge-to-visual-200: 18px;
- --spectrum-component-pill-edge-to-visual-300: 21px;
- --spectrum-component-pill-edge-to-visual-only-75: 4px;
- --spectrum-component-pill-edge-to-visual-only-100: 7px;
- --spectrum-component-pill-edge-to-visual-only-200: 10px;
- --spectrum-component-pill-edge-to-visual-only-300: 13px;
- --spectrum-component-pill-edge-to-text-75: 12px;
- --spectrum-component-pill-edge-to-text-100: 16px;
- --spectrum-component-pill-edge-to-text-200: 20px;
- --spectrum-component-pill-edge-to-text-300: 24px;
- --spectrum-component-edge-to-visual-50: 6px;
- --spectrum-component-edge-to-visual-75: 7px;
- --spectrum-component-edge-to-visual-100: 10px;
- --spectrum-component-edge-to-visual-200: 13px;
- --spectrum-component-edge-to-visual-300: 15px;
- --spectrum-component-edge-to-visual-only-50: 3px;
- --spectrum-component-edge-to-visual-only-75: 4px;
- --spectrum-component-edge-to-visual-only-100: 7px;
- --spectrum-component-edge-to-visual-only-200: 10px;
- --spectrum-component-edge-to-visual-only-300: 13px;
- --spectrum-component-edge-to-text-50: 8px;
- --spectrum-component-edge-to-text-75: 9px;
- --spectrum-component-edge-to-text-100: 12px;
- --spectrum-component-edge-to-text-200: 15px;
- --spectrum-component-edge-to-text-300: 18px;
- --spectrum-component-top-to-workflow-icon-50: 3px;
- --spectrum-component-top-to-workflow-icon-75: 4px;
- --spectrum-component-top-to-workflow-icon-100: 7px;
- --spectrum-component-top-to-workflow-icon-200: 10px;
- --spectrum-component-top-to-workflow-icon-300: 13px;
- --spectrum-component-top-to-text-50: 3px;
- --spectrum-component-top-to-text-75: 4px;
- --spectrum-component-top-to-text-100: 6px;
- --spectrum-component-top-to-text-200: 9px;
- --spectrum-component-top-to-text-300: 12px;
- --spectrum-component-bottom-to-text-50: 3px;
- --spectrum-component-bottom-to-text-75: 5px;
- --spectrum-component-bottom-to-text-100: 9px;
- --spectrum-component-bottom-to-text-200: 11px;
- --spectrum-component-bottom-to-text-300: 14px;
- --spectrum-component-to-menu-small: 6px;
- --spectrum-component-to-menu-medium: 6px;
- --spectrum-component-to-menu-large: 7px;
- --spectrum-component-to-menu-extra-large: 8px;
- --spectrum-field-edge-to-disclosure-icon-75: 7px;
- --spectrum-field-edge-to-disclosure-icon-100: 11px;
- --spectrum-field-edge-to-disclosure-icon-200: 14px;
- --spectrum-field-edge-to-disclosure-icon-300: 17px;
- --spectrum-field-end-edge-to-disclosure-icon-75: 7px;
- --spectrum-field-end-edge-to-disclosure-icon-100: 11px;
- --spectrum-field-end-edge-to-disclosure-icon-200: 14px;
- --spectrum-field-end-edge-to-disclosure-icon-300: 17px;
- --spectrum-field-top-to-disclosure-icon-75: 7px;
- --spectrum-field-top-to-disclosure-icon-100: 11px;
- --spectrum-field-top-to-disclosure-icon-200: 14px;
- --spectrum-field-top-to-disclosure-icon-300: 17px;
- --spectrum-field-top-to-alert-icon-small: 4px;
- --spectrum-field-top-to-alert-icon-medium: 7px;
- --spectrum-field-top-to-alert-icon-large: 10px;
- --spectrum-field-top-to-alert-icon-extra-large: 13px;
- --spectrum-field-top-to-validation-icon-small: 7px;
- --spectrum-field-top-to-validation-icon-medium: 11px;
- --spectrum-field-top-to-validation-icon-large: 14px;
- --spectrum-field-top-to-validation-icon-extra-large: 17px;
- --spectrum-field-top-to-progress-circle-small: 4px;
- --spectrum-field-top-to-progress-circle-medium: 8px;
- --spectrum-field-top-to-progress-circle-large: 12px;
- --spectrum-field-top-to-progress-circle-extra-large: 16px;
- --spectrum-field-edge-to-alert-icon-small: 9px;
- --spectrum-field-edge-to-alert-icon-medium: 12px;
- --spectrum-field-edge-to-alert-icon-large: 15px;
- --spectrum-field-edge-to-alert-icon-extra-large: 18px;
- --spectrum-field-edge-to-validation-icon-small: 9px;
- --spectrum-field-edge-to-validation-icon-medium: 12px;
- --spectrum-field-edge-to-validation-icon-large: 15px;
- --spectrum-field-edge-to-validation-icon-extra-large: 18px;
- --spectrum-field-text-to-alert-icon-small: 8px;
- --spectrum-field-text-to-alert-icon-medium: 12px;
- --spectrum-field-text-to-alert-icon-large: 15px;
- --spectrum-field-text-to-alert-icon-extra-large: 18px;
- --spectrum-field-text-to-validation-icon-small: 8px;
- --spectrum-field-text-to-validation-icon-medium: 12px;
- --spectrum-field-text-to-validation-icon-large: 15px;
- --spectrum-field-text-to-validation-icon-extra-large: 18px;
- --spectrum-field-width: 192px;
- --spectrum-character-count-to-field-quiet-small: -3px;
- --spectrum-character-count-to-field-quiet-medium: -3px;
- --spectrum-character-count-to-field-quiet-large: -3px;
- --spectrum-character-count-to-field-quiet-extra-large: -4px;
- --spectrum-side-label-character-count-to-field: 12px;
- --spectrum-side-label-character-count-top-margin-small: 4px;
- --spectrum-side-label-character-count-top-margin-medium: 8px;
- --spectrum-side-label-character-count-top-margin-large: 11px;
- --spectrum-side-label-character-count-top-margin-extra-large: 14px;
- --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px;
- --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px;
- --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px;
- --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px;
- --spectrum-navigational-indicator-top-to-back-icon-small: 6px;
- --spectrum-navigational-indicator-top-to-back-icon-medium: 9px;
- --spectrum-navigational-indicator-top-to-back-icon-large: 12px;
- --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px;
- --spectrum-color-control-track-width: 24px;
- --spectrum-font-size-50: 11px;
- --spectrum-font-size-75: 12px;
- --spectrum-font-size-100: 14px;
- --spectrum-font-size-200: 16px;
- --spectrum-font-size-300: 18px;
- --spectrum-font-size-400: 20px;
- --spectrum-font-size-500: 22px;
- --spectrum-font-size-600: 25px;
- --spectrum-font-size-700: 28px;
- --spectrum-font-size-800: 32px;
- --spectrum-font-size-900: 36px;
- --spectrum-font-size-1000: 40px;
- --spectrum-font-size-1100: 45px;
- --spectrum-font-size-1200: 50px;
- --spectrum-font-size-1300: 60px;
-}
-.spectrum--dark {
- --spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
- --spectrum-menu-item-background-color-default-opacity: 0;
- --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
- --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
- --spectrum-dropindicator-color: var(--spectrum-blue-700);
-
- --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
- --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
- --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200);
- --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
- --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-
- --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
-
- --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-
- --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
- --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-
- --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-
- --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
- --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
-
- --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
- --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
- --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
- --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-
- --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
- --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
- --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-
- --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
- --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-
- --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
- --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
- --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-
- --spectrum-swatch-border-color-rgb: 255, 255, 255;
-
- --spectrum-swatch-border-color-opacity: 0.51;
-
- --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-border-color-light-rgb: 255, 255, 255;
- --spectrum-swatch-border-color-light-opacity: 0.2;
- --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-.spectrum--darkest {
- --spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
- --spectrum-menu-item-background-color-default-opacity: 0;
- --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
- --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
- --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
- --spectrum-dropindicator-color: var(--spectrum-blue-700);
-
- --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
- --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08);
- --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-down: rgba(var(--spectrum-white-rgb), 0.15);
- --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08);
- --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
-
- --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
-
- --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
-
- --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
- --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-
- --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
-
- --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08);
- --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
-
- --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
- --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
- --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
- --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
-
- --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
- --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
- --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
-
- --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
- --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-
- --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
- --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
- --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
-
- --spectrum-swatch-border-color-rgb: 255, 255, 255;
-
- --spectrum-swatch-border-color-opacity: 0.51;
-
- --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-border-color-light-rgb: 255, 255, 255;
- --spectrum-swatch-border-color-light-opacity: 0.2;
- --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-.spectrum {
- --spectrum-neutral-background-color-selected-default: var(--spectrum-gray-700);
- --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800);
- --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
- --spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-800);
- --spectrum-slider-track-thickness: 2px;
- --spectrum-slider-handle-gap: 4px;
- --spectrum-picker-border-width: var(--spectrum-border-width-100);
- --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
- --spectrum-in-field-button-edge-to-fill: 0px;
- --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
- --spectrum-corner-radius-75: 2px;
- --spectrum-drop-shadow-x: 0px;
- --spectrum-border-width-100: 1px;
- --spectrum-accent-color-100: var(--spectrum-blue-100);
- --spectrum-accent-color-200: var(--spectrum-blue-200);
- --spectrum-accent-color-300: var(--spectrum-blue-300);
- --spectrum-accent-color-400: var(--spectrum-blue-400);
- --spectrum-accent-color-500: var(--spectrum-blue-500);
- --spectrum-accent-color-600: var(--spectrum-blue-600);
- --spectrum-accent-color-700: var(--spectrum-blue-700);
- --spectrum-accent-color-800: var(--spectrum-blue-800);
- --spectrum-accent-color-900: var(--spectrum-blue-900);
- --spectrum-accent-color-1000: var(--spectrum-blue-1000);
- --spectrum-accent-color-1100: var(--spectrum-blue-1100);
- --spectrum-accent-color-1200: var(--spectrum-blue-1200);
- --spectrum-accent-color-1300: var(--spectrum-blue-1300);
- --spectrum-accent-color-1400: var(--spectrum-blue-1400);
- --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
- --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
- --system: spectrum;
- --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
- --spectrum-animation-duration-0: 0ms;
- --spectrum-animation-duration-100: 130ms;
- --spectrum-animation-duration-200: 160ms;
- --spectrum-animation-duration-300: 190ms;
- --spectrum-animation-duration-400: 220ms;
- --spectrum-animation-duration-500: 250ms;
- --spectrum-animation-duration-600: 300ms;
- --spectrum-animation-duration-700: 350ms;
- --spectrum-animation-duration-800: 400ms;
- --spectrum-animation-duration-900: 450ms;
- --spectrum-animation-duration-1000: 500ms;
- --spectrum-animation-duration-2000: 1000ms;
- --spectrum-animation-duration-4000: 2000ms;
- --spectrum-animation-duration-6000: 3000ms;
- --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
- --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
- --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
- --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
-
- --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
-
- --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
- --spectrum-serif-font: var(--spectrum-serif-font-family-stack);
-
- --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
-
- --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
- --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
-
- --spectrum-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-font-style: var(--spectrum-default-font-style);
- --spectrum-font-size: var(--spectrum-font-size-100);
-
- --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
- --spectrum-cjk-font: var(--spectrum-code-font-family-stack);
- --spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
- --spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
- --spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
- --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
-
- --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
-}
-.spectrum--large {
- --spectrum-checkbox-control-size-small: 16px;
- --spectrum-checkbox-control-size-medium: 18px;
- --spectrum-checkbox-control-size-large: 20px;
- --spectrum-checkbox-control-size-extra-large: 22px;
- --spectrum-checkbox-top-to-control-small: 7px;
- --spectrum-checkbox-top-to-control-medium: 11px;
- --spectrum-checkbox-top-to-control-large: 15px;
- --spectrum-checkbox-top-to-control-extra-large: 19px;
- --spectrum-switch-control-width-small: 32px;
- --spectrum-switch-control-width-medium: 36px;
- --spectrum-switch-control-width-large: 41px;
- --spectrum-switch-control-width-extra-large: 46px;
- --spectrum-switch-control-height-small: 16px;
- --spectrum-switch-control-height-medium: 18px;
- --spectrum-switch-control-height-large: 20px;
- --spectrum-switch-control-height-extra-large: 22px;
- --spectrum-switch-top-to-control-small: 7px;
- --spectrum-switch-top-to-control-medium: 11px;
- --spectrum-switch-top-to-control-large: 15px;
- --spectrum-switch-top-to-control-extra-large: 19px;
- --spectrum-radio-button-control-size-small: 16px;
- --spectrum-radio-button-control-size-medium: 18px;
- --spectrum-radio-button-control-size-large: 20px;
- --spectrum-radio-button-control-size-extra-large: 22px;
- --spectrum-radio-button-top-to-control-small: 7px;
- --spectrum-radio-button-top-to-control-medium: 11px;
- --spectrum-radio-button-top-to-control-large: 15px;
- --spectrum-radio-button-top-to-control-extra-large: 19px;
- --spectrum-slider-control-height-small: 18px;
- --spectrum-slider-control-height-medium: 20px;
- --spectrum-slider-control-height-large: 22px;
- --spectrum-slider-control-height-extra-large: 26px;
- --spectrum-slider-handle-size-small: 18px;
- --spectrum-slider-handle-size-medium: 20px;
- --spectrum-slider-handle-size-large: 22px;
- --spectrum-slider-handle-size-extra-large: 26px;
- --spectrum-slider-handle-border-width-down-small: 7px;
- --spectrum-slider-handle-border-width-down-medium: 8px;
- --spectrum-slider-handle-border-width-down-large: 9px;
- --spectrum-slider-handle-border-width-down-extra-large: 11px;
- --spectrum-slider-bottom-to-handle-small: 6px;
- --spectrum-slider-bottom-to-handle-medium: 10px;
- --spectrum-slider-bottom-to-handle-large: 14px;
- --spectrum-slider-bottom-to-handle-extra-large: 17px;
- --spectrum-corner-radius-100: 5px;
- --spectrum-corner-radius-200: 10px;
- --spectrum-drop-shadow-y: 2px;
- --spectrum-drop-shadow-blur: 6px;
- --spectrum-slider-tick-mark-height: 13px;
- --spectrum-slider-ramp-track-height: 20px;
-
- --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
- --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
- --spectrum-colorwheel-colorarea-container-size: 182px;
-
- --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
-
- --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
-
- --spectrum-menu-item-checkmark-height-small: 12px;
- --spectrum-menu-item-checkmark-height-medium: 14px;
- --spectrum-menu-item-checkmark-height-large: 16px;
- --spectrum-menu-item-checkmark-height-extra-large: 16px;
-
- --spectrum-menu-item-checkmark-width-small: 12px;
- --spectrum-menu-item-checkmark-width-medium: 14px;
- --spectrum-menu-item-checkmark-width-large: 16px;
- --spectrum-menu-item-checkmark-width-extra-large: 16px;
-
- --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
-
- --spectrum-button-top-to-text-small: 6px;
- --spectrum-button-bottom-to-text-small: 5px;
- --spectrum-button-top-to-text-medium: 9px;
- --spectrum-button-bottom-to-text-medium: 10px;
- --spectrum-button-top-to-text-large: 12px;
- --spectrum-button-bottom-to-text-large: 13px;
- --spectrum-button-top-to-text-extra-large: 16px;
- --spectrum-button-bottom-to-text-extra-large: 17px;
-
- --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
- --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
- --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
-
- --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
- --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
-
- --spectrum-coach-indicator-gap: 8px;
- --spectrum-coach-indicator-ring-diameter: 20px;
- --spectrum-coach-indicator-quiet-ring-diameter: 10px;
-
- --spectrum-coachmark-buttongroup-display: none;
- --spectrum-coachmark-buttongroup-mobile-display: flex;
- --spectrum-coachmark-menu-display: none;
- --spectrum-coachmark-menu-mobile-display: inline-flex;
-
- --spectrum-well-padding: 20px;
- --spectrum-well-margin-top: 5px;
- --spectrum-well-min-width: 300px;
- --spectrum-well-border-radius: 5px;
- --spectrum-workflow-icon-size-xxl: 40px;
- --spectrum-workflow-icon-size-xxs: 15px;
-
- --spectrum-treeview-item-indentation-medium: 20px;
- --spectrum-treeview-item-indentation-small: 15px;
- --spectrum-treeview-item-indentation-large: 25px;
- --spectrum-treeview-item-indentation-extra-large: 30px;
- --spectrum-treeview-indicator-inset-block-start: 6px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
-
- --spectrum-dialog-confirm-entry-animation-distance: 25px;
- --spectrum-dialog-confirm-hero-height: 160px;
- --spectrum-dialog-confirm-border-radius: 5px;
- --spectrum-dialog-confirm-title-text-size: 19px;
- --spectrum-dialog-confirm-description-text-size: 15px;
- --spectrum-dialog-confirm-padding-grid: 24px;
-
- --spectrum-datepicker-initial-width: 160px;
- --spectrum-datepicker-generic-padding: 15px;
- --spectrum-datepicker-dash-line-height: 30px;
- --spectrum-datepicker-width-quiet-first: 90px;
- --spectrum-datepicker-width-quiet-second: 20px;
- --spectrum-datepicker-datetime-width-first: 45px;
- --spectrum-datepicker-invalid-icon-to-button: 10px;
- --spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
- --spectrum-datepicker-input-datetime-width: 30px;
-
- --spectrum-pagination-textfield-width: 60px;
- --spectrum-pagination-item-inline-spacing: 6px;
-
- --spectrum-dial-border-radius: 20px;
- --spectrum-dial-handle-position: 10px;
- --spectrum-dial-handle-block-margin: 20px;
- --spectrum-dial-handle-inline-margin: 20px;
- --spectrum-dial-controls-margin: 10px;
- --spectrum-dial-label-gap-y: 6px;
- --spectrum-dial-label-container-top-to-text: 5px;
-
- --spectrum-assetcard-focus-ring-border-radius: 9px;
- --spectrum-assetcard-selectionindicator-margin: 15px;
- --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
- --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
-
- --spectrum-tooltip-animation-distance: 5px;
-
- --spectrum-ui-icon-medium-display: none;
- --spectrum-ui-icon-large-display: block;
-}
-.spectrum--light,
-.spectrum--lightest {
- --spectrum-menu-item-background-color-default-rgb: 0, 0, 0;
- --spectrum-menu-item-background-color-default-opacity: 0;
- --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
- --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200);
- --spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200);
- --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200);
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
- --spectrum-dropindicator-color: var(--spectrum-blue-800);
-
- --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
- --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
- --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200);
- --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
- --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
-
- --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
-
- --spectrum-badge-label-icon-color-primary: var(--spectrum-white);
-
- --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
- --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
- --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
-
- --spectrum-well-border-color: var(--spectrum-black);
-
- --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
-
- --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
- --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
-
- --spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
- --spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
- --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
- --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
-
- --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
- --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
- --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
- --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
-
- --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
- --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
-
- --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
- --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
- --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
-
- --spectrum-swatch-border-color-rgb: 0, 0, 0;
-
- --spectrum-swatch-border-color-opacity: 0.51;
-
- --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-border-color-light-rgb: 0, 0, 0;
- --spectrum-swatch-border-color-light-opacity: 0.2;
- --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
-}
-.spectrum--medium {
- --spectrum-checkbox-control-size-small: 12px;
- --spectrum-checkbox-control-size-medium: 14px;
- --spectrum-checkbox-control-size-large: 16px;
- --spectrum-checkbox-control-size-extra-large: 18px;
- --spectrum-checkbox-top-to-control-small: 6px;
- --spectrum-checkbox-top-to-control-medium: 9px;
- --spectrum-checkbox-top-to-control-large: 12px;
- --spectrum-checkbox-top-to-control-extra-large: 15px;
- --spectrum-switch-control-width-small: 23px;
- --spectrum-switch-control-width-medium: 26px;
- --spectrum-switch-control-width-large: 29px;
- --spectrum-switch-control-width-extra-large: 33px;
- --spectrum-switch-control-height-small: 12px;
- --spectrum-switch-control-height-medium: 14px;
- --spectrum-switch-control-height-large: 16px;
- --spectrum-switch-control-height-extra-large: 18px;
- --spectrum-switch-top-to-control-small: 6px;
- --spectrum-switch-top-to-control-medium: 9px;
- --spectrum-switch-top-to-control-large: 12px;
- --spectrum-switch-top-to-control-extra-large: 15px;
- --spectrum-radio-button-control-size-small: 12px;
- --spectrum-radio-button-control-size-medium: 14px;
- --spectrum-radio-button-control-size-large: 16px;
- --spectrum-radio-button-control-size-extra-large: 18px;
- --spectrum-radio-button-top-to-control-small: 6px;
- --spectrum-radio-button-top-to-control-medium: 9px;
- --spectrum-radio-button-top-to-control-large: 12px;
- --spectrum-radio-button-top-to-control-extra-large: 15px;
- --spectrum-slider-control-height-small: 14px;
- --spectrum-slider-control-height-medium: 16px;
- --spectrum-slider-control-height-large: 18px;
- --spectrum-slider-control-height-extra-large: 20px;
- --spectrum-slider-handle-size-small: 14px;
- --spectrum-slider-handle-size-medium: 16px;
- --spectrum-slider-handle-size-large: 18px;
- --spectrum-slider-handle-size-extra-large: 20px;
- --spectrum-slider-handle-border-width-down-small: 5px;
- --spectrum-slider-handle-border-width-down-medium: 6px;
- --spectrum-slider-handle-border-width-down-large: 7px;
- --spectrum-slider-handle-border-width-down-extra-large: 8px;
- --spectrum-slider-bottom-to-handle-small: 5px;
- --spectrum-slider-bottom-to-handle-medium: 8px;
- --spectrum-slider-bottom-to-handle-large: 11px;
- --spectrum-slider-bottom-to-handle-extra-large: 14px;
- --spectrum-corner-radius-100: 4px;
- --spectrum-corner-radius-200: 8px;
- --spectrum-drop-shadow-y: 1px;
- --spectrum-drop-shadow-blur: 4px;
- --spectrum-slider-tick-mark-height: 10px;
- --spectrum-slider-ramp-track-height: 16px;
-
- --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
- --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
- --spectrum-colorwheel-colorarea-container-size: 144px;
-
- --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
-
- --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
- --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
-
- --spectrum-menu-item-checkmark-height-small: 10px;
- --spectrum-menu-item-checkmark-height-medium: 10px;
- --spectrum-menu-item-checkmark-height-large: 12px;
- --spectrum-menu-item-checkmark-height-extra-large: 14px;
-
- --spectrum-menu-item-checkmark-width-small: 10px;
- --spectrum-menu-item-checkmark-width-medium: 10px;
- --spectrum-menu-item-checkmark-width-large: 12px;
- --spectrum-menu-item-checkmark-width-extra-large: 14px;
-
- --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
-
- --spectrum-button-top-to-text-small: 5px;
- --spectrum-button-bottom-to-text-small: 4px;
- --spectrum-button-top-to-text-medium: 7px;
- --spectrum-button-bottom-to-text-medium: 8px;
- --spectrum-button-top-to-text-large: 10px;
- --spectrum-button-bottom-to-text-large: 10px;
- --spectrum-button-top-to-text-extra-large: 13px;
- --spectrum-button-bottom-to-text-extra-large: 13px;
-
- --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
- --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
- --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
-
- --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
- --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
-
- --spectrum-coach-indicator-gap: 6px;
- --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
- --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
-
- --spectrum-coachmark-buttongroup-display: flex;
- --spectrum-coachmark-buttongroup-mobile-display: none;
- --spectrum-coachmark-menu-display: inline-flex;
- --spectrum-coachmark-menu-mobile-display: none;
- --spectrum-well-padding: var(--spectrum-spacing-300);
- --spectrum-well-margin-top: var(--spectrum-spacing-75);
- --spectrum-well-min-width: 240px;
- --spectrum-well-border-radius: var(--spectrum-spacing-75);
- --spectrum-workflow-icon-size-xxl: 32px;
- --spectrum-workflow-icon-size-xxs: 12px;
-
- --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
- --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
- --spectrum-treeview-item-indentation-large: 20px;
- --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
- --spectrum-treeview-indicator-inset-block-start: 5px;
- --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
-
- --spectrum-dialog-confirm-entry-animation-distance: 20px;
- --spectrum-dialog-confirm-hero-height: 128px;
- --spectrum-dialog-confirm-border-radius: 4px;
- --spectrum-dialog-confirm-title-text-size: 18px;
- --spectrum-dialog-confirm-description-text-size: 14px;
- --spectrum-dialog-confirm-padding-grid: 40px;
-
- --spectrum-datepicker-initial-width: 128px;
- --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
- --spectrum-datepicker-dash-line-height: 24px;
- --spectrum-datepicker-width-quiet-first: 72px;
- --spectrum-datepicker-width-quiet-second: 16px;
- --spectrum-datepicker-datetime-width-first: 36px;
- --spectrum-datepicker-invalid-icon-to-button: 8px;
- --spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
- --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
-
- --spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
- --spectrum-pagination-item-inline-spacing: 5px;
-
- --spectrum-dial-border-radius: 16px;
- --spectrum-dial-handle-position: 8px;
- --spectrum-dial-handle-block-margin: 16px;
- --spectrum-dial-handle-inline-margin: 16px;
- --spectrum-dial-controls-margin: 8px;
- --spectrum-dial-label-gap-y: 5px;
- --spectrum-dial-label-container-top-to-text: 4px;
-
- --spectrum-assetcard-focus-ring-border-radius: 8px;
- --spectrum-assetcard-selectionindicator-margin: 12px;
- --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
- --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
- --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
-
- --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
-
- --spectrum-ui-icon-medium-display: block;
- --spectrum-ui-icon-large-display: none;
-}
-.spectrum--express.spectrum--dark,
-.spectrum--express.spectrum--darkest {
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb);
- --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
-}
-.spectrum--express {
- --spectrum-neutral-background-color-selected-default: var(--spectrum-gray-800);
- --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900);
- --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
- --spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-900);
- --spectrum-slider-track-thickness: 4px;
- --spectrum-slider-handle-gap: 0px;
- --spectrum-picker-border-width: 0;
- --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px;
- --spectrum-in-field-button-edge-to-fill: 4px;
- --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px;
- --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px;
- --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px;
- --spectrum-border-width-100: 2px;
- --spectrum-accent-color-100: var(--spectrum-indigo-100);
- --spectrum-accent-color-200: var(--spectrum-indigo-200);
- --spectrum-accent-color-300: var(--spectrum-indigo-300);
- --spectrum-accent-color-400: var(--spectrum-indigo-400);
- --spectrum-accent-color-500: var(--spectrum-indigo-500);
- --spectrum-accent-color-600: var(--spectrum-indigo-600);
- --spectrum-accent-color-700: var(--spectrum-indigo-700);
- --spectrum-accent-color-800: var(--spectrum-indigo-800);
- --spectrum-accent-color-900: var(--spectrum-indigo-900);
- --spectrum-accent-color-1000: var(--spectrum-indigo-1000);
- --spectrum-accent-color-1100: var(--spectrum-indigo-1100);
- --spectrum-accent-color-1200: var(--spectrum-indigo-1200);
- --spectrum-accent-color-1300: var(--spectrum-indigo-1300);
- --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
- --spectrum-heading-sans-serif-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-black-font-weight);
- --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-black-font-weight);
- --system: express;
-}
-.spectrum--express.spectrum--large {
- --spectrum-checkbox-control-size-small: 18px;
- --spectrum-checkbox-control-size-medium: 20px;
- --spectrum-checkbox-control-size-large: 22px;
- --spectrum-checkbox-control-size-extra-large: 26px;
- --spectrum-checkbox-top-to-control-small: 6px;
- --spectrum-checkbox-top-to-control-medium: 10px;
- --spectrum-checkbox-top-to-control-large: 14px;
- --spectrum-checkbox-top-to-control-extra-large: 17px;
- --spectrum-switch-control-width-small: 32px;
- --spectrum-switch-control-width-medium: 36px;
- --spectrum-switch-control-width-large: 41px;
- --spectrum-switch-control-width-extra-large: 46px;
- --spectrum-switch-control-height-small: 18px;
- --spectrum-switch-control-height-medium: 20px;
- --spectrum-switch-control-height-large: 22px;
- --spectrum-switch-control-height-extra-large: 26px;
- --spectrum-switch-top-to-control-small: 6px;
- --spectrum-switch-top-to-control-medium: 10px;
- --spectrum-switch-top-to-control-large: 14px;
- --spectrum-switch-top-to-control-extra-large: 17px;
- --spectrum-radio-button-control-size-small: 18px;
- --spectrum-radio-button-control-size-medium: 20px;
- --spectrum-radio-button-control-size-large: 22px;
- --spectrum-radio-button-control-size-extra-large: 26px;
- --spectrum-radio-button-top-to-control-small: 6px;
- --spectrum-radio-button-top-to-control-medium: 10px;
- --spectrum-radio-button-top-to-control-large: 14px;
- --spectrum-radio-button-top-to-control-extra-large: 17px;
- --spectrum-slider-control-height-small: 22px;
- --spectrum-slider-control-height-medium: 24px;
- --spectrum-slider-control-height-large: 28px;
- --spectrum-slider-control-height-extra-large: 30px;
- --spectrum-slider-handle-size-small: 22px;
- --spectrum-slider-handle-size-medium: 24px;
- --spectrum-slider-handle-size-large: 28px;
- --spectrum-slider-handle-size-extra-large: 30px;
- --spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200);
- --spectrum-slider-bottom-to-handle-small: 4px;
- --spectrum-slider-bottom-to-handle-medium: 8px;
- --spectrum-slider-bottom-to-handle-large: 12px;
- --spectrum-slider-bottom-to-handle-extra-large: 15px;
- --spectrum-corner-radius-75: 4px;
- --spectrum-corner-radius-100: 8px;
- --spectrum-corner-radius-200: 16px;
- --spectrum-drop-shadow-x: 0px;
- --spectrum-drop-shadow-y: 4px;
- --spectrum-drop-shadow-blur: 16px;
- --spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
- --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
-
- --spectrum-dialog-confirm-border-radius: 8px;
-
- --spectrum-dial-border-radius: 15px;
-
- --spectrum-assetcard-focus-ring-border-radius: 12px;
-}
-.spectrum--express.spectrum--light,
-.spectrum--express.spectrum--lightest {
- --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb);
- --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
-
- --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
- --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900);
- --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000);
- --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900);
-}
-.spectrum--express.spectrum--medium {
- --spectrum-checkbox-control-size-small: 14px;
- --spectrum-checkbox-control-size-medium: 16px;
- --spectrum-checkbox-control-size-large: 18px;
- --spectrum-checkbox-control-size-extra-large: 20px;
- --spectrum-checkbox-top-to-control-small: 5px;
- --spectrum-checkbox-top-to-control-medium: 8px;
- --spectrum-checkbox-top-to-control-large: 11px;
- --spectrum-checkbox-top-to-control-extra-large: 14px;
- --spectrum-switch-control-width-small: 25px;
- --spectrum-switch-control-width-medium: 28px;
- --spectrum-switch-control-width-large: 32px;
- --spectrum-switch-control-width-extra-large: 35px;
- --spectrum-switch-control-height-small: 14px;
- --spectrum-switch-control-height-medium: 16px;
- --spectrum-switch-control-height-large: 18px;
- --spectrum-switch-control-height-extra-large: 20px;
- --spectrum-switch-top-to-control-small: 5px;
- --spectrum-switch-top-to-control-medium: 8px;
- --spectrum-switch-top-to-control-large: 11px;
- --spectrum-switch-top-to-control-extra-large: 14px;
- --spectrum-radio-button-control-size-small: 14px;
- --spectrum-radio-button-control-size-medium: 16px;
- --spectrum-radio-button-control-size-large: 18px;
- --spectrum-radio-button-control-size-extra-large: 20px;
- --spectrum-radio-button-top-to-control-small: 5px;
- --spectrum-radio-button-top-to-control-medium: 8px;
- --spectrum-radio-button-top-to-control-large: 11px;
- --spectrum-radio-button-top-to-control-extra-large: 14px;
- --spectrum-slider-control-height-small: 18px;
- --spectrum-slider-control-height-medium: 20px;
- --spectrum-slider-control-height-large: 22px;
- --spectrum-slider-control-height-extra-large: 24px;
- --spectrum-slider-handle-size-small: 18px;
- --spectrum-slider-handle-size-medium: 20px;
- --spectrum-slider-handle-size-large: 22px;
- --spectrum-slider-handle-size-extra-large: 24px;
- --spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200);
- --spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200);
- --spectrum-slider-bottom-to-handle-small: 3px;
- --spectrum-slider-bottom-to-handle-medium: 6px;
- --spectrum-slider-bottom-to-handle-large: 9px;
- --spectrum-slider-bottom-to-handle-extra-large: 12px;
- --spectrum-corner-radius-75: 3px;
- --spectrum-corner-radius-100: 6px;
- --spectrum-corner-radius-200: 12px;
- --spectrum-drop-shadow-x: 0px;
- --spectrum-drop-shadow-y: 4px;
- --spectrum-drop-shadow-blur: 16px;
- --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
- --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
-
- --spectrum-dialog-confirm-border-radius: 6px;
-
- --spectrum-dial-border-radius: 12px;
-
- --spectrum-assetcard-focus-ring-border-radius: 10px;
-}
diff --git a/tokens/package.json b/tokens/package.json
index 4d39e032132..e4033fcab00 100644
--- a/tokens/package.json
+++ b/tokens/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tokens",
- "version": "14.6.0",
+ "version": "15.0.0-s2-foundations.28",
"description": "The Spectrum CSS tokens package",
"license": "Apache-2.0",
"author": "Adobe",
@@ -13,6 +13,21 @@
"bugs": {
"url": "https://github.com/adobe/spectrum-css/issues"
},
+ "exports": {
+ ".": "./dist/css/index.css",
+ "./*.md": "./*.md",
+ "./dist/css/*.css": "./dist/css/*.css",
+ "./dist/css/components/bridge": "./dist/components/bridge/index.css",
+ "./dist/css/components/bridge/*.css": "./dist/components/bridge/*.css",
+ "./dist/css/components/express": "./dist/components/express/index.css",
+ "./dist/css/components/express/*.css": "./dist/components/express/*.css",
+ "./dist/css/components/spectrum": "./dist/components/spectrum/index.css",
+ "./dist/css/components/spectrum-two": "./dist/components/spectrum-two/index.css",
+ "./dist/css/components/spectrum-two/*.css": "./dist/components/spectrum-two/*.css",
+ "./dist/css/components/spectrum/*.css": "./dist/components/spectrum/*.css",
+ "./dist/index.css": "./dist/css/index.css",
+ "./package.json": "./package.json"
+ },
"main": "dist/index.css",
"files": [
"dist",
@@ -21,16 +36,10 @@
"package.json"
],
"devDependencies": {
- "@adobe/spectrum-tokens": "12.25.0",
+ "@adobe/spectrum-tokens": "0.0.0-s2-foundations-20241021172855",
"@nxkit/style-dictionary": "^5.0.0",
- "cssnano": "^7.0.3",
- "cssnano-preset-advanced": "^7.0.6",
"postcss": "^8.4.49",
"postcss-cli": "^11.0.0",
- "postcss-import": "^16.1.0",
- "postcss-licensing": "^2.0.0",
- "postcss-rgb-mapping": "workspace:^",
- "postcss-sorting": "^9.1.0",
"prettier": "^3.2.5",
"style-dictionary": "^3.9.2",
"style-dictionary-sets": "^2.3.0"
diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js
index 350188d71db..e117b38812b 100644
--- a/tokens/postcss.config.js
+++ b/tokens/postcss.config.js
@@ -11,30 +11,21 @@
* governing permissions and limitations under the License.
*/
-module.exports = () => ({
- plugins: {
- "postcss-import": {},
- "postcss-rgb-mapping": {
+module.exports = ({
+ resolveImports = true,
+ ...options
+}) => require("../postcss.config.js")({
+ ...options,
+ resolveImports,
+ env: "production",
+ map: false,
+ additionalPlugins: {
+ "@spectrum-tools/postcss-rgb-mapping": {
colorFunctionalNotation: false,
},
"postcss-sorting": {
order: ["custom-properties", "declarations", "at-rules", "rules"],
"properties-order": "alphabetical",
},
- cssnano: {
- preset: [
- "cssnano-preset-advanced",
- {
- colormin: false,
- discardComments: { removeAll: true },
- // @todo yarn add -DW css-declaration-sorter
- cssDeclarationSorter: false, // @todo { order: "smacss" },
- normalizeWhitespace: false,
- },
- ],
- },
- "postcss-licensing": {
- filename: "../COPYRIGHT",
- },
},
});
diff --git a/tokens/style-dictionary.config.js b/tokens/style-dictionary.config.js
index 4f8c67fdfe7..a2865c31f48 100644
--- a/tokens/style-dictionary.config.js
+++ b/tokens/style-dictionary.config.js
@@ -35,7 +35,6 @@ StyleDictionary.registerFormat(CSSSetsFormatter);
*/
const tokensPath = require.resolve("@adobe/spectrum-tokens/package.json");
const tokensDir = path.dirname(tokensPath);
-const setNames = ["desktop", "mobile", "light", "dark", "darkest"];
module.exports = {
source: [`${tokensDir}/src/*.json`],
@@ -50,21 +49,8 @@ module.exports = {
prefix: "spectrum",
files: [
generateFileConfig(),
- ...["spectrum", "express"].map((subSystemName) =>
- generateFileConfig({ subSystemName })
- ),
- ...setNames.map((context) => generateFileConfig({ setName: context })),
- ...setNames.map((context) =>
- generateFileConfig({
- setName: context,
- subSystemName: "spectrum",
- })
- ),
- ...setNames.map((context) =>
- generateFileConfig({
- setName: context,
- subSystemName: "express",
- })
+ ...["desktop", "mobile", "light", "dark"].map((context) =>
+ generateFileConfig({ setName: context }),
),
],
},
diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js
index e767c6c226f..63bde69b391 100644
--- a/tokens/tasks/token-rollup.js
+++ b/tokens/tasks/token-rollup.js
@@ -117,28 +117,19 @@ async function componentTheming() {
async function appendCustomOverrides({ cwd = process.cwd() } = {}) {
const promises = [];
- ["express", "spectrum"].forEach(async (theme) => {
- // Add custom/*-vars.css to the end of the dist/css/*-vars.css files and run through postcss before writing back to the dist/css/*-vars.css file
- const customFiles = await fg(["*-vars.css"], { cwd: path.join(cwd, `custom-${theme}`), onlyFiles: true });
- for (const file of customFiles) {
-
- let strippedFilename = file.replace(/^custom-/, "");
- if (strippedFilename === "vars.css") {
- strippedFilename = "global-vars.css";
- }
-
- // Read in the custom file and the dist file and combine them into one file
- const combinedContent = await fetchContent([
- path.join("dist", "css", theme, strippedFilename),
- path.join(`custom-${theme}`, file)
- ], { cwd, shouldCombine: true });
-
- promises.push(
- copy(path.join(`custom-${theme}`, file), path.join("dist", "css", theme, file), { cwd }),
- combinedContent[0].content ? writeAndReport(combinedContent[0].content, path.join(cwd, "dist", "css", theme, strippedFilename), { cwd }) : Promise.resolve()
- );
- }
- });
+ // Add custom/*-vars.css to the end of the dist/css/*-vars.css files and run through postcss before writing back to the dist/css/*-vars.css file
+ const customFiles = await fg(["*-vars.css"], { cwd: path.join(cwd, "custom"), onlyFiles: true });
+ for (const file of customFiles) {
+ // Read in the custom file and the dist file and combine them into one file
+ const combinedContent = await fetchContent([
+ path.join("dist", "css", file),
+ path.join("custom", file)
+ ], { cwd, shouldCombine: true });
+
+ promises.push(
+ combinedContent[0].content ? writeAndReport(combinedContent[0].content, path.join(cwd, "dist", "css", file)) : Promise.resolve()
+ );
+ }
return Promise.all(promises);
}
@@ -175,23 +166,18 @@ async function main({
path.join(compiledOutputPath, "css", "components", "bridge", "index.css"),
{ cwd, clean }
),
- ...["spectrum", "express"].map(theme => Promise.all([
- index(
- [`dist/css/components/${theme}/*.css`],
- path.join(compiledOutputPath, "css", "components", theme, "index.css"),
- { cwd, clean }
- ),
- index(
- [`dist/css/${theme}/*-vars.css`, `!dist/css/${theme}/custom-*.css`],
- path.join(compiledOutputPath, "css", theme, "index.css"),
- { cwd, clean }
- ),
- ])),
+ ...["spectrum", "legacy", "express"].map(theme => index(
+ [`dist/css/components/${theme}/*.css`],
+ path.join(compiledOutputPath, "css", "components", theme, "index.css"),
+ { cwd, clean }
+ )),
index(
- ["dist/css/*-vars.css", "dist/css/spectrum/*-vars.css", "dist/css/express/*-vars.css", "!dist/css/spectrum/custom-*.css", "!dist/css/express/custom-*.css"],
- path.join(compiledOutputPath, "index.css"),
+ ["dist/css/*-vars.css"],
+ path.join(compiledOutputPath, "css", "index.css"),
{ cwd, clean }
- ),
+ ).then((reports) =>
+ copy(path.join(compiledOutputPath, "css", "index.css"), path.join(cwd, "dist", "index.css"), { cwd, isDeprecated: false })
+ .then((reps) => [reports, reps]))
]).then((reports) => {
return [reports, r];
});
diff --git a/tokens/utilities/style-dictionary.utils.js b/tokens/utilities/style-dictionary.utils.js
index af449dced2e..33474eb81ed 100644
--- a/tokens/utilities/style-dictionary.utils.js
+++ b/tokens/utilities/style-dictionary.utils.js
@@ -11,7 +11,9 @@
* governing permissions and limitations under the License.
*/
-module.exports = function ({ setName, subSystemName } = {}) {
+module.exports = function ({ setName } = {}) {
+ let selector = ".spectrum";
+
const baseConfig = {
format: "css/sets",
options: {
@@ -20,29 +22,19 @@ module.exports = function ({ setName, subSystemName } = {}) {
},
};
- const sets = [setName, subSystemName].filter(Boolean);
- if (!sets.length) {
+ if (!setName) {
return {
...baseConfig,
destination: "global-vars.css",
filter: (token) => !token.path.includes("sets"),
options: {
...baseConfig.options,
- selector: ".spectrum",
+ selector,
},
};
}
const isGlobal = !setName;
- const isSpectrum = subSystemName && subSystemName === "spectrum";
-
- let selector = "";
- if (isGlobal || (subSystemName && !isSpectrum)) {
- // postfix the selector with the subsystem name
- selector = `.spectrum${
- subSystemName && !isSpectrum ? `--${subSystemName}` : ""
- }`;
- }
let scope =
{
@@ -51,16 +43,7 @@ module.exports = function ({ setName, subSystemName } = {}) {
}[setName] ?? setName;
if (isGlobal) scope = "global";
- else if (setName && scope) {
- selector += `.spectrum--${scope}`;
- }
-
- const selectors = [
- selector ?? null,
- // Apply all light colors as lightest for backwards compat
- // @todo does this need a deprecation notice?
- setName === "light" ? selector.replace("light", "lightest") : null,
- ].filter(Boolean);
+ selector = isGlobal ? ".spectrum" : `.spectrum--${scope}`;
const getSets = (token) =>
token.path.filter((_, idx, array) => array[idx - 1] == "sets");
@@ -72,30 +55,14 @@ module.exports = function ({ setName, subSystemName } = {}) {
if (tokenSets.includes("wireframe")) return false;
if (!setName) {
- if (!subSystemName && tokenSets.length === 0) {
- return true;
- }
-
- if (
- subSystemName &&
- tokenSets.length === 1 &&
- tokenSets.includes(subSystemName)
- ) {
+ if (tokenSets.length === 0) {
return true;
}
}
else {
if (!tokenSets.includes(setName)) return false;
- if (!subSystemName && tokenSets.length === 1) {
- return true;
- }
-
- if (
- subSystemName &&
- tokenSets.length === 2 &&
- tokenSets.includes(subSystemName)
- ) {
+ if (tokenSets.length === 1) {
return true;
}
}
@@ -105,12 +72,12 @@ module.exports = function ({ setName, subSystemName } = {}) {
return {
...baseConfig,
- destination: `${subSystemName ? `${subSystemName}/` : ""}${scope}-vars.css`,
+ destination: `${scope}-vars.css`,
filter,
options: {
...baseConfig.options,
- selector: selectors.join(", "),
- sets,
+ selector,
+ sets: setName ? [setName] : [],
},
};
};
diff --git a/ui-icons/CHANGELOG.md b/ui-icons/CHANGELOG.md
index 64067e196e1..f5c4b79039f 100644
--- a/ui-icons/CHANGELOG.md
+++ b/ui-icons/CHANGELOG.md
@@ -4,21 +4,27 @@ All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.