@devseed-ui/theme-provider/src/theme.d.ts

devseed UI Kit Theme

import 'styled-components';

interface ThemeColor {
  [key: string]: any;

  /**
   * Background color for filled elements that sit on top of the body.
   * (cards, panel, modal...)
   * @default #FFFFF
   */
  surface?: string;
  /**
   * Base color for the site. Text and all elements that are not colored.
   * @default #443F3F
   */
  base?: string;
  /**
   * Primary color.
   * @default #CF3F02
   */
  primary?: string;
  /**
   * Secondary color.
   * @default #E2C044
   */
  secondary?: string;
  /**
   * State color: danger
   * @default #A71D31
   */
  danger?: string;
  /**
   * State color: warning
   * @default #E2C044
   */
  warning?: string;
  /**
   * State color: success
   * @default #4DA167
   */
  success?: string;
  /**
   * State color: info
   * @default #2E86AB
   */
  info?: string;

  // Color palettes
  // For each color above a palette with darker/lighter colors is generated.

  /**
   * Only used for body background color. Uses surface if not provided.
   * @default $.color.surface
   */
  background?: string;
  /**
   * Color for links. Uses primary if not defined.
   * @default $.color.primary
   */
  link?: string;
}

interface ThemeTypeBase {
  [key: string]: any;

  /**
   * <@default $.type.base.family
   */
  family?: string;
  /**
   * @default $.type.base.style
   */
  style?: string;
  /**
   * @default $.type.base.settings
   */
  settings?: string;
  /**
   * @default $.type.base.case
   */
  case?: string;
  /**
   * @default $.type.base.light
   */
  light?: string;
  /**
   * @default $.type.base.regular
   */
  regular?: string;
  /**
   * @default $.type.base.medium
   */
  medium?: string;
  /**
   * @default $.type.base.bold
   */
  bold?: string;
  /**
   * @default $.type.base.bold
   */
  weight?: string;
  /**
   * @default none
   */
  textTransform?: string;
}

interface ThemeType {
  [key: string]: any;

  /**
   * Base type settings for the site.
   */
  base?: Omit<ThemeTypeBase, 'textTransform'> & {
    size?: string;
    /**
     * Uses 1.5 times the size when not provided
     * @default "$.color.base * 1.5"
     */
    leadSize?: string;
    line?: string;
    /**
     * Uses the base color when not provided.
     * @default $.color.base
     */
    color?: string;
    antialiasing?: number;
  };

  /**
   * Heading type definition. When not provided the same settings as base
   * type are used.
   */
  heading?: ThemeTypeBase;

  /**
   * Overline type definition. When not provided the same settings as base
   * type are used.
   */
  overline?: Omit<ThemeTypeBase, 'textTransform'> & {
    /**
     * @default uppercase
     */
    textTransform?: string;
  };
}

interface ThemeShape {
  [key: string]: any;

  /**
   * @default 0.25rem
   */
  rounded?: string;
  /**
   * @default 320rem
   */
  ellipsoid?: string;
}

interface ThemeLayout {
  [key: string]: any;

  /**
   * @default 1rem
   */
  space?: string;
  /**
   * @default 1px
   */
  border?: string;
  /**
   * @default 320px
   */
  min?: string;
  /**
   * @default 1280px
   */
  max?: string;
}

interface ThemeButton {
  [key: string]: any;

  /**
   * Button type definition. When not provided the same settings as base
   * type are used.
   */
  type?: {
    [key: string]: any;

    family?: string;
    style?: string;
    settings?: string;
    case?: string;
    weight?: string;
  };

  /**
   * Button shape definition. When not provided the same settings as shape
   * type are used.
   */
  shape?: {
    [key: string]: any;

    border?: string;
    rounded?: string;
  };
}

interface ThemeBoxShadow {
  [key: string]: any;

  /**
   * @default "inset 0px 0px 3px 0px {color base-50a}"
   */
  inset?: string;
  /**
   * @default "0 -1px 1px 0 {color base-100a}, 0 2px 6px 0 {color base-200a}"
   */
  input?: string;
  /**
   * @default "0 0 4px 0 {color base-100a}, 0 2px 2px 0 {color base-100a}"
   */
  elevationA?: string;
  /**
   * @default "0 0 4px 0 {color base-100a}, 0 4px 4px 0 {color base-100a}"
   */
  elevationB?: string;
  /**
   * @default "0 0 4px 0 {color base-100a}, 0 8px 12px 0 {color base-100a}"
   */
  elevationC?: string;
  /**
   * @default "0 0 4px 0 {color base-100a}, 0 12px 24px 0 {color base-100a}"
   */
  elevationD?: string;
}

interface ThemeMediaRanges {
  xsmall?: [null, number];
  small?: [number, number];
  medium?: [number, number];
  large?: [number, number];
  xlarge?: [number, null];
}

interface Theme {
  [key: string]: any;

  /**
   * Base theme colors. These will serve as base for all other elements, but
   * they can be overridden on an individual basis.
   */
  color?: ThemeColor;
  /**
   * Typography definition
   */
  type?: ThemeType;
  /**
   * Values for shapes.
   */
  shape?: ThemeShape;
  /**
   * Values for layout settings.
   */
  layout?: ThemeLayout;
  /**
   * Button specific settings.
   */
  button?: ThemeButton;
  /**
   * Box shadow definitions for different elevation effects.
   */
  boxShadow?: ThemeBoxShadow;
  /**
   * Ranges for media queries.
   * @default {ThemeMediaRanges} Each range spans 224px:
   *   xsmall = [null, 543],
   *   small = [544, 767],
   *   medium = [768, 991],
   *   large = [992, 1215],
   *   xlarge = [1216, null]
   */
  mediaRanges?: ThemeMediaRanges;
}

declare module '@devseed-ui/theme-provider' {
  export interface DevseedUIThemeColor extends ThemeColor {}
  export interface DevseedUIThemeType extends ThemeType {}
  export interface DevseedUIThemeShape extends ThemeShape {}
  export interface DevseedUIThemeLayout extends ThemeLayout {}
  export interface DevseedUIThemeButton extends ThemeButton {}
  export interface DevseedUIThemeBoxShadow extends ThemeBoxShadow {}
  export interface DevseedUIThemeMediaRanges extends ThemeMediaRanges {}
  export interface DevseedUITheme extends Theme {}
}

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}