chore: Update tokens to use multi-layer drop shadows (#7965)

* chore: Test S2 multi-layer drop shadows

* fix filter order

* Update tokens

Author: devongovett

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",

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'
   },

packages/@react-spectrum/s2/src/Menu.tsx

@@ -582,7 +582,7 @@ function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element {
   return (
     <AriaSubmenuTrigger {...props}>
       {props.children[0]}
-      <PopoverContext.Provider value={{hideArrow: true, offset: -2, crossOffset: -9, placement: 'end top'}}>
+      <PopoverContext.Provider value={{hideArrow: true, offset: -2, crossOffset: -8, placement: 'end top'}}>
         {props.children[1]}
       </PopoverContext.Provider>
     </AriaSubmenuTrigger>

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'
   }
 });

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),

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})`;
+  });
+}

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",

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"