$ yarn add @onereach/styles
$ npm install @onereach/styles --save
$ pnpm dev
- 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"
}
}
}
- 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
import '@onereach/styles';
// or
import '@onereach/styles/src/main.scss';