Skip to main content

Color Getters

Overview​

These utility functions provide a consistent interface for retrieving design token colors based on the ColorType enum (primary, secondary, or tertiary). Each function corresponds to a specific color role in the design system and returns the appropriate color variant based on the requested type.

Functions​

getSurface(ColorType colorType)​

Returns the appropriate surface color for the specified color type.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the surface color
  • Usage: 
    Color primarySurface = Tokens.getSurface(ColorType.primary);
    Color secondarySurface = Tokens.getSurface(ColorType.secondary);

getOnSurface(ColorType colorType)​

Returns the appropriate "on surface" color for the specified color type. "On" colors are typically used for content that appears on top of the corresponding surface color.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the on-surface color
  • Usage: 
    Color textOnPrimarySurface = Tokens.getOnSurface(ColorType.primary);

getBackground(ColorType colorType)​

Returns the appropriate background color for the specified color type.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the background color
  • Usage: 
    Color primaryBackground = Tokens.getBackground(ColorType.primary);

getOnBackground(ColorType colorType)​

Returns the appropriate "on background" color for the specified color type. Used for content that appears on top of the corresponding background color.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the on-background color
  • Usage: 
    Color textOnPrimaryBackground = Tokens.getOnBackground(ColorType.primary);

getInverseSurface(ColorType colorType)​

Returns the appropriate inverse surface color for the specified color type. Inverse surfaces provide color contrast to the main surfaces.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the inverse surface color
  • Usage: 
    Color inverseSurface = Tokens.getInverseSurface(ColorType.primary);

getOnInverseSurface(ColorType colorType)​

Returns the appropriate "on inverse surface" color for the specified color type. Used for content that appears on top of the corresponding inverse surface.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the on-inverse-surface color
  • Usage: 
    Color textOnInverse = Tokens.getOnInverseSurface(ColorType.primary);

getInverse(ColorType colorType)​

Returns the appropriate inverse color for the specified color type. Used for creating contrast with the primary colors.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the inverse color
  • Usage: 
    Color inversePrimary = Tokens.getInverse(ColorType.primary);

getOutline(ColorType colorType)​

Returns the appropriate outline color for the specified color type. Used for borders and dividers.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the outline color
  • Usage: 
    Color primaryOutline = Tokens.getOutline(ColorType.primary);

getContainer(ColorType colorType)​

Returns the appropriate container color for the specified color type. Container colors are typically used for cards, dialogs, and other contained elements.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the container color
  • Usage: 
    Color primaryContainer = Tokens.getContainer(ColorType.primary);

getOnContainer(ColorType colorType)​

Returns the appropriate "on container" color for the specified color type. Used for content that appears on top of the corresponding container.

  • Parameters:
    • colorType (ColorType): The color type variant to retrieve
  • Returns: Color object representing the on-container color
  • Usage: 
    Color textOnContainer = Tokens.getOnContainer(ColorType.primary);

Best Practices​

  • Use these getter functions instead of directly accessing the color properties when the color type needs to be determined at runtime.
  • These functions help maintain a consistent color system that automatically adapts to the current color type.
  • They are especially useful for components that need to support multiple color variants.
  • Surface Colors: Used for card backgrounds, dialogs, and other surface elements
  • Background Colors: Used for screen backgrounds
  • Container Colors: Used for containing elements within surfaces
  • Outline Colors: Used for borders, dividers, and outlines
  • "On" Colors: Used for text and icons that appear on top of the corresponding surface/background/container

Example: Creating a Component with Dynamic Colors​

Widget buildCard(ColorType colorType, Widget child) {
  return Container(
    color: Tokens.getSurface(colorType),
    child: DefaultTextStyle(
      style: TextStyle(color: Tokens.getOnSurface(colorType)),
      child: child,
    ),
    decoration: BoxDecoration(
      border: Border.all(color: Tokens.getOutline(colorType)),
    ),
  );
}