Semantic Tokens

Warning

This reference documentation is AI-generated and may contain errors.


interface SemanticTokens {
  colors: Colors;
  typography: Typography;
  hover: Hover;
  active: Active;
  focus: Focus;
  disabled: Disabled;
}

Colors


type Colors = {
  primary: ColorScheme;
  secondary: ColorScheme;
  tertiary: ColorScheme;
  success: ColorScheme;
  error: ColorScheme;
  warning: ColorScheme;
  info: ColorScheme;
  surface: SurfaceColors;
};
 
type ColorScheme = {
  base: string;
  onBase: string;
  container: string;
  onContainer: string;
};
 
type SurfaceColors = {
  baseDim: string;
  base: string;
  baseBright: string;
  onBase: string;
  onBaseVariant: string;
  outline: string;
  outlineVariant: string;
  container: {
    lowest: string;
    low: string;
    medium: string;
    high: string;
    highest: string;
  };
};

Typography


type Typography = {
  display: ResponsiveTextStyle;
  headline: ResponsiveTextStyle;
  title: ResponsiveTextStyle;
  body: TextStyle;
  label: TextStyle;
};
 
type ResponsiveTextStyle = Record<Breakpoint, TextStyle>;
 
type TextStyle = Record<TextSize, string>;
 
type TextSize = "large" | "medium" | "small";

Hover


type Hover = {
  backgroundColor: string;
  borderColor: string;
};

Active


type Active = {
  backgroundColor: string;
  borderColor: string;
};

Focus


type Focus = {
  outlineWidth: string;
  outlineStyle: string;
  outlineColor: string;
  outlineOffset: string;
};

Disabled


type Disabled = {
  opacity: string;
};