Skip to content

Commit 471ef60

Browse files
devongovettdevongovett
authored
fix: Button font and S2 dark mode (adobe#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
1 parent c8718f9 commit 471ef60

File tree

9 files changed

+82
-75
lines changed

9 files changed

+82
-75
lines changed

‎.parcelrc-build‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"packages/@react-spectrum/s2/{s2wf-icons,spectrum-illustrations}/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
1111
// Disable PostCSS from running over style macro output
1212
"packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
13-
"*.css": ["...", "parcel-transformer-css-env"],
13+
"*.css": ["parcel-transformer-css-env", "..."],
1414
"*.svg": ["@parcel/transformer-svg-react"],
1515
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
1616
"@parcel/transformer-js",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@
241241
"micromark-extension-mdxjs": "patch:micromark-extension-mdxjs@npm%3A1.0.0#~/.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch",
242242
"remark-mdx": "patch:remark-mdx@npm%3A2.0.0-rc.2#~/.yarn/patches/remark-mdx-npm-2.0.0-rc.2-7a71234e1f.patch",
243243
"remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
244-
"lightningcss": "1.30.1",
244+
"lightningcss": "1.32.0",
245245
"react-server-dom-parcel": "canary",
246246
"react-test-renderer": "19.1.0",
247247
"@parcel/packager-react-static": "^2.16.3",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ governing permissions and limitations under the License.
2525
}
2626

2727
.spectrum-BaseButton {
28+
composes: i18nFontFamily;
29+
2830
/* Contain halo */
2931
position: relative;
3032

@@ -69,8 +71,6 @@ governing permissions and limitations under the License.
6971

7072
text-decoration: none;
7173

72-
composes: i18nFontFamily;
73-
7474
line-height: var(--spectrum-button-line-height);
7575

7676
user-select: none;

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

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ export function generatePageStyles(this: MacroContext | void): void {
2626
this.addAsset({
2727
type: 'css',
2828
content: `:where(:root, :host) {
29-
color-scheme: light dark;
29+
--s2-color-scheme: light dark;
30+
color-scheme: var(--s2-color-scheme);
3031
--s2-container-bg: ${colorToken(tokens['background-base-color'])};
3132
background: var(--s2-container-bg);
3233
--s2-scale: 1;
@@ -38,11 +39,11 @@ export function generatePageStyles(this: MacroContext | void): void {
3839
}
3940
4041
&[data-color-scheme=light] {
41-
color-scheme: light;
42+
--s2-color-scheme: light;
4243
}
4344
4445
&[data-color-scheme=dark] {
45-
color-scheme: dark;
46+
--s2-color-scheme: dark;
4647
}
4748
4849
&[data-background=layer-1] {
@@ -57,8 +58,8 @@ export function generatePageStyles(this: MacroContext | void): void {
5758
}
5859
}
5960

60-
// This generates a low specificity rule to define default values for
61-
// --lightningcss-light and --lightningcss-dark. This is used when rendering
61+
// This generates a low specificity rule to define a default value for
62+
// --s2-color-scheme. This is used when rendering
6263
// a <Provider> without setting a colorScheme prop, and when page.css is not present.
6364
// It is equivalent to setting `color-scheme: light dark`, but without overriding
6465
// the browser default for content outside the provider.
@@ -69,16 +70,10 @@ export function generateDefaultColorSchemeStyles(this: MacroContext | void): voi
6970
type: 'css',
7071
content: `@layer _.a {
7172
:where(:root, :host) {
72-
--lightningcss-light: initial;
73-
--lightningcss-dark: ;
73+
--s2-color-scheme: light dark;
7474
--s2-scale: 1;
7575
--s2-font-size-base: 14;
7676
77-
@media (prefers-color-scheme: dark) {
78-
--lightningcss-light: ;
79-
--lightningcss-dark: initial;
80-
}
81-
8277
@media not ((hover: hover) and (pointer: fine)) {
8378
--s2-scale: 1.25;
8479
--s2-font-size-base: 17;

‎packages/@react-spectrum/s2/src/style-utils.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -152,15 +152,17 @@ export const fieldInput = () => ({
152152
* ```
153153
*/
154154
export const setColorScheme = () => ({
155-
colorScheme: {
156-
// Default to page color scheme if none is defined.
157-
default: '[var(--lightningcss-light, light) var(--lightningcss-dark, dark)]',
158-
colorScheme: {
159-
'light dark': 'light dark',
160-
light: 'light',
161-
dark: 'dark'
155+
'--s2-color-scheme': {
156+
type: 'colorScheme',
157+
value: {
158+
colorScheme: {
159+
'light dark': 'light dark',
160+
light: 'light',
161+
dark: 'dark'
162+
}
162163
}
163-
}
164+
},
165+
colorScheme: '--s2-color-scheme'
164166
} as const);
165167

166168
export function staticColor(): Record<string, any> {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module.exports = new Transformer({
2323
engines: {
2424
browsers: 'baseline widely available'
2525
},
26-
shouldOptimize: options.mode === 'production'
26+
shouldOptimize: asset.env.shouldOptimize
2727
});
2828

2929
return [asset];

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ module.exports = new Transformer({
5959
]
6060
},
6161
replaceAttrValues: {
62-
'var(--iconPrimary, #222)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
63-
'var(--iconPrimary, #222222)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
64-
'var(--iconPrimary, #292929)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`,
65-
'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}))`
62+
'var(--iconPrimary, #222)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`,
63+
'var(--iconPrimary, #222222)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`,
64+
'var(--iconPrimary, #292929)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`,
65+
'var(--spectrum-global-color-gray-800, #292929)': `var(--iconPrimary, light-dark(${tokens['gray-800'].sets.light.value}, ${tokens['gray-800'].sets.dark.value}))`
6666
},
6767
typescript: true,
6868
ref: true,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ In addition to reducing the number of strings we need, these descriptions are al
6060
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.
6161

6262
<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'}}>
63-
<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>
63+
<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>
6464

65-
<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>
65+
<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>
6666
</div>
6767

6868
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‎

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -20615,92 +20615,102 @@ __metadata:
2061520615
languageName: node
2061620616
linkType: hard
2061720617

20618-
"lightningcss-darwin-arm64@npm:1.30.1":
20619-
version: 1.30.1
20620-
resolution: "lightningcss-darwin-arm64@npm:1.30.1"
20618+
"lightningcss-android-arm64@npm:1.32.0":
20619+
version: 1.32.0
20620+
resolution: "lightningcss-android-arm64@npm:1.32.0"
20621+
conditions: os=android & cpu=arm64
20622+
languageName: node
20623+
linkType: hard
20624+
20625+
"lightningcss-darwin-arm64@npm:1.32.0":
20626+
version: 1.32.0
20627+
resolution: "lightningcss-darwin-arm64@npm:1.32.0"
2062120628
conditions: os=darwin & cpu=arm64
2062220629
languageName: node
2062320630
linkType: hard
2062420631

20625-
"lightningcss-darwin-x64@npm:1.30.1":
20626-
version: 1.30.1
20627-
resolution: "lightningcss-darwin-x64@npm:1.30.1"
20632+
"lightningcss-darwin-x64@npm:1.32.0":
20633+
version: 1.32.0
20634+
resolution: "lightningcss-darwin-x64@npm:1.32.0"
2062820635
conditions: os=darwin & cpu=x64
2062920636
languageName: node
2063020637
linkType: hard
2063120638

20632-
"lightningcss-freebsd-x64@npm:1.30.1":
20633-
version: 1.30.1
20634-
resolution: "lightningcss-freebsd-x64@npm:1.30.1"
20639+
"lightningcss-freebsd-x64@npm:1.32.0":
20640+
version: 1.32.0
20641+
resolution: "lightningcss-freebsd-x64@npm:1.32.0"
2063520642
conditions: os=freebsd & cpu=x64
2063620643
languageName: node
2063720644
linkType: hard
2063820645

20639-
"lightningcss-linux-arm-gnueabihf@npm:1.30.1":
20640-
version: 1.30.1
20641-
resolution: "lightningcss-linux-arm-gnueabihf@npm:1.30.1"
20646+
"lightningcss-linux-arm-gnueabihf@npm:1.32.0":
20647+
version: 1.32.0
20648+
resolution: "lightningcss-linux-arm-gnueabihf@npm:1.32.0"
2064220649
conditions: os=linux & cpu=arm
2064320650
languageName: node
2064420651
linkType: hard
2064520652

20646-
"lightningcss-linux-arm64-gnu@npm:1.30.1":
20647-
version: 1.30.1
20648-
resolution: "lightningcss-linux-arm64-gnu@npm:1.30.1"
20653+
"lightningcss-linux-arm64-gnu@npm:1.32.0":
20654+
version: 1.32.0
20655+
resolution: "lightningcss-linux-arm64-gnu@npm:1.32.0"
2064920656
conditions: os=linux & cpu=arm64 & libc=glibc
2065020657
languageName: node
2065120658
linkType: hard
2065220659

20653-
"lightningcss-linux-arm64-musl@npm:1.30.1":
20654-
version: 1.30.1
20655-
resolution: "lightningcss-linux-arm64-musl@npm:1.30.1"
20660+
"lightningcss-linux-arm64-musl@npm:1.32.0":
20661+
version: 1.32.0
20662+
resolution: "lightningcss-linux-arm64-musl@npm:1.32.0"
2065620663
conditions: os=linux & cpu=arm64 & libc=musl
2065720664
languageName: node
2065820665
linkType: hard
2065920666

20660-
"lightningcss-linux-x64-gnu@npm:1.30.1":
20661-
version: 1.30.1
20662-
resolution: "lightningcss-linux-x64-gnu@npm:1.30.1"
20667+
"lightningcss-linux-x64-gnu@npm:1.32.0":
20668+
version: 1.32.0
20669+
resolution: "lightningcss-linux-x64-gnu@npm:1.32.0"
2066320670
conditions: os=linux & cpu=x64 & libc=glibc
2066420671
languageName: node
2066520672
linkType: hard
2066620673

20667-
"lightningcss-linux-x64-musl@npm:1.30.1":
20668-
version: 1.30.1
20669-
resolution: "lightningcss-linux-x64-musl@npm:1.30.1"
20674+
"lightningcss-linux-x64-musl@npm:1.32.0":
20675+
version: 1.32.0
20676+
resolution: "lightningcss-linux-x64-musl@npm:1.32.0"
2067020677
conditions: os=linux & cpu=x64 & libc=musl
2067120678
languageName: node
2067220679
linkType: hard
2067320680

20674-
"lightningcss-win32-arm64-msvc@npm:1.30.1":
20675-
version: 1.30.1
20676-
resolution: "lightningcss-win32-arm64-msvc@npm:1.30.1"
20681+
"lightningcss-win32-arm64-msvc@npm:1.32.0":
20682+
version: 1.32.0
20683+
resolution: "lightningcss-win32-arm64-msvc@npm:1.32.0"
2067720684
conditions: os=win32 & cpu=arm64
2067820685
languageName: node
2067920686
linkType: hard
2068020687

20681-
"lightningcss-win32-x64-msvc@npm:1.30.1":
20682-
version: 1.30.1
20683-
resolution: "lightningcss-win32-x64-msvc@npm:1.30.1"
20688+
"lightningcss-win32-x64-msvc@npm:1.32.0":
20689+
version: 1.32.0
20690+
resolution: "lightningcss-win32-x64-msvc@npm:1.32.0"
2068420691
conditions: os=win32 & cpu=x64
2068520692
languageName: node
2068620693
linkType: hard
2068720694

20688-
"lightningcss@npm:1.30.1":
20689-
version: 1.30.1
20690-
resolution: "lightningcss@npm:1.30.1"
20695+
"lightningcss@npm:1.32.0":
20696+
version: 1.32.0
20697+
resolution: "lightningcss@npm:1.32.0"
2069120698
dependencies:
2069220699
detect-libc: "npm:^2.0.3"
20693-
lightningcss-darwin-arm64: "npm:1.30.1"
20694-
lightningcss-darwin-x64: "npm:1.30.1"
20695-
lightningcss-freebsd-x64: "npm:1.30.1"
20696-
lightningcss-linux-arm-gnueabihf: "npm:1.30.1"
20697-
lightningcss-linux-arm64-gnu: "npm:1.30.1"
20698-
lightningcss-linux-arm64-musl: "npm:1.30.1"
20699-
lightningcss-linux-x64-gnu: "npm:1.30.1"
20700-
lightningcss-linux-x64-musl: "npm:1.30.1"
20701-
lightningcss-win32-arm64-msvc: "npm:1.30.1"
20702-
lightningcss-win32-x64-msvc: "npm:1.30.1"
20700+
lightningcss-android-arm64: "npm:1.32.0"
20701+
lightningcss-darwin-arm64: "npm:1.32.0"
20702+
lightningcss-darwin-x64: "npm:1.32.0"
20703+
lightningcss-freebsd-x64: "npm:1.32.0"
20704+
lightningcss-linux-arm-gnueabihf: "npm:1.32.0"
20705+
lightningcss-linux-arm64-gnu: "npm:1.32.0"
20706+
lightningcss-linux-arm64-musl: "npm:1.32.0"
20707+
lightningcss-linux-x64-gnu: "npm:1.32.0"
20708+
lightningcss-linux-x64-musl: "npm:1.32.0"
20709+
lightningcss-win32-arm64-msvc: "npm:1.32.0"
20710+
lightningcss-win32-x64-msvc: "npm:1.32.0"
2070320711
dependenciesMeta:
20712+
lightningcss-android-arm64:
20713+
optional: true
2070420714
lightningcss-darwin-arm64:
2070520715
optional: true
2070620716
lightningcss-darwin-x64:
@@ -20721,7 +20731,7 @@ __metadata:
2072120731
optional: true
2072220732
lightningcss-win32-x64-msvc:
2072320733
optional: true
20724-
checksum: 10c0/1e1ad908f3c68bf39d964a6735435a8dd5474fb2765076732d64a7b6aa2af1f084da65a9462443a9adfebf7dcfb02fb532fce1d78697f2a9de29c8f40f09aee3
20734+
checksum: 10c0/70945bd55097af46fc9fab7f5ed09cd5869d85940a2acab7ee06d0117004a1d68155708a2d462531cea2fc3c67aefc9333a7068c80b0b78dd404c16838809e03
2072520735
languageName: node
2072620736
linkType: hard
2072720737

0 commit comments

Comments
 (0)