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 0e8b732c35a..b14e5f08eff 100644 --- a/packages/@react-spectrum/s2/style/spectrum-theme.ts +++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts @@ -12,7 +12,7 @@ import {ArbitraryProperty, Color, createTheme, ExpandedProperty, MappedProperty, parseArbitraryValue, PercentageProperty, SizingProperty} from './style-macro'; import {ArbitraryValue, CSSProperties, CSSValue, PropertyValueDefinition, PropertyValueMap, Value} from './types'; -import {autoStaticColor, ColorRef, colorScale, ColorToken, colorToken, fontSizeToken, generateOverlayColorScale, getToken, rawColorToken, simpleColorScale, weirdColorToken} from './tokens' with {type: 'macro'}; +import {autoStaticColor, ColorRef, colorScale, ColorToken, colorToken, fontSizeToken, generateOverlayColorScale, getToken, shadowToken, simpleColorScale, weirdColorToken} from './tokens' with {type: 'macro'}; import type * as CSS from 'csstype'; interface MacroContext { @@ -834,15 +834,16 @@ 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')} ${rawColorToken('drop-shadow-emphasized-default-color')}`, - elevated: `${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${rawColorToken('drop-shadow-elevated-color')}`, - dragged: `${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${rawColorToken('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: { - emphasized: `drop-shadow(${getToken('drop-shadow-emphasized-default-x')} ${getToken('drop-shadow-emphasized-default-y')} ${getToken('drop-shadow-emphasized-default-blur')} ${rawColorToken('drop-shadow-emphasized-default-color')})`, - elevated: `drop-shadow(${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${rawColorToken('drop-shadow-elevated-color')})`, - dragged: `drop-shadow${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${rawColorToken('drop-shadow-dragged-color')}`, + // layer order is reversed for filter property. filters are applied in the order they are specified. + 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 01f27c49c75..690a50f592b 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'; @@ -168,3 +169,12 @@ export function fontSizeToken(name: keyof typeof tokens): number { return index; } + +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"