+ *
+ * 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..788d9dd9d49 100644
--- a/components/colorwheel/CHANGELOG.md
+++ b/components/colorwheel/CHANGELOG.md
@@ -1,5 +1,265 @@
# Change Log
+## 5.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.17
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.16
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.16
+
+## 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 +279,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..e44d21045f0 100644
--- a/components/colorwheel/index.css
+++ b/components/colorwheel/index.css
@@ -11,42 +11,36 @@
* 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));
+ --spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width));
+ --spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width));
+ --spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color));
+
+ --spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100));
+ --spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-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 */
+ --_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(--spectrum-colorwheel-border-width);
position: relative;
display: block;
- min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width));
- inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
- block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height));
+ min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width));
+ inline-size: var(--spectrum-colorwheel-width);
+ block-size: var(--spectrum-colorwheel-height);
user-select: none;
cursor: default;
@@ -82,7 +76,7 @@
display: flex;
align-items: center;
justify-content: center;
- margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin));
+ margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin));
}
.spectrum-ColorWheel-slider {
@@ -98,7 +92,7 @@
}
.spectrum-ColorWheel-handle {
- transform: translate(var(--spectrum-colorwheel-colorhandle-position), 0);
+ transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0);
inset-block-start: 50%;
inset-inline: 50%;
}
@@ -116,12 +110,12 @@
.spectrum-ColorWheel-border {
position: relative;
background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
- inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
- block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height));
+ inline-size: var(--spectrum-colorwheel-width);
+ block-size: var(--spectrum-colorwheel-height);
clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders)));
&.is-disabled {
- background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
+ background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
}
}
@@ -134,6 +128,6 @@
&.is-disabled {
pointer-events: none;
- background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
+ background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
}
}
diff --git a/components/colorwheel/metadata/metadata.json b/components/colorwheel/metadata/metadata.json
index 1be9fe86c07..c321e1aca27 100644
--- a/components/colorwheel/metadata/metadata.json
+++ b/components/colorwheel/metadata/metadata.json
@@ -37,11 +37,8 @@
"--spectrum-colorwheel-border-color",
"--spectrum-colorwheel-border-width",
"--spectrum-colorwheel-colorarea-container-size",
- "--spectrum-colorwheel-colorarea-margin",
- "--spectrum-colorwheel-colorhandle-position",
"--spectrum-colorwheel-fill-color-disabled",
"--spectrum-colorwheel-height",
- "--spectrum-colorwheel-min-width",
"--spectrum-colorwheel-path",
"--spectrum-colorwheel-path-borders",
"--spectrum-colorwheel-track-width",
@@ -51,9 +48,9 @@
"--spectrum-border-width-100",
"--spectrum-color-control-track-width",
"--spectrum-disabled-background-color",
- "--spectrum-transparent-black-200"
+ "--spectrum-transparent-black-300"
],
- "system-theme": [],
+ "system-theme": ["--system-color-wheel-border-color"],
"passthroughs": [],
"high-contrast": [
"--highcontrast-colorwheel-border-color-disabled",
diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json
index 71e4df7db54..b8b5496ad1f 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.16",
"description": "The Spectrum CSS Color Area component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,20 +21,22 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/colorarea": ">=5",
- "@spectrum-css/colorhandle": ">=8",
- "@spectrum-css/colorloupe": ">=5",
- "@spectrum-css/tokens": ">=14"
+ "@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",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/colorarea": {
diff --git a/components/colorwheel/stories/colorwheel.mdx b/components/colorwheel/stories/colorwheel.mdx
deleted file mode 100644
index 3a850b48f31..00000000000
--- a/components/colorwheel/stories/colorwheel.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
- ArgTypes,
- Canvas,
- Meta,
- Description,
- Title,
- Subtitle,
-} from "@storybook/blocks";
-import {
- ComponentDetails,
- TaggedReleases,
- PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as ColorWheelStories from "./colorwheel.stories";
-
-
-
-
-
-
-
-
-
-## Usage notes:
-
-- For a given rotation on the wheel, X, the `.spectrum-ColorHandle` should be moved by applying the style property `transform: translate(${Y * Math.cos(X)}px, ${Y * Math.sin(X)}px)`, where Y is `((radius - .spectrum-colorwheel-track-width) / 2))`
-- Set the value attribute of `.spectrum-ColorWheel-value` to the currently selected color (i.e. `hsl(326, 100%, 50%)`)
-- Add `.is-dragged` when the handle is being dragged
-
-## Standard
-
-
-
-## Disabled
-
-
-
-## With color area
-
-Usage notes:
-
-- To display with ColorArea inside of ColorWheel, add ColorArea to `.spectrum-ColorWheel-colorarea-container` with `style="--mod-colorarea-width: 70.1%; --mod-colorarea-height: 70.1%"`
-- `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the ColorArea within the ColorWheel using `.spectrum-color-wheel-color-area-margin`. Using JS container size can be calcaulted with `Math.sqrt(2 * R * R)`, where R is the `innerRadius` as calcaulted for the clip paths
-- `.spectrum-colorwheel-path`, `.spectrum-colorwheel-path-borders`, and `.spectrum-colorwheel-colorarea-container` are hard coded in CSS and include token values in custom CSS variables so they can be accessed with JS to and used to calculate these values, `const wheel = document.querySelector(".spectrum-ColorWheel-wheel") getComputedStyle(wheel).getPropertyValue('--track-width'))`
-
-
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-
-
-
-
-## Tagged releases
-
-
diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js
index fad4aa97461..80276fb0065 100644
--- a/components/colorwheel/stories/colorwheel.stories.js
+++ b/components/colorwheel/stories/colorwheel.stories.js
@@ -7,6 +7,11 @@ import { Template } from "./template.js";
/**
* The color wheel component lets users visually change an individual channel of a color on a circular track.
+ *
+ * ## Usage notes
+ * - For a given rotation on the wheel, X, the `.spectrum-ColorHandle` should be moved by applying the style property `transform: translate(${Y * Math.cos(X)}px, ${Y * Math.sin(X)}px)`, where Y is `((radius - .spectrum-colorwheel-track-width) / 2))`.
+ * - Set the value attribute of `.spectrum-ColorWheel-value` to the currently selected color (i.e. `hsl(326, 100%, 50%)`).
+ * - Add `.is-dragged` when the handle is being dragged.
*/
export default {
title: "Color wheel",
@@ -42,10 +47,13 @@ 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,
},
- tags: ["!autodocs"],
};
export const Default = ColorWheelGroup.bind({});
@@ -61,6 +69,19 @@ Disabled.parameters = {
chromatic: { disableSnapshot: true },
};
+/**
+ * The color wheel is often used together with the [color area component](/docs/components-color-area--docs) for color selection. When placing the color area inside the color wheel, make sure to leave enough of a margin between the two components to ensure there’s enough space for the both handles.
+ *
+ * To display a color area inside of the color wheel, add a color area component to `.spectrum-ColorWheel-colorarea-container` element and define the custom width and height styles with `--mod-colorarea-width` and `--mod-colorarea-height` variables.
+ *
+ * The `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the color area within the color wheel using `.spectrum-color-wheel-color-area-margin`. Implementations using JS can calculate the container size with `Math.sqrt(2 * R * R)`, where `R` is the inner radius as calculated for the clip paths.
+ *
+ * `.spectrum-colorwheel-path`, `.spectrum-colorwheel-path-borders` and `.spectrum-colorwheel-colorarea-container` are hard coded in CSS, and include token values as custom CSS variables so they can be accessed with JS. To use and calculate these values, implementations should consider:
+ * ```
+ * const wheel = document.querySelector(".spectrum-ColorWheel-wheel")
+ * getComputedStyle(wheel).getPropertyValue('--track-width')
+ * ```
+ * */
export const WithColorArea = Template.bind({});
WithColorArea.tags = ["!dev"];
WithColorArea.args = {
@@ -69,6 +90,7 @@ WithColorArea.args = {
WithColorArea.parameters = {
chromatic: { disableSnapshot: true },
};
+WithColorArea.storyName = "With color area";
// ********* VRT ONLY ********* //
export const WithForcedColors = ColorWheelGroup.bind({});
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..984c1fb5a18
--- /dev/null
+++ b/components/colorwheel/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-ColorWheel {
+ --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
+ }
+}
diff --git a/components/colorwheel/themes/spectrum.css b/components/colorwheel/themes/spectrum.css
index 3b48a570c21..9c47a280a66 100644
--- a/components/colorwheel/themes/spectrum.css
+++ b/components/colorwheel/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-ColorWheel {
+ --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200);
+ }
+}
diff --git a/components/combobox/CHANGELOG.md b/components/combobox/CHANGELOG.md
index 5fa87319865..f36b311788a 100644
--- a/components/combobox/CHANGELOG.md
+++ b/components/combobox/CHANGELOG.md
@@ -1,5 +1,364 @@
# Change Log
+## 4.0.0-s2-foundations.21
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`79f2ae5`](https://github.com/adobe/spectrum-css/commit/79f2ae585464b2eca63232b37017bd1f96a7d970) Thanks [@pfulton](https://github.com/pfulton)! - Bug fix to retain border color values in S1 for combobox [SWC-582]
+
+- Updated dependencies [[`79f2ae5`](https://github.com/adobe/spectrum-css/commit/79f2ae585464b2eca63232b37017bd1f96a7d970)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.31
+
+## 4.0.0-s2-foundations.20
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`513256c`](https://github.com/adobe/spectrum-css/commit/513256c7c7587ac6a3741a819a41ab321d1cd965) Thanks [@pfulton](https://github.com/pfulton)! - Update border and background color values for Combobox states [SWC-582]
+
+### Patch Changes
+
+- Updated dependencies [[`da9a90a`](https://github.com/adobe/spectrum-css/commit/da9a90adb1b46abc7f3078d2b7cfcf84f7a41026), [`513256c`](https://github.com/adobe/spectrum-css/commit/513256c7c7587ac6a3741a819a41ab321d1cd965)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.30
+
+## 4.0.0-s2-foundations.19
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.16
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.17
+ - @spectrum-css/textfield@8.0.0-s2-foundations.17
+ - @spectrum-css/popover@8.0.0-s2-foundations.17
+ - @spectrum-css/menu@8.0.0-s2-foundations.17
+
+## 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.3.0
### Minor Changes
diff --git a/components/combobox/index.css b/components/combobox/index.css
index 4a7c2ae3906..d745e9a71a1 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);
@@ -54,7 +54,7 @@
--mod-textfield-focus-indicator-color: var(--mod-combobox-focus-indicator-color, var(--spectrum-combobox-focus-indicator-color));
--mod-textfield-background-color: var(--mod-combobox-background-color-default);
- --mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled);
+ --mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled, var(--spectrum-combobox-background-color-disabled));
--mod-textfield-font-family: var(--mod-combobox-font-family);
--mod-textfield-font-weight: var(--mod-combobox-font-weight);
@@ -100,21 +100,7 @@
--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
}
-.spectrum-Combobox--sizeS {
- --spectrum-combobox-block-size: var(--spectrum-component-height-75);
- --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-combobox-font-size: var(--spectrum-font-size-75);
-
- --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small);
- --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
- --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small);
- --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small);
- --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75);
- --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75);
- --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75);
-}
-
+.spectrum-Combobox,
.spectrum-Combobox--sizeM {
--spectrum-combobox-block-size: var(--spectrum-component-height-100);
--spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
@@ -130,6 +116,21 @@
--spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100);
}
+.spectrum-Combobox--sizeS {
+ --spectrum-combobox-block-size: var(--spectrum-component-height-75);
+ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75);
+ --spectrum-combobox-font-size: var(--spectrum-font-size-75);
+
+ --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small);
+ --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
+ --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small);
+ --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small);
+ --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75);
+ --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75);
+}
+
.spectrum-Combobox--sizeL {
--spectrum-combobox-block-size: var(--spectrum-component-height-200);
--spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200);
@@ -369,16 +370,19 @@
/* Focus */
.spectrum-Combobox-textfield.is-focused &,
&:focus {
+ --mod-combobox-border-color-default: var(--spectrum-combobox-border-color-focus);
--mod-textfield-background-color: var(--mod-combobox-background-color-focus);
/* Focus + Hover */
&:hover {
+ --mod-combobox-border-color-default: var(--spectrum-combobox-border-color-focus-hover);
--mod-textfield-background-color: var(--mod-combobox-background-color-focus-hover);
}
}
/* Keyboard Focus */
.spectrum-Combobox-textfield.is-keyboardFocused & {
+ --mod-combobox-border-color-default: var(--spectrum-combobox-border-color-key-focus);
--mod-textfield-background-color: var(--mod-combobox-background-color-key-focus);
}
diff --git a/components/combobox/metadata/metadata.json b/components/combobox/metadata/metadata.json
index 1d540154453..97b38d5f400 100644
--- a/components/combobox/metadata/metadata.json
+++ b/components/combobox/metadata/metadata.json
@@ -142,6 +142,7 @@
"--spectrum-combo-box-visual-to-field-button-medium",
"--spectrum-combo-box-visual-to-field-button-quiet",
"--spectrum-combo-box-visual-to-field-button-small",
+ "--spectrum-combobox-background-color-disabled",
"--spectrum-combobox-block-size",
"--spectrum-combobox-block-spacing-edge-to-alert",
"--spectrum-combobox-block-spacing-edge-to-progress-circle",
@@ -231,7 +232,7 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-400",
+ "--spectrum-gray-25",
"--spectrum-gray-50",
"--spectrum-gray-500",
"--spectrum-gray-600",
@@ -249,11 +250,12 @@
"--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-background-color-disabled",
+ "--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 f49c3be06d2..54050f10d33 100644
--- a/components/combobox/package.json
+++ b/components/combobox/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/combobox",
- "version": "3.3.0",
+ "version": "4.0.0-s2-foundations.21",
"description": "The Spectrum CSS combobox component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,22 +21,24 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/menu": ">=7",
- "@spectrum-css/pickerbutton": ">=5",
- "@spectrum-css/popover": ">=7",
- "@spectrum-css/progresscircle": ">=3",
- "@spectrum-css/textfield": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/menu": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/pickerbutton": ">=6.0.0-s2-foundations.0",
+ "@spectrum-css/popover": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/progresscircle": ">=4.0.0-s2-foundations.0",
+ "@spectrum-css/textfield": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/progresscircle": {
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..2e6ae242055
--- /dev/null
+++ b/components/combobox/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-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-800);
+ --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900);
+ --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800);
+
+ --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25);
+ }
+}
diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css
index 31c5e848d42..4e5bd9ece62 100644
--- a/components/combobox/themes/spectrum.css
+++ b/components/combobox/themes/spectrum.css
@@ -11,12 +11,16 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@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);
+
+ --spectrum-combobox-background-color-disabled: var(--spectrum-disabled-background-color);
}
}
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..a5a44debd08 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",
@@ -13,9 +13,17 @@
"bugs": {
"url": "https://github.com/adobe/spectrum-css/issues"
},
+ "exports": {
+ ".": "./index.css",
+ "./*.css": "./*.css",
+ "./CHANGELOG.md": "./CHANGELOG.md",
+ "./README.md": "./README.md",
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
+ },
"main": "index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/tokens": "workspace:^"
diff --git a/components/contextualhelp/CHANGELOG.md b/components/contextualhelp/CHANGELOG.md
index 81f65ec8e02..9356af4bab8 100644
--- a/components/contextualhelp/CHANGELOG.md
+++ b/components/contextualhelp/CHANGELOG.md
@@ -1,5 +1,276 @@
# Change Log
+## 4.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.24
+ - @spectrum-css/popover@8.0.0-s2-foundations.17
+ - @spectrum-css/link@6.0.0-s2-foundations.16
+
+## 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 +292,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..27f7f99a0c6 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));
}
@@ -32,10 +23,10 @@
}
.spectrum-ContextualHelp-popover {
- padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding));
- padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding));
+ padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400));
+ padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400));
font-size: var(--mod-spectrum-contextual-help-body-size, var(--spectrum-contextual-help-body-size));
- color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-contextual-help-body-color)));
+ color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-body-color)));
.spectrum-ContextualHelp-heading,
.spectrum-ContextualHelp-body {
@@ -44,13 +35,13 @@
.spectrum-ContextualHelp-heading {
margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing));
- font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-heading-size));
- color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-contextual-help-heading-color)));
+ font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-title-size));
+ color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-heading-color)));
}
}
.spectrum-ContextualHelp-link {
- margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-contextual-help-link-spacing));
+ margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-spacing-300));
}
@media (forced-colors: active) {
diff --git a/components/contextualhelp/metadata/metadata.json b/components/contextualhelp/metadata/metadata.json
index e3952ec7081..71d3220dc75 100644
--- a/components/contextualhelp/metadata/metadata.json
+++ b/components/contextualhelp/metadata/metadata.json
@@ -19,14 +19,9 @@
"--mod-spectrum-contextual-help-padding"
],
"component": [
- "--spectrum-contextual-help-body-color",
"--spectrum-contextual-help-body-size",
"--spectrum-contextual-help-content-spacing",
- "--spectrum-contextual-help-heading-color",
- "--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": [
diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json
index 40e540604aa..f57c5fb4523 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.17",
"description": "The Spectrum CSS contextualhelp component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,20 +21,22 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/actionbutton": ">=6",
- "@spectrum-css/link": ">=5",
- "@spectrum-css/popover": ">=7",
- "@spectrum-css/tokens": ">=14.5.0"
+ "@spectrum-css/actionbutton": ">=7.0.0-s2-foundations.0",
+ "@spectrum-css/link": ">=6.0.0-s2-foundations.0",
+ "@spectrum-css/popover": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/link": {
diff --git a/components/contextualhelp/stories/contextualhelp.mdx b/components/contextualhelp/stories/contextualhelp.mdx
deleted file mode 100644
index d9511f7f5cc..00000000000
--- a/components/contextualhelp/stories/contextualhelp.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
- Canvas,
- ArgTypes,
- Meta,
- Description,
- Title,
- Subtitle,
-} from "@storybook/blocks";
-import {
- ComponentDetails,
- TaggedReleases,
- PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as ContextualHelpStories from "./contextualhelp.stories";
-
-
+ *
+ * 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..c6c5096983f 100644
--- a/components/datepicker/CHANGELOG.md
+++ b/components/datepicker/CHANGELOG.md
@@ -1,5 +1,291 @@
# Change Log
+## 4.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.17
+ - @spectrum-css/textfield@8.0.0-s2-foundations.17
+ - @spectrum-css/calendar@6.0.0-s2-foundations.16
+ - @spectrum-css/popover@8.0.0-s2-foundations.17
+
+## 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 +312,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..8c84e0d0427 100644
--- a/components/datepicker/index.css
+++ b/components/datepicker/index.css
@@ -11,178 +11,185 @@
* 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);
- --spectrum-datepicker-border-radius-quiet: 0;
+ --spectrum-datepicker-border-radius: var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100));
+ --spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0);
--spectrum-datepicker-border-width: var(--spectrum-border-width-100);
- --spectrum-datepicker-min-width: var(--spectrum-field-width);
+ --spectrum-datepicker-min-width: var(--mod-datepicker-min-width, var(--spectrum-field-width));
--spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);
/* button */
- --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500);
- --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default);
- --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100));
- --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));
- --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100);
- --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100);
+ --spectrum-datepicker-pickerbutton-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-gray-500)));
+ --spectrum-datepicker-pickerbutton-border-color-invalid: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default)));
+ --spectrum-datepicker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100));
+ --spectrum-datepicker-quiet-button-offset: var(--mod-datepicker-quiet-button-offset, var(--spectrum-text-to-visual-100));
--spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100);
+ /* Calculated as width minus offset */
+ --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));
+
/* focus */
- --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100);
- --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100);
- --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color);
- --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75);
+ --spectrum-datepicker-focus-ring-gap: var(--mod-datepicker-focus-ring-gap, var(--spectrum-focus-indicator-gap));
+ --spectrum-datepicker-focus-thickness: var(--mod-datepicker-focus-thickness, var(--spectrum-focus-indicator-thickness));
+ --spectrum-datepicker-focus-animation: var(--mod-datepicker-focus-animation, var(--spectrum-animation-duration-100));
+ --spectrum-datepicker-focus-ring-width: var(--mod-datepicker-focus-ring-width, var(--spectrum-border-width-100));
+ --spectrum-datepicker-focus-ring-color: var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color)));
+ --spectrum-datepicker-focus-line-gap: var(--mod-datepicker-focus-line-gap, var(--spectrum-spacing-75));
/* color */
- --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default);
- --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500);
- --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-datepicker-invalid-quiet-color: var(--mod-datepicker-invalid-quiet-color, var(--spectrum-negative-border-color-default));
+ --spectrum-datepicker-quiet-border-color-hover: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-gray-500));
+ --spectrum-datepicker-border-color-disabled: var(--mod-datepicker-border-color-disabled, var(--spectrum-disabled-border-color));
/* dash */
- --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100);
- --spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default);
- --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size));
- --spectrum-datepicker-range-dash-padding-top: 0;
+ --spectrum-datepicker-dash-font-size: var(--mod-datepicker-dash-font-size, var(--spectrum-font-size-100));
+ --spectrum-datepicker-dash-color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default)));
+ --spectrum-datepicker-range-dash-padding-top: var(--mod-datepicker-range-dash-padding-top, 0);
+
+ /* Calculated as negative half of font-size */
+ --spectrum-datepicker-range-dash-marin-inline-start: var(--mod-datepicker-range-dash-margin-left, calc(-0.5 * var(--spectrum-datepicker-dash-font-size)));
/* calculating widths */
- /* todo: if we add t-shirt sizing, this will be wrong ❤️ */
+ /* initial-width and generic-padding are being served from the global tokens package */
+ --spectrum-datepicker-range-input-width-first: var(--mod-datepicker-range-input-width-first, calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)));
--spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));
- --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height));
- --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
- --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding));
- --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second));
+ --spectrum-datepicker-input-width: var(--mod-datepicker-input-width, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)));
+ --spectrum-datepicker-range-input-width-quiet-first: var(--mod-datepicker-range-input-width-quiet-first, calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)));
+ --spectrum-datepicker-input-width-quiet: var(--mod-datepicker-input-width-quiet, calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)));
- --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first));
- --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
- --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width));
- --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+
+ --spectrum-datepicker-datetime-input-width-first: var(--mod-datepicker-datetime-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)));
+ --spectrum-datepicker-datetime-input-width: var(--mod-datepicker-datetime-input-width, calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)));
+ --spectrum-datepicker-datetime-quiet-input-width-first: var(--mod-datepicker-datetime-quiet-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)));
+ --spectrum-datepicker-datetime-quiet-input-width: var(--mod-datepicker-datetime-quiet-input-width, calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)));
/* padding inline end */
- --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2));
- --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset));
- --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2));
- --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
-}
+ --spectrum-datepicker-padding-inline-end: var(--mod-datepicker-padding-inline, calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2));
+ --spectrum-datepicker-padding-inline-end-quiet: var(--mod-datepicker-padding-inline-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-quiet: var(--mod-datepicker-padding-inline-end-invalid-quiet, calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)));
-.spectrum-DatePicker {
position: relative;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
- min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width));
- border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
+ min-inline-size: var(--spectrum-datepicker-min-width);
+ border-radius: var(--spectrum-datepicker-border-radius);
&.is-disabled {
- .spectrum-DatePicker-rangeDash {
- color: var(--highcontrast-datepicker-dash-color-disabled, var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled)));
- }
+ --mod-datepicker-dash-color: var(--mod-datepicker-dash-color-disabled, var(--spectrum-disabled-content-color));
}
&.is-invalid {
--mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button));
--mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet));
}
-}
-.spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled) {
- /* @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(--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(--spectrum-datepicker-pickerbutton-border-color-invalid);
+ }
}
}
-/* input padding inline end */
-/* standard and range */
.spectrum-DatePicker-input {
- padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
-
- &.spectrum-DatePicker-endField {
- padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
- }
-}
-
-/* standard and range invalid */
-.is-invalid .spectrum-DatePicker-input {
- padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid));
-}
+ /* fill space */
+ flex: 1;
+ inline-size: 100%;
+ padding-inline-end: var(--spectrum-datepicker-padding-inline-end);
-/* quiet */
-.spectrum-DatePicker--quiet {
- .spectrum-DatePicker-input {
- padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
- }
+ &.spectrum-DatePicker-startField {
+ padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
- /* quiet invalid and quiet range invalid */
- .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) {
- padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet));
+ border-inline-end: 0;
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
}
-}
-/* quiet range */
-.spectrum-DatePicker--quiet .spectrum-DatePicker-input {
&.spectrum-DatePicker-endField {
- padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
+ border-inline-start: 0;
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+ padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
}
}
+/* Nested Picker Button */
.spectrum-DatePicker-button {
/* Be above textfield so box shadow shines through */
position: absolute;
inset-inline-end: 0;
}
-.spectrum-DatePicker--quiet {
- border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
+/* "-" between inputs */
+.spectrum-DatePicker-rangeDash {
+ color: var(--spectrum-datepicker-dash-color);
+ line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
+ padding-block-start: var(--spectrum-datepicker-range-dash-padding-top);
+ flex: initial;
+ inline-size: 0;
+ z-index: 1;
- .spectrum-DatePicker-button {
- inline-size: auto;
- inset-inline-end: calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset)));
+ &::before {
+ content: "–";
+ display: inline-block;
+ margin-block: 0;
+ margin-inline: var(--spectrum-datepicker-range-dash-marin-inline-start);
+ overflow: hidden;
+ text-align: center;
+ vertical-align: middle;
+ inline-size: var(--spectrum-datepicker-dash-font-size);
+ }
+}
- &:disabled,
- &:disabled:hover {
- border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled));
- }
+/* quiet */
+.spectrum-DatePicker--quiet {
+ --mod-datepicker-border-radius: var(--spectrum-datepicker-border-radius-quiet);
+ --mod-datepicker-padding-inline: var(--spectrum-datepicker-padding-inline-end-quiet);
- &:disabled:not(.is-open) {
- .spectrum-PickerButton-fill {
- border-color: transparent;
- }
- }
+ /* @passthrough start -- quiet variant nested button styles */
+ --mod-picker-button-border-color-disabled: var(--spectrum-datepicker-border-color-disabled);
+ --mod-picker-button-background-color-hover-disabled: var(--spectrum-datepicker-border-color-disabled);
+ /* @passthrough end */
- &:not(:disabled, .is-open) {
- .spectrum-PickerButton-fill {
- background-color: transparent;
- }
- }
+ /* quiet invalid and quiet range invalid */
+ &.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) {
+ padding-inline-end: var(--spectrum-datepicker-padding-inline-end-invalid-quiet);
}
&:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) {
- .spectrum-DatePicker-input,
- .spectrum-DatePicker-button {
- border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover));
- }
+ /* @passthrough -- nested border colors */
+ --mod-picker-button-border-color: var(--spectrum-datepicker-quiet-border-color-hover);
}
- /* invalid bottom border color */
&.is-invalid {
- .spectrum-DatePicker-input,
- .spectrum-DatePicker-button {
- border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color)));
+ /* @passthrough -- invalid bottom border color */
+ --mod-picker-button-border-color: var(--spectrum-datepicker-invalid-quiet-color);
+ }
+
+ /* Nested Picker Button */
+ .spectrum-DatePicker-button {
+ inline-size: auto;
+ inset-inline-end: calc(-1 * var(--spectrum-datepicker-quiet-button-offset));
+
+ &:not(.is-open) {
+ --mod-picker-button-border-color-disabled: transparent;
+ }
+
+ &:not(:disabled, .is-open) {
+ --mod-picker-button-background-color: transparent;
}
}
}
.spectrum-DatePicker--range {
- border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
+ --mod-datepicker-border-radius: var(--spectrum-datepicker-border-radius);
/* focus-ring */
&::after {
@@ -190,17 +197,17 @@
content: "";
position: absolute;
inset: 0;
- margin: calc(var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)) * -1);
- border-radius: calc(var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)) + var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)));
+ margin: calc(var(--spectrum-datepicker-focus-ring-gap) * -1);
+ border-radius: calc(var(--spectrum-datepicker-border-radius) + var(--spectrum-datepicker-focus-ring-gap));
border-color: transparent;
transition:
- box-shadow var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out,
- border-color var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out;
+ box-shadow var(--spectrum-datepicker-focus-animation) ease-in-out,
+ border-color var(--spectrum-datepicker-focus-animation) ease-in-out;
}
&.is-keyboardFocused:not(.spectrum-DatePicker--quiet) {
&::after {
- box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
+ box-shadow: 0 0 0 var(--spectrum-datepicker-focus-ring-width) var(--spectrum-datepicker-focus-ring-color);
}
.spectrum-DatePicker-textfield::after {
@@ -208,27 +215,25 @@
}
}
- &.is-keyboardFocused.spectrum-DatePicker--quiet {
+ /* Input Group */
+ &.spectrum-DatePicker--quiet {
+ --mod-datepicker-border-radius: var(--spectrum-datepicker-border-radius-quiet);
+
/* quiet variant bottom border focus indicator */
- &::after {
+ &.is-keyboardFocused::after {
margin: 0;
box-shadow: none;
border-radius: 0;
- border-block-end: var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
- inset-block-end: calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap)));
+ border-block-end: var(--spectrum-datepicker-focus-thickness) solid var(--spectrum-datepicker-focus-ring-color);
+ inset-block-end: calc(-1 * var(--spectrum-datepicker-focus-line-gap));
}
- }
-
- /* Input Group */
- &.spectrum-DatePicker--quiet {
- border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
.spectrum-DatePicker-textfield {
min-inline-size: 0;
- inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet));
+ inline-size: var(--spectrum-datepicker-input-width-quiet);
&:first-of-type {
- inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first));
+ inline-size: var(--spectrum-datepicker-range-input-width-quiet-first);
}
}
}
@@ -237,21 +242,19 @@
&.spectrum-DatePicker--datetimeRange {
/* Inputs */
.spectrum-DatePicker-textfield {
- inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width));
+ inline-size: var(--spectrum-datepicker-datetime-input-width);
min-inline-size: 0;
&:first-of-type {
- inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first));
+ inline-size: var(--spectrum-datepicker-datetime-input-width-first);
}
}
- &.spectrum-DatePicker--quiet {
- .spectrum-DatePicker-textfield {
- inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width));
- }
+ &.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield {
+ inline-size: var(--spectrum-datepicker-datetime-quiet-input-width);
- .spectrum-DatePicker-textfield:first-of-type {
- inline-size: var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first));
+ &:first-of-type {
+ inline-size: var(--spectrum-datepicker-datetime-quiet-input-width-first);
}
}
}
@@ -260,62 +263,27 @@
.spectrum-DatePicker-textfield {
flex: initial;
min-inline-size: 0;
- inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width));
+ inline-size: var(--spectrum-datepicker-input-width);
&:first-of-type {
- inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first));
+ inline-size: var(--spectrum-datepicker-range-input-width-first);
}
}
}
-.spectrum-DatePicker-input {
- /* fill space */
- flex: 1;
- inline-size: 100%;
-
- &.spectrum-DatePicker-startField {
- border-inline-end: 0;
- border-start-end-radius: 0;
- border-end-end-radius: 0;
- padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
- }
-
- &.spectrum-DatePicker-endField {
- border-inline-start: 0;
- border-start-start-radius: 0;
- border-end-start-radius: 0;
- padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
- }
-}
-
-/* "-" between inputs */
-.spectrum-DatePicker-rangeDash {
- color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-datepicker-dash-color)));
- line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
- padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top));
- flex: initial;
- inline-size: 0;
- z-index: 1;
-
- &::before {
- content: "–";
- display: inline-block;
- margin-block: 0;
- margin-inline: var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start));
- overflow: hidden;
- text-align: center;
- vertical-align: middle;
- inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size));
- }
-}
-
/********* WHCM *********/
@media (forced-colors: active) {
.spectrum-DatePicker {
--highcontrast-datepicker-dash-color: CanvasText;
- --highcontrast-datepicker-dash-color-disabled: GrayText;
--highcontrast-datepicker-focus-ring-color: Highlight;
--highcontrast-datepicker-pickerbutton-border-color: Highlight;
- --highcontrast-datepicker-invalid-quiet-color: Highlight;
+
+ &.is-disabled {
+ --highcontrast-datepicker-dash-color: GrayText;
+ }
+
+ &.spectrum-DatePicker--quiet.is-invalid {
+ --highcontrast-datepicker-pickerbutton-border-color: Highlight;
+ }
}
}
diff --git a/components/datepicker/metadata/metadata.json b/components/datepicker/metadata/metadata.json
index 35711fc2d3d..ec63632266f 100644
--- a/components/datepicker/metadata/metadata.json
+++ b/components/datepicker/metadata/metadata.json
@@ -1,25 +1,17 @@
{
"sourceFile": "index.css",
"selectors": [
- ".is-invalid .spectrum-DatePicker-input",
".spectrum-DatePicker",
".spectrum-DatePicker--quiet",
- ".spectrum-DatePicker--quiet .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)",
".spectrum-DatePicker--quiet .spectrum-DatePicker-button",
- ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled",
- ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:hover",
- ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:not(.is-open) .spectrum-PickerButton-fill",
- ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open) .spectrum-PickerButton-fill",
- ".spectrum-DatePicker--quiet .spectrum-DatePicker-input",
- ".spectrum-DatePicker--quiet .spectrum-DatePicker-input.spectrum-DatePicker-endField",
- ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-button",
- ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input",
- ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) .spectrum-DatePicker-button",
- ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) .spectrum-DatePicker-input",
+ ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(.is-open)",
+ ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open)",
+ ".spectrum-DatePicker--quiet.is-invalid",
+ ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)",
+ ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid)",
".spectrum-DatePicker--range",
".spectrum-DatePicker--range .spectrum-DatePicker-textfield",
".spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type",
- ".spectrum-DatePicker--range.is-keyboardFocused.spectrum-DatePicker--quiet:after",
".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet) .spectrum-DatePicker-textfield:after",
".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after",
".spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield",
@@ -29,6 +21,7 @@
".spectrum-DatePicker--range.spectrum-DatePicker--quiet",
".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield",
".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type",
+ ".spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after",
".spectrum-DatePicker--range:after",
".spectrum-DatePicker-button",
".spectrum-DatePicker-input",
@@ -36,9 +29,10 @@
".spectrum-DatePicker-input.spectrum-DatePicker-startField",
".spectrum-DatePicker-rangeDash",
".spectrum-DatePicker-rangeDash:before",
- ".spectrum-DatePicker.is-disabled .spectrum-DatePicker-rangeDash",
+ ".spectrum-DatePicker.is-disabled",
".spectrum-DatePicker.is-invalid",
".spectrum-DatePicker.is-invalid:not(.spectrum-DatePicker--quiet, .is-disabled)",
+ ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid",
".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)"
],
"modifiers": [
@@ -65,9 +59,8 @@
"--mod-datepicker-invalid-quiet-color",
"--mod-datepicker-min-width",
"--mod-datepicker-padding-inline",
- "--mod-datepicker-padding-inline-end-invalid",
"--mod-datepicker-padding-inline-end-invalid-quiet",
- "--mod-datepicker-padding-inline-end-quiet",
+ "--mod-datepicker-padding-inline-quiet",
"--mod-datepicker-pickerbutton-border-color",
"--mod-datepicker-pickerbutton-border-color-invalid",
"--mod-datepicker-quiet-border-color-hover",
@@ -83,7 +76,6 @@
"--spectrum-datepicker-border-radius-quiet",
"--spectrum-datepicker-border-width",
"--spectrum-datepicker-dash-color",
- "--spectrum-datepicker-dash-color-disabled",
"--spectrum-datepicker-dash-font-size",
"--spectrum-datepicker-dash-line-height",
"--spectrum-datepicker-datetime-input-width",
@@ -99,7 +91,6 @@
"--spectrum-datepicker-focus-thickness",
"--spectrum-datepicker-generic-padding",
"--spectrum-datepicker-icon-size",
- "--spectrum-datepicker-icon-to-button",
"--spectrum-datepicker-icon-to-text",
"--spectrum-datepicker-initial-height",
"--spectrum-datepicker-initial-width",
@@ -112,7 +103,6 @@
"--spectrum-datepicker-invalid-quiet-color",
"--spectrum-datepicker-min-width",
"--spectrum-datepicker-padding-inline-end",
- "--spectrum-datepicker-padding-inline-end-invalid",
"--spectrum-datepicker-padding-inline-end-invalid-quiet",
"--spectrum-datepicker-padding-inline-end-quiet",
"--spectrum-datepicker-pickerbutton-border-color",
@@ -133,7 +123,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,17 +139,18 @@
"--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-background-color",
+ "--mod-picker-button-background-color-hover-disabled",
"--mod-picker-button-border-color",
+ "--mod-picker-button-border-color-disabled",
"--mod-textfield-icon-spacing-inline-end-invalid",
"--mod-textfield-icon-spacing-inline-end-quiet-invalid"
],
"high-contrast": [
"--highcontrast-datepicker-dash-color",
- "--highcontrast-datepicker-dash-color-disabled",
"--highcontrast-datepicker-focus-ring-color",
- "--highcontrast-datepicker-invalid-quiet-color",
"--highcontrast-datepicker-pickerbutton-border-color"
]
}
diff --git a/components/datepicker/metadata/mods.md b/components/datepicker/metadata/mods.md
index e92f2d8bad9..f3c75683dc9 100644
--- a/components/datepicker/metadata/mods.md
+++ b/components/datepicker/metadata/mods.md
@@ -23,9 +23,8 @@
| `--mod-datepicker-invalid-quiet-color` |
| `--mod-datepicker-min-width` |
| `--mod-datepicker-padding-inline` |
-| `--mod-datepicker-padding-inline-end-invalid` |
| `--mod-datepicker-padding-inline-end-invalid-quiet` |
-| `--mod-datepicker-padding-inline-end-quiet` |
+| `--mod-datepicker-padding-inline-quiet` |
| `--mod-datepicker-pickerbutton-border-color` |
| `--mod-datepicker-pickerbutton-border-color-invalid` |
| `--mod-datepicker-quiet-border-color-hover` |
diff --git a/components/datepicker/package.json b/components/datepicker/package.json
index 15d38b0963d..f58eac7edb4 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.17",
"description": "The Spectrum CSS datepicker component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,21 +21,23 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/calendar": ">=5",
- "@spectrum-css/pickerbutton": ">=5",
- "@spectrum-css/popover": ">=7",
- "@spectrum-css/textfield": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/calendar": ">=6.0.0-s2-foundations.0",
+ "@spectrum-css/pickerbutton": ">=6.0.0-s2-foundations.0",
+ "@spectrum-css/popover": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/textfield": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/calendar": "workspace:^",
diff --git a/components/datepicker/stories/datepicker.mdx b/components/datepicker/stories/datepicker.mdx
deleted file mode 100644
index e6fd0a9ca4c..00000000000
--- a/components/datepicker/stories/datepicker.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
-import {
- Canvas,
- ArgTypes,
- Meta,
- Description,
- Title,
- Subtitle,
-} from "@storybook/blocks";
-import {
- ComponentDetails,
- TaggedReleases,
- PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as DatePickerStories from "./datepicker.stories";
-
-
+ *
+ * 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..89c41034eb7 100644
--- a/components/dial/CHANGELOG.md
+++ b/components/dial/CHANGELOG.md
@@ -1,5 +1,210 @@
# Change Log
+## 4.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+
+## 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 +217,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..8aee8cef361 100644
--- a/components/dial/index.css
+++ b/components/dial/index.css
@@ -11,19 +11,15 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.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);
@@ -51,14 +47,12 @@
--spectrum-dial-handle-border-size: var(--spectrum-border-width-200);
--spectrum-dial-label-text-size: var(--spectrum-font-size-75);
--spectrum-dial-label-line-height: var(--spectrum-line-height-200);
-}
-.spectrum-Dial--small {
- --spectrum-dial-width: 24px;
- --spectrum-dial-height: 24px;
-}
+ &.spectrum-Dial--small {
+ --spectrum-dial-width: 24px;
+ --spectrum-dial-height: 24px;
+ }
-.spectrum-Dial {
position: relative;
/* Don't let z-index'd child elements float above other things on the page */
@@ -70,6 +64,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(--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 {
@@ -89,7 +107,7 @@
}
.spectrum-Dial-labelContainer {
- color: var(--highcontrast-dial-label-text-color, var(--mod-dial-label-text-color, var(--spectrum-dial-label-text-color)));
+ color: var(--mod-dial-label-text-color, var(--spectrum-dial-label-text-color));
display: flex;
position: relative;
inline-size: auto;
@@ -203,8 +221,8 @@
&:focus-visible,
&:focus-within {
- background-color: var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus)));
- border-color: var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus)));
+ background-color: var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus));
+ border-color: var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus));
&::after {
background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
@@ -247,32 +265,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)));
- }
- }
- }
-}
-
+/* @deprecated .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..29e38855d6a 100644
--- a/components/dial/metadata/metadata.json
+++ b/components/dial/metadata/metadata.json
@@ -4,7 +4,6 @@
".js-focus-within .spectrum-Dial-handle[focus-within]",
".js-focus-within .spectrum-Dial-handle[focus-within]:after",
".spectrum-Dial",
- ".spectrum-Dial--small",
".spectrum-Dial-controls",
".spectrum-Dial-controls:after",
".spectrum-Dial-controls:before",
@@ -35,6 +34,7 @@
".spectrum-Dial.is-disabled .spectrum-Dial-handle:after",
".spectrum-Dial.is-disabled .spectrum-Dial-handle:before",
".spectrum-Dial.is-disabled .spectrum-Dial-labelContainer",
+ ".spectrum-Dial.spectrum-Dial--small",
".u-isGrabbing",
".u-isGrabbing .spectrum-Dial .spectrum-Dial-label",
".u-isGrabbing .spectrum-Dial .spectrum-Dial-value"
@@ -108,26 +108,26 @@
"global": [
"--spectrum-border-width-200",
"--spectrum-font-size-75",
- "--spectrum-gray-100",
+ "--spectrum-gray-25",
"--spectrum-gray-400",
- "--spectrum-gray-50",
"--spectrum-gray-600",
"--spectrum-gray-700",
+ "--spectrum-gray-75",
"--spectrum-gray-800",
"--spectrum-line-height-200"
],
- "system-theme": [],
+ "system-theme": [
+ "--system-dial-background-color-default",
+ "--system-dial-handle-marker-color-key-focus"
+ ],
"passthroughs": [],
"high-contrast": [
- "--highcontrast-dial-background-color-default",
"--highcontrast-dial-border-color",
"--highcontrast-dial-border-color-hover",
"--highcontrast-dial-handle-border-color-disabled",
"--highcontrast-dial-handle-marker-color",
"--highcontrast-dial-handle-marker-color-hover",
"--highcontrast-dial-handle-marker-color-key-focus",
- "--highcontrast-dial-handle-marker-color-mouse-focus",
- "--highcontrast-dial-label-text-color",
"--highcontrast-dial-label-text-color-disabled",
"--highcontrast-dial-min-max-tick-color"
]
diff --git a/components/dial/package.json b/components/dial/package.json
index 0ba00453d5e..dbd6bfa7df1 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.16",
"description": "The Spectrum CSS dial component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,17 +21,19 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/tokens": "workspace:^"
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..24077607a8b 100644
--- a/components/dial/themes/spectrum.css
+++ b/components/dial/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-Dial {
+ --spectrum-dial-background-color-default: var(--spectrum-gray-100);
+ --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
+ }
+}
diff --git a/components/dialog/CHANGELOG.md b/components/dialog/CHANGELOG.md
index e9e691ae04a..57d7affc54f 100644
--- a/components/dialog/CHANGELOG.md
+++ b/components/dialog/CHANGELOG.md
@@ -1,5 +1,282 @@
# Change Log
+## 11.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.17
+ - @spectrum-css/underlay@5.0.0-s2-foundations.16
+ - @spectrum-css/divider@4.0.0-s2-foundations.16
+ - @spectrum-css/modal@6.0.0-s2-foundations.17
+
+## 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..760f4a5975b 100644
--- a/components/dialog/index.css
+++ b/components/dialog/index.css
@@ -11,36 +11,18 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.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);
-}
-/* @deprecated .spectrum-Dialog--medium */
-.spectrum-Dialog,
-.spectrum-Dialog--medium {
/* Be a flexbox to allow a full sized content area that scrolls */
display: flex;
@@ -48,8 +30,8 @@
box-sizing: border-box;
/* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */
- inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width));
- min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size));
+ inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px));
+ min-inline-size: var(--mod-dialog-min-inline-size, 288px);
max-inline-size: 100%;
max-block-size: inherit;
@@ -57,16 +39,12 @@
outline: none;
}
-/* @deprecated .spectrum-Dialog--small */
-.spectrum-Dialog--sizeS,
-.spectrum-Dialog--small {
- inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width));
+.spectrum-Dialog--sizeS {
+ --mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px);
}
-/* @deprecated .spectrum-Dialog--large */
-.spectrum-Dialog--sizeL,
-.spectrum-Dialog--large {
- inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width));
+.spectrum-Dialog--sizeL {
+ --mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px);
}
.spectrum-Dialog-hero {
@@ -86,7 +64,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 +71,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%;
}
@@ -104,9 +81,9 @@
margin: 0;
font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size));
- font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight));
- line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height));
- color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color));
+ font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight));
+ line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100));
+ color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900));
outline: none; /* Hide focus outline */
padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size));
@@ -148,7 +125,7 @@
}
.spectrum-Dialog-heading {
- padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-dialog-confirm-divider-height)));
+ padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50)));
}
}
@@ -167,19 +144,20 @@
font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size));
font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight));
- line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height));
+ line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100));
color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));
/* 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));
+ margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1));
+
}
.spectrum-Dialog-footer {
grid-area: footer;
/* this padding isn't built into the grid because it disappears with this footer */
- padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top));
+ padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600));
display: flex;
flex-wrap: wrap;
@@ -213,7 +191,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 +198,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;
@@ -274,7 +251,7 @@
}
.spectrum-Dialog-heading {
- font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size));
+ font-size: var(--mod-dialog-fullscreen-header-text-size, 28px);
}
.spectrum-Dialog-content {
@@ -326,8 +303,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 +322,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..812542da227 100644
--- a/components/dialog/metadata/metadata.json
+++ b/components/dialog/metadata/metadata.json
@@ -18,13 +18,10 @@
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer",
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading",
".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid",
- ".spectrum-Dialog--large",
- ".spectrum-Dialog--medium",
".spectrum-Dialog--noDivider .spectrum-Dialog-divider",
".spectrum-Dialog--noDivider .spectrum-Dialog-heading",
".spectrum-Dialog--sizeL",
".spectrum-Dialog--sizeS",
- ".spectrum-Dialog--small",
".spectrum-Dialog-buttonGroup",
".spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter",
".spectrum-Dialog-closeButton",
@@ -66,34 +63,23 @@
"--mod-dialog-confirm-title-text-size",
"--mod-dialog-fullscreen-header-text-size",
"--mod-dialog-heading-font-weight",
- "--mod-dialog-min-inline-size"
+ "--mod-dialog-min-inline-size",
+ "--mod-dialog-width"
],
"component": [
"--spectrum-dialog-confirm-border-radius",
"--spectrum-dialog-confirm-buttongroup-padding-top",
"--spectrum-dialog-confirm-close-button-padding",
"--spectrum-dialog-confirm-close-button-size",
- "--spectrum-dialog-confirm-description-margin",
"--spectrum-dialog-confirm-description-padding",
"--spectrum-dialog-confirm-description-text-color",
- "--spectrum-dialog-confirm-description-text-line-height",
"--spectrum-dialog-confirm-description-text-size",
"--spectrum-dialog-confirm-divider-block-spacing-end",
"--spectrum-dialog-confirm-divider-block-spacing-start",
- "--spectrum-dialog-confirm-divider-height",
- "--spectrum-dialog-confirm-footer-padding-top",
"--spectrum-dialog-confirm-gap-size",
"--spectrum-dialog-confirm-hero-height",
- "--spectrum-dialog-confirm-large-width",
- "--spectrum-dialog-confirm-medium-width",
"--spectrum-dialog-confirm-padding-grid",
- "--spectrum-dialog-confirm-small-width",
- "--spectrum-dialog-confirm-title-text-color",
- "--spectrum-dialog-confirm-title-text-line-height",
- "--spectrum-dialog-confirm-title-text-size",
- "--spectrum-dialog-fullscreen-header-text-size",
- "--spectrum-dialog-heading-font-weight",
- "--spectrum-dialog-min-inline-size"
+ "--spectrum-dialog-confirm-title-text-size"
],
"global": [
"--spectrum-component-bottom-to-text-300",
diff --git a/components/dialog/metadata/mods.md b/components/dialog/metadata/mods.md
index 2be49da8f6e..2642a916d3e 100644
--- a/components/dialog/metadata/mods.md
+++ b/components/dialog/metadata/mods.md
@@ -26,3 +26,4 @@
| `--mod-dialog-fullscreen-header-text-size` |
| `--mod-dialog-heading-font-weight` |
| `--mod-dialog-min-inline-size` |
+| `--mod-dialog-width` |
diff --git a/components/dialog/package.json b/components/dialog/package.json
index 128c8e408c0..38352daa6ee 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.16",
"description": "The Spectrum CSS dialog component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,21 +21,23 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/closebutton": ">=5",
- "@spectrum-css/divider": ">=3",
- "@spectrum-css/modal": ">=5",
- "@spectrum-css/tokens": ">=14",
- "@spectrum-css/underlay": ">=4"
+ "@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"
},
"peerDependenciesMeta": {
"@spectrum-css/divider": {
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
index 3e40c848883..1256f6519ff 100644
--- a/components/dialog/stories/dialog.stories.js
+++ b/components/dialog/stories/dialog.stories.js
@@ -1,6 +1,6 @@
import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isOpen } from "@spectrum-css/preview/types";
+import { isOpen, size } from "@spectrum-css/preview/types";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import metadata from "../metadata/metadata.json";
import packageJson from "../package.json";
@@ -36,16 +36,7 @@ export default {
control: "boolean",
},
footer: { table: { disable: true } },
- size: {
- name: "Size",
- type: { name: "string", required: true },
- table: {
- type: { summary: "string" },
- category: "Component",
- },
- options: ["small", "medium", "large"],
- control: "select",
- },
+ size: size(["s", "m", "l"]),
layout: {
name: "Layout",
type: { name: "string" },
@@ -106,7 +97,7 @@ export default {
hasDivider: true,
isOpen: true,
showModal: true,
- size: "medium",
+ size: "m",
layout: "default",
},
parameters: {
@@ -120,6 +111,10 @@ export default {
height: "500px",
},
},
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=839-1128",
+ },
packageJson,
metadata,
},
@@ -155,7 +150,7 @@ DefaultSmall.parameters = {
};
DefaultSmall.args = {
...Default.args,
- size: "small",
+ size: "s",
};
export const DefaultLarge = Template.bind({});
@@ -166,7 +161,7 @@ DefaultLarge.parameters = {
};
DefaultLarge.args = {
...Default.args,
- size: "large",
+ size: "l",
};
/**
@@ -237,6 +232,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 +248,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..b98d9747be8 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",
@@ -23,13 +26,16 @@ export const Template = ({
footer = [],
customClasses = [],
id = getRandomId("dialog"),
- size = "medium",
+ size = "m",
layout,
heroImageUrl,
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${size?.toUpperCase()}`]: 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..9e947615114 100644
--- a/components/divider/CHANGELOG.md
+++ b/components/divider/CHANGELOG.md
@@ -1,5 +1,210 @@
# Change Log
+## 4.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+
+## 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..d4d1ed9e1e4 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,24 @@
"--spectrum-divider-thickness-small"
],
"global": [
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-gray-800",
- "--spectrum-transparent-black-300",
- "--spectrum-transparent-black-800",
- "--spectrum-transparent-white-300",
- "--spectrum-transparent-white-800"
+ "--spectrum-transparent-black-400",
+ "--spectrum-transparent-black-900",
+ "--spectrum-transparent-white-400",
+ "--spectrum-transparent-white-900"
+ ],
+ "system-theme": [
+ "--system-divider-background-color-large",
+ "--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..daf36b69fe9 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.16",
"description": "The Spectrum CSS divider component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,17 +21,19 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/tokens": "workspace:^"
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..261e20f0a19
--- /dev/null
+++ b/components/divider/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-Divider {
+ /* background colors */
+ --spectrum-divider-background-color-small: var(--spectrum-gray-200);
+ --spectrum-divider-background-color-medium: var(--spectrum-gray-200);
+ --spectrum-divider-background-color-large: var(--spectrum-gray-800);
+
+ /* 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..849761cf369 100644
--- a/components/dropindicator/CHANGELOG.md
+++ b/components/dropindicator/CHANGELOG.md
@@ -1,5 +1,231 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/icon@8.0.0-s2-foundations.18
+
+## 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..d7028af682e 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 {
@@ -20,15 +20,11 @@
}
.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)));
+ background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-color)));
&::before,
&::after {
@@ -39,7 +35,7 @@
border-radius: 50%;
border: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) solid;
box-sizing: border-box;
- border-color: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-circle-color)));
+ border-color: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color)));
}
}
diff --git a/components/dropindicator/metadata/metadata.json b/components/dropindicator/metadata/metadata.json
index e8c125fbcd4..dd3a7a50810 100644
--- a/components/dropindicator/metadata/metadata.json
+++ b/components/dropindicator/metadata/metadata.json
@@ -18,9 +18,7 @@
"--mod-dropindicator-circle-size"
],
"component": [
- "--spectrum-dropindicator-border-color",
"--spectrum-dropindicator-border-size",
- "--spectrum-dropindicator-circle-color",
"--spectrum-dropindicator-circle-size",
"--spectrum-dropindicator-color"
],
diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json
index dc07373203e..42922ba5a4c 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.16",
"description": "The Spectrum CSS dropindicator component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,18 +21,20 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/icon": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/icon": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/icon": "workspace:^",
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..a4cc5b9def6 100644
--- a/components/dropzone/CHANGELOG.md
+++ b/components/dropzone/CHANGELOG.md
@@ -1,5 +1,271 @@
# Change Log
+## 7.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.16
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.24
+ - @spectrum-css/link@6.0.0-s2-foundations.16
+
+## 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 +285,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..2b3fbefe0c7 100644
--- a/components/dropzone/index.css
+++ b/components/dropzone/index.css
@@ -11,115 +11,75 @@
* 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));
- --mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body));
- --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family));
- --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight));
- --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style));
- --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size));
- --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height));
- --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color));
+ --mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-spacing-400));
+ --mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-spacing-75));
+ --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-sans-font-family-stack));
+ --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight));
+ --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-heading-sans-serif-font-style));
+ --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-title-size));
+ --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-heading-line-height));
+ --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-heading-color));
--mod-illustrated-message-description-position: relative;
--mod-illustrated-message-description-z-index: 10;
--mod-illustrated-message-heading-to-description: 0;
- --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family));
- --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight));
- --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style));
- --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size));
- --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height));
- --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color));
+ --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-sans-font-family-stack));
+ --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-body-sans-serif-font-weight));
+ --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-body-sans-serif-font-style));
+ --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-size));
+ --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-body-line-height));
+ --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-body-color));
/* @passthrough end */
- /* @passthrough start -- 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 start -- ActionButton settings for a nested actionbutton */
+ --mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-font-size-300));
+ --mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-white));
+ --mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-component-edge-to-text-300));
/* @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)));
+ padding: calc(var(--mod-drop-zone-padding, var(--spectrum-spacing-400)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)));
text-align: center;
border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color));
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-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-corner-radius-100));
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) {
+ /* @passthrough -- updated value for cjk font size */
+ --mod-illustrated-message-title-font-size: var(--spectrum-drop-zone-cjk-title-size);
+ }
&.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)));
+ --mod-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 */
- --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover));
+ /* @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-accent-visual-color));
}
&.is-filled {
/* 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;
}
@@ -129,7 +89,8 @@
&:focus-visible {
--mod-drop-zone-border-style: solid;
- --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)));
+ --mod-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)));
+
outline: 0;
}
}
@@ -146,16 +107,16 @@
.spectrum-DropZone-button {
box-sizing: border-box;
border: none;
- block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height));
- max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width));
- padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text));
- padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text));
+ block-size: var(--mod-drop-zone-content-height, var(--spectrum-component-height-300));
+ max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-maximum-width));
+ padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-component-top-to-text-300));
+ padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-component-bottom-to-text-300));
background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color));
- font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family));
- font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight));
- font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-drop-zone-content-font-style));
- line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-drop-zone-content-line-height));
+ font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-sans-font-family-stack));
+ font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-bold-font-weight));
+ font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-default-font-style));
+ line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-line-height-100));
&:hover,
&:focus {
diff --git a/components/dropzone/metadata/metadata.json b/components/dropzone/metadata/metadata.json
index a3bbc3e93e8..3044ecfc906 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",
@@ -63,42 +62,14 @@
"--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",
- "--spectrum-drop-zone-content-edge-to-text",
- "--spectrum-drop-zone-content-font-family",
- "--spectrum-drop-zone-content-font-size",
- "--spectrum-drop-zone-content-font-style",
- "--spectrum-drop-zone-content-font-weight",
- "--spectrum-drop-zone-content-height",
- "--spectrum-drop-zone-content-line-height",
- "--spectrum-drop-zone-content-max-width",
"--spectrum-drop-zone-content-maximum-width",
- "--spectrum-drop-zone-content-top-to-text",
- "--spectrum-drop-zone-corner-radius",
- "--spectrum-drop-zone-heading-color",
- "--spectrum-drop-zone-heading-font-family",
- "--spectrum-drop-zone-heading-font-size",
- "--spectrum-drop-zone-heading-font-style",
- "--spectrum-drop-zone-heading-font-weight",
- "--spectrum-drop-zone-heading-line-height",
- "--spectrum-drop-zone-heading-to-body",
"--spectrum-drop-zone-illustration-color",
- "--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"
],
@@ -117,7 +88,7 @@
"--spectrum-corner-radius-100",
"--spectrum-default-font-style",
"--spectrum-font-size-300",
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-heading-color",
"--spectrum-heading-line-height",
"--spectrum-heading-sans-serif-font-style",
@@ -129,7 +100,7 @@
"--spectrum-spacing-75",
"--spectrum-white"
],
- "system-theme": [],
+ "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..f0e562d2576 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.17",
"description": "The Spectrum CSS dropzone component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,20 +21,22 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/actionbutton": ">=6",
- "@spectrum-css/illustratedmessage": ">=7",
- "@spectrum-css/link": ">=5",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/actionbutton": ">=7.0.0-s2-foundations.0",
+ "@spectrum-css/illustratedmessage": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/link": ">=6.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/actionbutton": {
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..32a9b5b331c 100644
--- a/components/fieldgroup/CHANGELOG.md
+++ b/components/fieldgroup/CHANGELOG.md
@@ -1,5 +1,296 @@
# Change Log
+## 6.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.20
+ - @spectrum-css/helptext@6.0.0-s2-foundations.16
+ - @spectrum-css/radio@10.0.0-s2-foundations.18
+
+## 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..76d18e86511 100644
--- a/components/fieldgroup/index.css
+++ b/components/fieldgroup/index.css
@@ -11,11 +11,7 @@
* 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 {
@@ -49,7 +45,7 @@
/* space between horizontal fields */
.spectrum-FieldGroup-item:not(:last-child) {
- margin-inline-end: var(--spectrum-fieldgroup-margin);
+ margin-inline-end: var(--spectrum-spacing-300);
}
/* move help text down to new row */
diff --git a/components/fieldgroup/metadata/metadata.json b/components/fieldgroup/metadata/metadata.json
index 20528391a13..c8875b9d3a9 100644
--- a/components/fieldgroup/metadata/metadata.json
+++ b/components/fieldgroup/metadata/metadata.json
@@ -11,7 +11,7 @@
".spectrum-FieldGroupInputLayout"
],
"modifiers": [],
- "component": ["--spectrum-fieldgroup-margin"],
+ "component": [],
"global": ["--spectrum-spacing-300"],
"system-theme": [],
"passthroughs": [],
diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json
index 4cad0ed5664..5d7ed7a9d7b 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.17",
"description": "The Spectrum CSS fieldgroup component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,20 +21,22 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/checkbox": ">=9",
- "@spectrum-css/helptext": ">=5",
- "@spectrum-css/radio": ">=9",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/checkbox": ">=10.0.0-s2-foundations.0",
+ "@spectrum-css/helptext": ">=6.0.0-s2-foundations.0",
+ "@spectrum-css/radio": ">=10.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/checkbox": {
diff --git a/components/fieldgroup/stories/fieldgroup.mdx b/components/fieldgroup/stories/fieldgroup.mdx
deleted file mode 100644
index 4ceef8fd355..00000000000
--- a/components/fieldgroup/stories/fieldgroup.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
- ArgTypes,
- Canvas,
- Meta,
- Description,
- Title,
- Subtitle,
-} from "@storybook/blocks";
-import {
- ComponentDetails,
- TaggedReleases,
- PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as FieldGroupStories from "./fieldgroup.stories";
-
-
`;
};
+
+/* Displays a radio group and a checkbox group. */
+export const InputOptionsFieldGroupTemplate = (args, context) => Container({
+ withBorder: false,
+ content: html`
+ ${Container({
+ withBorder: false,
+ heading: "Radios",
+ content: Template({...args}, context),
+ })}
+ ${Container({
+ withBorder: false,
+ heading: "Checkboxes",
+ content: Template({...args, inputType: "checkbox"}, context),
+ })}
+ `
+});
+
+/* Displays all options for required vs. optional indicators. */
+export const NecessityIndicatorFieldGroupTemplate = (args, context) => Container({
+ withBorder: false,
+ content: html`
+ ${Container({
+ withBorder: false,
+ heading: "Required (text)",
+ content: Template({...args, label: "Field label (required)",}, context),
+ })}
+ ${Container({
+ withBorder: false,
+ heading: "Required (asterisk)",
+ content: Template({...args, isRequired: true,}, context),
+ })}
+ ${Container({
+ withBorder: false,
+ heading: "Optional",
+ content: Template({...args, label: "Field label (optional)", helpText: "",}, context),
+ })}
+ `
+});
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..3be540d761f 100644
--- a/components/fieldlabel/CHANGELOG.md
+++ b/components/fieldlabel/CHANGELOG.md
@@ -1,5 +1,240 @@
# Change Log
+## 9.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/icon@8.0.0-s2-foundations.18
+
+## 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..a9e4284a2e6 100644
--- a/components/fieldlabel/index.css
+++ b/components/fieldlabel/index.css
@@ -11,63 +11,55 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
-.spectrum-FieldLabel {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
- --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
+/* @todo align modifiers to use field-label or fieldlabel but not both */
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
+.spectrum-FieldLabel,
+.spectrum-FieldLabel--sizeM {
+ --spectrum-field-label-min-height: var(--spectrum-component-height-75);
+ --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-field-label-font-size: var(--spectrum-font-size-75);
+
+ --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
+ --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
- --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-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
}
.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-field-label-min-height: var(--spectrum-component-height-75);
+ --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-field-label-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-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
+ --spectrum-field-label-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-field-label-min-height: var(--spectrum-component-height-100);
+ --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+ --spectrum-field-label-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-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
+ --spectrum-field-label-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-field-label-min-height: var(--spectrum-component-height-200);
+ --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+ --spectrum-field-label-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-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
+ --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
--spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
}
@@ -75,30 +67,38 @@
.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-regular-font-weight));
- line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height));
+ line-height: var(--mod-fieldlabel-line-height, var(--spectrum-line-height-100));
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
- color: var(--spectrum-fieldlabel-color);
+ color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default)));
/* 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-cjk-line-height-100));
+ }
+
+ /********* Disabled state *********/
+ &.is-disabled {
+ --mod-fieldlabel-color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
}
}
.spectrum-FieldLabel-requiredIcon {
+ color: inherit;
margin-block: 0;
margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
@@ -108,9 +108,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 +119,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;
+ .spectrum-FieldLabel.is-disabled {
+ --highcontrast-field-label-content-color: GrayText;
}
}
diff --git a/components/fieldlabel/metadata/metadata.json b/components/fieldlabel/metadata/metadata.json
index 409f73ab3ab..cc26c19a022 100644
--- a/components/fieldlabel/metadata/metadata.json
+++ b/components/fieldlabel/metadata/metadata.json
@@ -10,19 +10,9 @@
".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,20 +20,29 @@
"--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-font-size",
+ "--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",
@@ -53,16 +52,7 @@
"--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"
+ "--spectrum-field-label-top-to-text"
],
"global": [
"--spectrum-cjk-line-height-100",
@@ -83,14 +73,9 @@
"--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-spacing-200"
],
"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-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..a7a95574b4a 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.17",
"description": "The Spectrum CSS fieldlabel component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,18 +21,20 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/icon": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/icon": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/icon": "workspace:^",
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..c924f02a657 100644
--- a/components/floatingactionbutton/CHANGELOG.md
+++ b/components/floatingactionbutton/CHANGELOG.md
@@ -1,5 +1,199 @@
# Change Log
+## 3.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+
+## 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..caa308d1ce3 100644
--- a/components/floatingactionbutton/index.css
+++ b/components/floatingactionbutton/index.css
@@ -11,23 +11,38 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
+
+@media (forced-colors: active) {
+ .spectrum-FloatingActionButton {
+ --highcontrast-floating-action-button-background-color: ButtonText;
+ --highcontrast-floating-action-button-background-color-hover: Highlight;
+ --highcontrast-floating-action-button-background-color-down: Highlight;
+ --highcontrast-floating-action-button-background-color-key-focus: Highlight;
+
+ --highcontrast-floating-action-button-icon-color: ButtonFace;
+ --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;
+ }
+ }
+}
.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);
@@ -39,31 +54,13 @@
--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);
}
-@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;
- --highcontrast-floating-action-button-background-color-key-focus: Highlight;
-
- --highcontrast-floating-action-button-icon-color: ButtonFace;
- --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;
- }
-}
-
.spectrum-FloatingActionButton {
cursor: pointer;
block-size: var(--mod-floating-action-button-size, var(--spectrum-floating-action-button-size));
@@ -74,7 +71,7 @@
margin-inline-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin));
margin-block-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin));
border: none;
- box-shadow: var(--mod-floating-action-button-drop-shadow-x, var(--spectrum-floating-action-button-drop-shadow-x)) var(--mod-floating-action-button-drop-shadow-y, var(--spectrum-floating-action-button-drop-shadow-y)) var(--mod-floating-action-button-drop-shadow-blur, var(--spectrum-floating-action-button-drop-shadow-blur)) var(--mod-floating-action-button-drop-shadow-color, var(--spectrum-floating-action-button-drop-shadow-color));
+ box-shadow: var(--mod-floating-action-button-drop-shadow-x, var(--spectrum-drop-shadow-x)) var(--mod-floating-action-button-drop-shadow-y, var(--spectrum-floating-action-button-drop-shadow-y)) var(--mod-floating-action-button-drop-shadow-blur, var(--spectrum-floating-action-button-drop-shadow-blur)) var(--mod-floating-action-button-drop-shadow-color, var(--spectrum-floating-action-button-drop-shadow-color));
position: relative;
/* default is primary */
@@ -107,8 +104,8 @@
&::after {
position: absolute;
inset: 0;
- margin: calc(-1 * var(--mod-floating-action-button-focus-ring-gap, var(--spectrum-floating-action-button-focus-ring-gap)));
- box-shadow: 0 0 0 var(--mod-floating-action-button-focus-ring-width, var(--spectrum-floating-action-button-focus-ring-width)) var(--highcontrast-floating-action-button-focus-ring-color, var(--mod-afloating-action-button-focus-ring-color, var(--spectrum-floating-action-button-focus-ring-color)));
+ margin: calc(-1 * var(--mod-floating-action-button-focus-ring-gap, var(--spectrum-focus-indicator-gap)));
+ box-shadow: 0 0 0 var(--mod-floating-action-button-focus-ring-width, var(--spectrum-focus-indicator-thickness)) var(--mod-afloating-action-button-focus-ring-color, var(--spectrum-focus-indicator-color));
border-radius: var(--mod-floating-action-button-border-radius, 50%);
pointer-events: none;
content: "";
diff --git a/components/floatingactionbutton/metadata/metadata.json b/components/floatingactionbutton/metadata/metadata.json
index 093c5517581..7daf062a329 100644
--- a/components/floatingactionbutton/metadata/metadata.json
+++ b/components/floatingactionbutton/metadata/metadata.json
@@ -42,11 +42,7 @@
"--spectrum-floating-action-button-background-color-key-focus",
"--spectrum-floating-action-button-drop-shadow-blur",
"--spectrum-floating-action-button-drop-shadow-color",
- "--spectrum-floating-action-button-drop-shadow-x",
"--spectrum-floating-action-button-drop-shadow-y",
- "--spectrum-floating-action-button-focus-ring-color",
- "--spectrum-floating-action-button-focus-ring-gap",
- "--spectrum-floating-action-button-focus-ring-width",
"--spectrum-floating-action-button-icon-color",
"--spectrum-floating-action-button-icon-color-down",
"--spectrum-floating-action-button-icon-color-hover",
@@ -83,7 +79,6 @@
"--highcontrast-floating-action-button-background-color-down",
"--highcontrast-floating-action-button-background-color-hover",
"--highcontrast-floating-action-button-background-color-key-focus",
- "--highcontrast-floating-action-button-focus-ring-color",
"--highcontrast-floating-action-button-icon-color",
"--highcontrast-floating-action-button-icon-color-down",
"--highcontrast-floating-action-button-icon-color-hover",
diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json
index d7e065bc10f..9131f0c8a3c 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.15",
"description": "The Spectrum CSS floatingactionbutton component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -22,17 +22,19 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/tokens": "workspace:^"
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..884e0d2a496
--- /dev/null
+++ b/components/form/CHANGELOG.md
@@ -0,0 +1,42 @@
+# Change Log
+
+## 0.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+
+## 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 68%
rename from components/page/package.json
rename to components/form/package.json
index 64690a19fa0..e524b88e32a 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.2",
+ "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"
@@ -21,17 +21,19 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/tokens": "workspace:^"
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..f0ebf722d8b 100644
--- a/components/helptext/CHANGELOG.md
+++ b/components/helptext/CHANGELOG.md
@@ -1,5 +1,231 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/icon@8.0.0-s2-foundations.18
+
+## 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..6799ca54797 100644
--- a/components/helptext/index.css
+++ b/components/helptext/index.css
@@ -11,13 +11,70 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
+
+@media (forced-colors: active) {
+ .spectrum-HelpText {
+ --highcontrast-helptext-content-color-default: CanvasText;
+ --highcontrast-helptext-icon-color-default: CanvasText;
+
+ forced-color-adjust: none;
+
+ .spectrum-HelpText-validationIcon,
+ .spectrum-HelpText-text {
+ forced-color-adjust: none;
+ }
+ }
+}
.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--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);
+ }
&.spectrum-HelpText--neutral {
--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
@@ -30,81 +87,21 @@
}
&.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-content-color-default: var(--spectrum-disabled-content-color);
+ --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color);
}
-}
-
-.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);
-}
-
-@media (forced-colors: active) {
- .spectrum-HelpText {
- --highcontrast-helptext-content-color-default: CanvasText;
- --highcontrast-helptext-icon-color-default: CanvasText;
-
- forced-color-adjust: none;
-
- .spectrum-HelpText-validationIcon,
- .spectrum-HelpText-text {
- forced-color-adjust: none;
- }
- }
-}
-
-.spectrum-HelpText {
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));
min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height));
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100));
+ }
+
.spectrum-HelpText-validationIcon {
margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual));
padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon));
@@ -117,15 +114,7 @@
.spectrum-HelpText-text {
padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text));
padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text));
- line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height));
- }
-
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- .spectrum-HelpText-text {
- line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-helptext-line-height-cjk));
- }
+ line-height: var(--mod-helptext-line-height, var(--spectrum-line-height-100));
}
&.spectrum-HelpText--neutral {
diff --git a/components/helptext/metadata/metadata.json b/components/helptext/metadata/metadata.json
index b6600329896..f730c33a671 100644
--- a/components/helptext/metadata/metadata.json
+++ b/components/helptext/metadata/metadata.json
@@ -4,10 +4,6 @@
".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",
@@ -17,12 +13,13 @@
".spectrum-HelpText.spectrum-HelpText--neutral",
".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text",
".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon",
+ ".spectrum-HelpText.spectrum-HelpText--sizeL",
+ ".spectrum-HelpText.spectrum-HelpText--sizeM",
+ ".spectrum-HelpText.spectrum-HelpText--sizeS",
+ ".spectrum-HelpText.spectrum-HelpText--sizeXL",
".spectrum-HelpText:lang(ja)",
- ".spectrum-HelpText:lang(ja) .spectrum-HelpText-text",
".spectrum-HelpText:lang(ko)",
- ".spectrum-HelpText:lang(ko) .spectrum-HelpText-text",
- ".spectrum-HelpText:lang(zh)",
- ".spectrum-HelpText:lang(zh) .spectrum-HelpText-text"
+ ".spectrum-HelpText:lang(zh)"
],
"modifiers": [
"--mod-helptext-bottom-to-text",
@@ -46,12 +43,9 @@
"--spectrum-helptext-bottom-to-text",
"--spectrum-helptext-bottom-to-workflow-icon",
"--spectrum-helptext-content-color-default",
- "--spectrum-helptext-disabled-content-color",
"--spectrum-helptext-font-size",
"--spectrum-helptext-icon-color-default",
"--spectrum-helptext-icon-size",
- "--spectrum-helptext-line-height",
- "--spectrum-helptext-line-height-cjk",
"--spectrum-helptext-min-height",
"--spectrum-helptext-text-to-visual",
"--spectrum-helptext-top-to-text",
diff --git a/components/helptext/package.json b/components/helptext/package.json
index c09a64c5ff3..15a062f3eba 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.16",
"description": "The Spectrum CSS helptext component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,18 +21,20 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/icon": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/icon": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/icon": "workspace:^",
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..dcb64e2ffb6 100644
--- a/components/icon/CHANGELOG.md
+++ b/components/icon/CHANGELOG.md
@@ -1,5 +1,228 @@
# Change Log
+## 8.0.0-s2-foundations.18
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+
+## 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..8a89a0f2965 100644
--- a/components/icon/index.css
+++ b/components/icon/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
@import "./icons.css";
@import "./workflow-icons.css";
@import "./ui-icons.css";
diff --git a/components/icon/package.json b/components/icon/package.json
index 293aeaf0f96..1bc704a465a 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.18",
"description": "The Spectrum CSS icon component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,17 +21,19 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/tokens": "workspace:^"
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..74a1bdea367 100644
--- a/components/illustratedmessage/CHANGELOG.md
+++ b/components/illustratedmessage/CHANGELOG.md
@@ -1,5 +1,231 @@
# Change Log
+## 8.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/typography@7.0.0-s2-foundations.18
+
+## 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..0200206bba9 100644
--- a/components/illustratedmessage/index.css
+++ b/components/illustratedmessage/index.css
@@ -11,7 +11,14 @@
* governing permissions and limitations under the License.
*/
- @import "./themes/express.css";
+@import "./themes/spectrum-two.css";
+
+@media (forced-colors: active) {
+ .spectrum-IllustratedMessage {
+ --highcontrast-illustrated-message-illustration-color: CanvasText;
+ --highcontrast-illustrated-message-illustration-accent-color: Highlight;
+ }
+}
.spectrum-IllustratedMessage {
/* Size & Spacing */
@@ -40,22 +47,6 @@
--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);
- }
-}
-
-@media (forced-colors: active) {
- .spectrum-IllustratedMessage {
- --highcontrast-illustrated-message-illustration-color: CanvasText;
- --highcontrast-illustrated-message-illustration-accent-color: Highlight;
- }
-}
-
-.spectrum-IllustratedMessage {
block-size: 100%;
display: var(--mod-illustrated-message-display, flex);
@@ -66,6 +57,13 @@
text-align: center;
pointer-events: var(--mod-illustrated-message-pointer-events, auto);
max-inline-size: var(--mod-illustrated-message-content-maximum-width);
+
+ /* 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);
+ }
}
.spectrum-IllustratedMessage-illustration {
@@ -95,6 +93,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/package.json b/components/illustratedmessage/package.json
index 91cbbb9f7e4..80b567d9e7a 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.16",
"description": "The Spectrum CSS illustratedmessage component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,18 +21,20 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14",
- "@spectrum-css/typography": ">=6"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0",
+ "@spectrum-css/typography": ">=7.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/tokens": "workspace:^",
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..b067382eb5e 100644
--- a/components/infieldbutton/CHANGELOG.md
+++ b/components/infieldbutton/CHANGELOG.md
@@ -1,5 +1,237 @@
# Change Log
+## 6.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/icon@8.0.0-s2-foundations.18
+
+## 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 +249,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..ab1533eeacc 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 */
@@ -37,6 +37,7 @@
--mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color));
--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
+
--mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color));
--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
@@ -101,11 +102,35 @@
}
}
- &:hover:not(:disabled),
- &:active:not(:disabled),
- &:focus-visible:not(:disabled) {
- @media (forced-colors: active) {
- --highcontrast-infield-button-border-color: Highlight;
+ &:hover {
+ --mod-infield-button-background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover));
+ --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover));
+ }
+
+ &:active {
+ --mod-infield-button-background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down));
+ --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down));
+ }
+
+ &:focus-visible {
+ --mod-infield-button-background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus));
+ --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus));
+ }
+}
+
+@media (forced-colors: active) {
+ .spectrum-InfieldButton {
+ --highcontrast-infield-button-border-color: ButtonText;
+ --highcontrast-infield-button-border-color-active: Highlight;
+
+ &:disabled {
+ --highcontrast-infield-button-border-color: inherit;
+ }
+
+ &:not(:disabled):hover,
+ &:not(:disabled):active,
+ &:not(:disabled):focus-visible {
+ --highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active);
}
}
}
@@ -124,104 +149,71 @@
padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill));
- .spectrum-InfieldButton-fill {
- block-size: 100%;
- inline-size: 100%;
-
- background-color: var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color));
-
- border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width));
- border-style: solid;
- border-color: var(--highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color)));
- border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
- border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
- border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
- border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
-
- padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding));
- }
-
- .spectrum-InfieldButton-icon {
- color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color));
+ &:disabled {
+ cursor: auto;
}
- &.spectrum-InfieldButton--right {
- .spectrum-InfieldButton-fill {
- border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
- border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
- }
+ &:focus-visible {
+ outline: none;
}
- &.spectrum-InfieldButton--left {
- .spectrum-InfieldButton-fill {
- border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
- border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
- }
+ /* Stacked in-field buttons */
+ /* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */
+ &.spectrum-InfieldButton--top,
+ &.spectrum-InfieldButton--bottom {
+ block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2);
}
- &:disabled {
- cursor: auto;
+ &.spectrum-InfieldButton--top {
+ padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
}
- &:hover {
- .spectrum-InfieldButton-fill {
- background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover));
- }
-
- .spectrum-InfieldButton-icon {
- color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover));
- }
+ &.spectrum-InfieldButton--bottom {
+ padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
}
+}
- &:active {
- .spectrum-InfieldButton-fill {
- background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down));
- }
+.spectrum-InfieldButton-fill {
+ block-size: 100%;
+ inline-size: 100%;
- .spectrum-InfieldButton-icon {
- color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down));
- }
- }
+ background-color: var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color));
- &:focus-visible {
- outline: none;
+ border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width));
+ border-style: solid;
+ border-color: var(--highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color)));
+ border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
+ border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
+ border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
+ border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
- .spectrum-InfieldButton-fill {
- background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus));
- }
+ padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding));
- .spectrum-InfieldButton-icon {
- color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus));
- }
- }
-}
-
-.spectrum-InfieldButton-fill {
/* center icon */
display: flex;
align-items: center;
justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));
- transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out;
-}
+ transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
+
+ .spectrum-InfieldButton--right & {
+ border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+ border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+ }
-/* Stacked in-field buttons */
-/* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */
-.spectrum-InfieldButton--top,
-.spectrum-InfieldButton--bottom {
- block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2);
+ .spectrum-InfieldButton--left & {
+ border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+ border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
+ }
- .spectrum-InfieldButton-fill {
+ .spectrum-InfieldButton--top &,
+ .spectrum-InfieldButton--bottom & {
box-sizing: border-box;
padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
padding-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
}
-}
-
-.spectrum-InfieldButton--top {
- padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
- .spectrum-InfieldButton-fill {
+ .spectrum-InfieldButton--top & {
padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)));
border-block-end: none;
@@ -229,12 +221,8 @@
border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
}
-}
-
-.spectrum-InfieldButton--bottom {
- padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
- .spectrum-InfieldButton-fill {
+ .spectrum-InfieldButton--bottom & {
padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start));
@@ -253,4 +241,6 @@
/* remove margin used for centering */
margin: 0 !important;
+
+ color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color));
}
diff --git a/components/infieldbutton/metadata/metadata.json b/components/infieldbutton/metadata/metadata.json
index 1b524213f41..0f740ffe77e 100644
--- a/components/infieldbutton/metadata/metadata.json
+++ b/components/infieldbutton/metadata/metadata.json
@@ -2,11 +2,9 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-InfieldButton",
- ".spectrum-InfieldButton .spectrum-InfieldButton-fill",
- ".spectrum-InfieldButton .spectrum-InfieldButton-icon",
- ".spectrum-InfieldButton--bottom",
".spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill",
- ".spectrum-InfieldButton--top",
+ ".spectrum-InfieldButton--left .spectrum-InfieldButton-fill",
+ ".spectrum-InfieldButton--right .spectrum-InfieldButton-fill",
".spectrum-InfieldButton--top .spectrum-InfieldButton-fill",
".spectrum-InfieldButton-fill",
".spectrum-InfieldButton-icon",
@@ -14,10 +12,8 @@
".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL",
".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS",
".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL",
- ".spectrum-InfieldButton.spectrum-InfieldButton--left .spectrum-InfieldButton-fill",
".spectrum-InfieldButton.spectrum-InfieldButton--quiet",
".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled",
- ".spectrum-InfieldButton.spectrum-InfieldButton--right .spectrum-InfieldButton-fill",
".spectrum-InfieldButton.spectrum-InfieldButton--sizeL",
".spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL",
@@ -25,17 +21,13 @@
".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL",
".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS",
".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL",
- ".spectrum-InfieldButton:active .spectrum-InfieldButton-fill",
- ".spectrum-InfieldButton:active .spectrum-InfieldButton-icon",
- ".spectrum-InfieldButton:active:not(:disabled)",
+ ".spectrum-InfieldButton:active",
".spectrum-InfieldButton:disabled",
".spectrum-InfieldButton:focus-visible",
- ".spectrum-InfieldButton:focus-visible .spectrum-InfieldButton-fill",
- ".spectrum-InfieldButton:focus-visible .spectrum-InfieldButton-icon",
- ".spectrum-InfieldButton:focus-visible:not(:disabled)",
- ".spectrum-InfieldButton:hover .spectrum-InfieldButton-fill",
- ".spectrum-InfieldButton:hover .spectrum-InfieldButton-icon",
- ".spectrum-InfieldButton:hover:not(:disabled)"
+ ".spectrum-InfieldButton:hover",
+ ".spectrum-InfieldButton:not(:disabled):active",
+ ".spectrum-InfieldButton:not(:disabled):focus-visible",
+ ".spectrum-InfieldButton:not(:disabled):hover"
],
"modifiers": [
"--mod-infield-border-color",
@@ -129,37 +121,38 @@
"--spectrum-infield-button-width"
],
"global": [
+ "--spectrum-animation-duration-100",
"--spectrum-border-width-100",
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-corner-radius-100",
- "--spectrum-corner-radius-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"]
+ "high-contrast": [
+ "--highcontrast-infield-button-border-color",
+ "--highcontrast-infield-button-border-color-active"
+ ]
}
diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json
index 8fc651ed416..defb7f56f33 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.17",
"description": "The Spectrum CSS infield button component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,18 +21,20 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/icon": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/icon": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/icon": {
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..3b0bd1e9c62 100644
--- a/components/inlinealert/CHANGELOG.md
+++ b/components/inlinealert/CHANGELOG.md
@@ -1,5 +1,248 @@
# Change Log
+## 9.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/button@14.0.0-s2-foundations.19
+ - @spectrum-css/icon@8.0.0-s2-foundations.18
+
+## 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..ab3af28976d 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
- @import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-InLineAlert {
/* Font */
@@ -48,9 +48,7 @@
--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);
-}
-.spectrum-InLineAlert {
position: relative;
display: inline-block;
@@ -120,6 +118,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/package.json b/components/inlinealert/package.json
index 139d9acbf79..26b727b735d 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.16",
"description": "The Spectrum CSS in-line alert component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,19 +21,21 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/button": ">=13",
- "@spectrum-css/icon": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/button": ">=14.0.0-s2-foundations.0",
+ "@spectrum-css/icon": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/button": {
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..89ddb8d9857 100644
--- a/components/link/CHANGELOG.md
+++ b/components/link/CHANGELOG.md
@@ -1,5 +1,210 @@
# Change Log
+## 6.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+
+## 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..6a4f668f44f 100644
--- a/components/link/index.css
+++ b/components/link/index.css
@@ -11,46 +11,22 @@
* 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) {
.spectrum-Link {
- --highcontrast-link-text-color-primary-default: LinkText;
- --highcontrast-link-text-color-primary-hover: LinkText;
- --highcontrast-link-text-color-primary-active: LinkText;
- --highcontrast-link-text-color-primary-focus: LinkText;
-
- --highcontrast-link-text-color-secondary-default: LinkText;
- --highcontrast-link-text-color-secondary-hover: LinkText;
- --highcontrast-link-text-color-secondary-active: LinkText;
- --highcontrast-link-text-color-secondary-focus: LinkText;
-
- --highcontrast-link-text-color-white: LinkText;
- --highcontrast-link-text-color-black: LinkText;
+ --highcontrast-link-text-color: LinkText;
}
}
+.spectrum-Link--secondary {
+ --mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
+ --mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
+ --mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
+ --mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
+}
+
.spectrum-Link {
/* Remove the gray background on active links in IE 10. */
background-color: transparent;
@@ -58,41 +34,30 @@
/* 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)));
+ /* @deprecated --mod-link-text-color-primary-default in favor of --mod-link-text-color */
+ color: var(--highcontrast-link-text-color, var(--mod-link-text-color, 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)));
+ /* @deprecated --mod-link-text-color-primary-hover in favor of --mod-link-text-color-hover */
+ --mod-link-text-color: var(--mod-link-text-color-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)));
+ /* @deprecated --mod-link-text-color-primary-active in favor of --mod-link-text-color-active */
+ --mod-link-text-color: var(--mod-link-text-color-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)));
+ /* @deprecated --mod-link-text-color-primary-focus in favor of --mod-link-text-color-focus */
+ --mod-link-text-color: var(--mod-link-text-color-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);
- }
-}
-
-.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)));
-
- &:hover {
- color: var(--highcontrast-link-text-color-secondary-hover, var(--mod-link-text-color-secondary-hover, var(--spectrum-link-text-color-secondary-hover)));
- }
-
- &:active {
- color: var(--highcontrast-link-text-color-secondary-active, var(--mod-link-text-color-secondary-active, var(--spectrum-link-text-color-secondary-active)));
- }
-
- &:focus {
- color: var(--highcontrast-link-text-color-secondary-focus, var(--mod-link-text-color-secondary-focus, var(--spectrum-link-text-color-secondary-focus)));
+ text-decoration-color: inherit;
}
}
@@ -105,21 +70,15 @@
}
.spectrum-Link--staticWhite {
- color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)));
-
- &:hover,
- &:active,
- &:focus {
- color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)));
- }
+ --mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white));
+ --mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white));
+ --mod-link-text-color-active: var(--mod-link-text-color-white, var(--spectrum-white));
+ --mod-link-text-color-focus: 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)));
-
- &:hover,
- &:active,
- &:focus {
- color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black)));
- }
+ --mod-link-text-color: var(--mod-link-text-color-black, var(--spectrum-black));
+ --mod-link-text-color-hover: var(--mod-link-text-color-black, var(--spectrum-black));
+ --mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black));
+ --mod-link-text-color-focus: 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..9befaceefc4 100644
--- a/components/link/metadata/metadata.json
+++ b/components/link/metadata/metadata.json
@@ -5,24 +5,19 @@
".spectrum-Link--quiet",
".spectrum-Link--quiet:hover",
".spectrum-Link--secondary",
- ".spectrum-Link--secondary:active",
- ".spectrum-Link--secondary:focus",
- ".spectrum-Link--secondary:hover",
".spectrum-Link--staticBlack",
- ".spectrum-Link--staticBlack:active",
- ".spectrum-Link--staticBlack:focus",
- ".spectrum-Link--staticBlack:hover",
".spectrum-Link--staticWhite",
- ".spectrum-Link--staticWhite:active",
- ".spectrum-Link--staticWhite:focus",
- ".spectrum-Link--staticWhite:hover",
".spectrum-Link:active",
".spectrum-Link:focus-visible",
".spectrum-Link:hover"
],
"modifiers": [
"--mod-link-animation-duration",
+ "--mod-link-text-color",
+ "--mod-link-text-color-active",
"--mod-link-text-color-black",
+ "--mod-link-text-color-focus",
+ "--mod-link-text-color-hover",
"--mod-link-text-color-primary-active",
"--mod-link-text-color-primary-default",
"--mod-link-text-color-primary-focus",
@@ -33,19 +28,7 @@
"--mod-link-text-color-secondary-hover",
"--mod-link-text-color-white"
],
- "component": [
- "--spectrum-link-animation-duration",
- "--spectrum-link-text-color-black",
- "--spectrum-link-text-color-primary-active",
- "--spectrum-link-text-color-primary-default",
- "--spectrum-link-text-color-primary-focus",
- "--spectrum-link-text-color-primary-hover",
- "--spectrum-link-text-color-secondary-active",
- "--spectrum-link-text-color-secondary-default",
- "--spectrum-link-text-color-secondary-focus",
- "--spectrum-link-text-color-secondary-hover",
- "--spectrum-link-text-color-white"
- ],
+ "component": [],
"global": [
"--spectrum-accent-content-color-default",
"--spectrum-accent-content-color-down",
@@ -61,17 +44,5 @@
],
"system-theme": [],
"passthroughs": [],
- "high-contrast": [
- "--highcontrast-link-focus-color",
- "--highcontrast-link-text-color-black",
- "--highcontrast-link-text-color-primary-active",
- "--highcontrast-link-text-color-primary-default",
- "--highcontrast-link-text-color-primary-focus",
- "--highcontrast-link-text-color-primary-hover",
- "--highcontrast-link-text-color-secondary-active",
- "--highcontrast-link-text-color-secondary-default",
- "--highcontrast-link-text-color-secondary-focus",
- "--highcontrast-link-text-color-secondary-hover",
- "--highcontrast-link-text-color-white"
- ]
+ "high-contrast": ["--highcontrast-link-text-color"]
}
diff --git a/components/link/metadata/mods.md b/components/link/metadata/mods.md
index 2831c34f716..3ec055db1cd 100644
--- a/components/link/metadata/mods.md
+++ b/components/link/metadata/mods.md
@@ -1,7 +1,11 @@
| Modifiable custom properties |
| ----------------------------------------- |
| `--mod-link-animation-duration` |
+| `--mod-link-text-color` |
+| `--mod-link-text-color-active` |
| `--mod-link-text-color-black` |
+| `--mod-link-text-color-focus` |
+| `--mod-link-text-color-hover` |
| `--mod-link-text-color-primary-active` |
| `--mod-link-text-color-primary-default` |
| `--mod-link-text-color-primary-focus` |
diff --git a/components/link/package.json b/components/link/package.json
index dbe72dbc99e..a42b58e4b98 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.16",
"description": "The Spectrum CSS link component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,17 +21,19 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/tokens": "workspace:^"
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..85591618101 100644
--- a/components/logicbutton/CHANGELOG.md
+++ b/components/logicbutton/CHANGELOG.md
@@ -1,5 +1,216 @@
# Change Log
+## 5.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+
+## 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..292c84ff72e 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.17",
"description": "The Spectrum CSS logicbutton component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,17 +21,19 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/commons": "workspace:^"
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..ad738968db1 100644
--- a/components/menu/CHANGELOG.md
+++ b/components/menu/CHANGELOG.md
@@ -1,5 +1,308 @@
# Change Log
+## 8.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.20
+ - @spectrum-css/divider@4.0.0-s2-foundations.16
+ - @spectrum-css/switch@6.0.0-s2-foundations.17
+ - @spectrum-css/icon@8.0.0-s2-foundations.18
+ - @spectrum-css/tray@4.0.0-s2-foundations.16
+
+## 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 +330,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..8f22ecf025b 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.17",
"description": "The Spectrum CSS menu component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,22 +21,24 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/checkbox": ">=9",
- "@spectrum-css/divider": ">=3",
- "@spectrum-css/icon": ">=7",
- "@spectrum-css/switch": ">=5",
- "@spectrum-css/tokens": ">=14",
- "@spectrum-css/tray": ">=3"
+ "@spectrum-css/checkbox": ">=10.0.0-s2-foundations.0",
+ "@spectrum-css/divider": ">=4.0.0-s2-foundations.0",
+ "@spectrum-css/icon": ">=8.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/tray": ">=4.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/checkbox": {
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..0b13d8a1c6b
--- /dev/null
+++ b/components/meter/CHANGELOG.md
@@ -0,0 +1,1736 @@
+# Change Log
+
+## 0.0.0-s2-foundations.3
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/progressbar@5.0.0-s2-foundations.20
+
+## 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..d5d8dc50fd8
--- /dev/null
+++ b/components/meter/package.json
@@ -0,0 +1,52 @@
+{
+ "name": "@spectrum-css/meter",
+ "version": "0.0.0-s2-foundations.3",
+ "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",
+ "./stories/*": "./stories/*"
+ },
+ "main": "dist/index.css",
+ "files": [
+ "dist/*",
+ "*.md",
+ "package.json",
+ "stories/*",
+ "metadata/*"
+ ],
+ "peerDependencies": {
+ "@spectrum-css/progressbar": ">=5.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
+ },
+ "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..fd2263e6751
--- /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..c78ad674962 100644
--- a/components/miller/CHANGELOG.md
+++ b/components/miller/CHANGELOG.md
@@ -1,5 +1,265 @@
# Change Log
+## 7.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.16
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.20
+ - @spectrum-css/icon@8.0.0-s2-foundations.18
+
+## 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..42a81dafab4 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.16",
"description": "The Spectrum CSS miller component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,20 +21,22 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/assetlist": ">=6",
- "@spectrum-css/checkbox": ">=9",
- "@spectrum-css/icon": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/assetlist": ">=7.0.0-s2-foundations.0",
+ "@spectrum-css/checkbox": ">=10.0.0-s2-foundations.0",
+ "@spectrum-css/icon": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/assetlist": "workspace:^",
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..e42de3f0307 100644
--- a/components/modal/CHANGELOG.md
+++ b/components/modal/CHANGELOG.md
@@ -1,5 +1,221 @@
# Change Log
+## 6.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+
+## 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..8a5e2e9ad95 100644
--- a/components/modal/index.css
+++ b/components/modal/index.css
@@ -12,23 +12,19 @@
*/
@import "@spectrum-css/commons/overlay.css";
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Modal {
- /* Bug: this must be 0ms, not 0 */
- --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
+ --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500));
+ /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */
+ --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)));
+
+ /* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */
+ --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100)));
+ --spectrum-modal-confirm-exit-animation-delay: var(--mod-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);
+ --spectrum-modal-fullscreen-margin: var(--mod-modal-fullscreen-margin, 32px);
}
/* Used to position the modal */
@@ -64,7 +60,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,42 +68,43 @@
}
.spectrum-Modal {
- @extend %spectrum-overlay;
+ visibility: hidden;
+ opacity: 0;
- /* 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;
/* Exit animations */
transition:
- 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)));
-}
+ opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay),
+ visibility var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)),
+ transform var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration));
-.spectrum-Modal.is-open {
- @extend %spectrum-overlay--open;
+ &.is-open {
+ pointer-events: auto;
+ visibility: visible;
+ opacity: 1;
- /* 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(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay),
+ opacity var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay);
- transform: translateY(0);
+ transform: translateY(0);
+ }
}
/* Responsive modals will fill the screen on small viewports */
@@ -120,20 +117,18 @@
border-radius: 0;
}
- .spectrum-Modal-wrapper {
- .spectrum-Modal--responsive {
- margin-block-start: 0; /* Prevent the vertical offset bit */
- }
+ .spectrum-Modal-wrapper .spectrum-Modal--responsive {
+ margin-block-start: 0; /* Prevent the vertical offset bit */
}
}
/** @unofficial */
.spectrum-Modal--fullscreen {
position: fixed;
- inset-inline-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
- inset-block-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
- inset-inline-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
- inset-block-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
+ inset-inline-start: var(--spectrum-modal-fullscreen-margin);
+ inset-block-start: var(--spectrum-modal-fullscreen-margin);
+ inset-inline-end: var(--spectrum-modal-fullscreen-margin);
+ inset-block-end: var(--spectrum-modal-fullscreen-margin);
max-inline-size: none;
max-block-size: none;
}
diff --git a/components/modal/metadata/metadata.json b/components/modal/metadata/metadata.json
index 0fcba109eea..950d9fca3c6 100644
--- a/components/modal/metadata/metadata.json
+++ b/components/modal/metadata/metadata.json
@@ -28,16 +28,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 +41,12 @@
"--spectrum-animation-duration-500",
"--spectrum-animation-ease-in",
"--spectrum-animation-ease-out",
+ "--spectrum-animation-linear",
+ "--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..29d92cec18a 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.17",
"description": "The Spectrum CSS modal component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,17 +21,19 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/commons": "workspace:^",
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..4e4f195bc34 100644
--- a/components/opacitycheckerboard/CHANGELOG.md
+++ b/components/opacitycheckerboard/CHANGELOG.md
@@ -1,5 +1,210 @@
# Change Log
+## 3.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+
+## 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..e39bff3ba01 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.16",
"description": "The Spectrum CSS opacitycheckerboard component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,17 +21,19 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/tokens": "workspace:^"
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..4bfc08c6d68 100644
--- a/components/picker/CHANGELOG.md
+++ b/components/picker/CHANGELOG.md
@@ -1,5 +1,310 @@
# Change Log
+## 9.0.0-s2-foundations.17
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`da9a90a`](https://github.com/adobe/spectrum-css/commit/da9a90adb1b46abc7f3078d2b7cfcf84f7a41026) Thanks [@pfulton](https://github.com/pfulton)! - Update background and border color for picker in Spectrum 2 theme [SWC-575]
+
+### Patch Changes
+
+- Updated dependencies [[`da9a90a`](https://github.com/adobe/spectrum-css/commit/da9a90adb1b46abc7f3078d2b7cfcf84f7a41026), [`513256c`](https://github.com/adobe/spectrum-css/commit/513256c7c7587ac6a3741a819a41ab321d1cd965)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.30
+
+## 9.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.16
+ - @spectrum-css/helptext@6.0.0-s2-foundations.16
+ - @spectrum-css/popover@8.0.0-s2-foundations.17
+ - @spectrum-css/icon@8.0.0-s2-foundations.18
+ - @spectrum-css/menu@8.0.0-s2-foundations.17
+
+## 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..53dcb003ce3 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 {
@@ -479,7 +479,7 @@
.spectrum-Picker.is-disabled {
cursor: default;
background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled)));
- border-color: var(--highcontrast-picker-border-color-disabled, transparent);
+ border-color: var(--highcontrast-picker-border-color-disabled, var(--spectrum-picker-border-color-disabled));
color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
.spectrum-Picker-icon,
diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json
index a87ea36a42b..8b62a6c4c3a 100644
--- a/components/picker/metadata/metadata.json
+++ b/components/picker/metadata/metadata.json
@@ -157,6 +157,7 @@
"--spectrum-picker-border-color-active",
"--spectrum-picker-border-color-default",
"--spectrum-picker-border-color-default-open",
+ "--spectrum-picker-border-color-disabled",
"--spectrum-picker-border-color-error-active",
"--spectrum-picker-border-color-error-default",
"--spectrum-picker-border-color-error-default-open",
@@ -274,13 +275,14 @@
"--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-500",
"--spectrum-gray-600",
"--spectrum-gray-700",
- "--spectrum-gray-75",
+ "--spectrum-gray-800",
+ "--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-negative-border-color-default",
"--spectrum-negative-border-color-down",
@@ -303,19 +305,20 @@
"--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-disabled",
+ "--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..95355422149 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.17",
"description": "The Spectrum CSS picker component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,22 +21,24 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/helptext": ">=5",
- "@spectrum-css/icon": ">=7",
- "@spectrum-css/menu": ">=7",
- "@spectrum-css/popover": ">=7",
- "@spectrum-css/progresscircle": ">=3",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/helptext": ">=6.0.0-s2-foundations.0",
+ "@spectrum-css/icon": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/menu": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/popover": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/progresscircle": ">=4.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/helptext": {
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index 42324ec1186..b4f50532782 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -133,6 +133,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..3d481512294
--- /dev/null
+++ b/components/picker/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-Picker {
+ --spectrum-picker-background-color-default: var(--spectrum-gray-100);
+ --spectrum-picker-background-color-default-open: var(--spectrum-gray-100);
+ --spectrum-picker-background-color-hover: var(--spectrum-gray-200);
+ --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200);
+ --spectrum-picker-background-color-active: var(--spectrum-gray-200);
+ --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200);
+
+ --spectrum-picker-border-color-default: var(--spectrum-gray-800);
+ --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-900);
+ --spectrum-picker-border-color-active: var(--spectrum-gray-700);
+ --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900);
+ --spectrum-picker-border-color-disabled: var(--spectrum-gray-300);
+
+ --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..0e15e162fe0 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);
@@ -21,12 +25,8 @@
--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);
+ --spectrum-picker-border-color-disabled: transparent;
}
}
diff --git a/components/pickerbutton/CHANGELOG.md b/components/pickerbutton/CHANGELOG.md
index 76ace483e66..cdc6113b736 100644
--- a/components/pickerbutton/CHANGELOG.md
+++ b/components/pickerbutton/CHANGELOG.md
@@ -1,5 +1,271 @@
# Change Log
+## 6.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/popover@8.0.0-s2-foundations.17
+ - @spectrum-css/icon@8.0.0-s2-foundations.18
+ - @spectrum-css/menu@8.0.0-s2-foundations.17
+
+## 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..92a3dda0bea 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);
@@ -39,8 +37,32 @@
--spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
--spectrum-picker-button-font-size: var(--spectrum-font-size-100);
+ --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
+
--spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
+ &:hover {
+ --mod-picker-button-background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover));
+ --mod-picker-button-font-color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover));
+ --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover));
+ }
+
+ &:active,
+ &.is-open {
+ --mod-picker-button-background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down));
+ --mod-picker-button-font-color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down));
+ --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down));
+ }
+
+ &:focus,
+ &.is-focused,
+ &:focus-visible,
+ &.is-keyboardFocused {
+ --mod-picker-button-background-color: var(--mod-picker-button-background-color-key-focus, var(--spectrum-picker-button-background-color-key-focus));
+ --mod-picker-button-font-color: var(--mod-picker-button-font-color-key-focus, var(--spectrum-picker-button-font-color-key-focus));
+ --mod-picker-button-icon-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));
@@ -100,78 +122,8 @@
box-sizing: border-box;
padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding));
- &:hover {
- .spectrum-PickerButton-fill {
- background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover));
- }
-
- .spectrum-PickerButton-label {
- color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover));
- }
-
- .spectrum-PickerButton-icon {
- color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover));
- }
- }
-
- &:active,
- &.is-open {
- .spectrum-PickerButton-fill {
- background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down));
- }
-
- .spectrum-PickerButton-label {
- color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down));
- }
-
- .spectrum-PickerButton-icon {
- color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down));
- }
- }
-
- &:focus,
- &.is-focused,
- &:focus-visible,
- &.is-keyboardFocused {
- .spectrum-PickerButton-fill {
- background-color: var(--mod-picker-button-background-color-key-focus, var(--spectrum-picker-button-background-color-key-focus));
- }
-
- .spectrum-PickerButton-label {
- color: var(--mod-picker-button-font-color-key-focus, var(--spectrum-picker-button-font-color-key-focus));
- }
-
- .spectrum-PickerButton-icon {
- color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus));
- }
- }
-}
-
-.spectrum-PickerButton--right {
- .spectrum-PickerButton-fill {
- border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
- border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
- }
-
- &.spectrum-PickerButton--rounded {
- .spectrum-PickerButton-fill {
- border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
- border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
- }
- }
-}
-
-.spectrum-PickerButton--left {
- .spectrum-PickerButton-fill {
- border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
- border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
- }
-
- &.spectrum-PickerButton--rounded {
- .spectrum-PickerButton-fill {
- border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
- border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
- }
+ &.spectrum-PickerButton--uiicononly {
+ inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height));
}
}
@@ -189,6 +141,10 @@
font-style: var(--mod-picker-button-font-style, var(--spectrum-picker-button-font-style));
font-weight: var(--mod-picker-button-font-weight, var(--spectrum-picker-button-font-weight));
font-size: var(--mod-picker-button-font-size, var(--spectrum-picker-button-font-size));
+
+ .spectrum-PickerButton--uiicononly & {
+ display: none;
+ }
}
.spectrum-PickerButton-fill {
@@ -212,37 +168,46 @@
border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
-}
-.spectrum-PickerButton-icon {
- /* don't be small, ever */
- flex-shrink: 0;
- color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
-}
-.spectrum-PickerButton--rounded {
- .spectrum-PickerButton-fill {
+ .spectrum-PickerButton--right & {
+ border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
+ border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
+ }
+
+ .spectrum-PickerButton--right.spectrum-PickerButton--rounded & {
+ border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
+ border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
+ }
+
+ .spectrum-PickerButton--left & {
+ border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
+ border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
+ }
+
+ .spectrum-PickerButton--left.spectrum-PickerButton--rounded & {
+ border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
+ border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
+ }
+
+ .spectrum-PickerButton--rounded & {
border-end-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
border-end-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
border-start-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
border-start-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
}
-}
-
-.spectrum-PickerButton--uiicononly {
- inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height));
-
- .spectrum-PickerButton-label {
- display: none;
- }
- .spectrum-PickerButton-fill {
+ .spectrum-PickerButton--uiicononly & {
padding: 0;
}
-}
-.spectrum-PickerButton--textuiicon {
- .spectrum-PickerButton-fill {
+ .spectrum-PickerButton--textuiicon & {
inline-size: auto;
}
}
+
+.spectrum-PickerButton-icon {
+ /* don't be small, ever */
+ flex-shrink: 0;
+ color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
+}
diff --git a/components/pickerbutton/metadata/metadata.json b/components/pickerbutton/metadata/metadata.json
index c605d88694b..967fcb22057 100644
--- a/components/pickerbutton/metadata/metadata.json
+++ b/components/pickerbutton/metadata/metadata.json
@@ -8,38 +8,24 @@
".spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
".spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
".spectrum-PickerButton--textuiicon .spectrum-PickerButton-fill",
- ".spectrum-PickerButton--uiicononly",
".spectrum-PickerButton--uiicononly .spectrum-PickerButton-fill",
".spectrum-PickerButton--uiicononly .spectrum-PickerButton-label",
".spectrum-PickerButton-fill",
".spectrum-PickerButton-icon",
".spectrum-PickerButton-label",
- ".spectrum-PickerButton.is-focused .spectrum-PickerButton-fill",
- ".spectrum-PickerButton.is-focused .spectrum-PickerButton-icon",
- ".spectrum-PickerButton.is-focused .spectrum-PickerButton-label",
- ".spectrum-PickerButton.is-keyboardFocused .spectrum-PickerButton-fill",
- ".spectrum-PickerButton.is-keyboardFocused .spectrum-PickerButton-icon",
- ".spectrum-PickerButton.is-keyboardFocused .spectrum-PickerButton-label",
- ".spectrum-PickerButton.is-open .spectrum-PickerButton-fill",
- ".spectrum-PickerButton.is-open .spectrum-PickerButton-icon",
- ".spectrum-PickerButton.is-open .spectrum-PickerButton-label",
+ ".spectrum-PickerButton.is-focused",
+ ".spectrum-PickerButton.is-keyboardFocused",
+ ".spectrum-PickerButton.is-open",
".spectrum-PickerButton.spectrum-PickerButton--quiet",
".spectrum-PickerButton.spectrum-PickerButton--sizeL",
".spectrum-PickerButton.spectrum-PickerButton--sizeS",
".spectrum-PickerButton.spectrum-PickerButton--sizeXL",
- ".spectrum-PickerButton:active .spectrum-PickerButton-fill",
- ".spectrum-PickerButton:active .spectrum-PickerButton-icon",
- ".spectrum-PickerButton:active .spectrum-PickerButton-label",
+ ".spectrum-PickerButton.spectrum-PickerButton--uiicononly",
+ ".spectrum-PickerButton:active",
".spectrum-PickerButton:disabled",
- ".spectrum-PickerButton:focus .spectrum-PickerButton-fill",
- ".spectrum-PickerButton:focus .spectrum-PickerButton-icon",
- ".spectrum-PickerButton:focus .spectrum-PickerButton-label",
- ".spectrum-PickerButton:focus-visible .spectrum-PickerButton-fill",
- ".spectrum-PickerButton:focus-visible .spectrum-PickerButton-icon",
- ".spectrum-PickerButton:focus-visible .spectrum-PickerButton-label",
- ".spectrum-PickerButton:hover .spectrum-PickerButton-fill",
- ".spectrum-PickerButton:hover .spectrum-PickerButton-icon",
- ".spectrum-PickerButton:hover .spectrum-PickerButton-label"
+ ".spectrum-PickerButton:focus",
+ ".spectrum-PickerButton:focus-visible",
+ ".spectrum-PickerButton:hover"
],
"modifiers": [
"--mod-picker-button-background-animation-duration",
@@ -128,7 +114,6 @@
"--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 +125,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 +140,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..75dae2689ad 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.17",
"description": "The Spectrum CSS picker button component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,20 +21,22 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/icon": ">=7",
- "@spectrum-css/menu": ">=7",
- "@spectrum-css/popover": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/icon": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/menu": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/popover": ">=8.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"devDependencies": {
"@spectrum-css/icon": "workspace:^",
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..043a4a779ca 100644
--- a/components/pickerbutton/themes/spectrum.css
+++ b/components/pickerbutton/themes/spectrum.css
@@ -11,17 +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-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);
}
}
diff --git a/components/popover/CHANGELOG.md b/components/popover/CHANGELOG.md
index 47794f83645..16ebcdeb842 100644
--- a/components/popover/CHANGELOG.md
+++ b/components/popover/CHANGELOG.md
@@ -1,5 +1,288 @@
# Change Log
+## 8.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.16
+ - @spectrum-css/divider@4.0.0-s2-foundations.16
+ - @spectrum-css/dialog@11.0.0-s2-foundations.16
+ - @spectrum-css/menu@8.0.0-s2-foundations.17
+
+## 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..9e6c3443904 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 {
@@ -80,7 +80,7 @@
.spectrum-Popover-tip-triangle {
stroke-linecap: square;
stroke-linejoin: miter;
- fill: var(--highcontrast-popover-background-color, var(--mod-popover-background-color, var(--spectrum-popover-background-color)));
+ fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
}
diff --git a/components/popover/metadata/metadata.json b/components/popover/metadata/metadata.json
index c0ec791c2b5..25e49b3553f 100644
--- a/components/popover/metadata/metadata.json
+++ b/components/popover/metadata/metadata.json
@@ -148,10 +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",
- "--highcontrast-popover-border-color"
- ]
+ "high-contrast": ["--highcontrast-popover-border-color"]
}
diff --git a/components/popover/package.json b/components/popover/package.json
index 961b825cddf..6ece3cbc2da 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.17",
"description": "The Spectrum CSS popover component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,21 +21,23 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/alertdialog": ">=2",
- "@spectrum-css/dialog": ">=10",
- "@spectrum-css/divider": ">=3",
- "@spectrum-css/menu": ">=7",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/alertdialog": ">=3.0.0-s2-foundations.0",
+ "@spectrum-css/dialog": ">=11.0.0-s2-foundations.0",
+ "@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"
},
"peerDependenciesMeta": {
"@spectrum-css/divider": {
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
index 967dda2baac..51087da06bc 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,
},
@@ -236,7 +240,7 @@ DialogStyle.args = {
content: [
(passthroughs, context) => Dialog({
showModal: false,
- size: ["small"],
+ size: "s",
isDismissable: false,
heading: "Example heading",
hasFooter: false,
diff --git a/components/popover/stories/popover.test.js b/components/popover/stories/popover.test.js
index 9f7dd09356b..b0271bc3f07 100644
--- a/components/popover/stories/popover.test.js
+++ b/components/popover/stories/popover.test.js
@@ -137,7 +137,7 @@ export const PopoverGroup = Variants({
content: [
(passthroughs, context) => Dialog({
showModal: false,
- size: ["small"],
+ size: "s",
isDismissable: false,
heading: "Example heading",
hasFooter: false,
diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js
index 1be2e30689e..6d7e55375e2 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",
@@ -41,7 +44,10 @@ export const Template = ({
setTimeout(() => {
// Get the actual height and width of the popover
const popover = document.getElementById(id);
+ if (!popover) return;
+
const rect = popover.getBoundingClientRect();
+ if (!rect) return;
let shouldChange = false;
if (popoverHeight !== parseInt(rect.height, 10)) {
@@ -186,8 +192,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 +280,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 +288,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..1993a71fe13 100644
--- a/components/progressbar/CHANGELOG.md
+++ b/components/progressbar/CHANGELOG.md
@@ -1,5 +1,274 @@
# Change Log
+## 5.0.0-s2-foundations.20
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55) Thanks [@pfulton](https://github.com/pfulton)! - feat: s2 foundations non-gray-800 colors update
+
+ | Property name | Context | Old value | Updated value |
+ | --------------------------- | ------- | ------------------ | ------------------ |
+ | `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) |
+ | `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) |
+ | `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) |
+ | `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) |
+ | `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) |
+ | `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) |
+ | `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) |
+ | `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) |
+ | `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) |
+ | `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) |
+ | `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) |
+ | `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) |
+ | `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) |
+ | `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) |
+ | `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) |
+ | `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) |
+ | `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) |
+ | `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) |
+
+### Patch Changes
+
+- Updated dependencies [[`f6ad55e`](https://github.com/adobe/spectrum-css/commit/f6ad55eea019f2d6c583a71b6652995a1c7c7a55)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.29
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.17
+
+## 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 +286,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..648c492df0f 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -11,15 +11,50 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
+
+.spectrum-ProgressBar,
+.spectrum-ProgressBar--sizeM {
+ --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400);
+ --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75);
+ /* @todo should this be --spectrum-progress-bar-thickness-medium? */
+ --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large);
+ --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
+}
+
+.spectrum-ProgressBar--sizeS {
+ --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400);
+ --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75);
+ --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-small);
+ --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+}
+
+.spectrum-ProgressBar--sizeL {
+ --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2500);
+ --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-100);
+ --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large);
+ --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
+}
+
+.spectrum-ProgressBar--sizeXL {
+ --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2800);
+ --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-200);
+ --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-extra-large);
+ --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
+}
.spectrum-ProgressBar {
- /* Static tokens */
- --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
- --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
+ --spectrum-progressbar-size-default: var(--mod-progressbar-size-default, var(--spectrum-progressbar-sized-size-default));
+ --spectrum-progressbar-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-sized-font-size));
+ --spectrum-progressbar-thickness: var(--mod-progressbar-thickness, var(--spectrum-progressbar-sized-thickness));
+ --spectrum-progressbar-spacing-top-to-text: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-sized-spacing-top-to-text));
+
+ --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-animation-ease-in-out));
+ --spectrum-progressbar-animation-duration-indeterminate: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-animation-duration-2000));
--spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-progressbar-fill-size-indeterminate: 70%;
+ --spectrum-progressbar-fill-size-indeterminate: var(--mod-progressbar-fill-size-indeterminate, 70%);
+ --spectrum-progressbar-dir-indeterminate-multiplier: 1;
/* --spectrum-global-dimension-static-size-2400 */
--spectrum-progressbar-size-2400: 192px;
@@ -31,102 +66,49 @@
--spectrum-progressbar-size-2800: 224px;
/* Size */
- --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
- --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100);
+ --spectrum-progressbar-line-height-cjk: var(--mod-progressbar-line-height-cjk, var(--spectrum-cjk-line-height-100));
- --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width);
- --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width);
+ --spectrum-progressbar-min-size: var(--mod-progressbar-min-size, var(--spectrum-progress-bar-minimum-width));
+ --spectrum-progressbar-max-size: var(--mod-progressbar-max-size, var(--spectrum-progress-bar-maximum-width));
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium);
- --spectrum-progressbar-line-height: var(--spectrum-line-height-100);
+ --spectrum-progressbar-line-height: var(--mod-progressbar-line-height, var(--spectrum-line-height-100));
/* Spacing */
- --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75);
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200);
+ --spectrum-progressbar-spacing-label-to-progressbar: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-spacing-75));
+ --spectrum-progressbar-spacing-label-to-text: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-spacing-200));
/* 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);
-
- --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
+ --spectrum-progressbar-fill-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900)));
+ --spectrum-progressbar-track-color-default: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-}
-
-.spectrum-ProgressBar--sizeL,
-.spectrum-Meter--sizeL {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
-
- --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-200);
-}
-
-.spectrum-ProgressBar--sizeXL {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800);
-
- --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-300);
-}
+ --spectrum-progressbar-text-color: var(--mod-progressbar-text-color, var(--spectrum-neutral-content-color-default));
+ --spectrum-progressbar-label-and-value-white: var(--mod-progressbar-label-and-value-white, var(--spectrum-white));
+ --spectrum-progressbar-fill-color-white: var(--mod-progressbar-fill-color-white, var(--spectrum-white));
+ --spectrum-progressbar-static-white-track-color: var(--spectrum-progressbar-track-color-white);
-.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));
+ /* @passthrough */
+ --mod-fieldlabel-font-size: var(--spectrum-progressbar-font-size);
- /* Meter only supports size S and L */
- &.spectrum-Meter--sizeS {
- --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-s);
+ &:dir(rtl) {
+ --spectrum-progressbar-dir-indeterminate-multiplier: -1;
}
- &.spectrum-Meter--sizeL {
- --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-l);
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
- }
-
- &.is-positive .spectrum-ProgressBar-fill {
- background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk);
}
+}
- &.is-notice .spectrum-ProgressBar-fill {
- background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
+@media (forced-colors: active) {
+ .spectrum-ProgressBar {
+ --highcontrast-progressbar-fill-color: ButtonText;
+ --highcontrast-progressbar-track-color: ButtonFace;
}
- &.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-track {
+ forced-color-adjust: none;
+ border: 1px solid ButtonText;
}
}
@@ -136,144 +118,99 @@
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));
- max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size));
- min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size));
+ inline-size: var(--spectrum-progressbar-size-default);
+ max-inline-size: var(--spectrum-progressbar-max-size);
+ min-inline-size: var(--spectrum-progressbar-min-size);
- /* Label and Percentage */
- .spectrum-ProgressBar-label,
- .spectrum-ProgressBar-percentage {
- text-align: start;
- margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text));
- margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar));
-
- line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height));
-
- &: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 */
- .spectrum-ProgressBar-label {
- flex: 1 1 0%;
+ &.spectrum-ProgressBar--sideLabel {
+ flex-flow: row;
+ justify-content: space-between;
}
- /* Percentage */
- .spectrum-ProgressBar-percentage {
- align-self: flex-start;
- margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
- }
-
- /* Track */
- .spectrum-ProgressBar-track {
- /* Visually apply border radius to child elements */
- overflow: hidden;
- inline-size: 100%;
- block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
- border-radius: var(--spectrum-progressbar-corner-radius);
-
- background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
- }
-
- .spectrum-ProgressBar-fill {
- border: none;
- block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
- transition: width 1s;
- background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
+ &.spectrum-ProgressBar--staticWhite {
+ --mod-progressbar-fill-color: var(--spectrum-progressbar-fill-color-white);
+ --mod-progressbar-text-color: var(--spectrum-progressbar-label-and-value-white);
+ --mod-progressbar-track-color: var(--spectrum-progressbar-static-white-track-color);
}
}
-.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill {
- inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate));
- position: relative;
- animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate));
- will-change: transform;
-}
+/* Label and Percentage */
+.spectrum-ProgressBar-label,
+.spectrum-ProgressBar-percentage {
+ text-align: start;
+ margin-block-start: var(--spectrum-progressbar-spacing-top-to-text);
+ margin-block-end: var(--spectrum-progressbar-spacing-label-to-progressbar);
-/* Variants */
-/* Side Label */
-.spectrum-ProgressBar--sideLabel {
- display: inline-flex;
- flex-flow: row;
- justify-content: space-between;
+ line-height: var(--spectrum-progressbar-line-height);
+ color: var(--spectrum-progressbar-text-color);
+}
- .spectrum-ProgressBar-track {
- flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
- }
+/* Label */
+.spectrum-ProgressBar-label {
+ flex: 1 1 0%;
- .spectrum-ProgressBar-label {
+ .spectrum-ProgressBar--sideLabel & {
flex-grow: 0;
- margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
+ margin-inline-end: var(--spectrum-progressbar-spacing-label-to-text);
margin-block-end: 0;
}
+}
- .spectrum-ProgressBar-percentage {
+/* Percentage */
+.spectrum-ProgressBar-percentage {
+ align-self: flex-start;
+ margin-inline-start: var(--spectrum-progressbar-spacing-label-to-text);
+
+ .spectrum-ProgressBar--sideLabel & {
order: 3;
text-align: end;
- margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
margin-block-end: 0;
}
}
-/* Static White */
-.spectrum-ProgressBar.spectrum-ProgressBar--staticWhite {
- .spectrum-ProgressBar-fill {
- color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
- background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
- }
+/* Track */
+.spectrum-ProgressBar-track {
+ /* Visually apply border radius to child elements */
+ overflow: hidden;
+ inline-size: 100%;
+ block-size: var(--spectrum-progressbar-thickness);
+ border-radius: var(--spectrum-progressbar-corner-radius);
- .spectrum-ProgressBar-label,
- .spectrum-ProgressBar-percentage {
- color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
- }
+ background: var(--spectrum-progressbar-track-color-default);
- .spectrum-ProgressBar-track {
- background: var(--spectrum-progressbar-track-color-white);
+ .spectrum-ProgressBar--sideLabel & {
+ flex: 1 1 var(--spectrum-progressbar-size-default);
}
}
-/* 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-fill {
+ block-size: var(--spectrum-progressbar-thickness);
-.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;
-}
+ border: none;
+ background: var(--spectrum-progressbar-fill-color);
-@keyframes indeterminate-loop-ltr {
- from {
- transform: translate(calc(-1 * var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate))));
- }
+ transition: width 1s;
- to {
- transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)));
+ .spectrum-ProgressBar--indeterminate & {
+ position: relative;
+ inline-size: var(--spectrum-progressbar-fill-size-indeterminate);
+
+ will-change: transform;
+ animation-name: indeterminate-loop;
+ animation-timing-function: var(--spectrum-progressbar-animation-ease-in-out-indeterminate);
+ animation-duration: var(--spectrum-progressbar-animation-duration-indeterminate);
+ animation-iteration-count: infinite;
}
}
-@keyframes indeterminate-loop-rtl {
+@keyframes indeterminate-loop {
from {
- transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate)));
+ transform: translate(calc(-1 * var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-fill-size-indeterminate)));
}
to {
- transform: translate(calc(-1 * var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))));
- }
-}
-
-@media (forced-colors: active) {
- .spectrum-ProgressBar-track {
- --highcontrast-progressbar-fill-color: ButtonText;
- --highcontrast-progressbar-track-color: ButtonFace;
- forced-color-adjust: none;
- border: 1px solid ButtonText;
+ transform: translate(calc(var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-size-default)));
}
}
diff --git a/components/progressbar/metadata/metadata.json b/components/progressbar/metadata/metadata.json
index f49c8b03854..3294d6c477a 100644
--- a/components/progressbar/metadata/metadata.json
+++ b/components/progressbar/metadata/metadata.json
@@ -1,28 +1,8 @@
{
"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",
- ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja)",
- ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko)",
- ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh)",
- ".spectrum-ProgressBar .spectrum-ProgressBar-percentage",
- ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja)",
- ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko)",
- ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)",
- ".spectrum-ProgressBar .spectrum-ProgressBar-track",
".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
- ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)",
- ".spectrum-ProgressBar--sideLabel",
".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label",
".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage",
".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track",
@@ -30,25 +10,24 @@
".spectrum-ProgressBar--sizeM",
".spectrum-ProgressBar--sizeS",
".spectrum-ProgressBar--sizeXL",
+ ".spectrum-ProgressBar-fill",
+ ".spectrum-ProgressBar-label",
+ ".spectrum-ProgressBar-percentage",
".spectrum-ProgressBar-track",
- ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill",
- ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label",
- ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage",
- ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track",
+ ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel",
+ ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite",
+ ".spectrum-ProgressBar:dir(rtl)",
+ ".spectrum-ProgressBar:lang(ja)",
+ ".spectrum-ProgressBar:lang(ko)",
+ ".spectrum-ProgressBar:lang(zh)",
"0%",
- "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
+ "[dir=\"rtl\"] .spectrum-ProgressBar",
"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",
@@ -63,23 +42,19 @@
"--mod-progressbar-spacing-top-to-text",
"--mod-progressbar-text-color",
"--mod-progressbar-thickness",
- "--mod-progressbar-track-color",
- "--mod-spacing-progressbar-label-to-text"
+ "--mod-progressbar-track-color"
],
"component": [
"--spectrum-progress-bar-maximum-width",
"--spectrum-progress-bar-minimum-width",
"--spectrum-progress-bar-thickness-extra-large",
"--spectrum-progress-bar-thickness-large",
- "--spectrum-progress-bar-thickness-medium",
"--spectrum-progress-bar-thickness-small",
"--spectrum-progressbar-animation-duration-indeterminate",
"--spectrum-progressbar-animation-ease-in-out-indeterminate",
"--spectrum-progressbar-corner-radius",
+ "--spectrum-progressbar-dir-indeterminate-multiplier",
"--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",
@@ -92,12 +67,18 @@
"--spectrum-progressbar-size-2500",
"--spectrum-progressbar-size-2800",
"--spectrum-progressbar-size-default",
+ "--spectrum-progressbar-sized-font-size",
+ "--spectrum-progressbar-sized-size-default",
+ "--spectrum-progressbar-sized-spacing-top-to-text",
+ "--spectrum-progressbar-sized-thickness",
"--spectrum-progressbar-spacing-label-to-progressbar",
"--spectrum-progressbar-spacing-label-to-text",
"--spectrum-progressbar-spacing-top-to-text",
+ "--spectrum-progressbar-static-white-track-color",
"--spectrum-progressbar-text-color",
"--spectrum-progressbar-thickness",
"--spectrum-progressbar-track-color",
+ "--spectrum-progressbar-track-color-default",
"--spectrum-progressbar-track-color-white"
],
"global": [
@@ -113,29 +94,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..76ab6ee4acf 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` |
@@ -24,4 +18,3 @@
| `--mod-progressbar-text-color` |
| `--mod-progressbar-thickness` |
| `--mod-progressbar-track-color` |
-| `--mod-spacing-progressbar-label-to-text` |
diff --git a/components/progressbar/package.json b/components/progressbar/package.json
index da26db33092..e576a6780bb 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.20",
"description": "The Spectrum CSS progress bar component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -21,18 +21,20 @@
"./index.css": "./dist/index.css",
"./metadata.json": "./metadata/metadata.json",
"./metadata/*": "./metadata/*",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
},
"main": "dist/index.css",
"files": [
"dist/*",
"*.md",
"package.json",
+ "stories/*",
"metadata/*"
],
"peerDependencies": {
- "@spectrum-css/fieldlabel": ">=8",
- "@spectrum-css/tokens": ">=14"
+ "@spectrum-css/fieldlabel": ">=9.0.0-s2-foundations.0",
+ "@spectrum-css/tokens": ">=15.0.0-s2-foundations.0"
},
"peerDependenciesMeta": {
"@spectrum-css/fieldlabel": {
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`