Component Tokens

interface ComponentTokens {
  accordion: AccordionTokens;
  alertDialog: AlertDialogTokens;
  button: ButtonTokens;
  buttonGroup: ButtonGroupTokens;
  card: CardTokens;
  carousel: CarouselTokens;
  checkbox: CheckboxTokens;
  container: ContainerTokens;
  dialog: DialogTokens;
  divider: DividerTokens;
  drawer: DrawerTokens;
  expansionPanel: ExpansionPanelTokens;
  figure: FigureTokens;
  formField: FormFieldTokens;
  grid: GridTokens;
  hero: HeroTokens;
  icon: IconTokens;
  iconButton: IconButtonTokens;
  info: InfoTokens;
  input: InputTokens;
  link: LinkTokens;
  menu: MenuTokens;
  modal: ModalTokens;
  section: SectionTokens;
  select: SelectTokens;
  slider: SliderTokens;
  snackbar: SnackbarTokens;
  surface: SurfaceTokens;
  text: TextTokens;
  textArea: TextAreaTokens;
  tooltip: TooltipTokens;
  videoControls: VideoControlsTokens;
}

type ResponsiveTokens<T> = T & {
  "@media": {
    [key: `screen and (min-width: ${Breakpoints[Breakpoint]}px)`]: T;
  };
};
 
const Breakpoints = {
  small: 640,
  medium: 1024,
  large: 1366,
} as const;
 
type Breakpoint = keyof typeof Breakpoints;

type InteractiveTokens<T> = T & {
  ":hover": T;
  ":focus-visible": T & OutlineTokens;
  ":active": T;
  ":disabled": T;
};
 
type OutlineTokens = {
  outlineWidth: string;
  outlineStyle: string;
  outlineColor: string;
  outlineOffset: string;
};

type AccordionTokens = {
  column: AccordionColumnTokens;
};

type AccordionColumnTokens = {
  base: ResponsiveTokens<{
    gap: string;
  }>;
};

type AlertDialogTokens = {
  surface: AlertDialogSurfaceTokens;
};

type AlertDialogSurfaceTokens = {
  base: {
    paddingLeft: string;
    paddingTop: string;
    paddingRight: string;
    paddingBottom: string;
  };
};

type ButtonTokens = {
  row: ButtonRowTokens;
  text: ButtonTextTokens;
};

type ButtonRowTokens = {
  base: {
    borderWidth: string;
    borderStyle: string;
    borderRadius: string;
  };
  variants: {
    variant: {
      primary: ButtonRowVariantTokens;
      secondary: ButtonRowVariantTokens;
      tertiary: ButtonRowVariantTokens;
    };
    size: {
      small: ButtonRowSizeTokens;
      medium: ButtonRowSizeTokens;
      large: ButtonRowSizeTokens;
    };
  };
};
 
type ButtonRowVariantTokens = InteractiveTokens<{
  backgroundColor: string;
  borderColor: string;
  color: string;
  boxShadow: string;
  opacity: string;
}>;
 
type ButtonRowSizeTokens = {
  paddingTop: string;
  paddingBottom: string;
  paddingLeft: string;
  paddingRight: string;
  gap: string;
};

type ButtonTextTokens = {
  variants: {
    size: {
      small: ButtonTextSizeTokens;
      medium: ButtonTextSizeTokens;
      large: ButtonTextSizeTokens;
    };
  };
};
 
type ButtonTextSizeTokens = {
  font: string;
};

type ButtonGroupTokens = {
  flex: ButtonGroupFlexTokens;
};

type ButtonGroupFlexTokens = {
  base: {
    gap: string;
  };
};

type CardTokens = {
  surface: CardSurfaceTokens;
  content: CardContentTokens;
};

/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 */
type CardSurfaceTokens = {
  base: {
    borderRadius: string;
    borderWidth: string;
    borderStyle: string;
  };
  variants: {
    interaction: {
      static: CardSurfaceInteractionTokens;
      interactive: CardSurfaceInteractionTokens & {
        ":hover": CardSurfaceInteractionTokens;
        ":focus-visible": CardSurfaceInteractionTokens & OutlineTokens;
        ":active": CardSurfaceInteractionTokens;
      };
    };
    disabled: {
      true: CardSurfaceDisabledTokens;
    };
  };
};
 
type CardSurfaceInteractionTokens = {
  backgroundColor: string;
  borderColor: string;
  boxShadow: string;
};
 
type CardSurfaceDisabledTokens = CardSurfaceStaticTokens & {
  opacity: string;
};

type CardContentTokens = {
  base: {
    paddingLeft: string;
    paddingTop: string;
    paddingRight: string;
    paddingBottom: string;
  };
};

type CarouselTokens = {
  column: CarouselColumnTokens;
  slides: CarouselSlidesTokens;
  slide: CarouselSlideTokens;
  indicators: CarouselIndicatorsTokens;
};

type CarouselColumnTokens = {
  base: {
    backgroundColor: string;
    gap: string;
  };
};

type CarouselSlidesTokens = {
  base: {
    gap: string;
  };
};

type CarouselSlideTokens = {
  base: {
    backgroundColor: string;
    borderRadius: string;
  };
};

type CarouselIndicatorsTokens = {
  base: {
    backgroundColor: string;
    borderRadius: string;
    width: string;
    height: string;
    gap: string;
  };
  variants: {
    active: {
      true: {
        backgroundColor: string;
      };
    };
  };
};

type CheckboxTokens = {
  row: CheckboxRowTokens;
  input: CheckboxInputTokens;
  label: CheckboxLabelTokens;
};

type CheckboxRowTokens = {
  base: {
    gap: string;
    alignItems: string;
  };
  variants: {
    error: {
      true: {
        color: string;
      };
    };
    disabled: {
      true: {
        opacity: string;
      };
    };
  };
};

/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 * @todo Move the non-error interactive states to a `variants.error.false`
 * variant.
 */
type CheckboxInputTokens = {
  base: {
    color: string;
    backgroundColor: string;
    paddingLeft: string;
    paddingRight: string;
    paddingTop: string;
    paddingBottom: string;
    borderRadius: string;
    borderWidth: string;
    borderStyle: string;
    borderColor: string;
    ":hover": {
      borderColor: string;
    };
    ":focus-within": {
      borderColor: string;
    };
    ":active": {
      borderColor: string;
    };
  };
  variants: {
    error: {
      true: CheckboxInputErrorTokens;
    };
  };
};
 
/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 */
type CheckboxInputErrorTokens = _CheckboxInputStateTokens & {
  ":hover": _CheckboxInputStateTokens;
  ":focus-visible": _CheckboxInputStateTokens;
  ":active": _CheckboxInputStateTokens;
  ":disabled": _CheckboxInputStateTokens;
};
 
type _CheckboxInputStateTokens = {
  backgroundColor: string;
  borderColor: string;
  color: string;
};

type CheckboxLabelTokens = {
  base: {
    font: string;
  };
};

type ContainerTokens = {
  container: ContainerContainerTokens;
};

type ContainerContainerTokens = {
  variants: {
    bleed: {
      false: {
        maxWidth: string;
      } & ResponsiveTokens<{
        paddingLeft: string;
        paddingRight: string;
      }>;
    };
  };
};

type DialogTokens = {
  scrim: DialogScrimTokens;
  surface: DialogSurfaceTokens;
};

type DialogScrimTokens = {
  base: {
    paddingLeft: string;
    paddingTop: string;
    paddingRight: string;
    paddingBottom: string;
  };
};

type DialogSurfaceTokens = {
  base: {
    backgroundColor: string;
    color: string;
    borderWidth: string;
    borderStyle: string;
    borderColor: string;
    borderRadius: string;
    boxShadow: string;
    maxWidth: string;
  };
};

type DividerTokens = {
  divider: DividerDividerTokens;
};

type DividerDividerTokens = {
  base: {
    borderWidth: string;
    borderStyle: string;
    borderColor: string;
  };
};

type DrawerTokens = {
  surface: DrawerSurfaceTokens;
};

type DrawerSurfaceTokens = {
  base: {
    paddingLeft: string;
    paddingTop: string;
    paddingRight: string;
    paddingBottom: string;
  };
  variants: {
    edge: {
      left: {
        maxWidth: string;
      };
      top: {
        maxHeight: string;
      };
      right: {
        maxWidth: string;
      };
      bottom: {
        maxHeight: string;
      };
    };
  };
};

type ExpansionPanelTokens = {
  surface: ExpansionPanelSurfaceTokens;
  header: ExpansionPanelHeaderTokens;
  panel: ExpansionPanelPanelTokens;
};

type ExpansionPanelSurfaceTokens = {
  base: {
    backgroundColor: string;
    borderTopWidth: string;
    borderBottomWidth: string;
    borderColor: string;
    borderTopLeftRadius: string;
    borderTopRightRadius: string;
    borderBottomLeftRadius: string;
    borderBottomRightRadius: string;
  };
  variants: {
    disabled: {
      true: {
        opacity: string;
      };
    };
  };
};

type ExpansionPanelHeaderTokens = {
  base: {
    borderTopWidth: string;
    borderBottomWidth: string;
    borderStyle: string;
    borderColor: string;
    borderTopLeftRadius: string;
    borderTopRightRadius: string;
    borderBottomLeftRadius: string;
    borderBottomRightRadius: string;
    paddingTop: string;
    paddingRight: string;
    paddingBottom: string;
    paddingLeft: string;
    gap: string;
  } & ResponsiveTokens<{
    font: string;
  }> &
    InteractiveTokens<{
      backgroundColor: string;
      color: string;
    }>;
};

type ExpansionPanelPanelTokens = {
  base: {
    font: string;
    backgroundColor: string;
    borderTopWidth: string;
    borderBottomWidth: string;
    borderTopLeftRadius: string;
    borderTopRightRadius: string;
    borderBottomLeftRadius: string;
    borderBottomRightRadius: string;
    borderColor: string;
    boxShadow: string;
    color: string;
    paddingTop: string;
    paddingRight: string;
    paddingBottom: string;
    paddingLeft: string;
    gap: string;
  };
};

type FigureTokens = {
  column: FigureColumnTokens;
  caption: FigureCaptionTokens;
};

type FigureColumnTokens = {
  base: {
    gap: string;
    alignItems: string;
  };
};

type FigureCaptionTokens = {
  base: {
    font: string;
  };
};

type FormFieldTokens = {
  column: FormFieldColumnTokens;
  label: FormFieldLabelTokens;
  indicator: FormFieldIndicatorTokens;
  error: FormFieldErrorTokens;
  hint: FormFieldHintTokens;
};

type FormFieldColumnTokens = {
  base: {
    gap: string;
  };
};

type FormFieldLabelTokens = {
  base: {
    font: string;
    color: string;
  };
  variants: {
    disabled: {
      true: {
        opacity: string;
      };
    };
  };
};

type FormFieldIndicatorTokens = {
  base: {
    font: string;
    color: string;
  };
  variants: {
    disabled: {
      true: {
        opacity: string;
      };
    };
  };
};

type FormFieldErrorTokens = {
  base: {
    font: string;
    color: string;
  };
  variants: {
    disabled: {
      true: {
        opacity: string;
      };
    };
  };
};

type FormFieldHintTokens = {
  base: {
    font: string;
    color: string;
  };
  variants: {
    disabled: {
      true: {
        opacity: string;
      };
    };
  };
};

type GridTokens = {
  grid: GridGridTokens;
};

type GridGridTokens = {
  base: ResponsiveTokens<{
    gap: string;
  }>;
};

type HeroTokens = {
  scrim: HeroScrimTokens;
  container: HeroContainerTokens;
  card: HeroCardTokens;
};

type HeroScrimTokens = {
  base: {
    background: string;
  };
};

type HeroContainerTokens = {
  base: ResponsiveTokens<{
    paddingTop: string;
    paddingBottom: string;
  }>;
};

type HeroCardTokens = {
  base: {
    maxWidth: string;
  };
};

type IconTokens = {
  icon: IconIconTokens;
};

type IconIconTokens = {
  variants: {
    size: {
      small: IconIconSizeTokens;
      medium: IconIconSizeTokens;
      large: IconIconSizeTokens;
    };
  };
};
 
type IconIconSizeTokens = {
  height: string;
  width: string;
  padding: string;
};

type IconButtonTokens = {
  button: IconButtonButtonTokens;
  icon: IconButtonIconTokens;
};

type IconButtonButtonTokens = {
  variants: {
    variant: {
      primary: IconButtonButtonVariantTokens;
      secondary: IconButtonButtonVariantTokens;
      tertiary: IconButtonButtonVariantTokens;
    };
    size: {
      small: IconButtonButtonSizeTokens;
      medium: IconButtonButtonSizeTokens;
      large: IconButtonButtonSizeTokens;
    };
  };
};
 
/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 */
type IconButtonButtonVariantTokens = {
  backgroundColor: string;
  color: string;
  borderWidth: string;
  borderStyle: string;
  borderColor: string;
  borderRadius: string;
  boxShadow: string;
  ":hover": _IconButtonButtonStateTokens;
  ":focus-visible": _IconButtonButtonStateTokens & OutlineTokens;
  ":active": _IconButtonButtonStateTokens;
  ":disabled": {
    opacity: string;
  };
};
 
type _IconButtonButtonStateTokens = {
  backgroundColor: string;
  color: string;
  borderColor: string;
  boxShadow: string;
};
 
type IconButtonButtonSizeTokens = {
  width: string;
  height: string;
};

/**
 * @todo Remove all of the interactive states from the icon itself, as the color
 * can be inherited from the `iconButton.button` tokens. The only thing we may
 * need in the `iconButton.icon` element tokens is to optionally set the color
 * to "inherit" in case this was changed on the `Icon` component tokens.
 */
type IconButtonIconTokens = {
  base: {
    color: string;
    ":hover": {
      color: string;
    };
    ":focus-visible": {
      color: string;
    };
    ":active": {
      color: string;
    };
    ":disabled": {
      color: string;
    };
  };
};

type InfoTokens = {
  column: InfoColumnTokens;
  content: InfoContentTokens;
  titleGroup: InfoTitleGroupTokens;
  overline: InfoOverlineTokens;
  title: InfoTitleTokens;
  subtitle: InfoSubtitleTokens;
  body: InfoBodyTokens;
};

type InfoColumnTokens = {
  base: {
    gap: string;
  };
};

type InfoContentTokens = {
  variants: {
    emphasis: {
      low: InfoContentEmphasisTokens;
      medium: InfoContentEmphasisTokens;
      high: InfoContentEmphasisTokens;
    };
  };
};
 
type InfoContentEmphasisTokens = ResponsiveTokens<{
  gap: string;
}>;

type InfoTitleGroupTokens = {
  variants: {
    emphasis: {
      low: InfoTitleGroupEmphasisTokens;
      medium: InfoTitleGroupEmphasisTokens;
      high: InfoTitleGroupEmphasisTokens;
    };
  };
};
 
type InfoTitleGroupEmphasisTokens = ResponsiveTokens<{
  gap: string;
}>;

type InfoOverlineTokens = {
  base: {
    font: string;
    color: string;
  };
};

type InfoTitleTokens = {
  base: {
    color: string;
  };
  variants: {
    emphasis: {
      low: InfoTitleEmphasisTokens;
      medium: InfoTitleEmphasisTokens;
      high: InfoTitleEmphasisTokens;
    };
  };
};
 
type InfoTitleEmphasisTokens = ResponsiveTokens<{
  font: string;
}>;

type InfoSubtitleTokens = {
  base: {
    color: string;
  };
  variants: {
    emphasis: {
      low: InfoSubtitleEmphasisTokens;
      medium: InfoSubtitleEmphasisTokens;
      high: InfoSubtitleEmphasisTokens;
    };
  };
};
 
type InfoSubtitleEmphasisTokens = ResponsiveTokens<{
  font: string;
}>;

type InfoBodyTokens = {
  variants: {
    emphasis: {
      low: InfoBodyEmphasisTokens;
      medium: InfoBodyEmphasisTokens;
      high: InfoBodyEmphasisTokens;
    };
  };
};
 
type InfoBodyEmphasisTokens = {
  font: string;
};

type InputTokens = {
  row: InputRowTokens;
  input: InputInputTokens;
};

/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 * @todo Move the non-error interactive states to a `variants.error.false`
 * variant.
 */
type InputRowTokens = {
  base: {
    paddingLeft: string;
    paddingRight: string;
    paddingTop: string;
    paddingBottom: string;
    borderWidth: string;
    borderStyle: string;
    borderRadius: string;
    gap: string;
  } & _InputRowStateTokens & {
      ":hover": _InputRowStateTokens;
      ":focus-within": _InputRowStateTokens & OutlineTokens;
      ":active": _InputRowStateTokens;
    };
  variants: {
    error: {
      true: _InputRowStateTokens & {
        ":hover": _InputRowStateTokens;
        ":focus-within": _InputRowStateTokens & OutlineTokens;
        ":active": _InputRowStateTokens;
      };
    };
    disabled: {
      true: {
        opacity: string;
      };
    };
  };
};
 
type _InputRowStateTokens = {
  backgroundColor: string;
  borderColor: string;
  color: string;
};

type InputInputTokens = {
  base: {
    font: string;
    paddingLeft: string;
    paddingRight: string;
    paddingTop: string;
    paddingBottom: string;
  };
};

type LinkTokens = {
  anchor: LinkAnchorTokens;
  row: LinkRowTokens;
  icon: LinkIconTokens;
};

type LinkAnchorTokens = {
  base: {
    borderRadius: string;
  };
  variants: {
    inline: {
      true: LinkAnchorInlineTokens;
      false: LinkAnchorInlineTokens;
    };
  };
};
 
/**
 * @todo Either remove the `backgroundColor` from the `:focus-visible` state or
 * add it to all of the other states as well.
 */
type LinkAnchorInlineTokens = InteractiveTokens<{
  color: string;
  opacity: string;
  font: string;
}> & {
  ":focus-visible": {
    backgroundColor: string;
  };
};

type LinkRowTokens = {
  base: {
    gap: string;
  };
};

type LinkIconTokens = {
  variants: {
    inline: {
      true: LinkIconInlineTokens;
      false: LinkIconInlineTokens;
    };
  };
};
 
/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 */
type LinkIconInlineTokens = {
  color: string;
  ":hover": {
    color: string;
  };
  ":focus-visible": {
    color: string;
  };
  ":active": {
    color: string;
  };
  ":disabled": {
    color: string;
  };
};

type MenuTokens = {
  surface: MenuSurfaceTokens;
  item: MenuItemTokens;
  label: MenuLabelTokens;
};

type MenuSurfaceTokens = {
  base: {
    backgroundColor: string;
    borderRadius: string;
    borderWidth: string;
    borderStyle: string;
    borderColor: string;
  };
};

/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 */
type MenuItemTokens = {
  base: {
    gap: string;
    paddingLeft: string;
    paddingTop: string;
    paddingRight: string;
    paddingBottom: string;
    borderRadius: string;
    backgroundColor: string;
    color: string;
    ":hover": {
      backgroundColor: string;
      color: string;
    };
    ":focus-visible": {
      backgroundColor: string;
      color: string;
    };
    ":active": {
      backgroundColor: string;
      color: string;
    };
  };
};

type MenuLabelTokens = {
  base: {
    font: string;
  };
};

type ModalTokens = {
  scrim: ModalScrimTokens;
};

type ModalScrimTokens = {
  base: {
    backgroundColor: string;
  };
};

type SectionTokens = {
  container: SectionContainerTokens;
};

type SectionContainerTokens = {
  variants: {
    bleed: {
      false: ResponsiveTokens<{
        paddingTop: string;
        paddingBottom: string;
      }>;
    };
  };
};

type SelectTokens = {
  row: SelectRowTokens;
  input: SelectInputTokens;
  popover: SelectPopoverTokens;
  option: SelectOptionTokens;
};

/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 * @todo Move the non-error interactive states to a `variants.error.false`
 * variant.
 */
type SelectRowTokens = {
  base: {
    gap: string;
    color: string;
    backgroundColor: string;
    paddingLeft: string;
    paddingRight: string;
    paddingTop: string;
    paddingBottom: string;
    borderRadius: string;
    borderWidth: string;
    borderStyle: string;
    borderColor: string;
    ":hover": {
      borderColor: string;
    };
    ":focus-within": {
      borderColor: string;
    };
    ":active": {
      borderColor: string;
    };
  };
  variants: {
    error: {
      true: {
        backgroundColor: string;
        borderColor: string;
        color: string;
        ":hover": {
          backgroundColor: string;
          borderColor: string;
          color: string;
        };
        ":focus-visible": {
          backgroundColor: string;
          borderColor: string;
          color: string;
        };
        ":active": {
          backgroundColor: string;
          borderColor: string;
          color: string;
        };
        ":disabled": {
          backgroundColor: string;
          borderColor: string;
          color: string;
        };
      };
    };
    disabled: {
      true: {
        opacity: string;
      };
    };
  };
};

type SelectInputTokens = {
  base: {
    font: string;
    paddingLeft: string;
    paddingRight: string;
    paddingTop: string;
    paddingBottom: string;
  };
};

type SelectPopoverTokens = {
  base: {
    backgroundColor: string;
    borderRadius: string;
    borderWidth: string;
    borderStyle: string;
    borderColor: string;
  };
};

/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 */
type SelectOptionTokens = {
  base: {
    gap: string;
    paddingLeft: string;
    paddingTop: string;
    paddingRight: string;
    paddingBottom: string;
    borderRadius: string;
    backgroundColor: string;
    color: string;
    ":hover": {
      backgroundColor: string;
      color: string;
    };
    ":focus-visible": {
      backgroundColor: string;
      color: string;
    };
    ":active": {
      backgroundColor: string;
      color: string;
    };
  };
};

type SliderTokens = {
  row: SliderRowTokens;
  track: SliderTrackTokens;
  handle: SliderHandleTokens;
};

type SliderRowTokens = {
  base: {
    borderRadius: string;
  };
  variants: {
    disabled: {
      true: {
        opacity: string;
      };
    };
  };
};

type SliderTrackTokens = {
  base: {
    height: string;
  };
  variants: {
    active: {
      true: SliderTrackActiveTokens;
      false: SliderTrackActiveTokens;
    };
  };
};
 
/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 */
type SliderTrackActiveTokens = {
  backgroundColor: string;
  ":hover": {
    backgroundColor: string;
  };
  ":focus-visible": {
    backgroundColor: string;
  };
  ":active": {
    backgroundColor: string;
  };
  ":disabled": {
    backgroundColor: string;
  };
};

type SliderHandleTokens = {
  base: {
    borderRadius: string;
    height: string;
    width: string;
  } & InteractiveTokens<{
    backgroundColor: string;
  }>;
};

type SnackbarTokens = {
  column: SnackbarColumnTokens;
  row: SnackbarRowTokens;
  message: SnackbarMessageTokens;
};

type SnackbarColumnTokens = {
  base: {
    paddingLeft: string;
    paddingTop: string;
    paddingRight: string;
    paddingBottom: string;
  };
};

type SnackbarRowTokens = {
  base: {
    gap: string;
  };
};

type SnackbarMessageTokens = {
  base: {
    font: string;
  };
};

type SurfaceTokens = {
  surface: SurfaceSurfaceTokens;
};

type SurfaceSurfaceTokens = {
  base: {
    backgroundColor: string;
    color: string;
    borderRadius: string;
    borderWidth: string;
    borderStyle: string;
    borderColor: string;
  };
  variants: {
    variant: {
      primary: SurfaceSurfaceVariantTokens;
      secondary: SurfaceSurfaceVariantTokens;
      tertiary: SurfaceSurfaceVariantTokens;
      info: SurfaceSurfaceVariantTokens;
      success: SurfaceSurfaceVariantTokens;
      warning: SurfaceSurfaceVariantTokens;
      error: SurfaceSurfaceVariantTokens;
      lowest: SurfaceSurfaceVariantTokens;
      low: SurfaceSurfaceVariantTokens;
      medium: SurfaceSurfaceVariantTokens;
      high: SurfaceSurfaceVariantTokens;
      highest: SurfaceSurfaceVariantTokens;
    };
    elevation: {
      0: SurfaceSurfaceElevationTokens;
      100: SurfaceSurfaceElevationTokens;
      200: SurfaceSurfaceElevationTokens;
      300: SurfaceSurfaceElevationTokens;
      400: SurfaceSurfaceElevationTokens;
      500: SurfaceSurfaceElevationTokens;
    };
    interactive: {
      true: SurfaceSurfaceInteractiveTokens;
    };
  };
};
 
type SurfaceSurfaceVariantTokens = {
  backgroundColor: string;
  borderColor: string;
  color: string;
};
 
type SurfaceSurfaceElevationTokens = {
  boxShadow: string;
};
 
/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 */
type SurfaceSurfaceInteractiveTokens = {
  ":hover": {
    backgroundColor: string;
    borderColor: string;
  };
  ":focus-visible": OutlineTokens;
  ":active": {
    backgroundColor: string;
    borderColor: string;
  };
  ":disabled": {
    opacity: string;
  };
};

type TextTokens = {
  text: TextTextTokens;
};

type TextTextTokens = {
  variants: {
    variant: {
      displayLarge: ResponsiveTokens<TextTextVariantTokens>;
      displayMedium: ResponsiveTokens<TextTextVariantTokens>;
      displaySmall: ResponsiveTokens<TextTextVariantTokens>;
      headlineLarge: ResponsiveTokens<TextTextVariantTokens>;
      headlineMedium: ResponsiveTokens<TextTextVariantTokens>;
      headlineSmall: ResponsiveTokens<TextTextVariantTokens>;
      titleLarge: ResponsiveTokens<TextTextVariantTokens>;
      titleMedium: ResponsiveTokens<TextTextVariantTokens>;
      titleSmall: ResponsiveTokens<TextTextVariantTokens>;
      bodySmall: TextTextVariantTokens;
      bodyMedium: TextTextVariantTokens;
      bodyLarge: TextTextVariantTokens;
      labelLarge: TextTextVariantTokens;
      labelMedium: TextTextVariantTokens;
      labelSmall: TextTextVariantTokens;
    };
  };
};
 
type TextTextVariantTokens = {
  font: string;
};

type TextAreaTokens = {
  input: TextAreaInputTokens;
};

/**
 * @todo Align these states using the standard `InteractiveTokens<T>` pattern.
 * @todo Move the non-error interactive states to a `variants.error.false`
 * variant.
 */
type TextAreaInputTokens = {
  base: {
    backgroundColor: string;
    borderWidth: string;
    borderStyle: string;
    borderColor: string;
    borderRadius: string;
    paddingLeft: string;
    paddingRight: string;
    paddingTop: string;
    paddingBottom: string;
    font: string;
    color: string;
    ":hover": _TextAreaInputStateTokens;
    ":focus-visible": _TextAreaInputStateTokens & OutlineTokens;
    ":active": _TextAreaInputStateTokens;
    ":disabled": {
      opacity: string;
    };
  };
  variants: {
    error: {
      true: _TextAreaInputStateTokens & {
        ":hover": _TextAreaInputStateTokens;
        ":focus-visible": _TextAreaInputStateTokens & OutlineTokens;
        ":active": _TextAreaInputStateTokens;
      };
    };
  };
};
 
type _TextAreaInputStateTokens = {
  backgroundColor: string;
  borderColor: string;
  color: string;
};

type TooltipTokens = {
  tooltip: TooltipTooltipTokens;
  arrow: TooltipArrowTokens;
};

type TooltipTooltipTokens = {
  base: {
    backgroundColor: string;
    borderRadius: string;
    color: string;
    font: string;
    maxWidth: string;
    paddingTop: string;
    paddingBottom: string;
    paddingLeft: string;
    paddingRight: string;
  };
};

type TooltipArrowTokens = {
  base: {
    width: string;
    height: string;
  };
};

type VideoControlsTokens = {
  row: VideoControlsRowTokens;
  group: VideoControlsGroupTokens;
  timecode: VideoControlsTimecodeTokens;
};

type VideoControlsRowTokens = {
  base: {
    backgroundColor: string;
    padding: string;
    gap: string;
  };
};

type VideoControlsGroupTokens = {
  base: {
    gap: string;
  };
};

type VideoControlsTimecodeTokens = {
  base: {
    color: string;
    font: string;
  };
};