fix: Button font and S2 dark mode (#9840)

* Fix v3 button font

* Use native light-dark in s2

* update lightningcss

* fix order of css env transformer

* fix?

* fix color-scheme

* fix color-scheme inheritance

Author: devongovett

.parcelrc-build

@@ -10,7 +10,7 @@
     "packages/@react-spectrum/s2/{s2wf-icons,spectrum-illustrations}/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     // Disable PostCSS from running over style macro output
     "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
-    "*.css": ["...", "parcel-transformer-css-env"],
+    "*.css": ["parcel-transformer-css-env", "..."],
     "*.svg": ["@parcel/transformer-svg-react"],
     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
       "@parcel/transformer-js",

package.json

@@ -241,7 +241,7 @@
     "micromark-extension-mdxjs": "patch:micromark-extension-mdxjs@npm%3A1.0.0#~/.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch",
     "remark-mdx": "patch:remark-mdx@npm%3A2.0.0-rc.2#~/.yarn/patches/remark-mdx-npm-2.0.0-rc.2-7a71234e1f.patch",
     "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
-    "lightningcss": "1.30.1",
+    "lightningcss": "1.32.0",
     "react-server-dom-parcel": "canary",
     "react-test-renderer": "19.1.0",
     "@parcel/packager-react-static": "^2.16.3",

packages/@adobe/spectrum-css-temp/components/button/index.css

@@ -25,6 +25,8 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-BaseButton {
+  composes: i18nFontFamily;
+
   /* Contain halo */
   position: relative;
 
@@ -69,8 +71,6 @@ governing permissions and limitations under the License.
 
   text-decoration: none;
 
-  composes: i18nFontFamily;
-
   line-height: var(--spectrum-button-line-height);
 
   user-select: none;

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

@@ -26,7 +26,8 @@ export function generatePageStyles(this: MacroContext | void): void {
     this.addAsset({
       type: 'css',
       content: `:where(:root, :host) {
-        color-scheme: light dark;
+        --s2-color-scheme: light dark;
+        color-scheme: var(--s2-color-scheme);
         --s2-container-bg: ${colorToken(tokens['background-base-color'])};
         background: var(--s2-container-bg);
         --s2-scale: 1;
@@ -38,11 +39,11 @@ export function generatePageStyles(this: MacroContext | void): void {
         }
 
         &[data-color-scheme=light] {
-          color-scheme: light;
+          --s2-color-scheme: light;
         }
 
         &[data-color-scheme=dark] {
-          color-scheme: dark;
+          --s2-color-scheme: dark;
         }
 
         &[data-background=layer-1] {
@@ -57,8 +58,8 @@ export function generatePageStyles(this: MacroContext | void): void {
   }
 }
 
-// This generates a low specificity rule to define default values for
-// --lightningcss-light and --lightningcss-dark. This is used when rendering
+// This generates a low specificity rule to define a default value for
+// --s2-color-scheme. This is used when rendering
 // a <Provider> without setting a colorScheme prop, and when page.css is not present.
 // It is equivalent to setting `color-scheme: light dark`, but without overriding
 // the browser default for content outside the provider.
@@ -69,16 +70,10 @@ export function generateDefaultColorSchemeStyles(this: MacroContext | void): voi
       type: 'css',
       content: `@layer _.a {
         :where(:root, :host) {
-          --lightningcss-light: initial;
-          --lightningcss-dark: ;
+          --s2-color-scheme: light dark;
           --s2-scale: 1;
           --s2-font-size-base: 14;
 
-          @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

@@ -152,15 +152,17 @@ export const fieldInput = () => ({
  * ```
  */
 export const setColorScheme = () => ({
-  colorScheme: {
-    // Default to page color scheme if none is defined.
-    default: '[var(--lightningcss-light, light) var(--lightningcss-dark, dark)]',
-    colorScheme: {
-      'light dark': 'light dark',
-      light: 'light',
-      dark: 'dark'
+  '--s2-color-scheme': {
+    type: 'colorScheme',
+    value: {
+      colorScheme: {
+        'light dark': 'light dark',
+        light: 'light',
+        dark: 'dark'
+      }
     }
-  }
+  },
+  colorScheme: '--s2-color-scheme'
 } as const);
 
 export function staticColor(): Record<string, any> {

packages/dev/parcel-transformer-css-env/CSSEnvTransformer.js

@@ -23,7 +23,7 @@ module.exports = new Transformer({
       engines: {
         browsers: 'baseline widely available'
       },
-      shouldOptimize: options.mode === 'production'
+      shouldOptimize: asset.env.shouldOptimize
     });
 
     return [asset];

packages/dev/parcel-transformer-s2-icon/IconTransformer.js

@@ -59,10 +59,10 @@ module.exports = new Transformer({
           ]
         },
         replaceAttrValues: {
-          'var(--iconPrimary, #222)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
-          'var(--iconPrimary, #222222)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
-          'var(--iconPrimary, #292929)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
-          'var(--spectrum-global-color-gray-800, #292929)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`
+          'var(--iconPrimary, #222)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`,
+          'var(--iconPrimary, #222222)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`,
+          'var(--iconPrimary, #292929)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`,
+          'var(--spectrum-global-color-gray-800, #292929)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`
         },
         typescript: true,
         ref: true,

packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx

@@ -60,9 +60,9 @@ In addition to reducing the number of strings we need, these descriptions are al
 Our algorithm for generating color descriptions works in the [OKLCH](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) color space, recently standardized by CSS. This color space offers the advantage of uniform lightness across all hues, unlike HSL, where hues like blue appear significantly darker than hues like green or yellow at the same lightness value. The difference between HSL and OKLCH is shown below.
 
 <div role="img" aria-label="Color wheel for HSL and OKLCH" style={{display: 'flex', gap: 24, margin: '48px 0', flexWrap: 'wrap', justifyContent: 'center', forcedColorAdjust: 'none'}}>
-  <div style={{width: 280, height: 280, borderRadius: '50%', background: `radial-gradient(var(--lightningcss-light, #fff) var(--lightningcss-dark, #111) 0% 25%, transparent 20%), conic-gradient(in hsl longer hue, hsl(0, 100%, 50%), hsl(360, 100%, 50%))`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', fontSize: '1.2em', fontFamily: 'adobe-clean-spectrum-vf'}}>HSL</div>
+  <div style={{width: 280, height: 280, borderRadius: '50%', background: `radial-gradient(light-dark(#fff, #111) 0% 25%, transparent 20%), conic-gradient(in hsl longer hue, hsl(0, 100%, 50%), hsl(360, 100%, 50%))`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', fontSize: '1.2em', fontFamily: 'adobe-clean-spectrum-vf'}}>HSL</div>
 
-  <div style={{width: 280, height: 280, borderRadius: '50%', background: `radial-gradient(var(--lightningcss-light, #fff) var(--lightningcss-dark, #111) 0% 25%, transparent 20%), conic-gradient(in oklch longer hue, oklch(70% 0.25 0), oklch(70% 0.25 360))`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', fontSize: '1.2em', fontFamily: 'adobe-clean-spectrum-vf'}}>OKLCH</div>
+  <div style={{width: 280, height: 280, borderRadius: '50%', background: `radial-gradient(light-dark(#fff, #111) 0% 25%, transparent 20%), conic-gradient(in oklch longer hue, oklch(70% 0.25 0), oklch(70% 0.25 360))`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', fontSize: '1.2em', fontFamily: 'adobe-clean-spectrum-vf'}}>OKLCH</div>
 </div>
 
 In HSL, certain hues also appear to shift as the lightness changes — for example, blue tends to shift toward purple as it gets lighter. This would lead to perceptually inaccurate descriptions, where colors that appear purple might be described as blue. OKLCH resolves this issue by maintaining a consistent hue across all lightness levels.

yarn.lock

@@ -20615,92 +20615,102 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-darwin-arm64@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-darwin-arm64@npm:1.30.1"
+"lightningcss-android-arm64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-android-arm64@npm:1.32.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-arm64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-darwin-arm64@npm:1.32.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"lightningcss-darwin-x64@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-darwin-x64@npm:1.30.1"
+"lightningcss-darwin-x64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-darwin-x64@npm:1.32.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"lightningcss-freebsd-x64@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-freebsd-x64@npm:1.30.1"
+"lightningcss-freebsd-x64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-freebsd-x64@npm:1.32.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"lightningcss-linux-arm-gnueabihf@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.30.1"
+"lightningcss-linux-arm-gnueabihf@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.32.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"lightningcss-linux-arm64-gnu@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-linux-arm64-gnu@npm:1.30.1"
+"lightningcss-linux-arm64-gnu@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.32.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"lightningcss-linux-arm64-musl@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-linux-arm64-musl@npm:1.30.1"
+"lightningcss-linux-arm64-musl@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm64-musl@npm:1.32.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"lightningcss-linux-x64-gnu@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-linux-x64-gnu@npm:1.30.1"
+"lightningcss-linux-x64-gnu@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-x64-gnu@npm:1.32.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"lightningcss-linux-x64-musl@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-linux-x64-musl@npm:1.30.1"
+"lightningcss-linux-x64-musl@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-x64-musl@npm:1.32.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"lightningcss-win32-arm64-msvc@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-win32-arm64-msvc@npm:1.30.1"
+"lightningcss-win32-arm64-msvc@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.32.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"lightningcss-win32-x64-msvc@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss-win32-x64-msvc@npm:1.30.1"
+"lightningcss-win32-x64-msvc@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-win32-x64-msvc@npm:1.32.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"lightningcss@npm:1.30.1":
-  version: 1.30.1
-  resolution: "lightningcss@npm:1.30.1"
+"lightningcss@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss@npm:1.32.0"
   dependencies:
     detect-libc: "npm:^2.0.3"
-    lightningcss-darwin-arm64: "npm:1.30.1"
-    lightningcss-darwin-x64: "npm:1.30.1"
-    lightningcss-freebsd-x64: "npm:1.30.1"
-    lightningcss-linux-arm-gnueabihf: "npm:1.30.1"
-    lightningcss-linux-arm64-gnu: "npm:1.30.1"
-    lightningcss-linux-arm64-musl: "npm:1.30.1"
-    lightningcss-linux-x64-gnu: "npm:1.30.1"
-    lightningcss-linux-x64-musl: "npm:1.30.1"
-    lightningcss-win32-arm64-msvc: "npm:1.30.1"
-    lightningcss-win32-x64-msvc: "npm:1.30.1"
+    lightningcss-android-arm64: "npm:1.32.0"
+    lightningcss-darwin-arm64: "npm:1.32.0"
+    lightningcss-darwin-x64: "npm:1.32.0"
+    lightningcss-freebsd-x64: "npm:1.32.0"
+    lightningcss-linux-arm-gnueabihf: "npm:1.32.0"
+    lightningcss-linux-arm64-gnu: "npm:1.32.0"
+    lightningcss-linux-arm64-musl: "npm:1.32.0"
+    lightningcss-linux-x64-gnu: "npm:1.32.0"
+    lightningcss-linux-x64-musl: "npm:1.32.0"
+    lightningcss-win32-arm64-msvc: "npm:1.32.0"
+    lightningcss-win32-x64-msvc: "npm:1.32.0"
   dependenciesMeta:
+    lightningcss-android-arm64:
+      optional: true
     lightningcss-darwin-arm64:
       optional: true
     lightningcss-darwin-x64:
@@ -20721,7 +20731,7 @@ __metadata:
       optional: true
     lightningcss-win32-x64-msvc:
       optional: true
-  checksum: 10c0/1e1ad908f3c68bf39d964a6735435a8dd5474fb2765076732d64a7b6aa2af1f084da65a9462443a9adfebf7dcfb02fb532fce1d78697f2a9de29c8f40f09aee3
+  checksum: 10c0/70945bd55097af46fc9fab7f5ed09cd5869d85940a2acab7ee06d0117004a1d68155708a2d462531cea2fc3c67aefc9333a7068c80b0b78dd404c16838809e03
   languageName: node
   linkType: hard