From 2e244133c59f66905589f4922b3a40f2f7608254 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Wed, 19 Mar 2025 13:16:58 -0700 Subject: [PATCH 1/3] chore: Test S2 multi-layer drop shadows --- packages/@react-spectrum/s2/package.json | 2 +- .../@react-spectrum/s2/style/spectrum-theme.ts | 6 +++--- packages/@react-spectrum/s2/style/tokens.ts | 16 ++++++++++++++++ yarn.lock | 9 ++++++++- 4 files changed, 28 insertions(+), 5 deletions(-) diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index a5b17c54c93..8745bdbe818 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -120,7 +120,7 @@ "postpack": "git checkout -- package.json" }, "devDependencies": { - "@adobe/spectrum-tokens": "^13.0.0-beta.56", + "@adobe/spectrum-tokens": "0.0.0-s2-composite-drop-shadow-20250319174850", "@parcel/macros": "^2.14.0", "@react-aria/test-utils": "1.0.0-alpha.3", "@testing-library/dom": "^10.1.0", diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts index 38ff6ce7b1a..be004e5afd2 100644 --- a/packages/@react-spectrum/s2/style/spectrum-theme.ts +++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts @@ -11,7 +11,7 @@ */ import {ArbitraryValue, CSSProperties, CSSValue, PropertyValueMap} from './types'; -import {autoStaticColor, colorScale, colorToken, fontSizeToken, generateOverlayColorScale, getToken, simpleColorScale, weirdColorToken} from './tokens' with {type: 'macro'}; +import {autoStaticColor, colorScale, colorToken, fontSizeToken, generateOverlayColorScale, getToken, shadowLayer, simpleColorScale, weirdColorToken} from './tokens' with {type: 'macro'}; import {Color, createArbitraryProperty, createColorProperty, createMappedProperty, createRenamedProperty, createSizingProperty, createTheme, parseArbitraryValue} from './style-macro'; import type * as CSS from 'csstype'; @@ -813,13 +813,13 @@ export const style = createTheme({ // effects boxShadow: { - emphasized: `${getToken('drop-shadow-emphasized-default-x')} ${getToken('drop-shadow-emphasized-default-y')} ${getToken('drop-shadow-emphasized-default-blur')} ${colorToken('drop-shadow-emphasized-default-color')}`, + emphasized: `${shadowLayer('drop-shadow-emphasized-default-ambient')}, ${shadowLayer('drop-shadow-emphasized-default-transition')}, ${shadowLayer('drop-shadow-emphasized-default-transition-key')}`, elevated: `${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')}`, dragged: `${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`, none: 'none' }, filter: { - emphasized: `drop-shadow(${getToken('drop-shadow-emphasized-default-x')} ${getToken('drop-shadow-emphasized-default-y')} ${getToken('drop-shadow-emphasized-default-blur')} ${colorToken('drop-shadow-emphasized-default-color')})`, + emphasized: `drop-shadow(${shadowLayer('drop-shadow-emphasized-default-ambient')}, ${shadowLayer('drop-shadow-emphasized-default-transition')}, ${shadowLayer('drop-shadow-emphasized-default-transition-key')})`, elevated: `drop-shadow(${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')})`, dragged: `drop-shadow${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`, none: 'none' diff --git a/packages/@react-spectrum/s2/style/tokens.ts b/packages/@react-spectrum/s2/style/tokens.ts index f315f040caa..cc4e1a99fa1 100644 --- a/packages/@react-spectrum/s2/style/tokens.ts +++ b/packages/@react-spectrum/s2/style/tokens.ts @@ -11,6 +11,7 @@ */ // package.json in this directory is not the real package.json. Lint rule not smart enough. +import assert from 'assert'; // eslint-disable-next-line rulesdir/imports import * as tokens from '@adobe/spectrum-tokens/dist/json/variables.json'; @@ -112,3 +113,18 @@ export function fontSizeToken(name: keyof typeof tokens): {default: string, touc touch: pxToRem(token.sets.mobile.value) }; } + +export function shadowLayer(name: keyof typeof tokens): string { + let token = tokens[name] as typeof tokens['drop-shadow-emphasized-default-ambient']; + + // Currently we depend on x/y/blur being the same between light and dark theme. + // Spread must also be zero, since filter: drop-shadow() does not support it. + // Assertions so we know if these assumptions change in the future. + assert.equal(token.sets.light.value.x, token.sets.dark.value.x); + assert.equal(token.sets.light.value.y, token.sets.dark.value.y); + assert.equal(token.sets.light.value.blur, token.sets.dark.value.blur); + assert.equal(token.sets.light.value.spread, token.sets.dark.value.spread); + assert.equal(token.sets.light.value.spread, '0px'); + + return `${token.sets.light.value.x} ${token.sets.light.value.y} ${token.sets.light.value.blur} light-dark(${token.sets.light.value.color}, ${token.sets.dark.value.color})`; +} diff --git a/yarn.lock b/yarn.lock index 2dbc833d989..d43bc0bd901 100644 --- a/yarn.lock +++ b/yarn.lock @@ -148,6 +148,13 @@ __metadata: languageName: unknown linkType: soft +"@adobe/spectrum-tokens@npm:0.0.0-s2-composite-drop-shadow-20250319174850": + version: 0.0.0-s2-composite-drop-shadow-20250319174850 + resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-composite-drop-shadow-20250319174850" + checksum: 10c0/af3e5c1e66d03107b0ed224a0b7f5132fd0fbe5ed16e18842941bba484f7b040aca4bd59a8147d7d9bf74271eca35b538348652fbbf63305fbddb890cc61682a + languageName: node + linkType: hard + "@adobe/spectrum-tokens@npm:^13.0.0-beta.56": version: 13.0.0-beta.56 resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.56" @@ -7934,7 +7941,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/s2@workspace:packages/@react-spectrum/s2" dependencies: - "@adobe/spectrum-tokens": "npm:^13.0.0-beta.56" + "@adobe/spectrum-tokens": "npm:0.0.0-s2-composite-drop-shadow-20250319174850" "@parcel/macros": "npm:^2.14.0" "@react-aria/collections": "npm:3.0.0-beta.1" "@react-aria/focus": "npm:^3.20.1" From 9752c53ef64052ada4068de750d30c3cd953d41f Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Wed, 19 Mar 2025 13:25:44 -0700 Subject: [PATCH 2/3] fix filter order --- packages/@react-spectrum/s2/style/spectrum-theme.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts index be004e5afd2..4637ac101c1 100644 --- a/packages/@react-spectrum/s2/style/spectrum-theme.ts +++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts @@ -813,13 +813,15 @@ export const style = createTheme({ // effects boxShadow: { + // top-most layer is first in the box-shadow property. emphasized: `${shadowLayer('drop-shadow-emphasized-default-ambient')}, ${shadowLayer('drop-shadow-emphasized-default-transition')}, ${shadowLayer('drop-shadow-emphasized-default-transition-key')}`, elevated: `${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')}`, dragged: `${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`, none: 'none' }, filter: { - emphasized: `drop-shadow(${shadowLayer('drop-shadow-emphasized-default-ambient')}, ${shadowLayer('drop-shadow-emphasized-default-transition')}, ${shadowLayer('drop-shadow-emphasized-default-transition-key')})`, + // layer order is reversed for filter property. filters are applied in the order they are specified. + emphasized: `drop-shadow(${shadowLayer('drop-shadow-emphasized-default-transition-key')}) drop-shadow(${shadowLayer('drop-shadow-emphasized-default-transition')}) drop-shadow(${shadowLayer('drop-shadow-emphasized-default-ambient')})`, elevated: `drop-shadow(${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')})`, dragged: `drop-shadow${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`, none: 'none' From beef52de3908c1485983281fe100ca659149c197 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 25 Sep 2025 11:24:06 -0700 Subject: [PATCH 3/3] Update tokens --- packages/@react-spectrum/s2/package.json | 2 +- packages/@react-spectrum/s2/src/ActionBar.tsx | 5 ++-- packages/@react-spectrum/s2/src/Menu.tsx | 2 +- packages/@react-spectrum/s2/src/Popover.tsx | 15 ++++++----- .../s2/style/spectrum-theme.ts | 25 +++++++++---------- packages/@react-spectrum/s2/style/tokens.ts | 20 ++++++--------- .../parcel-transformer-s2-icon/package.json | 2 +- yarn.lock | 12 ++++----- 8 files changed, 37 insertions(+), 46 deletions(-) diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index cc2cb3e71df..163b1f6c725 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -140,7 +140,7 @@ "postpack": "git checkout -- package.json" }, "devDependencies": { - "@adobe/spectrum-tokens": "^13.10.0", + "@adobe/spectrum-tokens": "^13.15.1", "@parcel/macros": "^2.16.0", "@react-aria/test-utils": "^1.0.0-alpha.8", "@storybook/jest": "^0.2.3", diff --git a/packages/@react-spectrum/s2/src/ActionBar.tsx b/packages/@react-spectrum/s2/src/ActionBar.tsx index da8ff4ac558..f88e4c6d0fc 100644 --- a/packages/@react-spectrum/s2/src/ActionBar.tsx +++ b/packages/@react-spectrum/s2/src/ActionBar.tsx @@ -19,7 +19,7 @@ import {DOMRef, DOMRefValue, Key} from '@react-types/shared'; import {FocusScope, useKeyboard} from 'react-aria'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {style} from '../style' with {type: 'macro'}; +import {lightDark, style} from '../style' with {type: 'macro'}; import {useControlledState} from '@react-stately/utils'; import {useDOMRef} from '@react-spectrum/utils'; import {useEnterAnimation, useExitAnimation, useObjectRef, useResizeObserver} from '@react-aria/utils'; @@ -40,9 +40,8 @@ const actionBarStyles = style({ boxSizing: 'border-box', outlineStyle: 'solid', outlineWidth: 1, - outlineOffset: -1, outlineColor: { - default: 'gray-200', + default: lightDark('transparent-white-25', 'gray-200'), isEmphasized: 'transparent', forcedColors: 'ButtonBorder' }, diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx index 69b84df057f..a13e23903ec 100644 --- a/packages/@react-spectrum/s2/src/Menu.tsx +++ b/packages/@react-spectrum/s2/src/Menu.tsx @@ -582,7 +582,7 @@ function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element { return ( {props.children[0]} - + {props.children[1]} diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx index b9c4ab4d119..43b104d63e3 100644 --- a/packages/@react-spectrum/s2/src/Popover.tsx +++ b/packages/@react-spectrum/s2/src/Popover.tsx @@ -25,8 +25,8 @@ import {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './styl import {ColorSchemeContext} from './Provider'; import {createContext, forwardRef, MutableRefObject, useCallback, useContext} from 'react'; import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; +import {lightDark, style} from '../style' with {type: 'macro'}; import {mergeStyles} from '../style/runtime'; -import {style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; @@ -64,10 +64,10 @@ let popover = style({ default: 'elevated', isArrowShown: 'none' }, - borderStyle: 'solid', - borderWidth: 1, - borderColor: { - default: 'gray-200', + outlineStyle: 'solid', + outlineWidth: 1, + outlineColor: { + default: lightDark('transparent-white-25', 'gray-200'), forcedColors: 'ButtonBorder' }, width: { @@ -120,8 +120,7 @@ let popover = style({ isolation: 'isolate', pointerEvents: { isExiting: 'none' - }, - outlineStyle: 'none' + } }, getAllowedOverrides()); // TODO: animations and real Popover Arrow @@ -147,7 +146,7 @@ let arrow = style({ }, strokeWidth: 1, stroke: { - default: 'gray-200', + default: lightDark('transparent-white-25', 'gray-200'), forcedColors: 'ButtonBorder' } }); diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts index c93fde150d2..b14e5f08eff 100644 --- a/packages/@react-spectrum/s2/style/spectrum-theme.ts +++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts @@ -766,13 +766,13 @@ export const style = createTheme({ }; }, fontSize), fontWeight: new ExpandedProperty(['fontWeight', 'fontVariationSettings', 'fontSynthesisWeight'], (value) => { - return { - // Set font-variation-settings in addition to font-weight to work around typekit issue. + return { + // Set font-variation-settings in addition to font-weight to work around typekit issue. // (This was fixed, but leaving for backward compatibility for now.) - fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`, - fontWeight: value as any, - fontSynthesisWeight: 'none' - }; + fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`, + fontWeight: value as any, + fontSynthesisWeight: 'none' + }; }, fontWeight), lineHeight: { // See https://spectrum.corp.adobe.com/page/typography/#Line-height @@ -834,17 +834,16 @@ export const style = createTheme({ // effects boxShadow: { - // top-most layer is first in the box-shadow property. - emphasized: `${shadowLayer('drop-shadow-emphasized-default-ambient')}, ${shadowLayer('drop-shadow-emphasized-default-transition')}, ${shadowLayer('drop-shadow-emphasized-default-transition-key')}`, - elevated: `${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')}`, - dragged: `${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`, + emphasized: shadowToken('drop-shadow-emphasized').join(', '), + elevated: shadowToken('drop-shadow-elevated').join(', '), + dragged: shadowToken('drop-shadow-dragged').join(', '), none: 'none' }, filter: { // layer order is reversed for filter property. filters are applied in the order they are specified. - emphasized: `drop-shadow(${shadowLayer('drop-shadow-emphasized-default-transition-key')}) drop-shadow(${shadowLayer('drop-shadow-emphasized-default-transition')}) drop-shadow(${shadowLayer('drop-shadow-emphasized-default-ambient')})`, - elevated: `drop-shadow(${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')})`, - dragged: `drop-shadow${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`, + emphasized: shadowToken('drop-shadow-emphasized').reverse().map(s => `drop-shadow(${s})`).join(' '), + elevated: shadowToken('drop-shadow-elevated').reverse().map(s => `drop-shadow(${s})`).join(' '), + dragged: shadowToken('drop-shadow-dragged').reverse().map(s => `drop-shadow(${s})`).join(' '), none: 'none' }, borderTopStartRadius: new MappedProperty('borderStartStartRadius', radius), diff --git a/packages/@react-spectrum/s2/style/tokens.ts b/packages/@react-spectrum/s2/style/tokens.ts index 3bf6ec185a7..690a50f592b 100644 --- a/packages/@react-spectrum/s2/style/tokens.ts +++ b/packages/@react-spectrum/s2/style/tokens.ts @@ -170,17 +170,11 @@ export function fontSizeToken(name: keyof typeof tokens): number { return index; } -export function shadowLayer(name: keyof typeof tokens): string { - let token = tokens[name] as typeof tokens['drop-shadow-emphasized-default-ambient']; - - // Currently we depend on x/y/blur being the same between light and dark theme. - // Spread must also be zero, since filter: drop-shadow() does not support it. - // Assertions so we know if these assumptions change in the future. - assert.equal(token.sets.light.value.x, token.sets.dark.value.x); - assert.equal(token.sets.light.value.y, token.sets.dark.value.y); - assert.equal(token.sets.light.value.blur, token.sets.dark.value.blur); - assert.equal(token.sets.light.value.spread, token.sets.dark.value.spread); - assert.equal(token.sets.light.value.spread, '0px'); - - return `${token.sets.light.value.x} ${token.sets.light.value.y} ${token.sets.light.value.blur} light-dark(${token.sets.light.value.color}, ${token.sets.dark.value.color})`; +export function shadowToken(name: 'drop-shadow-emphasized' | 'drop-shadow-elevated' | 'drop-shadow-dragged'): string[] { + let token = tokens[name]; + return token.value.map(layer => { + // Spread must also be zero, since filter: drop-shadow() does not support it. + assert.equal(layer.spread, '0px'); + return `${layer.x} ${layer.y} ${layer.blur} light-dark(${layer.color.sets.light.value}, ${layer.color.sets.dark.value})`; + }); } diff --git a/packages/dev/parcel-transformer-s2-icon/package.json b/packages/dev/parcel-transformer-s2-icon/package.json index acbad9c7818..add761bd3a7 100644 --- a/packages/dev/parcel-transformer-s2-icon/package.json +++ b/packages/dev/parcel-transformer-s2-icon/package.json @@ -6,7 +6,7 @@ "parcel": "^2.0.0" }, "dependencies": { - "@adobe/spectrum-tokens": "^13.10.0", + "@adobe/spectrum-tokens": "^13.15.1", "@parcel/plugin": "^2.0.0", "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", diff --git a/yarn.lock b/yarn.lock index a47a46dab9e..04e951a25b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -148,10 +148,10 @@ __metadata: languageName: unknown linkType: soft -"@adobe/spectrum-tokens@npm:^13.10.0": - version: 13.10.0 - resolution: "@adobe/spectrum-tokens@npm:13.10.0" - checksum: 10c0/1bd8007826ef22292ffd0eab96b5a7d90aa1619adccdc141991d08d3b48bc62cdd2eacc57a63bd6c5ab4eb1e52d081f619bac9b8bad2eafe4efad0073c5ef266 +"@adobe/spectrum-tokens@npm:^13.15.1": + version: 13.15.1 + resolution: "@adobe/spectrum-tokens@npm:13.15.1" + checksum: 10c0/745543f734fc9a4a69f3eb93b05370e6591dd034f0ac79b85b9a9089ae0cbd7a166633bb562f25eab4cc377e6136648de7e052e600ed8a03f6e306c6dc1e19ed languageName: node linkType: hard @@ -7337,7 +7337,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/parcel-transformer-s2-icon@workspace:packages/dev/parcel-transformer-s2-icon" dependencies: - "@adobe/spectrum-tokens": "npm:^13.10.0" + "@adobe/spectrum-tokens": "npm:^13.15.1" "@parcel/plugin": "npm:^2.0.0" "@svgr/core": "npm:^8.1.0" "@svgr/plugin-jsx": "npm:^8.1.0" @@ -7504,7 +7504,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/s2@workspace:packages/@react-spectrum/s2" dependencies: - "@adobe/spectrum-tokens": "npm:^13.10.0" + "@adobe/spectrum-tokens": "npm:^13.15.1" "@internationalized/date": "npm:^3.9.0" "@internationalized/number": "npm:^3.6.5" "@parcel/macros": "npm:^2.16.0"