onekijs-ui 0.9.2 → 0.15.2

package/src/styles/typings.ts

@@ -1,13 +1,580 @@
-import { Globals } from 'csstype';
-import { AnonymousObject } from 'onekijs-core';
-import { FlattenInterpolation, ThemedStyledProps, ThemeProps } from 'styled-components';
+import {
+  AppearanceProperty,
+  BackgroundColorProperty,
+  BorderBottomStyleProperty,
+  BorderColorProperty,
+  BorderRadiusProperty,
+  BorderStyleProperty,
+  BorderWidthProperty,
+  BoxShadowProperty,
+  ColorProperty,
+  CursorProperty,
+  FontSizeProperty,
+  FontWeightProperty,
+  Globals,
+  HeightProperty,
+  LetterSpacingProperty,
+  LineHeightProperty,
+  MarginProperty,
+  OpacityProperty,
+  OutlineProperty,
+  PaddingProperty,
+  TextDecorationProperty,
+  TextOverflowProperty,
+  TextTransformProperty,
+  WhiteSpaceProperty,
+  WidthProperty,
+  ZIndexProperty,
+} from 'csstype';
+import { AnonymousObject } from 'onekijs-framework';
+import {
+  FlattenInterpolation,
+  GlobalStyleComponent,
+  ThemedStyledProps,
+  ThemeProps as SytledThemeProps,
+} from 'styled-components';
 
-export type CssProperty<T> = (value: T, variants?: AnonymousObject) => FlattenInterpolation<ThemeProps<any>>;
+export type TshirtSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
+export type CssProperty<T> = (value: T, variants?: AnonymousObject) => FlattenInterpolation<SytledThemeProps<any>>;
 export type Formatter<T> = (value: T, theme: Theme) => string;
 export type Media = 'all' | 'sm' | 'md' | 'lg' | 'xl';
-export type Theme = AnonymousObject;
+export enum ColorKeys {
+  white = 'white',
+  lightest = 'lightest',
+  lighter = 'lighter',
+  light = 'light',
+  dark = 'dark',
+  darker = 'darker',
+  darkest = 'darkest',
+  black = 'black',
+  success = 'success',
+  info = 'info',
+  warning = 'warning',
+  danger = 'danger',
+  primary = 'primary',
+  secondary = 'secondary',
+  blue = 'blue',
+  red = 'red',
+  purple = 'purple',
+  pink = 'pink',
+  indigo = 'indigo',
+  teal = 'teal',
+  orange = 'orange',
+  yellow = 'yellow',
+  green = 'green',
+  lightblue = 'lightblue',
+  lightred = 'lightred',
+  lightpurple = 'lightpurple',
+  lightpink = 'lightpink',
+  lightindigo = 'lightindigo',
+  lightteal = 'lightteal',
+  lightorange = 'lightorange',
+  lightyellow = 'lightyellow',
+  lightgreen = 'lightgreen',
+  background = 'background',
+}
+
+export enum DashboardKeys {
+  left = 'left',
+  right = 'right',
+  header = 'header',
+  footer = 'footer',
+  body = 'body',
+}
+
+export enum BreakpointKeys {
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+}
+
+export enum SpacingKeys {
+  none = 'none',
+  '2xs' = '2xs',
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+  '2xl' = '2xl',
+  '3xl' = '3xl',
+  '4xl' = '4xl',
+  '5xl' = '5xl',
+  '6xl' = '6xl',
+  '7xl' = '7xl',
+  '8xl' = '8xl',
+  '9xl' = '9xl',
+  '10xl' = '10xl',
+  '11xl' = '11xl',
+  '12xl' = '12xl',
+  '13xl' = '13xl',
+  px = 'px',
+}
+
+export enum TshirtKeys {
+  xsmall = 'xsmall',
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+  xlarge = 'xlarge',
+}
+
+export enum FontWeightKeys {
+  hairline = 'hairline',
+  thin = 'thin',
+  light = 'light',
+  normal = 'normal',
+  medium = 'medium',
+  semibold = 'semibold',
+  bold = 'bold',
+  extrabold = 'extrabold',
+  black = 'black',
+}
+
+export enum FontFamiliesKeys {
+  sans = 'sans',
+  serif = 'serif',
+  mono = 'mono',
+}
+
+export enum FontLineHeightKeys {
+  none = 'none',
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+  '2xl' = '2xl',
+  '3xl' = '3xl',
+  '4xl' = '4xl',
+}
+
+export enum FontSizeKeys {
+  '2xs' = '2xs',
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+  '2xl' = '2xl',
+  '3xl' = '3xl',
+  '4xl' = '4xl',
+  '5xl' = '5xl',
+  '6xl' = '6xl',
+  default = 'default',
+}
+
+export enum FontSpacingKeys {
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+  '2xl' = '2xl',
+}
+
+export enum RadiusKeys {
+  none = 'none',
+  '2xs' = '2xs',
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+  full = 'full',
+}
+
+export enum ShadowKeys {
+  default = 'default',
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+  '2xl' = '2xl',
+  'inner' = 'inner',
+  'outline' = 'outline',
+  'none' = 'none',
+}
+
+export enum SizeKeys {
+  'zero' = 0,
+  'one' = 1,
+  'two' = 2,
+  'three' = 3,
+  'four' = 4,
+  'five' = 5,
+  'six' = 6,
+  'eight' = 8,
+  'ten' = 10,
+  'twelve' = 12,
+  'sixteen' = 16,
+  'twenty' = 20,
+  'twenty_four' = 24,
+  'thirty_two' = 32,
+  'fourty' = 40,
+  'fourty_eight' = 48,
+  'fifty_six' = 56,
+  'sixty_four' = 64,
+  'px' = 'px',
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+  '2xl' = '2xl',
+  '3xl' = '3xl',
+  '4xl' = '4xl',
+  '5xl' = '5xl',
+  '6xl' = '6xl',
+  'screen-sm' = 'screen-sm',
+  'screen-md' = 'screen-md',
+  'screen-lg' = 'screen-lg',
+  'screen-xl' = 'screen-xl',
+}
+
+export type Theme = {
+  GlobalStyles: GlobalStyleComponent<any, any>;
+  breakpoints: {
+    [k in BreakpointKeys]: string;
+  };
+  colors: {
+    [k in ColorKeys]: string;
+  };
+  spacings: {
+    [k in SpacingKeys]: string;
+  };
+  palette: Palette;
+  font: {
+    families: {
+      [k in FontFamiliesKeys]: string;
+    };
+    lineHeights: {
+      [k in FontLineHeightKeys]: number;
+    };
+    sizes: {
+      [k in FontSizeKeys]: string | 0;
+    };
+    spacings: {
+      [k in FontSpacingKeys]: string | 0;
+    };
+    weights: {
+      [k in FontWeightKeys]: number;
+    };
+  };
+  radius: {
+    [k in RadiusKeys]: string | 0;
+  };
+  shadow: {
+    [k in ShadowKeys]: string;
+  };
+
+  sizes: {
+    [k in SizeKeys]: string | 0;
+  };
+
+  buttons: {
+    [k in ColorKeys]: {
+      bgColor: ColorPropertyTheme | BackgroundColorProperty;
+      bgColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+      bgColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+      borderColor: ColorPropertyTheme | BorderColorProperty;
+      borderColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+      borderColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+      borderRadius: RadiusPropertyTheme | string;
+      borderStyle: BorderStyleProperty;
+      borderWidth: BorderWidthProperty<TLength>;
+      color: ColorPropertyTheme | ColorProperty;
+      colorFlat: ColorPropertyTheme | BackgroundColorProperty;
+      colorOutline: ColorPropertyTheme | BackgroundColorProperty;
+      cursor: CursorProperty;
+      cursorDisabled: CursorProperty;
+      fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+      fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+      hoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+      hoverBgColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+      hoverBgColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+      hoverBorderColor: ColorPropertyTheme | BackgroundColorProperty;
+      hoverBorderColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+      hoverBorderColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+      hoverColor: ColorPropertyTheme | ColorProperty;
+      hoverColorFlat: ColorPropertyTheme | BackgroundColorProperty;
+      hoverColorOutline: ColorPropertyTheme | BackgroundColorProperty;
+      letterSpacing: LetterSpacingPropertyTheme | LetterSpacingProperty<TLength>;
+      lineHeight: LineHeightPropertyTheme | LineHeightProperty<TLength>;
+      opacity: OpacityProperty;
+      opacityDisabled: OpacityProperty;
+      paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+      paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+      textOverflow: TextOverflowProperty;
+      textTransform: TextTransformProperty;
+      whiteSpace: WhiteSpaceProperty;
+    };
+  };
+
+  fieldLayout: {
+    marginY: MarginProperty<TLength> | SpacingPropertyTheme;
+    helperMarginLeft: MarginProperty<TLength> | SpacingPropertyTheme;
+    helperMarginRight: MarginProperty<TLength> | SpacingPropertyTheme;
+    helperColor: ColorProperty | ColorPropertyTheme;
+    descriptionFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    descriptionColor: ColorProperty | ColorPropertyTheme;
+  };
+
+  table: {
+    bgColor: ColorPropertyTheme | BackgroundColorProperty;
+    shadow: ShadowPropertyTheme | BoxShadowProperty;
+    thPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    thPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    thBorderBottomWidth: number | BorderWidthProperty<TLength>;
+    thBorderBottomColor: ColorPropertyTheme | BorderColorProperty;
+    thBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    thFontWeigth: FontWeightPropertyTheme | FontWeightProperty;
+    thFontColor: ColorPropertyTheme | ColorProperty;
+    thFontCase: TextTransformProperty;
+    thFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    thLetterSpacing: LetterSpacingPropertyTheme | LetterSpacingProperty<TLength>;
+    thFilterInputBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    thFilterInputFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    thFilterInputPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    thFilterInputPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    tdFontColor: ColorPropertyTheme | ColorProperty;
+    tdPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    tdPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    tdBorderBottomColor: ColorPropertyTheme | BorderColorProperty;
+    tdBorderBottomWidth: number | BorderWidthProperty<TLength>;
+    tdBorderBottomStyle: BorderBottomStyleProperty;
+    tdStripBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    tdHoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    tdHoverFontColor: ColorPropertyTheme | ColorProperty;
+    tdExpandedBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    loadingRowBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    loadingRowMinHeight: SizePropertyTheme | HeightProperty<TLength>;
+  };
+
+  input: {
+    bgColor: ColorPropertyTheme | BackgroundColorProperty;
+    width: SizePropertyTheme | WidthProperty<TLength>;
+    borderWidth: number | BorderWidthProperty<TLength>;
+    borderColor: ColorPropertyTheme | BorderColorProperty;
+    borderRadius: RadiusPropertyTheme | string;
+    borderStyle: BorderBottomStyleProperty;
+    borderFocusColor: ColorPropertyTheme | BorderColorProperty;
+    borderFocusWidth: number | BorderWidthProperty<TLength>;
+    paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    xsPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    xsPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    xsFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    smPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    smPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    smFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    mdPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    mdPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    mdFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    lgPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    lgPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    lgFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    xlPaddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    xlPaddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    xlFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    appearance: AppearanceProperty;
+    outline: OutlineProperty<TLength>;
+    fontColor: ColorPropertyTheme | ColorProperty;
+    placeholderColor: ColorPropertyTheme | ColorProperty;
+  };
+
+  checkbox: {
+    bgColor: ColorPropertyTheme | BackgroundColorProperty;
+    color: ColorPropertyTheme | BackgroundColorProperty;
+  };
+
+  label: {
+    fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    fontCase: TextTransformProperty;
+    fontColor: ColorPropertyTheme | ColorProperty;
+    fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    letterSpacing: LetterSpacingPropertyTheme | LetterSpacingProperty<TLength>;
+    requiredColor: ColorPropertyTheme | ColorProperty;
+    requiredWeight: FontWeightPropertyTheme | FontWeightProperty;
+    requiredMarginLeft: SpacingPropertyTheme | MarginProperty<TLength>;
+    helperIconColor: ColorPropertyTheme | ColorProperty;
+    helperMarginLeft: SpacingPropertyTheme | MarginProperty<TLength>;
+  };
+
+  link: {
+    fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    fontColor: ColorPropertyTheme | ColorProperty;
+    textDecoration: TextDecorationProperty<TLength>;
+    fontWeightHover: FontWeightPropertyTheme | FontWeightProperty;
+    fontColorHover: ColorPropertyTheme | ColorProperty;
+    textDecorationHover: TextDecorationProperty<TLength>;
+  };
+
+  tooltip: {
+    [k in ColorKeys]: {
+      bgColor: ColorPropertyTheme | BackgroundColorProperty;
+      color: ColorPropertyTheme | ColorProperty;
+      linkColor: ColorPropertyTheme | ColorProperty;
+      borderColor: ColorPropertyTheme | BackgroundColorProperty;
+      borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+      borderStyle: BorderStyleProperty;
+      borderWidth: BorderWidthProperty<TLength>;
+      boxShadow: ShadowPropertyTheme | BoxShadowProperty;
+      padding: SpacingPropertyTheme | PaddingProperty<TLength>;
+      fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    };
+  };
+
+  accordion: {
+    fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    fontColor: ColorPropertyTheme | ColorProperty;
+    activeFontColor: ColorPropertyTheme | ColorProperty;
+    hoverFontColor: ColorPropertyTheme | ColorProperty;
+    fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    togglerIconWidth: WidthProperty<TLength> | IconSizePropertyTheme;
+    togglerIconHeight: WidthProperty<TLength> | IconSizePropertyTheme;
+    bgColor: ColorPropertyTheme | BackgroundColorProperty;
+    activeBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    hoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    borderColor: ColorPropertyTheme | BorderColorProperty;
+    borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+    borderStyle: BorderStyleProperty;
+    borderWidth: BorderWidthProperty<TLength>;
+    paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+  };
+
+  tab: {
+    activeBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    activeBorderColor: ColorPropertyTheme | BorderColorProperty;
+    activeBorderStyle: BorderStyleProperty;
+    activeBorderWidth: BorderWidthProperty<TLength>;
+    activeFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    activeFontColor: ColorPropertyTheme | ColorProperty;
+    activeFontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    bgColor: ColorPropertyTheme | BackgroundColorProperty;
+    borderColor: ColorPropertyTheme | BorderColorProperty;
+    borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+    borderStyle: BorderStyleProperty;
+    borderWidth: BorderWidthProperty<TLength>;
+    cursor: CursorProperty;
+    fontColor: ColorPropertyTheme | ColorProperty;
+    fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    hoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    hoverBorderColor: ColorPropertyTheme | BorderColorProperty;
+    hoverBorderStyle: BorderStyleProperty;
+    hoverBorderWidth: BorderWidthProperty<TLength>;
+    hoverFontColor: ColorPropertyTheme | ColorProperty;
+    marginBefore: SpacingPropertyTheme | MarginProperty<TLength>;
+    marginAfter: SpacingPropertyTheme | MarginProperty<TLength>;
+    paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+  };
+
+  wizard: {
+    activeBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    activeBorderColor: ColorPropertyTheme | BorderColorProperty;
+    activeFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    activeFontColor: ColorPropertyTheme | ColorProperty;
+    activeFontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    bgColor: ColorPropertyTheme | BackgroundColorProperty;
+    borderColor: ColorPropertyTheme | BorderColorProperty;
+    borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+    borderStyle: BorderStyleProperty;
+    borderWidth: BorderWidthProperty<TLength>;
+    cursor: CursorProperty;
+    disabledBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    disabledBorderColor: ColorPropertyTheme | BorderColorProperty;
+    disabledFontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    disabledFontColor: ColorPropertyTheme | ColorProperty;
+    disabledFontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    errorBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    errorBorderColor: ColorPropertyTheme | BorderColorProperty;
+    errorFontColor: ColorPropertyTheme | ColorProperty;
+    fontColor: ColorPropertyTheme | ColorProperty;
+    fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    hoverBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    hoverBorderColor: ColorPropertyTheme | BorderColorProperty;
+    hoverBorderStyle: BorderStyleProperty;
+    hoverBorderWidth: BorderWidthProperty<TLength>;
+    hoverFontColor: ColorPropertyTheme | ColorProperty;
+    marginBefore: SpacingPropertyTheme | MarginProperty<TLength>;
+    marginAfter: SpacingPropertyTheme | MarginProperty<TLength>;
+    paddingRight: SpacingPropertyTheme | PaddingProperty<TLength>;
+    paddingLeft: SpacingPropertyTheme | PaddingProperty<TLength>;
+    paddingTop: SpacingPropertyTheme | PaddingProperty<TLength>;
+    paddingBottom: SpacingPropertyTheme | PaddingProperty<TLength>;
+    stepsBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    stepsBorderColor: ColorPropertyTheme | BorderColorProperty;
+    stepsBorderStyle: BorderStyleProperty;
+    stepsBorderWidth: BorderWidthProperty<TLength>;
+    stepsPaddingTop: SpacingPropertyTheme | PaddingProperty<TLength>;
+    stepsPaddingBottom: SpacingPropertyTheme | PaddingProperty<TLength>;
+    stepsPaddingLeft: SpacingPropertyTheme | PaddingProperty<TLength>;
+    stepsPaddingRight: SpacingPropertyTheme | PaddingProperty<TLength>;
+    successBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    successBorderColor: ColorPropertyTheme | BorderColorProperty;
+    successFontColor: ColorPropertyTheme | ColorProperty;
+    warningBgColor: ColorPropertyTheme | BackgroundColorProperty;
+    warningBorderColor: ColorPropertyTheme | BorderColorProperty;
+    warningFontColor: ColorPropertyTheme | ColorProperty;
+  };
+
+  card: {
+    borderColor: ColorPropertyTheme | BorderColorProperty;
+    borderRadius: BorderRadiusProperty<TLength> | RadiusPropertyTheme;
+    borderStyle: BorderStyleProperty;
+    borderWidth: BorderWidthProperty<TLength>;
+    shadow: ShadowPropertyTheme | BoxShadowProperty;
+    bgColor: ColorPropertyTheme | BackgroundColorProperty;
+    fontColor: ColorPropertyTheme | ColorProperty;
+    fontSize: FontSizePropertyTheme | FontSizeProperty<TLength>;
+    fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    fontCase: 'uppercase';
+    paddingX: SpacingPropertyTheme | PaddingProperty<TLength>;
+    paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+    letterSpacing: LetterSpacingPropertyTheme | LetterSpacingProperty<TLength>;
+    iconColor: ColorPropertyTheme | ColorProperty;
+    iconWidth: SizePropertyTheme | WidthProperty<TLength>;
+    iconHeight: SizePropertyTheme | HeightProperty<TLength>;
+    marginTop: SpacingPropertyTheme | MarginProperty<TLength>;
+    titleBorderBottomWidth: BorderWidthProperty<TLength>;
+  };
+
+  properties: {
+    fontWeight: FontWeightPropertyTheme | FontWeightProperty;
+    paddingY: SpacingPropertyTheme | PaddingProperty<TLength>;
+  };
+
+  dashboard: {
+    [k in DashboardKeys]: {
+      bgColor: ColorPropertyTheme | BackgroundColorProperty;
+    };
+  };
+
+  modal: {
+    bgColor: ColorPropertyTheme | BackgroundColorProperty;
+    maskColor: ColorPropertyTheme | BackgroundColorProperty;
+    maskOpacity: OpacityProperty;
+    zIndex: ZIndexProperty;
+    xsmallSize: SizePropertyTheme | HeightProperty<TLength>;
+    smallSize: SizePropertyTheme | HeightProperty<TLength>;
+    mediumSize: SizePropertyTheme | HeightProperty<TLength>;
+    largeSize: SizePropertyTheme | HeightProperty<TLength>;
+    xlargeSize: SizePropertyTheme | HeightProperty<TLength>;
+    boxShadow: ShadowPropertyTheme | BoxShadowProperty;
+    borderRadius: RadiusPropertyTheme | string;
+  };
+};
+export type Palette = AnonymousObject; //TODO create a actual type
 export type TLength = string | 0;
-export type SizeProperty =
+export type SizePropertyTheme =
   | Globals
   | TLength
   | '-moz-max-content'
@@ -55,64 +622,21 @@ export type SizeProperty =
   | 'screen-lg'
   | 'screen-xl';
 
-export type ColorPropertyTheme = string;
-export type SpacingPropertyTheme =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 8
-  | 10
-  | 12
-  | 16
-  | 20
-  | 24
-  | 32
-  | 40
-  | 48
-  | 56
-  | 64
-  | 'px';
-export type FontFamilyPropertyTheme = 'mono' | 'sans' | 'serif';
-export type FontSizePropertyTheme = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
-export type FontWeightPropertyTheme =
-  | 'hairline'
-  | 'thin'
-  | 'light'
-  | 'normal'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'extrabold'
-  | 'black';
-
-export type LineHeightPropertyTheme =
-  | 'none'
-  | 'tight'
-  | 'snug'
-  | 'normal'
-  | 'relaxed'
-  | 'loose'
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10;
-
-export type LetterSpacingPropertyTheme = 'tighte' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
-
-export type RadiusPropertyTheme = 'none' | 'sm' | 'default' | 'md' | 'lg' | 'full';
-
-export type ShadowPropertyTheme = 'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'outline' | 'none';
+export type ThemeProps = {
+  theme?: Partial<Theme>;
+};
 
-export type KindTheme = 'primary' | 'danger' | 'success' | 'info' | 'warning' | 'secondary';
+export type ColorPropertyTheme = keyof typeof ColorKeys;
+export type SpacingPropertyTheme = keyof typeof SpacingKeys;
+export type FontFamilyPropertyTheme = keyof typeof FontFamiliesKeys;
+export type FontSizePropertyTheme = keyof typeof FontSizeKeys;
+export type IconSizePropertyTheme = keyof typeof FontSizeKeys;
+export type FontWeightPropertyTheme = keyof typeof FontWeightKeys | number;
+export type LineHeightPropertyTheme = keyof typeof FontLineHeightKeys | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export type LetterSpacingPropertyTheme = keyof typeof FontSpacingKeys;
+export type RadiusPropertyTheme = keyof typeof RadiusKeys;
+export type ShadowPropertyTheme = keyof typeof ShadowKeys;
 
 export type ComponentStyle<P, T extends Theme = Theme> = (
   propsWithTheme: ThemedStyledProps<P, T>,
-) => FlattenInterpolation<ThemeProps<T>>;
+) => FlattenInterpolation<SytledThemeProps<T>>;