@onereach/styles NPM

💅 Onereach styles for components.

🎯 Install

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

🛠️ Develop

$ pnpm dev

🛠️ How to generate tokens?

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

$ pnpm build

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

{
  "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:

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"
    }
  }

Generate CSS variables. Run:

$ pnpm build

How to change theme. Example in OrThemeSwitcherExample.vue

🚀 Usage in JS:

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

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

11 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

💅 Onereach styles for components.

🎯 Install

🛠️ Develop

🛠️ How to generate tokens?

Will update:

design-tokens.json (mock)

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

🚀 Usage in JS:

Don't forget that you need style loaders.

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

Global styles: