apphouse/dist/themes/style.interface.ts

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

import { CSSProperties } from 'glamor';
import { ColorDefinition } from './utils/color.interface';
/**
 * Styles may contain values that are references to colors
 * or tokens
 */
export const COLOR = 'color';
export const TOKEN = 'token';

export type StyleTokenReferenceType = typeof COLOR | typeof TOKEN;

export interface StyleTokenReference {
  /**
   * The type of this reference
   */
  type: StyleTokenReferenceType;
  /**
   * Actual value for this token reference
   * ex. for spacings.small the can be a number
   * for backgroundColors.background the value can be a color definition
   */
  value: ColorDefinition | string | number;
  /**
   * The path to the actual value of this token in this system
   * ex. backgroundColors.background, spacings.xSmall
   * This value will be the token type + token key
   */
  key: string;
}
export const htmlTags = [
  'abbr',
  'a',
  'acronym',
  'address',
  'applet',
  'area',
  'article',
  'audio',
  'b',
  'base',
  'basefont',
  'bdi',
  'bdo',
  'big',
  'blink',
  'br',
  'button',
  'canvas',
  'caption',
  'center',
  'cite',
  'code',
  'col',
  'colgroup',
  'content',
  'data',
  'datalist',
  'dd',
  'del',
  'details',
  'dfn',
  'dialog',
  'dir',
  'div',
  'dl',
  'dt',
  'element',
  'em',
  'embed',
  'fieldset',
  'figcaption',
  'figure',
  'footer',
  'form',
  'frame',
  'frameset',
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'head',
  'header',
  'hgroup',
  'hr',
  'html',
  'i',
  'input',
  'ins',
  'isindex',
  'kbd',
  'keygen',
  'label',
  'legend',
  'li',
  'listing',
  'main',
  'map',
  'mark',
  'menu',
  'menuitem',
  'meter',
  'nav',
  'noembed',
  'noscript',
  'object',
  'ol',
  'optgroup',
  'option',
  'output',
  'p',
  'param',
  'plaintext',
  'pre',
  'progress',
  'q',
  'rp',
  'rt',
  'rtc',
  'ruby',
  's',
  'samp',
  'script',
  'section',
  'select',
  'shadow',
  'small',
  'source',
  'spacer',
  'span',
  'strike',
  'strong',
  'style',
  'sub',
  'summary',
  'sup',
  'table',
  'tbody',
  'td',
  'template',
  'tfoot',
  'th',
  'thead',
  'time',
  'title',
  'tr',
  'track',
  'tt',
  'u',
  'ul',
  'var',
  'video',
  'wbr',
  'xmp'
];
export const baseComponentTypes = [
  'button',
  'input',
  'link',
  'list',
  'select',
  'typography',
  'layout',
  'custom'
];

export const SnippetCategories = baseComponentTypes;
export type SnippetCategoryType = (typeof SnippetCategories)[number] | string;
const stateTypes = [
  'default',
  'disabled',
  'down',
  'dragged',
  'error',
  'hover',
  'keyboardFocus',
  'selected'
];

export type BaseComponentTypeOption =
  | (typeof baseComponentTypes)[number]
  | string;

export type BaseComponentStateTypeOption = (typeof stateTypes)[number] | string;
export type TagPreviewOption = (typeof htmlTags)[number] | string;

export type CssPropertyStyle = {
  property: string;
  value: string | number | CssPropertyStyle[];
  reference: StyleTokenReference | null;
  isSelector: boolean;
};

/**
 * A publicly stored Style object.
 * It doesn't belong to any specific project.
 * The difference between this and a ProjectStyle is that
 * the value here is just the Raw CSS instead of the
 * CssPropertyStyle[];
 */
export interface PublicStyleType {
  id: string;
  variant: string;
  baseComponent: BaseComponentTypeOption;
  value: CSSProperties;
  state?: BaseComponentStateTypeOption;
  previewWithTag?: TagPreviewOption;
}

export interface StyleType {
  id: string;
  variant: string;
  baseComponent: BaseComponentTypeOption;
  value: CssPropertyStyle[];
  state?: BaseComponentStateTypeOption;
  previewWithTag?: TagPreviewOption;
  /**
   * The theme id for which this style is for
   */
  themeId?: string;
  /**
   * When style is copied or imported from another theme it will have a
   * reference to the original theme id
   */
  referenceThemeId?: string;
}