@react-spectrum/s2 1.3.0 → 1.3.1

package/dist/types/src/style-utils.d.ts

@@ -170,6 +170,32 @@ export declare const setColorScheme: () => {
         };
     };
     readonly colorScheme: "--s2-color-scheme";
+    readonly '--lightningcss-light': {
+        readonly type: "transform";
+        readonly value: {
+            readonly colorScheme: {
+                readonly 'light dark': {
+                    readonly default: "initial";
+                    readonly '@media (prefers-color-scheme: dark)': " ";
+                };
+                readonly light: "initial";
+                readonly dark: " ";
+            };
+        };
+    };
+    readonly '--lightningcss-dark': {
+        readonly type: "transform";
+        readonly value: {
+            readonly colorScheme: {
+                readonly 'light dark': {
+                    readonly default: " ";
+                    readonly '@media (prefers-color-scheme: dark)': "initial";
+                };
+                readonly light: " ";
+                readonly dark: "initial";
+            };
+        };
+    };
 };
 export declare function staticColor(): Record<string, any>;
 export declare const controlFont: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -24,6 +24,7 @@
     },
     "./page.css": {
       "source": "./src/page.ts",
+      "types": "./dist/types/src/page.d.ts",
       "default": "./page.css"
     },
     "./style": {
@@ -95,5 +96,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a6999bdf494a2e9c0381a5881908328bdd22ddae"
+  "gitHead": "a4bd206e65891004d3b559e5cb74508803a6ad8d"
 }

package/page.css

@@ -5,6 +5,13 @@
   background: var(--s2-container-bg);
   --s2-scale: 1;
   --s2-font-size-base: 14;
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+
+  @media (prefers-color-scheme: dark) {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
+  }
 
   @media not ((hover: hover) and (pointer: fine)) {
     --s2-scale: 1.25;
@@ -13,10 +20,14 @@
 
   &[data-color-scheme="light"] {
     --s2-color-scheme: light;
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
   }
 
   &[data-color-scheme="dark"] {
     --s2-color-scheme: dark;
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
   }
 
   &[data-background="layer-1"] {

package/page.css.map

@@ -1 +1 @@
-{"mappings":"AAcA;;;;;;;;EAAA;IAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA","sources":["packages/@react-spectrum/s2/src/page.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {generatePageStyles} from './page.macro' with {type: 'macro'};\n\ngeneratePageStyles();\n"],"names":[],"version":3,"file":"page.css.map"}
+{"mappings":"AAcA;;;;;;;;;;EAAA;IAAA;;;;EAAA;IAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA","sources":["packages/@react-spectrum/s2/src/page.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {generatePageStyles} from './page.macro' with {type: 'macro'};\n\ngeneratePageStyles();\n"],"names":[],"version":3,"file":"page.css.map"}

package/src/page.macro.ts

@@ -33,6 +33,17 @@ export function generatePageStyles(this: MacroContext | void): void {
         --s2-scale: 1;
         --s2-font-size-base: 14;
 
+        /* For backward compatibility in two cases:
+         *   1. When a component compiled with an earlier version of S2 is embedded in a newer provider.
+         *   2. When S2 CSS is compiled with lightningcss, setting color-scheme via a variable does not work. */
+        --lightningcss-light: initial;
+        --lightningcss-dark: ;
+
+        @media (prefers-color-scheme: dark) {
+          --lightningcss-light: ;
+          --lightningcss-dark: initial;
+        }
+
         @media not ((hover: hover) and (pointer: fine)) {
           --s2-scale: 1.25;
           --s2-font-size-base: 17;
@@ -40,10 +51,14 @@ export function generatePageStyles(this: MacroContext | void): void {
 
         &[data-color-scheme=light] {
           --s2-color-scheme: light;
+          --lightningcss-light: initial;
+          --lightningcss-dark: ;
         }
 
         &[data-color-scheme=dark] {
           --s2-color-scheme: dark;
+          --lightningcss-light: ;
+          --lightningcss-dark: initial;
         }
 
         &[data-background=layer-1] {
@@ -74,6 +89,17 @@ export function generateDefaultColorSchemeStyles(this: MacroContext | void): voi
           --s2-scale: 1;
           --s2-font-size-base: 14;
 
+          /* For backward compatibility in two cases:
+           *   1. When a component compiled with an earlier version of S2 is embedded in a newer provider.
+           *   2. When S2 CSS is compiled with lightningcss, setting color-scheme via a variable does not work. */
+          --lightningcss-light: initial;
+          --lightningcss-dark: ;
+
+          @media (prefers-color-scheme: dark) {
+            --lightningcss-light: ;
+            --lightningcss-dark: initial;
+          }
+
           @media not ((hover: hover) and (pointer: fine)) {
             --s2-scale: 1.25;
             --s2-font-size-base: 17;

package/src/style-utils.ts

@@ -162,7 +162,36 @@ export const setColorScheme = () => ({
       }
     }
   },
-  colorScheme: '--s2-color-scheme'
+  colorScheme: '--s2-color-scheme',
+  // For backward compatibility in two cases:
+  // 1. When a component compiled with an earlier version of S2 is embedded in a newer provider.
+  // 2. When S2 CSS is compiled with lightningcss, setting color-scheme via a variable does not work.
+  '--lightningcss-light': {
+    type: 'transform', // arbitrary string
+    value: {
+      colorScheme: {
+        'light dark': {
+          default: 'initial',
+          '@media (prefers-color-scheme: dark)': ' '
+        },
+        light: 'initial',
+        dark: ' '
+      }
+    }
+  },
+  '--lightningcss-dark': {
+    type: 'transform', // arbitrary string
+    value: {
+      colorScheme: {
+        'light dark': {
+          default: ' ',
+          '@media (prefers-color-scheme: dark)': 'initial'
+        },
+        light: ' ',
+        dark: 'initial'
+      }
+    }
+  }
 } as const);
 
 export function staticColor(): Record<string, any> {

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

@@ -40,26 +40,26 @@ describe('style-macro', () => {
 "@layer _.a, _.b, _.c;
 
 @layer _.b {
-  .Jbs13:first-child {
+  .Jbs131:first-child {
     margin-top: 0.25rem;
   }
 }
 
 @layer _.c.p {
   @media (min-width: 64rem) {
-    .Jbpv13:first-child {
+    .Jbpv131:first-child {
       margin-top: 0.5rem;
     }
   }
 }
 
-.-macro-static-YFh7Dd {
-        --macro-data-YFh7Dd: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
+.-macro-static-MypNfe {
+        --macro-data-MypNfe: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
       }
 
 "
 `);
-    expect(js).toMatchInlineSnapshot('" Jbs13 Jbpv13 -macro-static-YFh7Dd"');
+    expect(js).toMatchInlineSnapshot('" Jbs131 Jbpv131 -macro-static-MypNfe"');
   });
 
   it('should support self references', () => {
@@ -73,59 +73,59 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  ._kc13 {
+  ._kc131 {
     border-top-width: 2px;
   }
 
 
-  .hc13 {
+  .hc131 {
     border-bottom-width: 2px;
   }
 
 
-  .mCPFGYc13 {
+  .mCPFGYc131 {
     border-inline-start-width: var(--m);
   }
 
 
-  .lc13 {
+  .lc131 {
     border-inline-end-width: 2px;
   }
 
 
-  .SMBFGYc13 {
+  .SMBFGYc131 {
     padding-inline-start: var(--S);
   }
 
 
-  .Rv13 {
+  .Rv131 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
 
-  .ZjUQgKd13 {
+  .ZjUQgKd131 {
     width: calc(200px - var(--m) - var(--S));
   }
 
 
-  .-m_-mc13 {
+  .-m_-mc131 {
     --m: 2px;
   }
 
 
-  .-S_-Sv13 {
+  .-S_-Sv131 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 }
 
-.-macro-static-1Cddbe {
-        --macro-data-1Cddbe: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
+.-macro-static-uhFF5b {
+        --macro-data-uhFF5b: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
       }
 
 "
 `);
 
-    expect(js).toMatchInlineSnapshot('" _kc13 hc13 mCPFGYc13 lc13 SMBFGYc13 Rv13 ZjUQgKd13 -m_-mc13 -S_-Sv13 -macro-static-1Cddbe"');
+    expect(js).toMatchInlineSnapshot('" _kc131 hc131 mCPFGYc131 lc131 SMBFGYc131 Rv131 ZjUQgKd131 -m_-mc131 -S_-Sv131 -macro-static-uhFF5b"');
   });
 
   it('should support allowed overrides', () => {
@@ -142,9 +142,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gw13 pg13 -macro-dynamic-1sq4ojw"');
-    expect(overrides).toMatchInlineSnapshot('" g8tmWqb13 pHJ3AUd13 -macro-static-y8GgU"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb13 pg13 -macro-dynamic-ip5paw"');
+    expect(js()).toMatchInlineSnapshot('"  gw131 pg131 -macro-dynamic-mu4yby"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb131 pHJ3AUd131 -macro-static-CvspF"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb131 pg131 -macro-dynamic-1b9jdne"');
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -159,9 +159,9 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B13 __Ya13 -macro-dynamic-x9xvvh"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D13 __Ya13 -macro-static-RwkXic"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D13 __Ya13 -macro-dynamic-1xvle73"');
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B131 __Ya131 -macro-dynamic-4f51mn"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D131 __Ya131 -macro-static-nMoh6b"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D131 __Ya131 -macro-dynamic-f33ipt"');
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -176,9 +176,9 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  Tk13 Qk13 Sk13 Rk13 -macro-dynamic-1y1msxh"');
-    expect(overrides).toMatchInlineSnapshot('" Tm13 Qm13 Sm13 Rm13 -macro-static-9aCkg"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm13 Qm13 Sm13 Rm13 -macro-dynamic-12xmef1"');
+    expect(js()).toMatchInlineSnapshot('"  Tk131 Qk131 Sk131 Rk131 -macro-dynamic-efgw2h"');
+    expect(overrides).toMatchInlineSnapshot('" Tm131 Qm131 Sm131 Rm131 -macro-static-9GxvHb"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm131 Qm131 Sm131 Rm131 -macro-dynamic-15z7wbl"');
   });
 
   it('should support allowed overrides for fontSize', () => {
@@ -193,9 +193,9 @@ describe('style-macro', () => {
       fontSize: 'ui-xs'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_6BNtrc-woabcc13 vx13 -macro-dynamic-n1gji4"');
-    expect(overrides).toMatchInlineSnapshot('" -_6BNtrc-a13 vx13 -macro-static-Qivc3b"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_6BNtrc-a13 vx13 -macro-dynamic-amscby"');
+    expect(js()).toMatchInlineSnapshot('"  -_6BNtrc-woabcc131 vx131 -macro-dynamic-zj2kbi"');
+    expect(overrides).toMatchInlineSnapshot('" -_6BNtrc-a131 vx131 -macro-static-EPvKFd"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_6BNtrc-a131 vx131 -macro-dynamic-jkg234"');
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -210,9 +210,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gE13 -macro-dynamic-n9ew9r"');
-    expect(overrides).toMatchInlineSnapshot('" Nk13 -macro-static-kp86Ie"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk13 gE13 -macro-dynamic-1r3wdy4"');
+    expect(js()).toMatchInlineSnapshot('"  gE131 -macro-dynamic-1osl3dc"');
+    expect(overrides).toMatchInlineSnapshot('" Nk131 -macro-static-J7ItY"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk131 gE131 -macro-dynamic-1soyf0e"');
   });
 
   it('should support runtime conditions', () => {
@@ -233,32 +233,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH13 {
+  .gH131 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF13 {
+  .gF131 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .gE13 {
+  .gE131 {
     background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 
 
-  .pt13 {
+  .pt131 {
     color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
   }
 
 
-  .po13 {
+  .po131 {
     color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
   }
 
 
-  .pm13 {
+  .pm131 {
     color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
   }
 }
@@ -266,9 +266,9 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  gH13 pt13 -macro-dynamic-1mxpwju"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF13 po13 -macro-dynamic-xzamxv"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE13 pm13 -macro-dynamic-1t1eo"');
+    expect(js({})).toMatchInlineSnapshot('"  gH131 pt131 -macro-dynamic-15nvpf0"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF131 po131 -macro-dynamic-1g7f3s5"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE131 pm131 -macro-dynamic-1nv6ioy"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -287,32 +287,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH13 {
+  .gH131 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF13 {
+  .gF131 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .g_h13 {
+  .g_h131 {
     background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
   }
 
 
-  .g313 {
+  .g3131 {
     background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
   }
 }
 
 "
 `);
-    expect(js({})).toMatchInlineSnapshot('"  gH13 -macro-dynamic-10lz7uq"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF13 -macro-dynamic-1fdz0sg"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h13 -macro-dynamic-1xv38n5"');
-    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g313 -macro-dynamic-e750r1"');
+    expect(js({})).toMatchInlineSnapshot('"  gH131 -macro-dynamic-43fbrn"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF131 -macro-dynamic-1tkkitt"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h131 -macro-dynamic-zzf86q"');
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g3131 -macro-dynamic-19tzf3y"');
   });
 
   it('should support variant runtime conditions', () => {
@@ -326,9 +326,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY13 -macro-dynamic-hjoyur"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe13 -macro-dynamic-h5ftf1"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw13 -macro-dynamic-8z42q9"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY131 -macro-dynamic-ea1kkk"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe131 -macro-dynamic-17nl5q"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw131 -macro-dynamic-fjccci"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -346,14 +346,14 @@ describe('style-macro', () => {
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb13 {
+    .plb131 {
       color: ButtonText;
     }
   }
 
 
   @media (forced-colors: active) {
-    .ple13 {
+    .ple131 {
       color: HighlightText;
     }
   }
@@ -362,8 +362,8 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb13 -macro-dynamic-whoju9"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple13 -macro-dynamic-19u8vf8"');
+    expect(js({})).toMatchInlineSnapshot('"  plb131 -macro-dynamic-a7vfaa"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple131 -macro-dynamic-ojtpnp"');
   });
 
   it('inherits parent default when nested branch has no default key', () => {
@@ -379,8 +379,8 @@ describe('style-macro', () => {
     });
     // forcedColors.default should apply when variant=highlight but !isSelected
     expect(css).toContain('ButtonText');
-    expect(js({variant: 'highlight'})).toMatchInlineSnapshot('"  plb13 -macro-dynamic-whoju9"');
-    expect(js({variant: 'highlight', isSelected: true})).toMatchInlineSnapshot('"  ple13 -macro-dynamic-19u8vf8"');
+    expect(js({variant: 'highlight'})).toMatchInlineSnapshot('"  plb131 -macro-dynamic-a7vfaa"');
+    expect(js({variant: 'highlight', isSelected: true})).toMatchInlineSnapshot('"  ple131 -macro-dynamic-ojtpnp"');
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -388,33 +388,33 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th13 Qh13 Sh13 Rh13 -macro-static-jobh3c"');
+    expect(js).toMatchInlineSnapshot('" Th131 Qh131 Sh131 Rh131 -macro-static-D80Fbe"');
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
 @layer _.a {
-  .Th13 {
+  .Th131 {
     padding-top: 24px;
   }
 
 
-  .Qh13 {
+  .Qh131 {
     padding-bottom: 24px;
   }
 
 
-  .Sh13 {
+  .Sh131 {
     padding-inline-start: 24px;
   }
 
 
-  .Rh13 {
+  .Rh131 {
     padding-inline-end: 24px;
   }
 }
 
-.-macro-static-jobh3c {
-        --macro-data-jobh3c: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
+.-macro-static-D80Fbe {
+        --macro-data-D80Fbe: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
       }
 
 "
@@ -430,13 +430,13 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gpQzfVb13 {
+  .gpQzfVb131 {
     background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
   }
 }
 
-.-macro-static-FwWE9d {
-        --macro-data-FwWE9d: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
+.-macro-static-aOn8Q {
+        --macro-data-aOn8Q: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
       }
 
 "
@@ -455,13 +455,13 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .-FUeYm-gE13 {
+  .-FUeYm-gE131 {
     --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 }
 
-.-macro-static-7WNpCd {
-        --macro-data-7WNpCd: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
+.-macro-static-kFNJUb {
+        --macro-data-kFNJUb: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
       }
 
 "

package/style/dist/style-utils.cjs

@@ -139,7 +139,36 @@ const $247833060df99ecf$export$f2d00fe8ce80fd84 = ()=>({
                 }
             }
         },
-        colorScheme: '--s2-color-scheme'
+        colorScheme: '--s2-color-scheme',
+        // For backward compatibility in two cases:
+        // 1. When a component compiled with an earlier version of S2 is embedded in a newer provider.
+        // 2. When S2 CSS is compiled with lightningcss, setting color-scheme via a variable does not work.
+        '--lightningcss-light': {
+            type: 'transform',
+            value: {
+                colorScheme: {
+                    'light dark': {
+                        default: 'initial',
+                        '@media (prefers-color-scheme: dark)': ' '
+                    },
+                    light: 'initial',
+                    dark: ' '
+                }
+            }
+        },
+        '--lightningcss-dark': {
+            type: 'transform',
+            value: {
+                colorScheme: {
+                    'light dark': {
+                        default: ' ',
+                        '@media (prefers-color-scheme: dark)': 'initial'
+                    },
+                    light: ' ',
+                    dark: 'initial'
+                }
+            }
+        }
     });
 function $247833060df99ecf$export$1750a8f222a9157d() {
     return {