csd/src/types/system.ts

css codes with design system in css in js libraries

export type Size = "xs" | "sm" | "md" | "lg" | "xl";
export type Spacing =
  | 4
  | 8
  | 10
  | 12
  | 16
  | 20
  | 24
  | 28
  | 30
  | 32
  | 40
  | 50
  | 60
  | 70
  | 80;
export type FontSize = 10 | 12 | 14 | 16 | 18 | 22 | 32 | 42;

export type Round = {
  xs: 4;
  sm: 8;
  md: 12;
  lg: 20;
  xl: 32;
};

export type Breakpoint = {
  xs: 576;
  sm: 768;
  md: 1024;
  lg: 1200;
  xl: 1440;
};

export type ContainerPadding = {
  xs: 24;
  sm: 40;
  md: 60;
  lg: 80;
  xl: 80;
};

export type ZIndex = {
  dropdown: 1000;
  sticky: 1020;
  fixed: 1030;
  backdrop: 1040;
  modal: 1050;
  popover: 1060;
  tooltip: 1070;
};
export type ZIndexOption = keyof ZIndex;

export type LineHeight = {
  10: 1.2;
  12: 1.3;
  14: 1.4;
  16: 1.3;
  18: 1.3;
  22: 1.2;
  32: 1.1;
  42: 1.1;
};