@onereach/styles v20.6.0
💅 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
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:
- 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:
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';
1 day ago
1 day ago
1 day ago
4 days ago
4 days ago
5 days ago
5 days ago
5 days ago
5 days ago
5 days ago
14 days ago
14 days ago
15 days ago
15 days ago
25 days ago
26 days ago
26 days ago
26 days ago
26 days ago
27 days ago
28 days ago
29 days ago
29 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
10 months ago
7 months ago
6 months ago
10 months ago
10 months ago
7 months ago
10 months ago
8 months ago
9 months ago
7 months ago
10 months ago
6 months ago
9 months ago
9 months ago
10 months ago
6 months ago
10 months ago
8 months ago
6 months ago
9 months ago
9 months ago
10 months ago
9 months ago
10 months ago
8 months ago
10 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
9 months ago
8 months ago
9 months ago
9 months ago
10 months ago
8 months ago
6 months ago
8 months ago
10 months ago
8 months ago
6 months ago
8 months ago
9 months ago
7 months ago
6 months ago
11 months ago
8 months ago
8 months ago
8 months ago
6 months ago
9 months ago
9 months ago
10 months ago
10 months ago
8 months ago
10 months ago
9 months ago
7 months ago
10 months ago
9 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
7 months ago
10 months ago
10 months ago
8 months ago
7 months ago
10 months ago
8 months ago
10 months ago
7 months ago
10 months ago
9 months ago
7 months ago
9 months ago
6 months ago
10 months ago
10 months ago
9 months ago
10 months ago
11 months ago
9 months ago
9 months ago
9 months ago
10 months ago
8 months ago
10 months ago
8 months ago
10 months ago
10 months ago
8 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
8 months ago
10 months ago
8 months ago
8 months ago
10 months ago
9 months ago
8 months ago
11 months ago
6 months ago
9 months ago
8 months ago
6 months ago
9 months ago
10 months ago
10 months ago
9 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
7 months ago
8 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
8 months ago
6 months ago
8 months ago
10 months ago
9 months ago
6 months ago
6 months ago
10 months ago
9 months ago
8 months ago
9 months ago
10 months ago
9 months ago
8 months ago
11 months ago
1 year 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
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
1 year ago
11 months ago
11 months ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
11 months ago
12 months ago
12 months ago
1 year 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
11 months ago
11 months ago
1 year ago
11 months ago
11 months ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
1 year ago
11 months ago
11 months ago
12 months ago
11 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
1 year ago
12 months ago
11 months ago
11 months ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago