apphouse/dist/styles/defaults/themes.interface.ts

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

import { CSSProperties } from 'glamor';
import { TokenType } from '../../themes/token.interface';
import { StyleType } from '../../themes/style.interface';
import { PaletteType } from '../../themes/palette.interface';

export interface TypographyStyles {
  a?: CSSProperties;
  caption: CSSProperties;
  emphasis?: CSSProperties;
  header: CSSProperties;
  label?: CSSProperties;
  large: CSSProperties;
  standard: CSSProperties;
  subheader: CSSProperties;
  subtitle: CSSProperties;
  title: CSSProperties;
  underlined: CSSProperties;
  accent: CSSProperties;
}

export type BodyStyles = CSSProperties;

export interface LayoutStyles {
  horizontal: CSSProperties;
  overlay: CSSProperties;
  vertical: CSSProperties;
}

export interface InputStyles {
  xs: CSSProperties;
  s: CSSProperties;
  m: CSSProperties;
  l: CSSProperties;
  xl: CSSProperties;
  xxl: CSSProperties;
  xxxl: CSSProperties;
}

export interface UtilityStyles {
  truncateWithEllipsis: CSSProperties;
  fadeInView: CSSProperties;
  disabled: CSSProperties;
}

export interface BackgroundStyles {
  forTransparency: CSSProperties;
  overlay?: CSSProperties;
  menu: CSSProperties;
  darkColor: CSSProperties;
  lightColor: CSSProperties;
}

export interface SeparatorStyles {
  horizontal: CSSProperties;
  vertical: CSSProperties;
}

export interface FocusStyles {
  mouse: CSSProperties;
  keyboard: CSSProperties;
}

export interface LoadingStyles {
  circular: CSSProperties;
  linear: CSSProperties;
}

export interface BoxSizeStyles {
  xs: CSSProperties;
  s: CSSProperties;
  m: CSSProperties;
  l: CSSProperties;
  xl: CSSProperties;
  xxl: CSSProperties;
  xxxl: CSSProperties;
}

/**
 * Type definition for general/global app styles
 */
export type BaseStyleTypeOption =
  | 'focus'
  | 'typography'
  | 'layout'
  | 'separator'
  | 'background'
  | 'button'
  | 'body'
  | 'input'
  | 'icon'
  | 'utility'
  | 'loading';
/**
 * Type definition for general/global app styles
 */
export interface ThemeStyles {
  focus: FocusStyles;
  /**
   * Styles to be applied for text when using this theme
   */
  typography: TypographyStyles;
  /**
   * Layout styles used to organize elements on the screen
   */
  layout: LayoutStyles;
  /**
   * Layout for separators
   */
  separator: SeparatorStyles;
  /**
   * Styles for specific background elements
   */
  background: BackgroundStyles;
  /**
   * Default styles to be applied to the root of a button element,
   * preferably a `<button>` element
   */
  button: ButtonStyleVariant;
  /**
   * Default styles to be applied to the root level component of the app of the page when using this theme
   */
  body: CSSProperties;
  /**
   * Default styles to be applied to inputs when using this theme
   */
  input: InputStyles;
  /**
   * Default styles to be applied to icons when using this theme
   */
  icon: CSSProperties;
  /**
   * helper styles to apply to perform a thing
   */
  utility: UtilityStyles;
  /**
   * Styles to be applied to loading components
   */
  loading: LoadingStyles;
  /**
   * Styles to be applied to sized boxed context,
   */
  boxSize: BoxSizeStyles;
}

/**
 * Type definition for general/global app styles
 * to be used when extending a theme
 * Do not use this type when creating a theme, only when extending
 */
export interface ExtendedThemeStyles {
  focus?: Partial<FocusStyles>;
  /**
   * Styles to be applied for text when using this theme
   */
  typography?: Partial<TypographyStyles>;
  /**
   * Layout styles used to organize elements on the screen
   */
  layout?: Partial<LayoutStyles>;
  /**
   * Layout for separators
   */
  separator?: Partial<SeparatorStyles>;
  /**
   * Styles for specific background elements
   */
  background?: Partial<BackgroundStyles>;
  /**
   * Default styles to be applied to the root of a button element,
   * preferably a `<button>` element
   */
  button?: Partial<ButtonStyleVariant>;
  /**
   * Default styles to be applied to the root level component of the app of the page when using this theme
   */
  body?: Partial<CSSProperties>;
  /**
   * Default styles to be applied to inputs when using this theme
   */
  input?: Partial<InputStyles>;
  /**
   * Default styles to be applied to icons when using this theme
   */
  icon?: Partial<CSSProperties>;
  /**
   * helper styles to apply to perform a thing
   */
  utility?: Partial<UtilityStyles>;
  /**
   * Styles to be applied to loading components
   */
  loading?: Partial<LoadingStyles>;
}

/**
 * Buttons options for appearance
 */
export type ButtonAppearanceOptions =
  | 'brand'
  | 'brandClear'
  | 'clear'
  | 'destructive'
  | 'primary'
  | 'secondary'
  | 'select'
  | 'tab'
  | 'tertiary';

/**
 * Buttons options for sizes
 */
export type ButtonSizeOptions = 'small' | 'medium' | 'large';

/**
 * Buttons options for style variants
 */
export type ButtonVariantOptions = 'borderless';
/**
 * Buttons options for state variants
 */
export type ButtonStateOptions = 'disabled';

/**
 * Buttons Styles Variant Type
 */
export type ButtonStyleVariant = Record<ButtonAppearanceOptions, CSSProperties>;

export interface FontFamilyTokensType {
  text?: string;
  brand?: string;
  accent?: string;
  heading?: string;
  default: string;
  monospace?: string;
}
/**
 * Interface to be used when applying font sizes
 */
export interface FontSizeTokensType {
  /**
   * Small font size to be used in small text
   */
  small: string;
  /**
   * Font size to be used in captions
   */
  caption: string;
  /**
   * Large font size to be used in large text
   */
  large: string;
  /**
   * Font size to be used in legal text
   */
  legal: string;
  /**
   * Font size to be used in subheader
   */
  subheader: string;
  /**
   * Font size to be used in subtitles
   */
  subtitle: string;
  /**
   * Font size to be used in titles
   */
  title: string;
  /**
   * Font size to be used in standard text, usually the predominant size throughout all components
   */
  standard: string;
  /**
   * Font size to be used in Tags
   */
  tag: string;
  /**
   * Font sizes to be applied to primary headings
   */
  header: string;
  standardLarge: string;
  standardSmall: string;
}

/**
 * Interface to be applied to font weights
 */
export interface FontWeightTokensType {
  light: number;
  standard: number;
  bold: number;
  bolder: number;
  extraBold: number;
}

/**
 * Interface to define border width values
 */
export interface BorderWidthTokensType {
  none: string;
  thin: string;
  default: string;
}

/**
 * Interface to define line heights
 */
export interface LineHeightTokensType {
  /**
   * Small font size to be used in small text
   */
  small: string;
  /**
   * Font size to be used in captions
   */
  caption: string;
  /**
   * Large font size to be used in large text
   */
  large: string;
  /**
   * Font size to be used in legal text
   */
  legal: string;
  /**
   * Font size to be used in subheader
   */
  subheader: string;
  /**
   * Font size to be used in subtitles
   */
  subtitle: string;
  /**
   * Font size to be used in titles
   */
  title: string;
  /**
   * Font size to be used in standard text, usually the predominant size throughout all components
   */
  standard: string;
  /**
   * Font size to be used in Tags
   */
  tag: string;
  /**
   * Font sizes to be applied to primary headings
   */
  header: string;
  standardLarge: string;
  standardSmall: string;
}

/**
 * Interface to define media queries for various screen sizes
 */
export interface MediaQueryTokensType {
  /**
   * Defines media query for extra small screens
   */
  xs: string;
  /**
   * Defines media query for  small screens
   */
  s: string;
  /**
   * Defines media query for medium screens
   */
  m: string;
  /**
   * Defines media query for large screens
   */
  l: string;
  /**
   * Defines media query for extra large screens
   */
  xl: string;
  /**
   * Defines media query for non small screens
   */
  nonSmallScreens: string;
  /**
   * Defines media query for  small screens
   */
  smallScreens: string;
}

/**
 * Interface to define opacity values
 */
export interface OpacityTokensType {
  /**
   * Value to be applied when you want to make the current value disappear
   * completely
   */
  none: number;
  /**
   * Value to be applied when you want to obtain approximately half opacity
   * of the current value. Suggested value is 0.5
   */
  dimmed: number;
  /**
   * Value to be applied when you want to obtain approximately just about a
   * quarter less opacity of the current value. Suggested value is 0.75
   */
  faded: number;
}

/**
 * Interface to define radius values
 */
export interface RadiusTokensType {
  /**
   * Radius size value for circles. Suggested value is 50%
   */
  circle: string;
  default: string;
  /**
   * Extra small size radius value
   */
  xs: string;
  /**
   * Small size radius value
   */
  s: string;
  /**
   * Medium size radius value
   */
  m: string;
  /**
   * Large size radius value
   */
  l: string;
  /**
   * Extra large size radius value
   */
  xl: string;
}

/**
 * Interface to define spacing values
 * These values are to be applied to spacings in grids, paddings and margins to separate
 * blocks of content
 */
export interface SpacingsTokensType {
  /**
   * Default value to be used when separating blocks of content
   */
  default: string | number;
  /**
   * Value to clear previous spacings or remove spacing. Suggested value is 0
   */
  none: string | number;
  /**
   * Default gutter size to be applied in layout grids
   */
  gutter: string | number;
  one: string | number;
  xxs: string | number;
  xs: string | number;
  s: string | number;
  m: string | number;
  r: string | number;
  l: string | number;
  xl: string | number;
  xxl: string | number;
  xxxl: string | number;
}
/**
 * Interface for styles to be applied to text
 */
export interface FontStyleTokensType {
  /**
   * Style to be used when referencing text with quotes
   */
  quote: string;
}

/**
 * Interface to define values for zIndexes
 */
export interface ZIndexTokensType {
  /**
   * z Index value for elements off screen
   */
  offscreen?: number;
  /**
   * The base zIndex value (zIndexes can go above or below this value)
   */
  default: number;
  /**
   * z Index value for popups
   */
  popup?: number;
  /**
   * z Index value for menus
   */
  menu?: number;
  /**
   * z Index value for overlays
   */
  overlay?: number;
  /**
   * z Index value for toast/notifications
   */
  toast?: number;
  panel?: number;
}
/**
 * Interface to define Icon sizes
 */
export interface IconSizeTokensType {
  xs: string | number;
  /**
   * Defines the size for a small size icon
   */
  s: string | number;
  /**
   * Defines the size for a medium size icon
   */
  m: string | number;
  /**
   * Defines the size for a large icon
   */
  l: string | number;
  /**
   * Defines the size for a extra large icon
   */
  xl: string | number;
  /**
   * Defines the size for a extra extra large icon
   */
  xxl: string | number;
  /**
   * Defines the size for a extra extra extra large icon
   */
  xxxl: string | number;
}

export interface FocusRingColorTokens {
  /**
   * Defines the color for the inner border of the focus ring
   */
  inset: string;
  /**
   * Defines the color for the outer most outline of the focus ring
   */
  outline: string;
}

/**
 * These colors will be the same for any theme
 */
export interface CommonColors {
  brand: string;
  brandAlt: string;
  error: string;
  info: string;
  onBrand: string;
  onBrandAlt: string;
  onError: string;
  onInfo: string;
  onSuccess: string;
  onWarning: string;
  required: string;
  success: string;
  toggleOn: string;
  warning: string;
  lightColor: string;
  darkColor: string;
}

export interface ThemedColors {
  background: string;
  onBackground: string;
  borderOnPrimary: string;
  borderOnPrimaryInverse: string;
  borderOnSurface: string;
  borderOnSurface10: string;
  focusRingInset: string;
  focusRingOutline: string;
  onPrimary_10: string;
  onPrimary_20: string;
  onPrimary_40: string;
  onPrimary_50: string;
  onPrimary_90: string;
  onPrimary_95: string;
  onPrimary: string;
  onPrimaryInverse_70: string;
  onPrimaryInverse: string;
  onSelection: string;
  onSurface: string;
  onSurface10: string;
  onSurface20: string;
  onSurface30: string;
  onSurface40: string;
  overlay: string;
  primary: string;
  primaryInverse: string;
  selection: string;
  surface: string;
  surface10: string;
  surface20: string;
  surface30: string;
  surface40: string;
}
/**
 * Includes all themed colors in the theme
 */
export interface ThemeColors extends CommonColors, ThemedColors {}

export interface ThemedExtendedTokensType
  extends Partial<CommonColors>,
    Partial<ThemedColors> {}

/**
 * Theme mode independent design tokens
 */
export interface ThemeTokens {
  /** Defines border widths */
  borderWidth: BorderWidthTokensType;
  /** Defines font families */
  fontFamily: FontFamilyTokensType;
  /** Defines font sizes */
  fontSize: FontSizeTokensType;
  /** Defines thickness for letters in fonts */
  fontWeight: FontWeightTokensType;
  /** Defines icon sizes */
  iconSize: IconSizeTokensType;
  /** Defines line heights */
  lineHeight?: LineHeightTokensType;
  /** Defines media queries */
  mediaQuery: MediaQueryTokensType;
  /** Defines opacities */
  opacity?: OpacityTokensType;
  /** Defines radius values */
  radius: RadiusTokensType;
  /** Defines spacings */
  spacings: SpacingsTokensType;
  /** Defines z indexes */
  zIndex: ZIndexTokensType;
}

/**
 * Interface to extend design tokens
 * This interface is used to extend the design tokens of a theme
 * Do not use this interface to create a theme, only when extending a theme
 */
export interface ExtendedThemeTokens {
  /** Defines border widths */
  borderWidth?: Partial<BorderWidthTokensType>;
  /** Defines <font families */
  fontFamily?: Partial<FontFamilyTokensType>;
  /** Defines font sizes */
  fontSize?: Partial<FontSizeTokensType>;
  /** Defines thickness for letters in fonts */
  fontWeight?: Partial<FontWeightTokensType>;
  /** Defines icon sizes */
  iconSize?: Partial<IconSizeTokensType>;
  /** Defines line heights */
  lineHeight?: Partial<LineHeightTokensType>;
  /** Defines media queries */
  mediaQuery?: Partial<MediaQueryTokensType>;
  /** Defines opacities */
  opacity?: Partial<OpacityTokensType>;
  /** Defines radius values */
  radius?: Partial<RadiusTokensType>;
  /** Defines spacings */
  spacings?: Partial<SpacingsTokensType>;
  /** Defines z indexes */
  zIndex?: Partial<ZIndexTokensType>;
}
/**
 * Interface for global App theme definition
 */
export interface ApphouseTheme {
  /**
   * A unique identifier for the theme
   */
  id?: string;
  /**
   * Defines a set of tokens that change values depending on the selected
   * color theme
   */
  colors: ThemeColors;
  /**
   * Defines a set of tokens that are theme independent
   */
  tokens: ThemeTokens;
  /**
   * Defines a set of styles for common sets of design tokens
   */
  styles: ThemeStyles;
}

/**
 * Interface for extended App theme definition
 * This interface is used to extend the theme with custom tokens
 * and styles
 * Only the properties that are extended need to be defined
 * The rest of the properties will be inherited from the ApphouseTheme interface
 * Do not use this interface without extending the ApphouseTheme interface
 */
export interface ExtendedApphouseTheme {
  /**
   * A unique identifier for the theme
   */
  id?: string;
  /**
   * Defines a set of tokens that change values depending on the selected
   * color theme
   */
  colors?: Partial<ThemeColors>;
  /**
   * Defines a set of tokens that are theme independent
   */
  tokens?: Partial<ExtendedThemeTokens>;
  /**
   * Defines a set of styles for common sets of design tokens
   */
  styles?: Partial<ExtendedThemeStyles>;
}

export interface ThemeFull {
  id: string;
  title: string;
  colors: PaletteType[];
  tokens: TokenType[];
  styles: StyleType[];
}

export interface ThemeFlat {
  id: string;
  title: string;
  tokens: object;
  colors: Record<string, object>;
  styles: Record<string, any>;
}