@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250430

package/style/spectrum-theme.ts

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {ArbitraryProperty, Color, ColorProperty, createTheme, ExpandedProperty, MappedProperty, parseArbitraryValue, SizingProperty} from './style-macro';
 import {ArbitraryValue, CSSProperties, CSSValue, PropertyValueMap} from './types';
 import {autoStaticColor, colorScale, colorToken, fontSizeToken, generateOverlayColorScale, getToken, 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';
 
 interface MacroContext {
@@ -291,8 +291,8 @@ const width = {
   screen: '100vw'
 };
 
-function createSpectrumSizingProperty<T extends CSSValue>(values: PropertyValueMap<T>) {
-  return createSizingProperty(values, px => `calc(${pxToRem(px)} * var(--s2-scale))`);
+function createSpectrumSizingProperty<T extends CSSValue>(property: string, values: PropertyValueMap<T>) {
+  return new SizingProperty(property, values, px => `calc(${pxToRem(px)} * var(--s2-scale))`);
 }
 
 const margin = {
@@ -311,7 +311,7 @@ const translate = {
   ...baseSpacing,
   ...negativeSpacing,
   full: '100%'
-};
+} as const;
 
 const borderWidth = {
   0: '0px',
@@ -349,8 +349,8 @@ let gridTrackSize = (value: GridTrackSize) => {
 const transitionProperty = {
   // var(--gp) is generated by the backgroundImage property when setting a gradient.
   // It includes a list of all of the custom properties used for each color stop.
-  default: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
-  colors: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke',
+  default: 'color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
+  colors: 'color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke',
   opacity: 'opacity',
   shadow: 'box-shadow',
   transform: 'transform, translate, scale, rotate',
@@ -368,9 +368,7 @@ const timingFunction = {
 };
 
 // TODO: do these need tokens or are arbitrary values ok?
-let durationProperty = createArbitraryProperty((value: number | string, property) => ({[property]: typeof value === 'number' ? value + 'ms' : value}));
-
-// const colorWithAlpha = createColorProperty(color);
+let durationValue = (value: number | string) => typeof value === 'number' ? value + 'ms' : value;
 
 const fontWeightBase = {
   light: '300',
@@ -382,6 +380,22 @@ const fontWeightBase = {
   black: '900'
 } as const;
 
+const fontWeight = {
+  ...fontWeightBase,
+  heading: {
+    default: fontWeightBase[getToken('heading-sans-serif-font-weight') as keyof typeof fontWeightBase],
+    ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('heading-cjk-font-weight') as keyof typeof fontWeightBase]
+  },
+  title: {
+    default: fontWeightBase[getToken('title-sans-serif-font-weight') as keyof typeof fontWeightBase],
+    ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('title-cjk-font-weight') as keyof typeof fontWeightBase]
+  },
+  detail: {
+    default: fontWeightBase[getToken('detail-sans-serif-font-weight') as keyof typeof fontWeightBase],
+    ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('detail-cjk-font-weight') as keyof typeof fontWeightBase]
+  }
+} as const;
+
 const i18nFonts = {
   ':lang(ar)': 'myriad-arabic, ui-sans-serif, system-ui, sans-serif',
   ':lang(he)': 'myriad-hebrew, ui-sans-serif, system-ui, sans-serif',
@@ -455,7 +469,7 @@ const fontSize = {
 export const style = createTheme({
   properties: {
     // colors
-    color: createColorProperty({
+    color: new ColorProperty('color', {
       ...color,
       accent: {
         default: colorToken('accent-content-color-default'),
@@ -495,7 +509,7 @@ export const style = createTheme({
       code: colorToken('code-color'),
       auto: autoStaticColor('self(backgroundColor, var(--s2-container-bg))')
     }),
-    backgroundColor: createColorProperty({
+    backgroundColor: new ColorProperty('backgroundColor', {
       ...color,
       accent: {
         default: weirdColorToken('accent-background-color-default'),
@@ -585,7 +599,7 @@ export const style = createTheme({
       pasteboard: weirdColorToken('background-pasteboard-color'),
       elevated: weirdColorToken('background-elevated-color')
     }),
-    borderColor: createColorProperty({
+    borderColor: new ColorProperty('borderColor', {
       ...color,
       negative: {
         default: colorToken('negative-border-color-default'),
@@ -596,17 +610,14 @@ export const style = createTheme({
       disabled: colorToken('disabled-border-color')
         // forcedColors: 'GrayText'
     }),
-    outlineColor: createColorProperty({
+    outlineColor: new ColorProperty('outlineColor', {
       ...color,
       'focus-ring': {
         default: colorToken('focus-indicator-color'),
         forcedColors: 'Highlight'
       }
     }),
-    // textDecorationColor: colorWithAlpha,
-    // accentColor: colorWithAlpha,
-    // caretColor: colorWithAlpha,
-    fill: createColorProperty({
+    fill: new ColorProperty('fill', {
       none: 'none',
       currentColor: 'currentColor',
       accent: weirdColorToken('accent-visual-color'),
@@ -636,7 +647,7 @@ export const style = createTheme({
       silver: weirdColorToken('silver-visual-color'),
       ...color
     }),
-    stroke: createColorProperty({
+    stroke: new ColorProperty('stroke', {
       none: 'none',
       currentColor: 'currentColor',
       ...color
@@ -651,22 +662,22 @@ export const style = createTheme({
     },
     rowGap: spacing,
     columnGap: spacing,
-    height: createSpectrumSizingProperty(height),
-    width: createSpectrumSizingProperty(width),
-    containIntrinsicWidth: createSpectrumSizingProperty(width),
-    containIntrinsicHeight: createSpectrumSizingProperty(height),
-    minHeight: createSpectrumSizingProperty(height),
-    maxHeight: createSpectrumSizingProperty({
+    height: createSpectrumSizingProperty('height', height),
+    width: createSpectrumSizingProperty('width', width),
+    containIntrinsicWidth: createSpectrumSizingProperty('containIntrinsicWidth', width),
+    containIntrinsicHeight: createSpectrumSizingProperty('containIntrinsicHeight', height),
+    minHeight: createSpectrumSizingProperty('minHeight', height),
+    maxHeight: createSpectrumSizingProperty('maxHeight', {
       ...height,
       none: 'none'
     }),
-    minWidth: createSpectrumSizingProperty(width),
-    maxWidth: createSpectrumSizingProperty({
+    minWidth: createSpectrumSizingProperty('minWidth', width),
+    maxWidth: createSpectrumSizingProperty('maxWidth', {
       ...width,
       none: 'none'
     }),
-    borderStartWidth: createRenamedProperty('borderInlineStartWidth', borderWidth),
-    borderEndWidth: createRenamedProperty('borderInlineEndWidth', borderWidth),
+    borderStartWidth: new MappedProperty('borderInlineStartWidth', borderWidth),
+    borderEndWidth: new MappedProperty('borderInlineEndWidth', borderWidth),
     borderTopWidth: borderWidth,
     borderBottomWidth: borderWidth,
     borderStyle: ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none'] as const,
@@ -675,44 +686,44 @@ export const style = createTheme({
       1: '1',
       2: '2'
     },
-    marginStart: createRenamedProperty('marginInlineStart', margin),
-    marginEnd: createRenamedProperty('marginInlineEnd', margin),
+    marginStart: new MappedProperty('marginInlineStart', margin),
+    marginEnd: new MappedProperty('marginInlineEnd', margin),
     marginTop: margin,
     marginBottom: margin,
-    paddingStart: createRenamedProperty('paddingInlineStart', spacing),
-    paddingEnd: createRenamedProperty('paddingInlineEnd', spacing),
+    paddingStart: new MappedProperty('paddingInlineStart', spacing),
+    paddingEnd: new MappedProperty('paddingInlineEnd', spacing),
     paddingTop: spacing,
     paddingBottom: spacing,
-    scrollMarginStart: createRenamedProperty('scrollMarginInlineStart', baseSpacing),
-    scrollMarginEnd: createRenamedProperty('scrollMarginInlineEnd', baseSpacing),
+    scrollMarginStart: new MappedProperty('scrollMarginInlineStart', baseSpacing),
+    scrollMarginEnd: new MappedProperty('scrollMarginInlineEnd', baseSpacing),
     scrollMarginTop: baseSpacing,
     scrollMarginBottom: baseSpacing,
-    scrollPaddingStart: createRenamedProperty('scrollPaddingInlineStart', baseSpacing),
-    scrollPaddingEnd: createRenamedProperty('scrollPaddingInlineEnd', baseSpacing),
+    scrollPaddingStart: new MappedProperty('scrollPaddingInlineStart', baseSpacing),
+    scrollPaddingEnd: new MappedProperty('scrollPaddingInlineEnd', baseSpacing),
     scrollPaddingTop: baseSpacing,
     scrollPaddingBottom: baseSpacing,
     textIndent: baseSpacing,
-    translateX: createMappedProperty(value => ({
-      '--translateX': value,
+    translateX: new ExpandedProperty<keyof typeof translate>(['--translateX', 'translate'], value => ({
+      '--translateX': String(value),
       translate: 'var(--translateX, 0) var(--translateY, 0)'
     }), translate),
-    translateY: createMappedProperty(value => ({
-      '--translateY': value,
+    translateY: new ExpandedProperty<keyof typeof translate>(['--translateY', 'translate'], value => ({
+      '--translateY': String(value),
       translate: 'var(--translateX, 0) var(--translateY, 0)'
     }), translate),
-    rotate: createArbitraryProperty((value: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`, property) => ({[property]: typeof value === 'number' ? `${value}deg` : value})),
-    scaleX: createArbitraryProperty<number>(value => ({
-      '--scaleX': value,
+    rotate: new ArbitraryProperty('rotate', (value: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`) => typeof value === 'number' ? `${value}deg` : value),
+    scaleX: new ExpandedProperty<number>(['--scaleX', 'scale'], value => ({
+      '--scaleX': String(value),
       scale: 'var(--scaleX, 1) var(--scaleY, 1)'
     })),
-    scaleY: createArbitraryProperty<number>(value => ({
-      '--scaleY': value,
+    scaleY: new ExpandedProperty<number>(['--scaleY', 'scale'], value => ({
+      '--scaleY': String(value),
       scale: 'var(--scaleX, 1) var(--scaleY, 1)'
     })),
-    transform: createArbitraryProperty<string>(),
+    transform: new ArbitraryProperty<string>('transform'),
     position: ['absolute', 'fixed', 'relative', 'sticky', 'static'] as const,
-    insetStart: createRenamedProperty('insetInlineStart', inset),
-    insetEnd: createRenamedProperty('insetInlineEnd', inset),
+    insetStart: new MappedProperty('insetInlineStart', inset),
+    insetEnd: new MappedProperty('insetInlineEnd', inset),
     top: inset,
     left: inset,
     bottom: inset,
@@ -736,32 +747,14 @@ export const style = createTheme({
       code: 'source-code-pro, "Source Code Pro", Monaco, monospace'
     },
     fontSize,
-    fontWeight: createMappedProperty((value, property) => {
-      if (property === 'fontWeight') {
-        return {
-          // Set font-variation-settings in addition to font-weight to work around typekit issue.
-          fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`,
-          fontWeight: value as any,
-          fontSynthesisWeight: 'none'
-        };
-      }
-
-      return {[property]: value};
-    }, {
-      ...fontWeightBase,
-      heading: {
-        default: fontWeightBase[getToken('heading-sans-serif-font-weight') as keyof typeof fontWeightBase],
-        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('heading-cjk-font-weight') as keyof typeof fontWeightBase]
-      },
-      title: {
-        default: fontWeightBase[getToken('title-sans-serif-font-weight') as keyof typeof fontWeightBase],
-        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('title-cjk-font-weight') as keyof typeof fontWeightBase]
-      },
-      detail: {
-        default: fontWeightBase[getToken('detail-sans-serif-font-weight') as keyof typeof fontWeightBase],
-        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('detail-cjk-font-weight') as keyof typeof fontWeightBase]
-      }
-    }),
+    fontWeight: new ExpandedProperty<keyof typeof fontWeight>(['fontWeight', 'fontVariationSettings', 'fontSynthesisWeight'], (value) => {
+      return {
+        // Set font-variation-settings in addition to font-weight to work around typekit issue.
+        fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`,
+        fontWeight: value as any,
+        fontSynthesisWeight: 'none'
+      };
+    }, fontWeight),
     lineHeight: {
       // See https://spectrum.corp.adobe.com/page/typography/#Line-height
       ui: {
@@ -794,16 +787,16 @@ export const style = createTheme({
     textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'] as const,
     textAlign: ['start', 'center', 'end', 'justify'] as const,
     verticalAlign: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'] as const,
-    textDecoration: createMappedProperty((value) => ({
+    textDecoration: new ExpandedProperty<'underline' | 'overline' | 'line-through' | 'none'>(['textDecoration', 'textUnderlineOffset'], (value) => ({
       textDecoration: value === 'none' ? 'none' : `${value} ${getToken('text-underline-thickness')}`,
       textUnderlineOffset: value === 'underline' ? getToken('text-underline-gap') : undefined
-    }), ['underline', 'overline', 'line-through', 'none'] as const),
+    })),
     textOverflow: ['ellipsis', 'clip'] as const,
-    lineClamp: createArbitraryProperty((value: number) => ({
+    lineClamp: new ExpandedProperty<number>(['overflow', 'display', '-webkit-box-orient', '-webkit-line-clamp'], (value) => ({
       overflow: 'hidden',
       display: '-webkit-box',
       '-webkit-box-orient': 'vertical',
-      '-webkit-line-clamp': value
+      '-webkit-line-clamp': String(value)
     })),
     hyphens: ['none', 'manual', 'auto'] as const,
     whiteSpace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] as const,
@@ -824,18 +817,18 @@ export const style = createTheme({
       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'
     },
-    borderTopStartRadius: createRenamedProperty('borderStartStartRadius', radius),
-    borderTopEndRadius: createRenamedProperty('borderStartEndRadius', radius),
-    borderBottomStartRadius: createRenamedProperty('borderEndStartRadius', radius),
-    borderBottomEndRadius: createRenamedProperty('borderEndEndRadius', radius),
+    borderTopStartRadius: new MappedProperty('borderStartStartRadius', radius),
+    borderTopEndRadius: new MappedProperty('borderStartEndRadius', radius),
+    borderBottomStartRadius: new MappedProperty('borderEndStartRadius', radius),
+    borderBottomEndRadius: new MappedProperty('borderEndEndRadius', radius),
     forcedColorAdjust: ['auto', 'none'] as const,
     colorScheme: ['light', 'dark', 'light dark'] as const,
-    backgroundImage: createArbitraryProperty<string | [LinearGradient]>((value, property) => {
+    backgroundImage: new ExpandedProperty<string | [LinearGradient]>(['backgroundImage', '--g0', '--g1', '--g2', '--gp'], (value) => {
       if (typeof value === 'string') {
-        return {[property]: value};
+        return {backgroundImage: value};
       } else if (Array.isArray(value) && value[0]?.type === 'linear-gradient') {
         let values: CSSProperties = {
-          [property]: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i) => `var(--g${i}) ${stop}%`)})`
+          backgroundImage: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i) => `var(--g${i}) ${stop}%`)})`
         };
 
         // Create a CSS var for each color stop so the gradient can be transitioned.
@@ -862,22 +855,22 @@ export const style = createTheme({
     backgroundOrigin: ['border-box', 'padding-box', 'content-box'] as const,
     backgroundBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'] as const,
     mixBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-darker', 'plus-lighter'] as const,
-    opacity: createArbitraryProperty<number>(),
+    opacity: new ArbitraryProperty<number>('opacity'),
 
     outlineStyle: ['none', 'solid', 'dashed', 'dotted', 'double', 'inset'] as const,
-    outlineOffset: createArbitraryProperty<number>((v, property) => ({[property]: `${v}px`})),
+    outlineOffset: new ArbitraryProperty<number>('outlineOffset', v => `${v}px`),
     outlineWidth: borderWidth,
 
-    transition: createRenamedProperty('transitionProperty', transitionProperty),
-    transitionDelay: durationProperty,
-    transitionDuration: durationProperty,
+    transition: new MappedProperty('transitionProperty', transitionProperty),
+    transitionDelay: new ArbitraryProperty('transitionDelay', durationValue),
+    transitionDuration: new ArbitraryProperty('transitionDuration', durationValue),
     transitionTimingFunction: timingFunction,
-    animation: createArbitraryProperty((value: string, property) => ({[property === 'animation' ? 'animationName' : property]: value})),
-    animationDuration: durationProperty,
-    animationDelay: durationProperty,
+    animation: new ArbitraryProperty<string>('animationName'),
+    animationDuration: new ArbitraryProperty('animationDuration', durationValue),
+    animationDelay: new ArbitraryProperty('animationDelay', durationValue),
     animationDirection: ['normal', 'reverse', 'alternate', 'alternate-reverse'] as const,
     animationFillMode: ['none', 'forwards', 'backwards', 'both'] as const,
-    animationIterationCount: createArbitraryProperty<string>(),
+    animationIterationCount: new ArbitraryProperty<number | string>('animationIterationCount'),
     animationTimingFunction: timingFunction,
 
     // layout
@@ -890,18 +883,18 @@ export const style = createTheme({
     justifySelf: ['auto', 'start', 'end', 'center', 'stretch'] as const,
     flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'] as const,
     flexWrap: ['wrap', 'wrap-reverse', 'nowrap'] as const,
-    flexShrink: createArbitraryProperty<CSS.Property.FlexShrink>(),
-    flexGrow: createArbitraryProperty<CSS.Property.FlexGrow>(),
-    gridColumnStart: createArbitraryProperty<CSS.Property.GridColumnStart>(),
-    gridColumnEnd: createArbitraryProperty<CSS.Property.GridColumnEnd>(),
-    gridRowStart: createArbitraryProperty<CSS.Property.GridRowStart>(),
-    gridRowEnd: createArbitraryProperty<CSS.Property.GridRowEnd>(),
+    flexShrink: new ArbitraryProperty<CSS.Property.FlexShrink>('flexShrink'),
+    flexGrow: new ArbitraryProperty<CSS.Property.FlexGrow>('flexGrow'),
+    gridColumnStart: new ArbitraryProperty<CSS.Property.GridColumnStart>('gridColumnStart'),
+    gridColumnEnd: new ArbitraryProperty<CSS.Property.GridColumnEnd>('gridColumnEnd'),
+    gridRowStart: new ArbitraryProperty<CSS.Property.GridRowStart>('gridRowStart'),
+    gridRowEnd: new ArbitraryProperty<CSS.Property.GridRowEnd>('gridRowEnd'),
     gridAutoFlow: ['row', 'column', 'dense', 'row dense', 'column dense'] as const,
-    gridAutoRows: createArbitraryProperty((value: GridTrackSize, property) => ({[property]: gridTrackSize(value)})),
-    gridAutoColumns: createArbitraryProperty((value: GridTrackSize, property) => ({[property]: gridTrackSize(value)})),
-    gridTemplateColumns: createArbitraryProperty((value: GridTrack, property) => ({[property]: gridTrack(value)})),
-    gridTemplateRows: createArbitraryProperty((value: GridTrack, property) => ({[property]: gridTrack(value)})),
-    gridTemplateAreas: createArbitraryProperty((value: readonly string[], property) => ({[property]: value.map(v => `"${v}"`).join('')})),
+    gridAutoRows: new ArbitraryProperty('gridAutoRows', gridTrackSize),
+    gridAutoColumns: new ArbitraryProperty('gridAutoColumns', gridTrackSize),
+    gridTemplateColumns: new ArbitraryProperty('gridTemplateColumns', gridTrack),
+    gridTemplateRows: new ArbitraryProperty('gridTemplateRows', gridTrack),
+    gridTemplateAreas: new ArbitraryProperty('gridTemplateAreas', (value: readonly string[]) => value.map(v => `"${v}"`).join('')),
     float: ['inline-start', 'inline-end', 'right', 'left', 'none'] as const,
     clear: ['inline-start', 'inline-end', 'left', 'right', 'both', 'none'] as const,
     contain: ['none', 'strict', 'content', 'size', 'inline-size', 'layout', 'style', 'paint'] as const,
@@ -946,7 +939,7 @@ export const style = createTheme({
     overscrollBehaviorX: ['auto', 'contain', 'none'] as const,
     overscrollBehaviorY: ['auto', 'contain', 'none'] as const,
     scrollBehavior: ['auto', 'smooth'] as const,
-    order: createArbitraryProperty<number>(),
+    order: new ArbitraryProperty<number>('order'),
 
     pointerEvents: ['none', 'auto'] as const,
     touchAction: ['auto', 'none', 'pan-x', 'pan-y', 'manipulation', 'pinch-zoom'] as const,
@@ -963,11 +956,9 @@ export const style = createTheme({
     objectFit: ['contain', 'cover', 'fill', 'none', 'scale-down'] as const,
     objectPosition: ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'] as const,
     willChange: ['auto', 'scroll-position', 'contents', 'transform'] as const,
-    zIndex: createArbitraryProperty<number>(),
+    zIndex: new ArbitraryProperty<number>('zIndex'),
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    disableTapHighlight: createArbitraryProperty((_value: true) => ({
-      '-webkit-tap-highlight-color': 'rgba(0,0,0,0)'
-    })),
+    disableTapHighlight: new ArbitraryProperty('-webkit-tap-highlight-color', (_value: true) => 'rgba(0,0,0,0)'),
     unicodeBidi: ['normal', 'embed', 'bidi-override', 'isolate', 'isolate-override', 'plaintext'] as const
   },
   shorthands: {