@reactleaf/theme

Theme Provider for @reactleaf projects

Install

$ pnpm add @reactleaf/theme

Usage

With Plain CSS

Just add import '@reactleaf/theme/theme.css

What'is in there

Colors are given in css variables.

:root {
  --leaf-grey-100: ...
  --leaf-grey-95: ...
  --leaf-grey-90: ...
  --leaf-grey-80: ...
  --leaf-grey-70: ...
  --leaf-grey-10: ...

  --leaf-primary-98: ...
  --leaf-primary-95: ...
  --leaf-primary-90: ...
  --leaf-primary-80: ...
  --leaf-primary-70: ...
  --leaf-primary-60: ...
  --leaf-primary-50: ...
  --leaf-primary-40: ...
  --leaf-primary-30: ...
  --leaf-primary-20: ...
  --leaf-primary-10: ...

  --leaf-status-red: ...
  --leaf-status-yellow: ...
  --leaf-status-green: ...
  --leaf-status-blue: ...
  --leaf-status-grey: ...

  --leaf-status-lightRed: ...
  --leaf-status-lightYellow: ...
  --leaf-status-lightGreen: ...
  --leaf-status-lightBlue: ...
  --leaf-status-lightGrey: ...
}

Typos are just an classname.

.leaf-title {
  font-size: 20px;
  line-height: 32px;
}
.leaf-body {
  font-size: 16px;
  line-height: 24px;
}
.leaf-label {
  font-size: 14px;
  line-height: 20px;
}
.leaf-desc {
  font-size: 12px;
  line-height: 18px;
}