apphouse/dist/styles/defaults/app.token.values.ts

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

import { getMediaQuery } from '../mediaQueries';
import {
  MaxScreenSizeL,
  MaxScreenSizeM,
  MaxScreenSizeS,
  MaxScreenSizeXL,
  MaxScreenSizeXS
} from '../screenSizes';
import {
  BorderWidthTokensType,
  ThemeTokens,
  FontFamilyTokensType,
  FontSizeTokensType,
  FontWeightTokensType,
  IconSizeTokensType,
  LineHeightTokensType,
  MediaQueryTokensType,
  OpacityTokensType,
  RadiusTokensType,
  SpacingsTokensType,
  ZIndexTokensType
} from './themes.interface';

/**
 * Default App Token Values
 */
const PrimaryFontFamily =
  '-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica, sans-serif';

/**
 * Default App Icon Size Tokens
 */
export const IconSizes: IconSizeTokensType = {
  xxxl: 64,
  xxl: 56,
  xl: 48,
  l: 30,
  m: 24,
  s: 12,
  xs: 8
};

/**
 * Default App FontWeight Tokens
 */
export const FontWeights: FontWeightTokensType = {
  light: 300,
  standard: 400,
  bold: 600,
  bolder: 700,
  extraBold: 900
};

/**
 * Default App Spacings Tokens
 */
export const Spacings: SpacingsTokensType = {
  none: 0,
  one: 1,
  xxs: 2,
  xs: 4,
  s: 6,
  default: 8,
  gutter: 12,
  r: 12,
  m: 16,
  l: 20,
  xl: 30,
  xxl: 40,
  xxxl: 56
};

/**
 * Default App Border Widths Tokens
 */
export const BordersWidths: BorderWidthTokensType = {
  none: '0px',
  thin: '1px',
  default: '2px'
};

/**
 * Default App Radius Tokens
 */
export const Radius: RadiusTokensType = {
  circle: '50%',
  default: '6px',
  s: '4px',
  m: '8px',
  l: '12px',
  xs: '2px',
  xl: '16px'
};

/**
 * Default App Media Queries Tokens
 */
export const MediaQueries: MediaQueryTokensType = {
  xs: getMediaQuery.screen({
    smallerThan: MaxScreenSizeXS
  }),
  s: getMediaQuery.screen({
    smallerThan: MaxScreenSizeS
  }),
  m: getMediaQuery.screen({
    smallerThan: MaxScreenSizeM
  }),
  l: getMediaQuery.screen({
    smallerThan: MaxScreenSizeL
  }),
  xl: getMediaQuery.screen({
    smallerThan: MaxScreenSizeXL
  }),
  nonSmallScreens: getMediaQuery.screen({ biggerThan: MaxScreenSizeS }),
  smallScreens: getMediaQuery.screen({ smallerThan: MaxScreenSizeS })
};

// const FontSizesOptions = {
//   xs: 10,
//   s: 13,
//   m: 16,
//   l: 22,
//   xl: 28,
//   xxl: 42,
//   xxxl: 60
// };

const TypographySizes = {
  caption: 10,
  header: 42,
  large: 60,
  legal: 12,
  small: 11,
  standard: 15,
  standardLarge: 18,
  standardSmall: 13,
  subheader: 26,
  subtitle: 16,
  tag: 13,
  title: 18
};
const fontUnit = 'px';
const ts = (variant: keyof FontSizeTokensType, multiplier?: number) => {
  const size = TypographySizes[variant];
  return size * (multiplier || 1) + fontUnit;
};
/**
 * Default App Font Size Tokens
 */
export const FontSizes: FontSizeTokensType = {
  caption: ts('caption'),
  header: ts('header'),
  large: ts('large'),
  legal: ts('legal'),
  small: ts('small'),
  standard: ts('standard'),
  standardLarge: ts('standardLarge'),
  standardSmall: ts('standardSmall'),
  subheader: ts('subheader'),
  subtitle: ts('subtitle'),
  tag: ts('tag'),
  title: ts('title')
};

/**
 * Default App Line Height Tokens
 */
export const LineHeight: LineHeightTokensType = {
  caption: ts('caption'),
  header: ts('header'),
  large: ts('large'),
  legal: ts('legal'),
  small: ts('small'),
  standard: ts('standard'),
  standardLarge: ts('standardLarge'),
  standardSmall: ts('standardSmall'),
  subheader: ts('subheader'),
  subtitle: ts('subtitle'),
  tag: ts('tag'),
  title: ts('title')
};

/**
 * Default App Font Family Tokens
 */
export const FontFamilies: FontFamilyTokensType = {
  heading: PrimaryFontFamily,
  text: PrimaryFontFamily,
  default: PrimaryFontFamily,
  monospace: 'monospace'
};

export const ZIndexes: ZIndexTokensType = {
  default: 1,
  popup: 100,
  toast: 101,
  menu: 400,
  overlay: 99,
  panel: 80
};

export const Opacity: OpacityTokensType = {
  /**
   * Value to be applied when you want to make the current value disappear
   * completely
   */
  none: 0,
  /**
   * Value to be applied when you want to obtain approximately half opacity
   * of the current value. Suggested value is 0.5
   */
  dimmed: 0.5,
  /**
   * 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: 0.75
};

export const ApphouseThemeTokens: ThemeTokens = {
  borderWidth: BordersWidths,
  fontFamily: FontFamilies,
  fontSize: FontSizes,
  fontWeight: FontWeights,
  iconSize: IconSizes,
  lineHeight: LineHeight,
  mediaQuery: MediaQueries,
  opacity: Opacity,
  radius: Radius,
  spacings: Spacings,
  zIndex: ZIndexes
};