@onereach/styles

💅 Onereach styles for components.

🎯 Install

$ yarn add @onereach/styles
$ npm install @onereach/styles --save

🛠️ Develop

$ pnpm dev

🛠️ How to generate tokens?

1. Modified src/mock/design-tokens.json
2. Run:

$ pnpm build

Will update:

SCSS: src/variables/tokens/design-tokens.scss

design-tokens.json (mock)

{
  "spacings": {
    "level-0": 0,
    "level-1": 2,
    "level-2": 4,
    "level-3": 8,
    "level-4": 16,
    "level-5": 24,
    "level-6": 32,
    "level-7": 48,
    "level-8": 64,
    "level-9": 128
  },
  "typography": {
    "font-sizes": {
      "level-0": 12,
      "level-1": 14,
      "level-2": 18,
      "level-3": 22
    },
    "font-weights": {
      "level-0": 400,
      "level-1": 600,
      "level-2": 700
    },
    "line-heights": {
      "level-0": 18,
      "level-1": 21,
      "level-2": 26
    }
  },
  "transition": {
    "function": "cubic-bezier(0.12, 0.39, 0.5, 0.93)",
    "time": "0.25s"
  },
  "themes": {
    "light": {
      "primary": "#178ae7",
      "error": "#da1e28",
      "warning": "#f0d10d",
      "success": "#4ec00f",
      "neutral-0": "#fff",
      "neutral-1": "#f6f6f6",
      "neutral-2": "#dfdfdf",
      "neutral-3": "#c6c6c6",
      "neutral-4": "#91969d",
      "neutral-5": "#6c747d",
      "neutral-6": "#1e232b",
      "body-bg": "#fff",
      "white": "#fff",
      "black": "#000"
    },
    "dark": {
      "primary": "#c94277",
      "error": "#2f0a28",
      "warning": "#A27E6F",
      "success": "#cadbc0",
      "neutral-0": "#A27E6F",
      "neutral-1": "#9F7366",
      "neutral-2": "#94524A",
      "neutral-3": "#7B4042",
      "neutral-4": "#622E39",
      "neutral-5": "#491C31",
      "neutral-6": "#B6AD98",
      "c-body-bg": "#fff",
      "white": "#fff",
      "black": "#000"
    },
    "custom": {
      "primary": "rgb(236, 0, 140)",
      "error": "rgb(232, 17, 35)",
      "warning": "rgb(255, 241, 0)",
      "success": "rgb(186, 216, 10)",
      "neutral-0": "rgb(255, 140, 0)",
      "neutral-1": "rgb(236, 0, 140)",
      "neutral-2": "rgb(104, 33, 122)",
      "neutral-3": "rgb(0, 24, 143)",
      "neutral-4": "rgb(0, 188, 242)",
      "neutral-5": "rgb(0, 178, 148)",
      "neutral-6": "rgb(0, 158, 73)",
      "c-body-bg": "#fff",
      "white": "#fff",
      "black": "#000"
    }
  }
}

🛠️ How to add a new theme and generate CSS variables for that:

1. Nowadays you should add to the mock design-tokens.json in object theme colors.

"spacings": {...}
"typography": {...}
"transition": {...}
"themes": {
    "light": {...},
    "dark": {...},
    "custom": {...}
    "custom-new": {
      "primary": "rgb(236, 0, 140)",
      "error": "rgb(232, 17, 35)",
      "warning": "rgb(255, 241, 0)",
      "success": "rgb(186, 216, 10)",
      "neutral-0": "rgb(255, 140, 0)",
      "neutral-1": "rgb(236, 0, 140)",
      "neutral-2": "rgb(104, 33, 122)",
      "neutral-3": "rgb(0, 24, 143)",
      "neutral-4": "rgb(0, 188, 242)",
      "neutral-5": "rgb(0, 178, 148)",
      "neutral-6": "rgb(0, 158, 73)",
      "c-body-bg": "#fff",
      "white": "#fff",
      "black": "#000"
    }
  }

2. Generate CSS variables. Run:

$ pnpm build

3. How to change theme. Example in OrThemeSwitcherExample.vue

🚀 Usage in JS:

Don't forget that you need style loaders.

Webpack: https://webpack.js.org/loaders/sass-loader

Global styles:

import '@onereach/styles';
// or
import '@onereach/styles/src/main.scss';