apphouse/dist/themes/colors.lookup.ts

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

export const colorsLookupTable: { [id: string]: object } = {
  "button.primary": {
    backgroundColor: "onPrimary",
    color: "primary",
  },
  "button.primaryCompact": {
    backgroundColor: "onPrimary",
    color: "primary",
  },
  "button.secondary": {
    backgroundColor: "onPrimary",
    color: "primary",
    borderColor: "primary",
  },
  "button.secondaryCompact": {
    backgroundColor: "onPrimary",
    color: "primary",
  },
  "button.tertiary": {
    color: "onPrimaryInverse_70",
  },
  "button.brand": {
    backgroundColor: "brand",
    color: "onBrand",
  },
  "button.brandCompact": {
    backgroundColor: "brand",
    color: "onBrand",
  },
  "button.clear": {
    color: "onPrimary",
  },
  "button.clearCompact": {
    color: "onPrimary",
  },
  "button.brandClear": {
    color: "brand",
  },
  "button.tab": {
    backgroundColor: "onPrimary",
    color: "primary",
  },
  "button.select": {
    color: "onPrimary",
    borderColor: "onPrimary",
  },
  "button.destructive": {
    backgroundColor: "error",
    color: "onError",
  },
  "separator.horizontal": {
    borderColor: "onPrimary_10",
  },
  "separator.vertical": {
    borderColor: "onPrimary_10",
  },
  "input.default": {
    borderColor: "onPrimary_10",
    backgroundColor: "onPrimary_10",
    color: "onPrimary",
  },
  "input.label": {
    color: "onPrimary",
  },
  "input.large": {
    borderColor: "onPrimary_10",
    backgroundColor: "onPrimary_10",
    color: "onPrimary",
  },
  "input.multiline": {
    borderColor: "onPrimary_10",
    backgroundColor: "onPrimary_10",
    color: "onPrimary",
  },
  ".background.forTransparency": {
    // backgroundImage: backgroundForTransparency,
  },
  "background.menu": {
    backgroundColor: "primary",
  },

  "layout.horizontal": {},
  "layout.vertical": {},
  "layout.overlay": {
    backgroundColor: "overlay",
  },

  "loading.default": {
    borderColor: "onPrimary",
    borderTopColor: "onPrimary_40",
  },
  "loading.circular": {
    borderColor: "onPrimary",
    borderTopColor: "onPrimary_50",
  },
  "loading.linear": {
    borderColor: "onPrimary",
    borderTopColor: "onPrimary_40",
  },

  focus: {
    keyboard: {},
    mouse: {},
  },

  "typography.standardBold": {
    color: "onPrimary",
  },
  "typography.standard": {
    color: "onPrimary",
  },
  "typography.captionBold": {
    color: "onPrimary",
  },
  "typography.caption": {
    color: "onPrimary",
  },
  "typography.underlinedStandard": {
    color: "onPrimary",
  },
  "typography.header": {
    color: "onPrimary",
  },
  "typography.subheader": {
    color: "onPrimary_95",
  },
  "typography.title": {
    color: "onPrimary_90",
  },
  "typography.subtitle": {
    color: "onPrimary",
  },
  "typography.large": {
    color: "onPrimary",
  },

  body: {},
  icon: {},

  /** Don't forget, this should be applied in a p tag and there has to be a set width defined */
  "utility.truncateWithEllipsis": {},
  "utility.fadeInView": {},
};