apphouse/dist/themes/token.interface.ts

Component library for React that uses observable state management and theme-able components.

export const TOKEN_KEY_SEPARATOR = '.';
export const TOKEN_PATH_PREFIX = 'tokens';
export const TOKEN_PATH_COLORS = 'colors';

export const tokenTypes = [
  'borderWidth',
  'color',
  'fontFamily',
  'fontSize',
  'fontStyle',
  'fontWeight',
  'iconSize',
  'letterSpacing',
  'lineHeight',
  'mediaQuery',
  'opacity',
  'radius',
  'size',
  'spacings',
  'zIndex'
] as const;

export const TokenPropertyMapping: Record<string, string> = {
  'background-color': 'color',
  'border-color': 'color',
  'border-radius': 'radius',
  'border-width': 'borderWidth',
  'font-family': 'fontFamily',
  'font-size': 'fontSize',
  'font-style': 'fontStyle',
  'font-weight': 'fontWeight',
  'grid-gap': 'spacings',
  'line-height': 'lineHeight',
  'line-spacing': 'letterSpacing',
  'margin-bottom': 'spacings',
  'margin-left': 'spacings',
  'margin-right': 'spacings',
  'margin-top': 'spacings',
  'padding-bottom': 'spacings',
  'padding-left': 'spacings',
  'padding-right': 'spacings',
  'padding-top': 'spacings',
  backgroundColor: 'color',
  borderColor: 'color',
  borderRadius: 'radius',
  borderWidth: 'borderWidth',
  color: 'color',
  fontFamily: 'fontFamily',
  fontSize: 'fontSize',
  fontStyle: 'fontStyle',
  fontWeight: 'fontWeight',
  gridGap: 'spacings',
  letterSpacing: 'letterSpacing',
  lineHeight: 'lineHeight',
  margin: 'spacings',
  marginBottom: 'spacings',
  marginLeft: 'spacings',
  marginRight: 'spacings',
  marginTop: 'spacings',
  opacity: 'opacity',
  padding: 'spacings',
  paddingBottom: 'spacings',
  paddingLeft: 'spacings',
  paddingRight: 'spacings',
  paddingTop: 'spacings',
  zIndex: 'zIndex'
};
export type TokenTypeOption = (typeof tokenTypes)[number] | string;

export const defaultFontFamilyIdTypes = ['default'];

/**
 * Tokens are a platform-agnostic format but they can be used in platform-specific code.
 * There are three kinds of tokens: reference, system, and component. Material Design currently
 * uses reference and system tokens; component tokens are in development.
 * Tokens help maintain alignment and consistency in a design system.
 */
export interface TokenType {
  /**
   * The key of the token ex. xSmall, large, medium
   */
  key: string;
  /**
   * The raw value for the token ex. 8px, 16px, 24px
   */
  value: string | number;
  /**
   * The type of token ex. spacing, backgroundColor, radius, etc..
   */
  type: TokenTypeOption;
  /**
   * The theme id for which this palette is for
   */
  themeId?: string;
  /**
   * When palette is copied or imported from another theme it will have a
   * reference to the original theme id
   */
  referenceThemeId?: string;
}