[pull] main from adobe:main

packages/@react-spectrum/s2/src/page.macro.ts

@@ -33,17 +33,32 @@ 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;
         }
 
         &[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;

packages/@react-spectrum/s2/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> {