@react-spectrum/s2 0.11.1 → 0.12.0

package/src/page.macro.ts

@@ -25,7 +25,7 @@ export function generatePageStyles(this: MacroContext | void): void {
   if (this && typeof this.addAsset === 'function') {
     this.addAsset({
       type: 'css',
-      content: `html {
+      content: `:where(:root, :host) {
         color-scheme: light dark;
         --s2-container-bg: ${colorToken(tokens['background-base-color'])};
         background: var(--s2-container-bg);
@@ -68,7 +68,7 @@ export function generateDefaultColorSchemeStyles(this: MacroContext | void): voi
     this.addAsset({
       type: 'css',
       content: `@layer _.a {
-        :where(html) {
+        :where(:root, :host) {
           --lightningcss-light: initial;
           --lightningcss-dark: ;
           --s2-scale: 1;

package/src/style-utils.ts

@@ -302,16 +302,17 @@ const allowedOverrides = [
   'insetX',
   'insetY',
   'insetStart',
-  'insetEnd'
+  'insetEnd',
+  'visibility'
 ] as const;
 
-const widthProperties = [
+export const widthProperties = [
   'width',
   'minWidth',
   'maxWidth'
 ] as const;
 
-const heightProperties = [
+export const heightProperties = [
   'size',
   'height',
   'minHeight',

package/style/__tests__/style-macro.test.js

@@ -40,14 +40,14 @@ describe('style-macro', () => {
 "@layer _.a, _.b, _.c;
 
 @layer _.b {
-  .Jbs11:first-child {
+  .Jbs12:first-child {
     margin-top: 0.25rem;
   }
 }
 
 @layer _.c.p {
   @media (min-width: 64rem) {
-    .Jbpv11:first-child {
+    .Jbpv12:first-child {
       margin-top: 0.5rem;
     }
   }
@@ -55,7 +55,7 @@ describe('style-macro', () => {
 
 "
 `);
-    expect(js).toMatchInlineSnapshot('" Jbs11 Jbpv11"');
+    expect(js).toMatchInlineSnapshot('" Jbs12 Jbpv12"');
   });
 
   it('should support self references', () => {
@@ -69,47 +69,47 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  ._kc11 {
+  ._kc12 {
     border-top-width: 2px;
   }
 
 
-  .hc11 {
+  .hc12 {
     border-bottom-width: 2px;
   }
 
 
-  .mCPFGYc11 {
+  .mCPFGYc12 {
     border-inline-start-width: var(--m);
   }
 
 
-  .lc11 {
+  .lc12 {
     border-inline-end-width: 2px;
   }
 
 
-  .SMBFGYc11 {
+  .SMBFGYc12 {
     padding-inline-start: var(--S);
   }
 
 
-  .Rv11 {
+  .Rv12 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
 
-  .ZjUQgKd11 {
+  .ZjUQgKd12 {
     width: calc(200px - var(--m) - var(--S));
   }
 
 
-  .-m_-mc11 {
+  .-m_-mc12 {
     --m: 2px;
   }
 
 
-  .-S_-Sv11 {
+  .-S_-Sv12 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 }
@@ -117,7 +117,7 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js).toMatchInlineSnapshot('" _kc11 hc11 mCPFGYc11 lc11 SMBFGYc11 Rv11 ZjUQgKd11 -m_-mc11 -S_-Sv11"');
+    expect(js).toMatchInlineSnapshot('" _kc12 hc12 mCPFGYc12 lc12 SMBFGYc12 Rv12 ZjUQgKd12 -m_-mc12 -S_-Sv12"');
   });
 
   it('should support allowed overrides', () => {
@@ -134,9 +134,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gw11 pg11"');
-    expect(overrides).toMatchInlineSnapshot('" g8tmWqb11 pHJ3AUd11"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb11 pg11"');
+    expect(js()).toMatchInlineSnapshot('"  gw12 pg12"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb12 pHJ3AUd12"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb12 pg12"');
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -151,9 +151,9 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B11 __Ya11"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D11 __Ya11"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D11 __Ya11"');
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B12 __Ya12"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D12 __Ya12"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D12 __Ya12"');
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -168,9 +168,9 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  Tk11 Qk11 Sk11 Rk11"');
-    expect(overrides).toMatchInlineSnapshot('" Tm11 Qm11 Sm11 Rm11"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm11 Qm11 Sm11 Rm11"');
+    expect(js()).toMatchInlineSnapshot('"  Tk12 Qk12 Sk12 Rk12"');
+    expect(overrides).toMatchInlineSnapshot('" Tm12 Qm12 Sm12 Rm12"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm12 Qm12 Sm12 Rm12"');
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -185,9 +185,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gE11"');
-    expect(overrides).toMatchInlineSnapshot('" Nk11"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk11 gE11"');
+    expect(js()).toMatchInlineSnapshot('"  gE12"');
+    expect(overrides).toMatchInlineSnapshot('" Nk12"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk12 gE12"');
   });
 
   it('should support runtime conditions', () => {
@@ -208,32 +208,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH11 {
+  .gH12 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF11 {
+  .gF12 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .gE11 {
+  .gE12 {
     background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 
 
-  .pt11 {
+  .pt12 {
     color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
   }
 
 
-  .po11 {
+  .po12 {
     color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
   }
 
 
-  .pm11 {
+  .pm12 {
     color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
   }
 }
@@ -241,9 +241,9 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  gH11 pt11"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF11 po11"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE11 pm11"');
+    expect(js({})).toMatchInlineSnapshot('"  gH12 pt12"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF12 po12"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE12 pm12"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -262,32 +262,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH11 {
+  .gH12 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF11 {
+  .gF12 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .g_h11 {
+  .g_h12 {
     background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
   }
 
 
-  .g311 {
+  .g312 {
     background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
   }
 }
 
 "
 `);
-    expect(js({})).toMatchInlineSnapshot('"  gH11"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF11"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h11"');
-    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g311"');
+    expect(js({})).toMatchInlineSnapshot('"  gH12"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF12"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h12"');
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g312"');
   });
 
   it('should support variant runtime conditions', () => {
@@ -301,9 +301,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY11"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe11"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw11"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY12"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe12"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw12"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -321,14 +321,14 @@ describe('style-macro', () => {
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb11 {
+    .plb12 {
       color: ButtonText;
     }
   }
 
 
   @media (forced-colors: active) {
-    .ple11 {
+    .ple12 {
       color: HighlightText;
     }
   }
@@ -337,8 +337,8 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb11"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple11"');
+    expect(js({})).toMatchInlineSnapshot('"  plb12"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple12"');
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -346,27 +346,27 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th11 Qh11 Sh11 Rh11"');
+    expect(js).toMatchInlineSnapshot('" Th12 Qh12 Sh12 Rh12"');
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
 @layer _.a {
-  .Th11 {
+  .Th12 {
     padding-top: 24px;
   }
 
 
-  .Qh11 {
+  .Qh12 {
     padding-bottom: 24px;
   }
 
 
-  .Sh11 {
+  .Sh12 {
     padding-inline-start: 24px;
   }
 
 
-  .Rh11 {
+  .Rh12 {
     padding-inline-end: 24px;
   }
 }
@@ -384,7 +384,7 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gpQzfVb11 {
+  .gpQzfVb12 {
     background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
   }
 }
@@ -405,7 +405,7 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .-FUeYm-gE11 {
+  .-FUeYm-gE12 {
     --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 }

package/style/dist/spectrum-theme.cjs

@@ -3105,21 +3105,51 @@ const $709ed173fa1293ee$export$1d567c320f4763bc = (0, $39b83c690be83e1d$exports.
             'break-all',
             'keep-all'
         ],
+        overflowWrap: [
+            'normal',
+            'anywhere',
+            'break-word'
+        ],
         boxDecorationBreak: [
             'slice',
             'clone'
         ],
         // effects
         boxShadow: {
-            emphasized: `${"0px"} ${"1px"} ${"6px"} ${"light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36))"}`,
-            elevated: `${"0px"} ${"2px"} ${"8px"} ${"light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48))"}`,
-            dragged: `${"0px"} ${"6px"} ${"16px"} ${"light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))"}`,
+            emphasized: [
+                "0px 2px 8px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24))",
+                "0px 1px 4px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12))",
+                "0px 0px 1px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24))"
+            ].join(', '),
+            elevated: [
+                "0px 4px 12px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24))",
+                "0px 2px 6px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12))",
+                "0px 0px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36))"
+            ].join(', '),
+            dragged: [
+                "0px 12px 16px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24))",
+                "0px 6px 8px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12))",
+                "0px 0px 6px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48))"
+            ].join(', '),
             none: 'none'
         },
         filter: {
-            emphasized: `drop-shadow(${"0px"} ${"1px"} ${"6px"} ${"light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36))"})`,
-            elevated: `drop-shadow(${"0px"} ${"2px"} ${"8px"} ${"light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48))"})`,
-            dragged: `drop-shadow${"0px"} ${"6px"} ${"16px"} ${"light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))"}`,
+            // layer order is reversed for filter property. filters are applied in the order they are specified.
+            emphasized: [
+                "0px 2px 8px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24))",
+                "0px 1px 4px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12))",
+                "0px 0px 1px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24))"
+            ].reverse().map((s)=>`drop-shadow(${s})`).join(' '),
+            elevated: [
+                "0px 4px 12px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24))",
+                "0px 2px 6px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12))",
+                "0px 0px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36))"
+            ].reverse().map((s)=>`drop-shadow(${s})`).join(' '),
+            dragged: [
+                "0px 12px 16px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24))",
+                "0px 6px 8px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12))",
+                "0px 0px 6px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48))"
+            ].reverse().map((s)=>`drop-shadow(${s})`).join(' '),
             none: 'none'
         },
         borderTopStartRadius: new (0, $39b83c690be83e1d$exports.MappedProperty)('borderStartStartRadius', $709ed173fa1293ee$var$radius),