@react-spectrum/s2 1.3.0 → 1.4.0

package/style/tokens.ts

@@ -12,7 +12,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
+// eslint-disable-next-line rsp-rules/imports
 import * as originalTokens from '@adobe/spectrum-tokens/dist/json/variables.json';
 
 // This forces TSC to inline the token keys instead of leaving a dependency on it.
@@ -28,14 +28,16 @@ export function getToken(name: TokenName): string {
 }
 
 export interface ColorToken {
-  type: 'color',
-  light: string,
-  dark: string,
-  forcedColors?: string
+  type: 'color';
+  light: string;
+  dark: string;
+  forcedColors?: string;
 }
 
 export function colorToken(name: TokenName): ColorToken | ColorRef {
-  let token = tokens[name] as typeof tokens['gray-25'] | typeof tokens['neutral-content-color-default'];
+  let token = tokens[name] as
+    | (typeof tokens)['gray-25']
+    | (typeof tokens)['neutral-content-color-default'];
   if ('ref' in token) {
     return {
       type: 'ref',
@@ -52,19 +54,19 @@ export function colorToken(name: TokenName): ColorToken | ColorRef {
 }
 
 export function rawColorToken(name: TokenName): string {
-  let token = tokens[name] as typeof tokens['gray-25'];
+  let token = tokens[name] as (typeof tokens)['gray-25'];
   return `light-dark(${token.sets.light.value}, ${token.sets.dark.value})`;
 }
 
 export interface ColorRef {
-  type: 'ref',
-  light: string,
-  dark: string,
-  forcedColors?: string
+  type: 'ref';
+  light: string;
+  dark: string;
+  forcedColors?: string;
 }
 
 export function weirdColorToken(name: TokenName): ColorRef {
-  let token = tokens[name] as typeof tokens['accent-background-color-default'];
+  let token = tokens[name] as (typeof tokens)['accent-background-color-default'];
   return {
     type: 'ref',
     light: token.sets.light.ref.slice(1, -1).replace('-color', ''),
@@ -74,7 +76,9 @@ export function weirdColorToken(name: TokenName): ColorRef {
 
 type ReplaceColor<S extends string> = S extends `${infer S}-color-${infer N}` ? `${S}-${N}` : S;
 
-export function colorScale<S extends string>(scale: S): Record<ReplaceColor<Extract<TokenName, `${S}-${number}`>>, ReturnType<typeof colorToken>> {
+export function colorScale<S extends string>(
+  scale: S
+): Record<ReplaceColor<Extract<TokenName, `${S}-${number}`>>, ReturnType<typeof colorToken>> {
   let res: any = {};
   let re = new RegExp(`^${scale}-\\d+$`);
   for (let token in tokens) {
@@ -85,7 +89,9 @@ export function colorScale<S extends string>(scale: S): Record<ReplaceColor<Extr
   return res;
 }
 
-export function simpleColorScale<S extends string>(scale: S): Record<Extract<TokenName, `${S}-${number}`>, string> {
+export function simpleColorScale<S extends string>(
+  scale: S
+): Record<Extract<TokenName, `${S}-${number}`>, string> {
   let res: any = {};
   let re = new RegExp(`^${scale}-\\d+$`);
   for (let token in tokens) {
@@ -101,27 +107,27 @@ function extractOpacity(color: string): number {
 }
 
 /**
- * This swaps between white or black based on the background color.
- * After testing against all RGB background colors, 49.44 minimizes the number of WCAG 4.5:1 contrast failures.
+ * This swaps between white or black based on the background color. After testing against all RGB
+ * background colors, 49.44 minimizes the number of WCAG 4.5:1 contrast failures.
  */
 export function autoStaticColor(bg = 'var(--s2-container-bg)', alpha = 1): string {
   return `lch(from ${bg} calc((49.44 - l) * infinity) 0 0 / ${alpha})`;
 }
 
 interface ColorScaleValues {
-    'transparent-overlay-25': string,
-    'transparent-overlay-50': string,
-    'transparent-overlay-75': string,
-    'transparent-overlay-100': string,
-    'transparent-overlay-200': string,
-    'transparent-overlay-300': string,
-    'transparent-overlay-400': string,
-    'transparent-overlay-500': string,
-    'transparent-overlay-600': string,
-    'transparent-overlay-700': string,
-    'transparent-overlay-800': string,
-    'transparent-overlay-900': string,
-    'transparent-overlay-1000': string
+  'transparent-overlay-25': string;
+  'transparent-overlay-50': string;
+  'transparent-overlay-75': string;
+  'transparent-overlay-100': string;
+  'transparent-overlay-200': string;
+  'transparent-overlay-300': string;
+  'transparent-overlay-400': string;
+  'transparent-overlay-500': string;
+  'transparent-overlay-600': string;
+  'transparent-overlay-700': string;
+  'transparent-overlay-800': string;
+  'transparent-overlay-900': string;
+  'transparent-overlay-1000': string;
 }
 
 export function generateOverlayColorScale(bg = 'var(--s2-container-bg)'): ColorScaleValues {
@@ -129,16 +135,46 @@ export function generateOverlayColorScale(bg = 'var(--s2-container-bg)'): ColorS
     'transparent-overlay-25': autoStaticColor(bg, extractOpacity(getToken('transparent-white-25'))),
     'transparent-overlay-50': autoStaticColor(bg, extractOpacity(getToken('transparent-white-50'))),
     'transparent-overlay-75': autoStaticColor(bg, extractOpacity(getToken('transparent-white-75'))),
-    'transparent-overlay-100': autoStaticColor(bg, extractOpacity(getToken('transparent-white-100'))),
-    'transparent-overlay-200': autoStaticColor(bg, extractOpacity(getToken('transparent-white-200'))),
-    'transparent-overlay-300': autoStaticColor(bg, extractOpacity(getToken('transparent-white-300'))),
-    'transparent-overlay-400': autoStaticColor(bg, extractOpacity(getToken('transparent-white-400'))),
-    'transparent-overlay-500': autoStaticColor(bg, extractOpacity(getToken('transparent-white-500'))),
-    'transparent-overlay-600': autoStaticColor(bg, extractOpacity(getToken('transparent-white-600'))),
-    'transparent-overlay-700': autoStaticColor(bg, extractOpacity(getToken('transparent-white-700'))),
-    'transparent-overlay-800': autoStaticColor(bg, extractOpacity(getToken('transparent-white-800'))),
-    'transparent-overlay-900': autoStaticColor(bg, extractOpacity(getToken('transparent-white-900'))),
-    'transparent-overlay-1000': autoStaticColor(bg, extractOpacity(getToken('transparent-white-1000')))
+    'transparent-overlay-100': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-100'))
+    ),
+    'transparent-overlay-200': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-200'))
+    ),
+    'transparent-overlay-300': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-300'))
+    ),
+    'transparent-overlay-400': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-400'))
+    ),
+    'transparent-overlay-500': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-500'))
+    ),
+    'transparent-overlay-600': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-600'))
+    ),
+    'transparent-overlay-700': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-700'))
+    ),
+    'transparent-overlay-800': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-800'))
+    ),
+    'transparent-overlay-900': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-900'))
+    ),
+    'transparent-overlay-1000': autoStaticColor(
+      bg,
+      extractOpacity(getToken('transparent-white-1000'))
+    )
   };
 }
 
@@ -165,7 +201,7 @@ const indexes = {
 
 /** Returns the index of a font token relative to font-size-100 (which is index 0). */
 export function fontSizeToken(name: TokenName): number {
-  let token = tokens[name] as typeof tokens['font-size-100'] | typeof tokens['heading-size-m'];
+  let token = tokens[name] as (typeof tokens)['font-size-100'] | (typeof tokens)['heading-size-m'];
   if ('ref' in token) {
     name = token.ref.slice(1, -1) as TokenName;
   }
@@ -178,7 +214,9 @@ export function fontSizeToken(name: TokenName): number {
   return index;
 }
 
-export function shadowToken(name: 'drop-shadow-emphasized' | 'drop-shadow-elevated' | 'drop-shadow-dragged'): string[] {
+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.

package/style/types.ts

@@ -17,32 +17,35 @@ export type CustomValue = string | number | boolean;
 export type Value = CustomValue | readonly any[];
 export type PropertyValueDefinition<T> = T | {[condition: string]: PropertyValueDefinition<T>};
 export type PropertyValueMap<T extends CSSValue = CSSValue> = {
-  [name in T]: PropertyValueDefinition<CSSValue>
+  [name in T]: PropertyValueDefinition<CSSValue>;
 };
 
 export type CustomProperty = `--${string}`;
 export type CSSProperties = CSS.Properties & {
-  [k: CustomProperty]: CSSValue
+  [k: CustomProperty]: CSSValue;
 };
 
 export interface Property<T> {
-  cssProperties: string[],
-  toCSSValue(value: T): PropertyValueDefinition<Value>,
-  toCSSProperties(customProperty: string | null, value: PropertyValueDefinition<Value>): PropertyValueDefinition<[CSSProperties]>
+  cssProperties: string[];
+  toCSSValue(value: T): PropertyValueDefinition<Value>;
+  toCSSProperties(
+    customProperty: string | null,
+    value: PropertyValueDefinition<Value>
+  ): PropertyValueDefinition<[CSSProperties]>;
 }
 
 export type ShorthandProperty<T> = (value: T) => {[name: string]: Value};
 
 export interface Theme {
   properties: {
-    [name: string]: PropertyValueMap | Property<any> | string[]
-  },
+    [name: string]: PropertyValueMap | Property<any> | string[];
+  };
   conditions: {
-    [name: string]: string | string[]
-  },
+    [name: string]: string | string[];
+  };
   shorthands: {
-    [name: string]: string[] | ShorthandProperty<any>
-  }
+    [name: string]: string[] | ShorthandProperty<any>;
+  };
 }
 
 type PropertyValue<T> =
@@ -54,17 +57,42 @@ type PropertyValue<T> =
         ? T[number]
         : never;
 
-type FunctionName = 'var' | 'calc' | 'min' | 'max' | 'clamp' | 'round' | 'mod' | 'rem' | 'sin' | 'cos' | 'tan' | 'asin' | 'acos' | 'atan' | 'atan2' | 'pow' | 'sqrt' | 'hypot' | 'log' | 'exp' | 'abs' | 'sign';
+type FunctionName =
+  | 'var'
+  | 'calc'
+  | 'min'
+  | 'max'
+  | 'clamp'
+  | 'round'
+  | 'mod'
+  | 'rem'
+  | 'sin'
+  | 'cos'
+  | 'tan'
+  | 'asin'
+  | 'acos'
+  | 'atan'
+  | 'atan2'
+  | 'pow'
+  | 'sqrt'
+  | 'hypot'
+  | 'log'
+  | 'exp'
+  | 'abs'
+  | 'sign';
 type CSSWideKeyword = 'inherit' | 'initial' | 'unset';
-export type ArbitraryValue = CustomProperty | `[${string}]` | `${FunctionName}(${string})` | CSSWideKeyword;
+export type ArbitraryValue =
+  | CustomProperty
+  | `[${string}]`
+  | `${FunctionName}(${string})`
+  | CSSWideKeyword;
 type PropertyValue2<T> = PropertyValue<T> | ArbitraryValue;
 type Merge<T> = T extends any ? T : never;
-type ShorthandValue<T extends Theme, P> = 
-  P extends string[]
-    ? PropertyValue2<T['properties'][P[0]]>
-    : P extends ShorthandProperty<infer V>
-      ? V
-      : never;
+type ShorthandValue<T extends Theme, P> = P extends string[]
+  ? PropertyValue2<T['properties'][P[0]]>
+  : P extends ShorthandProperty<infer V>
+    ? V
+    : never;
 
 // Pre-compute value types for all theme properties ahead of time.
 export type ThemeProperties<T extends Theme> = Merge<{
@@ -72,62 +100,87 @@ export type ThemeProperties<T extends Theme> = Merge<{
     ? Merge<PropertyValue2<T['properties'][K]>>
     : K extends keyof T['shorthands']
       ? Merge<ShorthandValue<T, T['shorthands'][K]>>
-      : never
+      : never;
 }>;
 
-type Style<T extends ThemeProperties<Theme>, C extends string, R extends RenderProps<string>> =
-  StaticProperties<T, C, R> & CustomProperties<T, C, R>;
+type Style<
+  T extends ThemeProperties<Theme>,
+  C extends string,
+  R extends RenderProps<string>
+> = StaticProperties<T, C, R> & CustomProperties<T, C, R>;
 
-type StaticProperties<T extends ThemeProperties<Theme>, C extends string, R extends RenderProps<string>> = {
-  [Name in keyof T]?: StyleValue<T[Name], C, R>
+type StaticProperties<
+  T extends ThemeProperties<Theme>,
+  C extends string,
+  R extends RenderProps<string>
+> = {
+  [Name in keyof T]?: StyleValue<T[Name], C, R>;
 };
 
-type CustomProperties<T extends ThemeProperties<Theme>, C extends string, R extends RenderProps<string>> = {
-  [key: CustomProperty]: CustomPropertyValue<T, keyof T, C, R>
+type CustomProperties<
+  T extends ThemeProperties<Theme>,
+  C extends string,
+  R extends RenderProps<string>
+> = {
+  [key: CustomProperty]: CustomPropertyValue<T, keyof T, C, R>;
 };
 
 // Infer the value type of custom property values from the `type` key, which references a theme property.
-type CustomPropertyValue<T extends ThemeProperties<Theme>, P extends keyof T, C extends string, R extends RenderProps<string>> =
-  P extends any
-    ? {type: P, value: StyleValue<T[P], C, R>}
-    : never;
+type CustomPropertyValue<
+  T extends ThemeProperties<Theme>,
+  P extends keyof T,
+  C extends string,
+  R extends RenderProps<string>
+> = P extends any ? {type: P; value: StyleValue<T[P], C, R>} : never;
 
 export type RenderProps<K extends string> = {
-  [key in K]: any
+  [key in K]: any;
 };
 
-export type StyleValue<V extends Value, C extends string, R extends RenderProps<string>> = V | Conditional<V, C, R>;
+export type StyleValue<V extends Value, C extends string, R extends RenderProps<string>> =
+  | V
+  | Conditional<V, C, R>;
 export type Condition<T extends Theme> = 'default' | Extract<keyof T['conditions'], string>;
-type Conditional<V extends Value, C extends string, R extends RenderProps<string>> =
-  CSSConditions<V, C, R> & RuntimeConditions<V, C, R>
+type Conditional<V extends Value, C extends string, R extends RenderProps<string>> = CSSConditions<
+  V,
+  C,
+  R
+> &
+  RuntimeConditions<V, C, R>;
 
 type ArbitraryCondition = `:${string}` | `@${string}`;
 type CSSConditions<V extends Value, C extends string, R extends RenderProps<string>> = {
-  [name in C]?: StyleValue<V, C, R>
+  [name in C]?: StyleValue<V, C, R>;
 };
 
 // If render props are unknown, allow any custom conditions to be inferred.
 // Unfortunately this breaks "may only specify known properties" errors.
-type RuntimeConditions<V extends Value, C extends string, R extends RenderProps<string>> =
-  [R] extends [never]
-    ? UnknownConditions<V, C>
-    : RenderPropConditions<V, C, R>;
+type RuntimeConditions<V extends Value, C extends string, R extends RenderProps<string>> = [
+  R
+] extends [never]
+  ? UnknownConditions<V, C>
+  : RenderPropConditions<V, C, R>;
 
 type UnknownConditions<V extends Value, C extends string> = {
-  [name: string]: StyleValue<V, C, never> | VariantMap<string, V, C, never>
+  [name: string]: StyleValue<V, C, never> | VariantMap<string, V, C, never>;
 };
 
 type BooleanConditionName = `is${Capitalize<string>}` | `allows${Capitalize<string>}`;
 type RenderPropConditions<V extends Value, C extends string, R extends RenderProps<string>> = {
-  [K in keyof R]?: K extends BooleanConditionName ? StyleValue<V, C, R> : VariantMap<R[K], V, C, R>
+  [K in keyof R]?: K extends BooleanConditionName ? StyleValue<V, C, R> : VariantMap<R[K], V, C, R>;
 };
 
 type Values<T, K extends keyof T = keyof T> = {
-  [k in K]: T[k]
+  [k in K]: T[k];
 }[K];
 
-export type VariantMap<K extends CSSValue, V extends Value, C extends string, R extends RenderProps<string>> = {
-  [k in K]?: StyleValue<V, C, R>
+export type VariantMap<
+  K extends CSSValue,
+  V extends Value,
+  C extends string,
+  R extends RenderProps<string>
+> = {
+  [k in K]?: StyleValue<V, C, R>;
 };
 
 // These types are used to recursively extract all runtime conditions/variants in case an
@@ -135,32 +188,37 @@ export type VariantMap<K extends CSSValue, V extends Value, C extends string, R
 // to automatically accept the correct arguments based on the style definition.
 type ExtractConditionalValue<C extends keyof any, V> = V extends Value
   ? never
-  // Add the keys from this level for boolean conditions not in the theme.
-  : RuntimeConditionObject<Extract<keyof V, BooleanConditionName>, boolean>
-    // Add variant values for non-boolean named keys.
-    | Variants<V, Exclude<keyof V, C | BooleanConditionName>>
-    // Recursively include conditions from the next level.
-    | ExtractConditionalValue<C,
-      | Values<V, Extract<keyof V, C | BooleanConditionName>>
-      // And skip over variants to get to the values.
-      | Values<Values<V, Exclude<keyof V, C | BooleanConditionName>>>
-    >;
-
-type RuntimeConditionObject<K, V> = K extends keyof any ?  { [P in K]?: V } : never;
-
-type Variants<T, K extends keyof T> = K extends any ? {
-  [k in K]?: keyof T[k]
-} : never;
+  :
+      // Add the keys from this level for boolean conditions not in the theme.
+      | RuntimeConditionObject<Extract<keyof V, BooleanConditionName>, boolean>
+      // Add variant values for non-boolean named keys.
+      | Variants<V, Exclude<keyof V, C | BooleanConditionName>>
+      // Recursively include conditions from the next level.
+      | ExtractConditionalValue<
+          C,
+          | Values<V, Extract<keyof V, C | BooleanConditionName>>
+          // And skip over variants to get to the values.
+          | Values<Values<V, Exclude<keyof V, C | BooleanConditionName>>>
+        >;
+
+type RuntimeConditionObject<K, V> = K extends keyof any ? {[P in K]?: V} : never;
+
+type Variants<T, K extends keyof T> = K extends any
+  ? {
+      [k in K]?: keyof T[k];
+    }
+  : never;
 
 type InferCustomPropertyValue<T> = T extends {value: infer V} ? V : never;
 
 // https://stackoverflow.com/questions/49401866/all-possible-keys-of-an-union-type
-type KeysOfUnion<T> = T extends T ? keyof T: never;
-type KeyValue<T, K extends KeysOfUnion<T>> =  T extends {[k in K]?: any} ? T[K] : never;
-type MergeUnion<T> = { [K in KeysOfUnion<T>]: KeyValue<T, K> };
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+type KeyValue<T, K extends KeysOfUnion<T>> = T extends {[k in K]?: any} ? T[K] : never;
+type MergeUnion<T> = {[K in KeysOfUnion<T>]: KeyValue<T, K>};
 
 type RuntimeConditionsObject<C extends keyof any, S extends Style<any, any, any>> = MergeUnion<
-  ExtractConditionalValue<C,
+  ExtractConditionalValue<
+    C,
     | Values<S, Exclude<keyof S, CustomProperty>>
     // Skip top-level object for custom properties and go straight to value.
     | InferCustomPropertyValue<Values<S, Extract<keyof S, CustomProperty>>>
@@ -170,15 +228,33 @@ type RuntimeConditionsObject<C extends keyof any, S extends Style<any, any, any>
 // Return an intersection between string and the used style props so we can prevent passing certain properties to components.
 export type StyleString<P = string> = string & {properties: P};
 type Keys<R> = [R] extends [never] ? never : keyof R;
-export type RuntimeStyleFunction<S extends string, R> = Keys<R> extends never ? () => StyleString<S> : (props: R) => StyleString<S>;
+export type RuntimeStyleFunction<S extends string, R> =
+  Keys<R> extends never ? () => StyleString<S> : (props: R) => StyleString<S>;
 
 // If a render prop type was provided, use that so that we get autocomplete for conditions.
 // Otherwise, fall back to inferring the render props from the style definition itself.
-type InferProps<R, C extends keyof any, S extends Style<any, any, any>> = [R] extends [never] ? AllowOthers<RuntimeConditionsObject<C, S>> : R;
+type InferProps<R, C extends keyof any, S extends Style<any, any, any>> = [R] extends [never]
+  ? AllowOthers<RuntimeConditionsObject<C, S>>
+  : R;
 type AllowOthers<R> = Keys<R> extends never ? never : R | {[x: string]: any};
-type StyleFunctionResult<S, R> = Keys<R> extends never ? StyleString<S> : (props: R) => StyleString<S>;
-type StyleFunctionResultWithOverrides<S, R> = (props: Keys<R> extends never ? null : R, overrides?: StyleString<string> | null) => StyleString<S>
+type StyleFunctionResult<S, R> =
+  Keys<R> extends never ? StyleString<S> : (props: R) => StyleString<S>;
+type StyleFunctionResultWithOverrides<S, R> = (
+  props: Keys<R> extends never ? null : R,
+  overrides?: StyleString<string> | null
+) => StyleString<S>;
 export type StyleFunction<T extends ThemeProperties<Theme>, C extends string> = {
-  <R extends RenderProps<string> = never, S extends Style<T, C, R> = Style<T, C | ArbitraryCondition, R>>(style: S): StyleFunctionResult<keyof S, InferProps<R, C | ArbitraryCondition, S>>,
-  <R extends RenderProps<string> = never, S extends Style<T, C, R> = Style<T, C | ArbitraryCondition, R>>(style: S, allowedProperties: readonly string[]): StyleFunctionResultWithOverrides<keyof S, InferProps<R, C | ArbitraryCondition, S>>
+  <
+    R extends RenderProps<string> = never,
+    S extends Style<T, C, R> = Style<T, C | ArbitraryCondition, R>
+  >(
+    style: S
+  ): StyleFunctionResult<keyof S, InferProps<R, C | ArbitraryCondition, S>>;
+  <
+    R extends RenderProps<string> = never,
+    S extends Style<T, C, R> = Style<T, C | ArbitraryCondition, R>
+  >(
+    style: S,
+    allowedProperties: readonly string[]
+  ): StyleFunctionResultWithOverrides<keyof S, InferProps<R, C | ArbitraryCondition, S>>;
 };