import type { InternalTokenIds } from './artifacts/types-internal'; export type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing' | 'motion' | 'motionDuration' | 'motionEasing' | 'motionKeyframe' | 'motionProperty'; type ActiveTokenState = 'active'; type DeprecatedTokenState = 'deprecated'; type DeletedTokenState = 'deleted'; type ExperimentalTokenState = 'experimental'; type TokenState = ActiveTokenState | DeprecatedTokenState | DeletedTokenState | ExperimentalTokenState; type Replacement = InternalTokenIds | InternalTokenIds[]; type ExperimentalReplacement = InternalTokenIds | InternalTokenIds[] | string; type PaletteCategory = 'blue' | 'purple' | 'red' | 'magenta' | 'orange' | 'yellow' | 'green' | 'teal' | 'lime' | 'light mode neutral' | 'dark mode neutral'; type ValueCategory = 'opacity'; interface Token { value: TValue; attributes: { group: Group; description?: string; state?: TokenState; replacement?: Replacement | ExperimentalReplacement; }; } /** * Base tokens define the raw values consumed by Design Tokens. They are a context-agnostic * name:value pairing (for example, the base token Neutral0 represents the value #FFFFFF ). */ export interface BaseToken extends Token { attributes: { group: Group; }; } /** * Design tokens represent single sources of truth to name and store semantic design decisions. * They map a semantic name (color.background.default) to a base token (Neutral0). */ export interface DesignToken extends Token { attributes: { state: ActiveTokenState; group: Group; description: string; introduced: string; suggest?: string[]; } | { state: DeprecatedTokenState; group: Group; description: string; introduced: string; deprecated: string; replacement?: Replacement; } | { state: DeletedTokenState; group: Group; description: string; introduced: string; deprecated: string; deleted: string; replacement?: Replacement; } | { state: ExperimentalTokenState; group: Group; description: string; introduced: string; replacement?: ExperimentalReplacement; suggest?: string[]; }; } interface TypographyDesignToken extends DesignToken { attributes: DesignToken['attributes']; } type OmitDistributive = T extends any ? T extends object ? Id> : T : never; type Id = {} & { [P in keyof T]: T[P]; }; type DeepOmit = Omit<{ [P in keyof T]: OmitDistributive; }, K>; export type DeepPartial = T extends object ? { [P in keyof T]?: DeepPartial; } : T; export type ValueSchema = DeepOmit; export type ExtendedValueSchema = DeepPartial>; export type AttributeSchema = DeepOmit; interface PaletteToken extends BaseToken { attributes: { group: 'palette'; category: PaletteCategory; }; } interface ValueToken extends BaseToken { attributes: { group: 'palette'; category: ValueCategory; }; } export type PaintToken = DesignToken; export type ShadowToken = DesignToken, 'shadow'>; export type OpacityToken = DesignToken; export type SpacingToken = DesignToken; export type ShapeToken = DesignToken; export type FontWeightToken = DesignToken; export type FontFamilyToken = DesignToken; export type MotionToken = DesignToken; export type MotionDurationToken = DesignToken; export type MotionEasingToken = DesignToken; export type MotionKeyframeToken = DesignToken; export type MotionPropertyToken = DesignToken; export type DeprecatedTypographyToken = DesignToken; export type RawToken = DesignToken; export interface PaletteColorTokenSchema { value: { opacity: { Opacity20: ValueToken; Opacity40: ValueToken; }; }; color: { palette: Record; }; } type SpacingSchemaValue = BaseToken; type ShapeSchemaValue = BaseToken; export interface SpacingScaleTokenSchema { space: Record; } export interface ShapeScaleTokenSchema { border: { width: Record; }; radius: Record; } export interface MotionScaleTokenSchema { duration: Record>; curve: Record>; keyframe: Record, 'motionKeyframe'>>; properties: Record>; } export interface FontSizeScaleTokenSchema { fontSize: Record>; } export interface FontWeightScaleTokenSchema { fontWeight: Record>; } export interface FontFamilyPaletteTokenSchema { fontFamily: Record>; } export interface LineHeightScaleTokenSchema { lineHeight: Record>; } export interface LetterSpacingScaleTokenSchema { letterSpacing: Record>; } export interface BackgroundColorTokenSchema { color: { blanket: { '[default]': PaintToken; selected: PaintToken; danger: PaintToken; }; background: { disabled: PaintToken; inverse: { subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; input: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; neutral: { '[default]': { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; brand: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; selected: { '[default]': { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; danger: { '[default]': { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; warning: { '[default]': { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; success: { '[default]': { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; discovery: { '[default]': { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; information: { '[default]': { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; }; }; } export interface BorderColorTokenSchema { color: { border: { '[default]': PaintToken; bold: PaintToken; inverse: PaintToken; focused: PaintToken; input: PaintToken; disabled: PaintToken; brand: PaintToken; selected: PaintToken; danger: PaintToken; warning: PaintToken; success: PaintToken; discovery: PaintToken; information: PaintToken; }; }; } export interface IconColorTokenSchema { color: { icon: { '[default]': PaintToken; subtle: PaintToken; subtlest: PaintToken; inverse: PaintToken; disabled: PaintToken; brand: PaintToken; selected: PaintToken; danger: PaintToken; warning: { '[default]': PaintToken; inverse: PaintToken; }; success: PaintToken; discovery: PaintToken; information: PaintToken; }; }; } export interface TextColorTokenSchema { color: { text: { '[default]': PaintToken; subtle: PaintToken; subtlest: PaintToken; inverse: PaintToken; brand: PaintToken; selected: PaintToken; danger: { '[default]': PaintToken; bolder: PaintToken; }; warning: { '[default]': PaintToken; inverse: PaintToken; bolder: PaintToken; }; success: { '[default]': PaintToken; bolder: PaintToken; }; information: { '[default]': PaintToken; bolder: PaintToken; }; discovery: { '[default]': PaintToken; bolder: PaintToken; }; disabled: PaintToken; }; link: { '[default]': PaintToken; pressed: PaintToken; visited: { '[default]': PaintToken; pressed: PaintToken; }; }; }; } export interface AccentColorTokenSchema { color: { text: { accent: { blue: { '[default]': PaintToken; bolder: PaintToken; }; red: { '[default]': PaintToken; bolder: PaintToken; }; orange: { '[default]': PaintToken; bolder: PaintToken; }; yellow: { '[default]': PaintToken; bolder: PaintToken; }; green: { '[default]': PaintToken; bolder: PaintToken; }; purple: { '[default]': PaintToken; bolder: PaintToken; }; teal: { '[default]': PaintToken; bolder: PaintToken; }; magenta: { '[default]': PaintToken; bolder: PaintToken; }; lime: { '[default]': PaintToken; bolder: PaintToken; }; gray: { '[default]': PaintToken; bolder: PaintToken; }; }; }; icon: { accent: { blue: PaintToken; red: PaintToken; orange: PaintToken; yellow: PaintToken; green: PaintToken; purple: PaintToken; teal: PaintToken; magenta: PaintToken; lime: PaintToken; gray: PaintToken; }; }; border: { accent: { blue: PaintToken; red: PaintToken; orange: PaintToken; yellow: PaintToken; green: PaintToken; purple: PaintToken; teal: PaintToken; magenta: PaintToken; lime: PaintToken; gray: PaintToken; }; }; background: { accent: { blue: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; red: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; orange: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; yellow: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; green: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; teal: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; purple: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; magenta: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; lime: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; gray: { subtlest: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtler: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; subtle: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; }; }; }; } export interface InteractionColorTokenSchema { color: { interaction: { pressed: PaintToken; hovered: PaintToken; }; }; } export interface SkeletonColorTokenSchema { color: { skeleton: { '[default]': PaintToken; subtle: PaintToken; }; }; } export interface ChartColorTokenSchema { color: { chart: { brand: { '[default]': PaintToken; hovered: PaintToken; }; neutral: { '[default]': PaintToken; hovered: PaintToken; }; success: { '[default]': { '[default]': PaintToken; hovered: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; }; }; danger: { '[default]': { '[default]': PaintToken; hovered: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; }; }; warning: { '[default]': { '[default]': PaintToken; hovered: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; }; }; information: { '[default]': { '[default]': PaintToken; hovered: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; }; }; discovery: { '[default]': { '[default]': PaintToken; hovered: PaintToken; }; bold: { '[default]': PaintToken; hovered: PaintToken; }; }; categorical: { 1: { '[default]': PaintToken; hovered: PaintToken; }; 2: { '[default]': PaintToken; hovered: PaintToken; }; 3: { '[default]': PaintToken; hovered: PaintToken; }; 4: { '[default]': PaintToken; hovered: PaintToken; }; 5: { '[default]': PaintToken; hovered: PaintToken; }; 6: { '[default]': PaintToken; hovered: PaintToken; }; 7: { '[default]': PaintToken; hovered: PaintToken; }; 8: { '[default]': PaintToken; hovered: PaintToken; }; }; blue: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; red: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; orange: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; yellow: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; green: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; lime: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; teal: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; purple: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; magenta: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; gray: { bold: { '[default]': PaintToken; hovered: PaintToken; }; bolder: { '[default]': PaintToken; hovered: PaintToken; }; boldest: { '[default]': PaintToken; hovered: PaintToken; }; }; }; }; } export interface UtilTokenSchema { elevation: { surface: { current: PaintToken; }; }; UNSAFE: { transparent: RawToken; textTransformUppercase?: RawToken; }; } export interface SurfaceTokenSchema { elevation: { surface: { '[default]': { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; sunken: PaintToken; raised: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; overlay: { '[default]': PaintToken; hovered: PaintToken; pressed: PaintToken; }; }; }; } export interface ShadowTokenSchema { elevation: { shadow: { raised: ShadowToken; overflow: { '[default]': ShadowToken; spread: PaintToken; perimeter: PaintToken; }; overlay: ShadowToken; }; }; } export interface OpacityTokenSchema { opacity: { loading: OpacityToken; disabled: OpacityToken; }; } export interface SpacingTokenSchema { space: { '0': SpacingToken; '025': SpacingToken; '050': SpacingToken; '075': SpacingToken; '100': SpacingToken; '150': SpacingToken; '200': SpacingToken; '250': SpacingToken; '300': SpacingToken; '400': SpacingToken; '500': SpacingToken; '600': SpacingToken; '800': SpacingToken; '1000': SpacingToken; negative: { '025': SpacingToken; '050': SpacingToken; '075': SpacingToken; '100': SpacingToken; '150': SpacingToken; '200': SpacingToken; '250': SpacingToken; '300': SpacingToken; '400': SpacingToken; }; }; } /** * Typography tokens are complex multi-palette ouputs */ export type TypographyToken = TypographyDesignToken<{ fontStyle: 'normal'; fontWeight: TPalette['fontWeight']; fontFamily: TPalette['fontFamily']; fontSize: TPalette['fontSize']; lineHeight: TPalette['lineHeight']; letterSpacing: TPalette['letterSpacing']; }>; /** * The semantic interface for typography tokens */ export interface TypographyTokenSchema { font: { heading: { xxlarge: TypographyToken; xlarge: TypographyToken; large: TypographyToken; medium: TypographyToken; small: TypographyToken; xsmall: TypographyToken; xxsmall: TypographyToken; }; body: { '[default]': TypographyToken; small: TypographyToken; large: TypographyToken; }; code: { '[default]': TypographyToken; }; metric: { large: TypographyToken; medium: TypographyToken; small: TypographyToken; }; }; } export interface ShapeTokenSchema { border: { width: { '[default]': ShapeToken; selected: ShapeToken; focused: ShapeToken; }; }; radius: { xsmall: ShapeToken; small: ShapeToken; medium: ShapeToken; large: ShapeToken; xlarge: ShapeToken; xxlarge: ShapeToken; full: ShapeToken; tile: ShapeToken; }; } /** * @private */ export interface FontWeightTokenSchema { font: { weight: { regular: FontWeightToken; medium: FontWeightToken; semibold: FontWeightToken; bold: FontWeightToken; }; }; } export interface FontFamilyTokenSchema { font: { family: { body: FontFamilyToken; heading: FontFamilyToken; brand: { heading: FontFamilyToken; body: FontFamilyToken; }; code: FontFamilyToken; }; }; } /** * The semantic interface for motion tokens */ export interface MotionTokenSchema { motion: { avatar: { enter: MotionToken; exit: MotionToken; hovered: MotionToken; }; blanket: { enter: MotionToken; exit: MotionToken; }; flag: { enter: MotionToken; exit: MotionToken; reposition: MotionToken; }; modal: { enter: MotionToken; exit: MotionToken; }; popup: { enter: { top: MotionToken; bottom: MotionToken; left: MotionToken; right: MotionToken; }; exit: { top: MotionToken; bottom: MotionToken; left: MotionToken; right: MotionToken; }; }; spotlight: { enter: MotionToken; exit: MotionToken; }; }; } export interface MotionDurationTokenSchema { motion: { duration: { instant: MotionDurationToken; xxshort: MotionDurationToken; xshort: MotionDurationToken; short: MotionDurationToken; medium: MotionDurationToken; long: MotionDurationToken; xlong: MotionDurationToken; xxlong: MotionDurationToken; }; }; } export interface MotionEasingTokenSchema { motion: { easing: { out: { bold: MotionEasingToken; practical: MotionEasingToken; }; in: { practical: MotionEasingToken; }; inout: { bold: MotionEasingToken; }; spring: MotionEasingToken; }; }; } export interface MotionKeyframeTokenSchema { motion: { keyframe: { scale: { in: { small: MotionKeyframeToken; medium: MotionKeyframeToken; }; out: { small: MotionKeyframeToken; medium: MotionKeyframeToken; }; }; fade: { in: MotionKeyframeToken; out: MotionKeyframeToken; }; slide: { in: { top: { short: MotionKeyframeToken; }; bottom: { short: MotionKeyframeToken; }; left: { short: MotionKeyframeToken; half: MotionKeyframeToken; }; right: { short: MotionKeyframeToken; }; }; out: { top: { short: MotionKeyframeToken; }; bottom: { short: MotionKeyframeToken; }; left: { short: MotionKeyframeToken; half: MotionKeyframeToken; }; right: { short: MotionKeyframeToken; }; }; }; }; }; } export {};