@react-spectrum/s2
Version:
Spectrum 2 UI components in React
695 lines • 111 kB
TypeScript
import * as CSS from "csstype";
import { MacroContext as _MacroContext1 } from "@parcel/macros";
type CSSValue = string | number;
type CustomValue = string | number | boolean;
type Value = CustomValue | readonly any[];
type PropertyValueDefinition<T> = T | {
[condition: string]: PropertyValueDefinition<T>;
};
type PropertyValueMap<T extends CSSValue = CSSValue> = {
[name in T]: PropertyValueDefinition<string>;
};
type CustomProperty = `--${string}`;
type CSSProperties = CSS.Properties & {
[k: CustomProperty]: CSSValue;
};
interface Property<T> {
cssProperties: string[];
toCSSValue(value: T): PropertyValueDefinition<Value>;
toCSSProperties(customProperty: string | null, value: PropertyValueDefinition<Value>): PropertyValueDefinition<[CSSProperties]>;
}
type ShorthandProperty<T> = (value: T) => {
[name: string]: Value;
};
interface Theme {
properties: {
[name: string]: PropertyValueMap | Property<any> | string[];
};
conditions: {
[name: string]: string;
};
shorthands: {
[name: string]: string[] | ShorthandProperty<any>;
};
}
type PropertyValue<T> = T extends Property<infer P> ? P : T extends PropertyValueMap<infer P> ? P : T extends string[] ? 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 CSSWideKeyword = 'inherit' | 'initial' | 'unset';
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 ThemeProperties<T extends Theme> = Merge<{
[K in keyof T['properties'] | keyof T['shorthands']]: K extends keyof T['properties'] ? Merge<PropertyValue2<T['properties'][K]>> : K extends keyof T['shorthands'] ? Merge<ShorthandValue<T, T['shorthands'][K]>> : never;
}>;
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 CustomProperties<T extends ThemeProperties<Theme>, C extends string, R extends RenderProps<string>> = {
[key: CustomProperty]: CustomPropertyValue<T, keyof T, C, R>;
};
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 RenderProps<K extends string> = {
[key in K]: any;
};
type StyleValue<V extends Value, C extends string, R extends RenderProps<string>> = V | Conditional<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>;
};
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>;
};
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>;
};
type Values<T, K extends keyof T = keyof T> = {
[k in K]: T[k];
}[K];
type VariantMap<K extends CSSValue, V extends Value, C extends string, R extends RenderProps<string>> = {
[k in K]?: StyleValue<V, C, R>;
};
type ExtractConditionalValue<C extends keyof any, V> = V extends Value ? never : RuntimeConditionObject<Extract<keyof V, BooleanConditionName>, boolean> | Variants<V, Exclude<keyof V, C | BooleanConditionName>> | ExtractConditionalValue<C, Values<V, Extract<keyof V, C | BooleanConditionName>> | 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;
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, Values<S, Exclude<keyof S, CustomProperty>> | InferCustomPropertyValue<Values<S, Extract<keyof S, CustomProperty>>>>>;
export type StyleString<P = string> = string & {
properties: P;
};
type Keys<R> = [R] extends [never] ? never : keyof 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 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>>;
};
type Color<C extends string> = C | `${string}/${number}`;
interface ColorToken {
type: 'color';
light: string;
dark: string;
forcedColors?: string;
}
interface ColorRef {
type: 'ref';
light: string;
dark: string;
forcedColors?: string;
}
interface MacroContext {
addAsset(asset: {
type: string;
content: string;
}): void;
}
declare const baseColors: {
Background: string;
ButtonBorder: string;
ButtonFace: string;
ButtonText: string;
Field: string;
Highlight: string;
HighlightText: string;
GrayText: string;
Mark: string;
LinkText: 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;
"transparent-black-25": string;
"transparent-black-50": string;
"transparent-black-75": string;
"transparent-black-100": string;
"transparent-black-200": string;
"transparent-black-300": string;
"transparent-black-400": string;
"transparent-black-500": string;
"transparent-black-600": string;
"transparent-black-700": string;
"transparent-black-800": string;
"transparent-black-900": string;
"transparent-black-1000": string;
"transparent-white-25": string;
"transparent-white-50": string;
"transparent-white-75": string;
"transparent-white-100": string;
"transparent-white-200": string;
"transparent-white-300": string;
"transparent-white-400": string;
"transparent-white-500": string;
"transparent-white-600": string;
"transparent-white-700": string;
"transparent-white-800": string;
"transparent-white-900": string;
"transparent-white-1000": string;
"positive-100": ColorToken | ColorRef;
"positive-200": ColorToken | ColorRef;
"positive-300": ColorToken | ColorRef;
"positive-400": ColorToken | ColorRef;
"positive-500": ColorToken | ColorRef;
"positive-600": ColorToken | ColorRef;
"positive-700": ColorToken | ColorRef;
"positive-800": ColorToken | ColorRef;
"positive-900": ColorToken | ColorRef;
"positive-1000": ColorToken | ColorRef;
"positive-1100": ColorToken | ColorRef;
"positive-1200": ColorToken | ColorRef;
"positive-1300": ColorToken | ColorRef;
"positive-1400": ColorToken | ColorRef;
"positive-1500": ColorToken | ColorRef;
"positive-1600": ColorToken | ColorRef;
"notice-100": ColorToken | ColorRef;
"notice-200": ColorToken | ColorRef;
"notice-300": ColorToken | ColorRef;
"notice-400": ColorToken | ColorRef;
"notice-500": ColorToken | ColorRef;
"notice-600": ColorToken | ColorRef;
"notice-700": ColorToken | ColorRef;
"notice-800": ColorToken | ColorRef;
"notice-900": ColorToken | ColorRef;
"notice-1000": ColorToken | ColorRef;
"notice-1100": ColorToken | ColorRef;
"notice-1200": ColorToken | ColorRef;
"notice-1300": ColorToken | ColorRef;
"notice-1400": ColorToken | ColorRef;
"notice-1500": ColorToken | ColorRef;
"notice-1600": ColorToken | ColorRef;
"negative-100": ColorToken | ColorRef;
"negative-200": ColorToken | ColorRef;
"negative-300": ColorToken | ColorRef;
"negative-400": ColorToken | ColorRef;
"negative-500": ColorToken | ColorRef;
"negative-600": ColorToken | ColorRef;
"negative-700": ColorToken | ColorRef;
"negative-800": ColorToken | ColorRef;
"negative-900": ColorToken | ColorRef;
"negative-1000": ColorToken | ColorRef;
"negative-1100": ColorToken | ColorRef;
"negative-1200": ColorToken | ColorRef;
"negative-1300": ColorToken | ColorRef;
"negative-1400": ColorToken | ColorRef;
"negative-1500": ColorToken | ColorRef;
"negative-1600": ColorToken | ColorRef;
"informative-100": ColorToken | ColorRef;
"informative-200": ColorToken | ColorRef;
"informative-300": ColorToken | ColorRef;
"informative-400": ColorToken | ColorRef;
"informative-500": ColorToken | ColorRef;
"informative-600": ColorToken | ColorRef;
"informative-700": ColorToken | ColorRef;
"informative-800": ColorToken | ColorRef;
"informative-900": ColorToken | ColorRef;
"informative-1000": ColorToken | ColorRef;
"informative-1100": ColorToken | ColorRef;
"informative-1200": ColorToken | ColorRef;
"informative-1300": ColorToken | ColorRef;
"informative-1400": ColorToken | ColorRef;
"informative-1500": ColorToken | ColorRef;
"informative-1600": ColorToken | ColorRef;
"accent-100": ColorToken | ColorRef;
"accent-200": ColorToken | ColorRef;
"accent-300": ColorToken | ColorRef;
"accent-400": ColorToken | ColorRef;
"accent-500": ColorToken | ColorRef;
"accent-600": ColorToken | ColorRef;
"accent-700": ColorToken | ColorRef;
"accent-800": ColorToken | ColorRef;
"accent-900": ColorToken | ColorRef;
"accent-1000": ColorToken | ColorRef;
"accent-1100": ColorToken | ColorRef;
"accent-1200": ColorToken | ColorRef;
"accent-1300": ColorToken | ColorRef;
"accent-1400": ColorToken | ColorRef;
"accent-1500": ColorToken | ColorRef;
"accent-1600": ColorToken | ColorRef;
"cinnamon-100": ColorToken | ColorRef;
"cinnamon-200": ColorToken | ColorRef;
"cinnamon-300": ColorToken | ColorRef;
"cinnamon-400": ColorToken | ColorRef;
"cinnamon-500": ColorToken | ColorRef;
"cinnamon-600": ColorToken | ColorRef;
"cinnamon-700": ColorToken | ColorRef;
"cinnamon-800": ColorToken | ColorRef;
"cinnamon-900": ColorToken | ColorRef;
"cinnamon-1000": ColorToken | ColorRef;
"cinnamon-1100": ColorToken | ColorRef;
"cinnamon-1200": ColorToken | ColorRef;
"cinnamon-1300": ColorToken | ColorRef;
"cinnamon-1400": ColorToken | ColorRef;
"cinnamon-1500": ColorToken | ColorRef;
"cinnamon-1600": ColorToken | ColorRef;
"silver-100": ColorToken | ColorRef;
"silver-200": ColorToken | ColorRef;
"silver-300": ColorToken | ColorRef;
"silver-400": ColorToken | ColorRef;
"silver-500": ColorToken | ColorRef;
"silver-600": ColorToken | ColorRef;
"silver-700": ColorToken | ColorRef;
"silver-800": ColorToken | ColorRef;
"silver-900": ColorToken | ColorRef;
"silver-1000": ColorToken | ColorRef;
"silver-1100": ColorToken | ColorRef;
"silver-1200": ColorToken | ColorRef;
"silver-1300": ColorToken | ColorRef;
"silver-1400": ColorToken | ColorRef;
"silver-1500": ColorToken | ColorRef;
"silver-1600": ColorToken | ColorRef;
"brown-100": ColorToken | ColorRef;
"brown-200": ColorToken | ColorRef;
"brown-300": ColorToken | ColorRef;
"brown-400": ColorToken | ColorRef;
"brown-500": ColorToken | ColorRef;
"brown-600": ColorToken | ColorRef;
"brown-700": ColorToken | ColorRef;
"brown-800": ColorToken | ColorRef;
"brown-900": ColorToken | ColorRef;
"brown-1000": ColorToken | ColorRef;
"brown-1100": ColorToken | ColorRef;
"brown-1200": ColorToken | ColorRef;
"brown-1300": ColorToken | ColorRef;
"brown-1400": ColorToken | ColorRef;
"brown-1500": ColorToken | ColorRef;
"brown-1600": ColorToken | ColorRef;
"turquoise-100": ColorToken | ColorRef;
"turquoise-200": ColorToken | ColorRef;
"turquoise-300": ColorToken | ColorRef;
"turquoise-400": ColorToken | ColorRef;
"turquoise-500": ColorToken | ColorRef;
"turquoise-600": ColorToken | ColorRef;
"turquoise-700": ColorToken | ColorRef;
"turquoise-800": ColorToken | ColorRef;
"turquoise-900": ColorToken | ColorRef;
"turquoise-1000": ColorToken | ColorRef;
"turquoise-1100": ColorToken | ColorRef;
"turquoise-1200": ColorToken | ColorRef;
"turquoise-1300": ColorToken | ColorRef;
"turquoise-1400": ColorToken | ColorRef;
"turquoise-1500": ColorToken | ColorRef;
"turquoise-1600": ColorToken | ColorRef;
"pink-100": ColorToken | ColorRef;
"pink-200": ColorToken | ColorRef;
"pink-300": ColorToken | ColorRef;
"pink-400": ColorToken | ColorRef;
"pink-500": ColorToken | ColorRef;
"pink-600": ColorToken | ColorRef;
"pink-700": ColorToken | ColorRef;
"pink-800": ColorToken | ColorRef;
"pink-900": ColorToken | ColorRef;
"pink-1000": ColorToken | ColorRef;
"pink-1100": ColorToken | ColorRef;
"pink-1200": ColorToken | ColorRef;
"pink-1300": ColorToken | ColorRef;
"pink-1400": ColorToken | ColorRef;
"pink-1500": ColorToken | ColorRef;
"pink-1600": ColorToken | ColorRef;
"magenta-100": ColorToken | ColorRef;
"magenta-200": ColorToken | ColorRef;
"magenta-300": ColorToken | ColorRef;
"magenta-400": ColorToken | ColorRef;
"magenta-500": ColorToken | ColorRef;
"magenta-600": ColorToken | ColorRef;
"magenta-700": ColorToken | ColorRef;
"magenta-800": ColorToken | ColorRef;
"magenta-900": ColorToken | ColorRef;
"magenta-1000": ColorToken | ColorRef;
"magenta-1100": ColorToken | ColorRef;
"magenta-1200": ColorToken | ColorRef;
"magenta-1300": ColorToken | ColorRef;
"magenta-1400": ColorToken | ColorRef;
"magenta-1500": ColorToken | ColorRef;
"magenta-1600": ColorToken | ColorRef;
"fuchsia-100": ColorToken | ColorRef;
"fuchsia-200": ColorToken | ColorRef;
"fuchsia-300": ColorToken | ColorRef;
"fuchsia-400": ColorToken | ColorRef;
"fuchsia-500": ColorToken | ColorRef;
"fuchsia-600": ColorToken | ColorRef;
"fuchsia-700": ColorToken | ColorRef;
"fuchsia-800": ColorToken | ColorRef;
"fuchsia-900": ColorToken | ColorRef;
"fuchsia-1000": ColorToken | ColorRef;
"fuchsia-1100": ColorToken | ColorRef;
"fuchsia-1200": ColorToken | ColorRef;
"fuchsia-1300": ColorToken | ColorRef;
"fuchsia-1400": ColorToken | ColorRef;
"fuchsia-1500": ColorToken | ColorRef;
"fuchsia-1600": ColorToken | ColorRef;
"purple-100": ColorToken | ColorRef;
"purple-200": ColorToken | ColorRef;
"purple-300": ColorToken | ColorRef;
"purple-400": ColorToken | ColorRef;
"purple-500": ColorToken | ColorRef;
"purple-600": ColorToken | ColorRef;
"purple-700": ColorToken | ColorRef;
"purple-800": ColorToken | ColorRef;
"purple-900": ColorToken | ColorRef;
"purple-1000": ColorToken | ColorRef;
"purple-1100": ColorToken | ColorRef;
"purple-1200": ColorToken | ColorRef;
"purple-1300": ColorToken | ColorRef;
"purple-1400": ColorToken | ColorRef;
"purple-1500": ColorToken | ColorRef;
"purple-1600": ColorToken | ColorRef;
"indigo-100": ColorToken | ColorRef;
"indigo-200": ColorToken | ColorRef;
"indigo-300": ColorToken | ColorRef;
"indigo-400": ColorToken | ColorRef;
"indigo-500": ColorToken | ColorRef;
"indigo-600": ColorToken | ColorRef;
"indigo-700": ColorToken | ColorRef;
"indigo-800": ColorToken | ColorRef;
"indigo-900": ColorToken | ColorRef;
"indigo-1000": ColorToken | ColorRef;
"indigo-1100": ColorToken | ColorRef;
"indigo-1200": ColorToken | ColorRef;
"indigo-1300": ColorToken | ColorRef;
"indigo-1400": ColorToken | ColorRef;
"indigo-1500": ColorToken | ColorRef;
"indigo-1600": ColorToken | ColorRef;
"cyan-100": ColorToken | ColorRef;
"cyan-200": ColorToken | ColorRef;
"cyan-300": ColorToken | ColorRef;
"cyan-400": ColorToken | ColorRef;
"cyan-500": ColorToken | ColorRef;
"cyan-600": ColorToken | ColorRef;
"cyan-700": ColorToken | ColorRef;
"cyan-800": ColorToken | ColorRef;
"cyan-900": ColorToken | ColorRef;
"cyan-1000": ColorToken | ColorRef;
"cyan-1100": ColorToken | ColorRef;
"cyan-1200": ColorToken | ColorRef;
"cyan-1300": ColorToken | ColorRef;
"cyan-1400": ColorToken | ColorRef;
"cyan-1500": ColorToken | ColorRef;
"cyan-1600": ColorToken | ColorRef;
"seafoam-100": ColorToken | ColorRef;
"seafoam-200": ColorToken | ColorRef;
"seafoam-300": ColorToken | ColorRef;
"seafoam-400": ColorToken | ColorRef;
"seafoam-500": ColorToken | ColorRef;
"seafoam-600": ColorToken | ColorRef;
"seafoam-700": ColorToken | ColorRef;
"seafoam-800": ColorToken | ColorRef;
"seafoam-900": ColorToken | ColorRef;
"seafoam-1000": ColorToken | ColorRef;
"seafoam-1100": ColorToken | ColorRef;
"seafoam-1200": ColorToken | ColorRef;
"seafoam-1300": ColorToken | ColorRef;
"seafoam-1400": ColorToken | ColorRef;
"seafoam-1500": ColorToken | ColorRef;
"seafoam-1600": ColorToken | ColorRef;
"green-100": ColorToken | ColorRef;
"green-200": ColorToken | ColorRef;
"green-300": ColorToken | ColorRef;
"green-400": ColorToken | ColorRef;
"green-500": ColorToken | ColorRef;
"green-600": ColorToken | ColorRef;
"green-700": ColorToken | ColorRef;
"green-800": ColorToken | ColorRef;
"green-900": ColorToken | ColorRef;
"green-1000": ColorToken | ColorRef;
"green-1100": ColorToken | ColorRef;
"green-1200": ColorToken | ColorRef;
"green-1300": ColorToken | ColorRef;
"green-1400": ColorToken | ColorRef;
"green-1500": ColorToken | ColorRef;
"green-1600": ColorToken | ColorRef;
"celery-100": ColorToken | ColorRef;
"celery-200": ColorToken | ColorRef;
"celery-300": ColorToken | ColorRef;
"celery-400": ColorToken | ColorRef;
"celery-500": ColorToken | ColorRef;
"celery-600": ColorToken | ColorRef;
"celery-700": ColorToken | ColorRef;
"celery-800": ColorToken | ColorRef;
"celery-900": ColorToken | ColorRef;
"celery-1000": ColorToken | ColorRef;
"celery-1100": ColorToken | ColorRef;
"celery-1200": ColorToken | ColorRef;
"celery-1300": ColorToken | ColorRef;
"celery-1400": ColorToken | ColorRef;
"celery-1500": ColorToken | ColorRef;
"celery-1600": ColorToken | ColorRef;
"chartreuse-100": ColorToken | ColorRef;
"chartreuse-200": ColorToken | ColorRef;
"chartreuse-300": ColorToken | ColorRef;
"chartreuse-400": ColorToken | ColorRef;
"chartreuse-500": ColorToken | ColorRef;
"chartreuse-600": ColorToken | ColorRef;
"chartreuse-700": ColorToken | ColorRef;
"chartreuse-800": ColorToken | ColorRef;
"chartreuse-900": ColorToken | ColorRef;
"chartreuse-1000": ColorToken | ColorRef;
"chartreuse-1100": ColorToken | ColorRef;
"chartreuse-1200": ColorToken | ColorRef;
"chartreuse-1300": ColorToken | ColorRef;
"chartreuse-1400": ColorToken | ColorRef;
"chartreuse-1500": ColorToken | ColorRef;
"chartreuse-1600": ColorToken | ColorRef;
"yellow-100": ColorToken | ColorRef;
"yellow-200": ColorToken | ColorRef;
"yellow-300": ColorToken | ColorRef;
"yellow-400": ColorToken | ColorRef;
"yellow-500": ColorToken | ColorRef;
"yellow-600": ColorToken | ColorRef;
"yellow-700": ColorToken | ColorRef;
"yellow-800": ColorToken | ColorRef;
"yellow-900": ColorToken | ColorRef;
"yellow-1000": ColorToken | ColorRef;
"yellow-1100": ColorToken | ColorRef;
"yellow-1200": ColorToken | ColorRef;
"yellow-1300": ColorToken | ColorRef;
"yellow-1400": ColorToken | ColorRef;
"yellow-1500": ColorToken | ColorRef;
"yellow-1600": ColorToken | ColorRef;
"orange-100": ColorToken | ColorRef;
"orange-200": ColorToken | ColorRef;
"orange-300": ColorToken | ColorRef;
"orange-400": ColorToken | ColorRef;
"orange-500": ColorToken | ColorRef;
"orange-600": ColorToken | ColorRef;
"orange-700": ColorToken | ColorRef;
"orange-800": ColorToken | ColorRef;
"orange-900": ColorToken | ColorRef;
"orange-1000": ColorToken | ColorRef;
"orange-1100": ColorToken | ColorRef;
"orange-1200": ColorToken | ColorRef;
"orange-1300": ColorToken | ColorRef;
"orange-1400": ColorToken | ColorRef;
"orange-1500": ColorToken | ColorRef;
"orange-1600": ColorToken | ColorRef;
"red-100": ColorToken | ColorRef;
"red-200": ColorToken | ColorRef;
"red-300": ColorToken | ColorRef;
"red-400": ColorToken | ColorRef;
"red-500": ColorToken | ColorRef;
"red-600": ColorToken | ColorRef;
"red-700": ColorToken | ColorRef;
"red-800": ColorToken | ColorRef;
"red-900": ColorToken | ColorRef;
"red-1000": ColorToken | ColorRef;
"red-1100": ColorToken | ColorRef;
"red-1200": ColorToken | ColorRef;
"red-1300": ColorToken | ColorRef;
"red-1400": ColorToken | ColorRef;
"red-1500": ColorToken | ColorRef;
"red-1600": ColorToken | ColorRef;
"blue-100": ColorToken | ColorRef;
"blue-200": ColorToken | ColorRef;
"blue-300": ColorToken | ColorRef;
"blue-400": ColorToken | ColorRef;
"blue-500": ColorToken | ColorRef;
"blue-600": ColorToken | ColorRef;
"blue-700": ColorToken | ColorRef;
"blue-800": ColorToken | ColorRef;
"blue-900": ColorToken | ColorRef;
"blue-1000": ColorToken | ColorRef;
"blue-1100": ColorToken | ColorRef;
"blue-1200": ColorToken | ColorRef;
"blue-1300": ColorToken | ColorRef;
"blue-1400": ColorToken | ColorRef;
"blue-1500": ColorToken | ColorRef;
"blue-1600": ColorToken | ColorRef;
"gray-25": ColorToken | ColorRef;
"gray-50": ColorToken | ColorRef;
"gray-75": ColorToken | ColorRef;
"gray-100": ColorToken | ColorRef;
"gray-200": ColorToken | ColorRef;
"gray-300": ColorToken | ColorRef;
"gray-400": ColorToken | ColorRef;
"gray-500": ColorToken | ColorRef;
"gray-600": ColorToken | ColorRef;
"gray-700": ColorToken | ColorRef;
"gray-800": ColorToken | ColorRef;
"gray-900": ColorToken | ColorRef;
"gray-1000": ColorToken | ColorRef;
transparent: string;
black: string;
white: string;
};
type BaseColor = keyof typeof baseColors;
export function baseColor<C extends string = BaseColor>(base: BaseColor | C): {
default: C;
isHovered: C;
isFocusVisible: C;
isPressed: C;
};
type SpectrumColor = Color<BaseColor> | ArbitraryValue;
export function color(value: SpectrumColor): string;
export function lightDark(light: SpectrumColor, dark: SpectrumColor): `[${string}]`;
export function colorMix(a: SpectrumColor, b: SpectrumColor, percent: number): `[${string}]`;
interface LinearGradient {
type: 'linear-gradient';
angle: string;
stops: [SpectrumColor, number][];
}
export function linearGradient(this: MacroContext | void, angle: string, ...tokens: [SpectrumColor, number][]): [LinearGradient];
declare const baseSpacing: {
0: string;
2: string;
4: string;
8: string;
16: string;
32: string;
64: string;
12: string;
20: string;
24: string;
48: string;
28: string;
36: string;
40: string;
44: string;
56: string;
80: string;
96: string;
};
declare const negativeSpacing: {
[-2]: string;
[-4]: string;
[-8]: string;
[-12]: string;
[-16]: string;
[-20]: string;
[-24]: string;
[-28]: string;
[-32]: string;
[-36]: string;
[-40]: string;
[-44]: string;
[-48]: string;
[-56]: string;
[-64]: string;
[-80]: string;
[-96]: string;
};
type PositiveSpacing = keyof typeof baseSpacing;
type NegativeSpacing = keyof typeof negativeSpacing;
type Spacing = PositiveSpacing | NegativeSpacing;
export function edgeToText(this: MacroContext | void, height: keyof typeof baseSpacing): string;
declare function _size1(this: MacroContext | void, px: number): string;
declare const inset: {
auto: string;
full: string;
[-2]: string;
[-4]: string;
[-8]: string;
[-12]: string;
[-16]: string;
[-20]: string;
[-24]: string;
[-28]: string;
[-32]: string;
[-36]: string;
[-40]: string;
[-44]: string;
[-48]: string;
[-56]: string;
[-64]: string;
[-80]: string;
[-96]: string;
0: string;
2: string;
4: string;
8: string;
16: string;
32: string;
64: string;
12: string;
20: string;
24: string;
48: string;
28: string;
36: string;
40: string;
44: string;
56: string;
80: string;
96: string;
};
type Inset = keyof typeof inset;
type GridTrack = 'none' | 'subgrid' | (string & {}) | readonly GridTrackSize[];
type GridTrackSize = 'auto' | 'min-content' | 'max-content' | `${number}fr` | `minmax(${string}, ${string})` | keyof typeof baseSpacing | (string & {});
export const style: StyleFunction<{
filter: "none" | ArbitraryValue | "elevated" | "emphasized" | "dragged";
fill: ArbitraryValue | Color<"accent" | "transparent" | "none" | "negative" | "black" | "blue" | "brown" | "chartreuse" | "cyan" | "fuchsia" | "gray" | "green" | "indigo" | "magenta" | "orange" | "pink" | "purple" | "red" | "silver" | "turquoise" | "white" | "yellow" | "Background" | "ButtonFace" | "ButtonText" | "GrayText" | "Highlight" | "HighlightText" | "currentColor" | "transparent-white-25" | "transparent-white-50" | "transparent-white-75" | "transparent-white-100" | "transparent-white-200" | "transparent-white-300" | "transparent-white-400" | "transparent-white-500" | "transparent-white-600" | "transparent-white-700" | "transparent-white-800" | "transparent-white-900" | "transparent-white-1000" | "transparent-black-25" | "transparent-black-50" | "transparent-black-75" | "transparent-black-100" | "transparent-black-200" | "transparent-black-300" | "transparent-black-400" | "transparent-black-500" | "transparent-black-600" | "transparent-black-700" | "transparent-black-800" | "transparent-black-900" | "transparent-black-1000" | "gray-25" | "gray-50" | "gray-75" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "gray-1000" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "blue-1000" | "blue-1100" | "blue-1200" | "blue-1300" | "blue-1400" | "blue-1500" | "blue-1600" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "red-1000" | "red-1100" | "red-1200" | "red-1300" | "red-1400" | "red-1500" | "red-1600" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "orange-1000" | "orange-1100" | "orange-1200" | "orange-1300" | "orange-1400" | "orange-1500" | "orange-1600" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "yellow-1000" | "yellow-1100" | "yellow-1200" | "yellow-1300" | "yellow-1400" | "yellow-1500" | "yellow-1600" | "chartreuse-100" | "chartreuse-200" | "chartreuse-300" | "chartreuse-400" | "chartreuse-500" | "chartreuse-600" | "chartreuse-700" | "chartreuse-800" | "chartreuse-900" | "chartreuse-1000" | "chartreuse-1100" | "chartreuse-1200" | "chartreuse-1300" | "chartreuse-1400" | "chartreuse-1500" | "chartreuse-1600" | "celery-100" | "celery-200" | "celery-300" | "celery-400" | "celery-500" | "celery-600" | "celery-700" | "celery-800" | "celery-900" | "celery-1000" | "celery-1100" | "celery-1200" | "celery-1300" | "celery-1400" | "celery-1500" | "celery-1600" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "green-1000" | "green-1100" | "green-1200" | "green-1300" | "green-1400" | "green-1500" | "green-1600" | "seafoam-100" | "seafoam-200" | "seafoam-300" | "seafoam-400" | "seafoam-500" | "seafoam-600" | "seafoam-700" | "seafoam-800" | "seafoam-900" | "seafoam-1000" | "seafoam-1100" | "seafoam-1200" | "seafoam-1300" | "seafoam-1400" | "seafoam-1500" | "seafoam-1600" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "cyan-900" | "cyan-1000" | "cyan-1100" | "cyan-1200" | "cyan-1300" | "cyan-1400" | "cyan-1500" | "cyan-1600" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "indigo-900" | "indigo-1000" | "indigo-1100" | "indigo-1200" | "indigo-1300" | "indigo-1400" | "indigo-1500" | "indigo-1600" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "purple-1000" | "purple-1100" | "purple-1200" | "purple-1300" | "purple-1400" | "purple-1500" | "purple-1600" | "fuchsia-100" | "fuchsia-200" | "fuchsia-300" | "fuchsia-400" | "fuchsia-500" | "fuchsia-600" | "fuchsia-700" | "fuchsia-800" | "fuchsia-900" | "fuchsia-1000" | "fuchsia-1100" | "fuchsia-1200" | "fuchsia-1300" | "fuchsia-1400" | "fuchsia-1500" | "fuchsia-1600" | "magenta-100" | "magenta-200" | "magenta-300" | "magenta-400" | "magenta-500" | "magenta-600" | "magenta-700" | "magenta-800" | "magenta-900" | "magenta-1000" | "magenta-1100" | "magenta-1200" | "magenta-1300" | "magenta-1400" | "magenta-1500" | "magenta-1600" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "pink-1000" | "pink-1100" | "pink-1200" | "pink-1300" | "pink-1400" | "pink-1500" | "pink-1600" | "turquoise-100" | "turquoise-200" | "turquoise-300" | "turquoise-400" | "turquoise-500" | "turquoise-600" | "turquoise-700" | "turquoise-800" | "turquoise-900" | "turquoise-1000" | "turquoise-1100" | "turquoise-1200" | "turquoise-1300" | "turquoise-1400" | "turquoise-1500" | "turquoise-1600" | "brown-100" | "brown-200" | "brown-300" | "brown-400" | "brown-500" | "brown-600" | "brown-700" | "brown-800" | "brown-900" | "brown-1000" | "brown-1100" | "brown-1200" | "brown-1300" | "brown-1400" | "brown-1500" | "brown-1600" | "silver-100" | "silver-200" | "silver-300" | "silver-400" | "silver-500" | "silver-600" | "silver-700" | "silver-800" | "silver-900" | "silver-1000" | "silver-1100" | "silver-1200" | "silver-1300" | "silver-1400" | "silver-1500" | "silver-1600" | "cinnamon-100" | "cinnamon-200" | "cinnamon-300" | "cinnamon-400" | "cinnamon-500" | "cinnamon-600" | "cinnamon-700" | "cinnamon-800" | "cinnamon-900" | "cinnamon-1000" | "cinnamon-1100" | "cinnamon-1200" | "cinnamon-1300" | "cinnamon-1400" | "cinnamon-1500" | "cinnamon-1600" | "neutral" | "informative" | "positive" | "notice" | "celery" | "seafoam" | "cinnamon" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-1000" | "accent-1100" | "accent-1200" | "accent-1300" | "accent-1400" | "accent-1500" | "accent-1600" | "informative-100" | "informative-200" | "informative-300" | "informative-400" | "informative-500" | "informative-600" | "informative-700" | "informative-800" | "informative-900" | "informative-1000" | "informative-1100" | "informative-1200" | "informative-1300" | "informative-1400" | "informative-1500" | "informative-1600" | "negative-100" | "negative-200" | "negative-300" | "negative-400" | "negative-500" | "negative-600" | "negative-700" | "negative-800" | "negative-900" | "negative-1000" | "negative-1100" | "negative-1200" | "negative-1300" | "negative-1400" | "negative-1500" | "negative-1600" | "notice-100" | "notice-200" | "notice-300" | "notice-400" | "notice-500" | "notice-600" | "notice-700" | "notice-800" | "notice-900" | "notice-1000" | "notice-1100" | "notice-1200" | "notice-1300" | "notice-1400" | "notice-1500" | "notice-1600" | "positive-100" | "positive-200" | "positive-300" | "positive-400" | "positive-500" | "positive-600" | "positive-700" | "positive-800" | "positive-900" | "positive-1000" | "positive-1100" | "positive-1200" | "positive-1300" | "positive-1400" | "positive-1500" | "positive-1600" | "ButtonBorder" | "Field" | "Mark" | "LinkText" | "transparent-overlay-25" | "transparent-overlay-50" | "transparent-overlay-75" | "transparent-overlay-100" | "transparent-overlay-200" | "transparent-overlay-300" | "transparent-overlay-400" | "transparent-overlay-500" | "transparent-overlay-600" | "transparent-overlay-700" | "transparent-overlay-800" | "transparent-overlay-900" | "transparent-overlay-1000">;
resize: "both" | "none" | "horizontal" | "vertical" | ArbitraryValue;
stroke: ArbitraryValue | Color<"transparent" | "none" | "black" | "white" | "Background" | "ButtonFace" | "ButtonText" | "GrayText" | "Highlight" | "HighlightText" | "currentColor" | "transparent-white-25" | "transparent-white-50" | "transparent-white-75" | "transparent-white-100" | "transparent-white-200" | "transparent-white-300" | "transparent-white-400" | "transparent-white-500" | "transparent-white-600" | "transparent-white-700" | "transparent-white-800" | "transparent-white-900" | "transparent-white-1000" | "transparent-black-25" | "transparent-black-50" | "transparent-black-75" | "transparent-black-100" | "transparent-black-200" | "transparent-black-300" | "transparent-black-400" | "transparent-black-500" | "transparent-black-600" | "transparent-black-700" | "transparent-black-800" | "transparent-black-900" | "transparent-black-1000" | "gray-25" | "gray-50" | "gray-75" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "gray-1000" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "blue-1000" | "blue-1100" | "blue-1200" | "blue-1300" | "blue-1400" | "blue-1500" | "blue-1600" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "red-1000" | "red-1100" | "red-1200" | "red-1300" | "red-1400" | "red-1500" | "red-1600" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "orange-1000" | "orange-1100" | "orange-1200" | "orange-1300" | "orange-1400" | "orange-1500" | "orange-1600" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "yellow-1000" | "yellow-1100" | "yellow-1200" | "yellow-1300" | "yellow-1400" | "yellow-1500" | "yellow-1600" | "chartreuse-100" | "chartreuse-200" | "chartreuse-300" | "chartreuse-400" | "chartreuse-500" | "chartreuse-600" | "chartreuse-700" | "chartreuse-800" | "chartreuse-900" | "chartreuse-1000" | "chartreuse-1100" | "chartreuse-1200" | "chartreuse-1300" | "chartreuse-1400" | "chartreuse-1500" | "chartreuse-1600" | "celery-100" | "celery-200" | "celery-300" | "celery-400" | "celery-500" | "celery-600" | "celery-700" | "celery-800" | "celery-900" | "celery-1000" | "celery-1100" | "celery-1200" | "celery-1300" | "celery-1400" | "celery-1500" | "celery-1600" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "green-1000" | "green-1100" | "green-1200" | "green-1300" | "green-1400" | "green-1500" | "green-1600" | "seafoam-100" | "seafoam-200" | "seafoam-300" | "seafoam-400" | "seafoam-500" | "seafoam-600" | "seafoam-700" | "seafoam-800" | "seafoam-900" | "seafoam-1000" | "seafoam-1100" | "seafoam-1200" | "seafoam-1300" | "seafoam-1400" | "seafoam-1500" | "seafoam-1600" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "cyan-900" | "cyan-1000" | "cyan-1100" | "cyan-1200" | "cyan-1300" | "cyan-1400" | "cyan-1500" | "cyan-1600" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "indigo-900" | "indigo-1000" | "indigo-1100" | "indigo-1200" | "indigo-1300" | "indigo-1400" | "indigo-1500" | "indigo-1600" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "purple-1000" | "purple-1100" | "purple-1200" | "purple-1300" | "purple-1400" | "purple-1500" | "purple-1600" | "fuchsia-100" | "fuchsia-200" | "fuchsia-300" | "fuchsia-400" | "fuchsia-500" | "fuchsia-600" | "fuchsia-700" | "fuchsia-800" | "fuchsia-900" | "fuchsia-1000" | "fuchsia-1100" | "fuchsia-1200" | "fuchsia-1300" | "fuchsia-1400" | "fuchsia-1500" | "fuchsia-1600" | "magenta-100" | "magenta-200" | "magenta-300" | "magenta-400" | "magenta-500" | "magenta-600" | "magenta-700" | "magenta-800" | "magenta-900" | "magenta-1000" | "magenta-1100" | "magenta-1200" | "magenta-1300" | "magenta-1400" | "magenta-1500" | "magenta-1600" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "pink-1000" | "pink-1100" | "pink-1200" | "pink-1300" | "pink-1400" | "pink-1500" | "pink-1600" | "turquoise-100" | "turquoise-200" | "turquoise-300" | "turquoise-400" | "turquoise-500" | "turquoise-600" | "turquoise-700" | "turquoise-800" | "turquoise-900" | "turquoise-1000" | "turquoise-1100" | "turquoise-1200" | "turquoise-1300" | "turquoise-1400" | "turquoise-1500" | "turquoise-1600" | "brown-100" | "brown-200" | "brown-300" | "brown-400" | "brown-500" | "brown-600" | "brown-700" | "brown-800" | "brown-900" | "brown-1000" | "brown-1100" | "brown-1200" | "brown-1300" | "brown-1400" | "brown-1500" | "brown-1600" | "silver-100" | "silver-200" | "silver-300" | "silver-400" | "silver-500" | "silver-600" | "silver-700" | "silver-800" | "silver-900" | "silver-1000" | "silver-1100" | "silver-1200" | "silver-1300" | "silver-1400" | "silver-1500" | "silver-1600" | "cinnamon-100" | "cinnamon-200" | "cinnamon-300" | "cinnamon-400" | "cinnamon-500" | "cinnamon-600" | "cinnamon-700" | "cinnamon-800" | "cinnamon-900" | "cinnamon-1000" | "cinnamon-1100" | "cinnamon-1200" | "cinnamon-1300" | "cinnamon-1400" | "cinnamon-1500" | "cinnamon-1600" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-1000" | "accent-1100" | "accent-1200" | "accent-1300" | "accent-1400" | "accent-1500" | "accent-1600" | "informative-100" | "informative-200" | "informative-300" | "informative-400" | "informative-500" | "informative-600" | "informative-700" | "informative-800" | "informative-900" | "informative-1000" | "informative-1100" | "informative-1200" | "informative-1300" | "informative-1400" | "informative-1500" | "informative-1600" | "negative-100" | "negative-200" | "negative-300" | "negative-400" | "negative-500" | "negative-600" | "negative-700" | "negative-800" | "negative-900" | "negative-1000" | "negative-1100" | "negative-1200" | "negative-1300" | "negative-1400" | "negative-1500" | "negative-1600" | "notice-100" | "notice-200" | "notice-300" | "notice-400" | "notice-500" | "notice-600" | "notice-700" | "notice-800" | "notice-900" | "notice-1000" | "notice-1100" | "notice-1200" | "notice-1300" | "notice-1400" | "notice-1500" | "notice-1600" | "positive-100" | "positive-200" | "positive-300" | "positive-400" | "positive-500" | "positive-600" | "positive-700" | "positive-800" | "positive-900" | "positive-1000" | "positive-1100" | "positive-1200" | "positive-1300" | "positive-1400" | "positive-1500" | "positive-1600" | "ButtonBorder" | "Field" | "Mark" | "LinkText" | "transparent-overlay-25" | "transparent-overlay-50" | "transparent-overlay-75" | "transparent-overlay-100" | "transparent-overlay-200" | "transparent-overlay-300" | "transparent-overlay-400" | "transparent-overlay-500" | "transparent-overlay-600" | "transparent-overlay-700" | "transparent-overlay-800" | "transparent-overlay-900" | "transparent-overlay-1000">;
height: number | "auto" | "max" | "min" | "screen" | "full" | ArbitraryValue | `${number}%` | `${number}vw` | `${number}svw` | `${number}dvw` | `${number}vh` | `${number}svh` | `${number}dvh` | `${number}vmin` | `${number}svmin` | `${number}dvmin` | `${number}vmax` | `${number}svmax` | `${number}dvmax` | `${number}cqw` | `${number}cqh` | `${number}cqmin` | `${number}cqmax` | "fit";
width: number | "auto" | "max" | "min" | "screen" | "full" | ArbitraryValue | `${number}%` | `${number}vw` | `${number}svw` | `${number}dvw` | `${number}vh` | `${number}svh` | `${number}dvh` | `${number}vmin` | `${number}svmin` | `${number}dvmin` | `${number}vmax` | `${number}svmax` | `${number}dvmax` | `${number}cqw` | `${number}cqh` | `${number}cqmin` | `${number}cqmax` | "fit";
left: 0 | "auto" | 2 | 4 | 8 | 16 | 32 | 64 | 12 | 20 | 24 | "full" | ArbitraryValue | `${number}%` | `${number}vw` | `${number}svw` | `${number}dvw` | `${number}vh` | `${number}svh` | `${number}dvh` | `${number}vmin` | `${number}svmin` | `${number}dvmin` | `${number}vmax` | `${number}svmax` | `${number}dvmax` | `${number}cqw` | `${number}cqh` | `${number}cqmin` | `${number}cqmax` | 48 | 28 | 36 | 40 | 44 | 56 | 80 | 96 | -2 | -4 | -8 | -12 | -16 | -20 | -24 | -28 | -32 | -36 | -40 | -44 | -48 | -56 | -64 | -80 | -96;
top: 0 | "auto" | 2 | 4 | 8 | 16 | 32 | 64 | 12 | 20 | 24 | "full" | ArbitraryValue | `${number}%` | `${number}vw` | `${number}svw` | `${number}dvw` | `${number}vh` | `${number}svh` | `${number}dvh` | `${number}vmin` | `${number}svmin` | `${number}dvmin` | `${number}vmax` | `${number}svmax` | `${number}dvmax` | `${number}cqw` | `${number}cqh` | `${number}cqmin` | `${number}cqmax` | 48 | 28 | 36 | 40 | 44 | 56 | 80 | 96 | -2 | -4 | -8 | -12 | -16 | -20 | -24 | -28 | -32 | -36 | -40 | -44 | -48 | -56 | -64 | -80 | -96;
truncate: true;
alignContent: "normal" | "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | "baseline" | ArbitraryValue;
alignItems: "center" | "end" | "start" | "stretch" | "baseline" | ArbitraryValue;
alignSelf: "auto" | "center" | "end" | "start" | "stretch" | "baseline" | ArbitraryValue;
animation: string;
animationDelay: string | number;
animationDirection: "reverse" | "alternate" | "alternate-reverse" | "normal" | ArbitraryValue;
animationDuration: string | number;
animationFillMode: "backwards" | "both" | "forwards" | "none" | ArbitraryValue;
animationIterationCount: string | number;
animationTimingFunction: "default" | "linear" | ArbitraryValue | "in" | "out" | "in-out";
appearance: "auto" | "none" | ArbitraryValue;
aspectRatio: "auto" | "square" | "video" | ArbitraryValue | `${number}/${number}`;
backgroundAttachment: "fixed" | "scroll" | "local" | ArbitraryValue;
backgroundBlendMode: "normal" | "color" | "color-burn" | "color-dodge" | "darken" | "difference" | "exclusion" | "hard-light" | "hue" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "soft-light" | ArbitraryValue;
backgroundClip: "border-box" | "content-box" | "text" | "padding-box" | ArbitraryValue;
backgroundColor: ArbitraryValue | Color<"base" | "accent" | "transparent" | "disabled" | "negative" | "black" | "blue" | "brown" | "chartreuse" | "cyan" | "fuchsia" | "gray" | "green" | "indigo" | "magenta" | "orange" | "pink" | "purple" | "red" | "silver" | "turquoise" | "white" | "yellow" | "Background" | "ButtonFace" | "ButtonText" | "GrayText" | "Highlight" | "HighlightText" | "transparent-white-25" | "transparent-white-50" | "transparent-white-75" | "transparent-white-100" | "transparent-white-200" | "transparent-white-300" | "transparent-white-400" | "transparent-white-500" | "transparent-white-600" | "transparent-white-700" | "transparent-white-800" | "transparent-white-900" | "transparent-white-1000" | "transparent-black-25" | "transparent-black-50" | "transparent-black-75" | "transparent-black-100" | "transparent-black-200" | "transparent-black-300" | "transparent-black-400" | "transparent-black-500" | "transparent-black-600" | "transparent-black-700" | "transparent-black-800" | "transparent-black-900" | "transparent-black-1000" | "gray-25" | "gray-50" | "gray-75" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "gray-1000" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "blue-1000" | "blue-1100" | "blue-1200" | "blue-1300" | "blue-1400" | "blue-1500" | "blue-1600" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "red-1000" | "red-1100" | "red-1200" | "red-1300" | "red-1400" | "red-1500" | "red-1600" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "orange-1000" | "orange-1100" | "orange-1200" | "orange-1300" | "orange-1400" | "orange-1500" | "orange-1600" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "yellow-1000" | "yellow-1100" | "yellow-1200" | "yellow-1300" | "yellow-1400" | "yellow-1500" | "yellow-1600" | "chartreuse-100" | "chartreuse-200" | "chartreuse-300" | "chartreuse-400" | "chartreuse-500" | "chartreuse-600" | "chartreuse-700" | "chartreuse-800" | "chartreuse-900" | "chartreuse-1000" | "chartreuse-1100" | "chartreuse-1200" | "chartreuse-1300" | "chartreuse-1400" | "chartreuse-1500" | "chartreuse-1600" | "celery-100" | "celery-200" | "celery-300" | "celery-400" | "celery-500" | "celery-600" | "celery-700" | "celery-800" | "celery-900" | "celery-1000" | "celery-1100" | "celery-1200" | "celery-1300" | "celery-1400" | "celery-1500" | "celery-1600" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "green-1000" | "green-1100" | "green-1200" | "green-1300" | "green-1400" | "green-1500" | "green-1600" | "seafoam-100" | "seafoam-200" | "seafoam-300" | "seafoam-400" | "seafoam-500" | "seafoam-600" | "seafoam-700" | "seafoam-800" | "seafoam-900" | "seafoam-1000" | "seafoam-1100" | "seafoam-1200" | "seafoam-1300" | "seafoam-1400" | "seafoam-1500" | "seafoam-1600" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "cyan-900" | "cyan-1000" | "cyan-1100" | "cyan-1200" | "cyan-1300" | "cyan-1400" | "cyan-1500" | "cyan-1600" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "indigo-900" | "indigo-1000" | "indigo-1100" | "indigo-1200" | "indigo-1300" | "indigo-1400" | "indigo-1500" | "indigo-1600" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "purple-1000" | "purple-1100" | "purple-1200" | "purple-1300" | "purple-1400" | "purple-1500" | "purple-1600" | "fuchsia-100" | "fuchsia-200" | "fuchsia-300" | "fuchsia-400" | "fuchsia-500" | "fuchsia-600" | "fuchsia-700" | "fuchsia-800" | "fuchsia-900" | "fuchsia-1000" | "fuchsia-1100" | "fuchsia-1200" | "fuchsia-1300" | "fuchsia-1400" | "fuchsia-1500" | "fuchsia-1600" | "magenta-100" | "magenta-200" | "magenta-300" | "magenta-400" | "magenta-500" | "magenta-600" | "magenta-700" | "magenta-800" | "magenta-900" | "magenta-1000" | "magenta-1100" | "magenta-1200" | "magenta-1300" | "magenta-1400" | "magenta-1500" | "magenta-1600" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "pink-1000" | "pink-1100" | "pink-1200" | "pink-1300" | "pink-1400" | "pink-1500" | "pink-1600" | "turquoise-100" | "turquoise-200" | "turquoise-300" | "turquoise-400