23.3.5 • Published 9 months ago

@onereach/styles v23.3.5

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
9 months ago

💅 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"
    }
  }
  1. Generate CSS variables. Run:
$ pnpm build
  1. 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';
23.3.6-beta.5652.0

9 months ago

23.3.6-beta.5651.0

9 months ago

23.3.5-beta.5648.0

9 months ago

23.3.5

9 months ago

23.3.5-beta.5649.0

9 months ago

23.3.5-beta.5646.0

10 months ago

23.3.5-beta.5645.0

10 months ago

23.3.4-beta.5643.0

10 months ago

23.3.4

10 months ago

23.3.4-beta.5642.0

10 months ago

23.3.1-beta.5621.0

10 months ago

23.3.2-beta.5631.0

10 months ago

23.3.2-beta.5628.0

10 months ago

23.3.1

10 months ago

23.3.3

10 months ago

23.3.2

10 months ago

23.3.2-beta.5626.0

10 months ago

23.3.1-beta.5620.0

10 months ago

23.3.2-beta.5632.0

10 months ago

23.3.1-beta.5622.0

10 months ago

23.3.2-beta.5630.0

10 months ago

23.3.2-beta.5629.0

10 months ago

23.3.3-beta.5634.0

10 months ago

23.3.1-beta.5623.0

10 months ago

23.3.2-beta.5627.0

10 months ago

23.3.3-beta.5636.0

10 months ago

23.3.2-beta.5625.0

10 months ago

23.3.3-beta.5638.0

10 months ago

23.3.1-beta.5619.0

10 months ago

23.3.0

11 months ago

23.2.7-beta.5613.0

11 months ago

23.3.1-beta.5618.0

11 months ago

23.2.7-beta.5614.0

11 months ago

23.2.7-beta.5612.0

11 months ago

23.2.4-beta.5597.0

11 months ago

23.2.6-beta.5606.0

11 months ago

23.2.5-beta.5600.0

11 months ago

23.2.6-beta.5604.0

11 months ago

23.2.4-beta.5598.0

11 months ago

23.2.6-beta.5607.0

11 months ago

23.2.6-beta.5603.0

11 months ago

23.2.6

11 months ago

23.2.4-beta.5595.0

11 months ago

23.2.4-beta.5596.0

11 months ago

23.2.4-beta.5594.0

11 months ago

23.1.4-beta.5550.0

12 months ago

23.1.5-beta.5553.0

12 months ago

23.1.5-beta.5557.0

11 months ago

23.1.5-beta.5555.0

11 months ago

23.1.6-beta.5567.0

11 months ago

23.1.4-beta.5543.0

12 months ago

23.2.1-beta.5573.0

11 months ago

23.1.6-beta.5565.0

11 months ago

22.3.0-beta.5499.0

12 months ago

23.1.4-beta.5541.0

12 months ago

23.2.1-beta.5575.0

11 months ago

23.1.6-beta.5563.0

11 months ago

22.2.0-beta.5496.0

12 months ago

23.1.4-beta.5546.0

12 months ago

23.1.6-beta.5561.0

11 months ago

23.2.1-beta.5570.0

11 months ago

22.1.2

1 year ago

22.1.1

1 year ago

22.1.0

1 year ago

22.1.6

1 year ago

22.1.5

1 year ago

22.1.4

1 year ago

22.1.3

1 year ago

21.3.1

1 year ago

21.3.0

1 year ago

21.3.2

1 year ago

23.1.3

12 months ago

23.1.2

12 months ago

23.1.5

11 months ago

23.1.4

12 months ago

23.1.1

12 months ago

23.2.4-beta.5592.0

11 months ago

23.1.0

12 months ago

21.5.1

1 year ago

21.5.0

1 year ago

21.5.2

1 year ago

23.2.3-beta.5590.0

11 months ago

23.1.3-beta.5537.0

12 months ago

23.1.4-beta.5548.0

12 months ago

23.1.0-beta.5502.0

12 months ago

23.1.5-beta.5554.0

12 months ago

23.1.5-beta.5556.0

12 months ago

23.2.1-beta.5569.0

11 months ago

23.1.6-beta.5566.0

11 months ago

23.2.2-beta.5577.0

11 months ago

23.1.4-beta.5542.0

12 months ago

23.2.1-beta.5574.0

11 months ago

23.1.6-beta.5564.0

11 months ago

23.2.3-beta.5588.0

11 months ago

23.1.5-beta.5552.0

12 months ago

23.1.6-beta.5562.0

11 months ago

23.1.4-beta.5547.0

12 months ago

23.2.3-beta.5589.0

11 months ago

22.0.0

1 year ago

23.1.6-beta.5560.0

11 months ago

23.0.0

12 months ago

22.2.0

12 months ago

21.4.0

1 year ago

21.4.2

1 year ago

21.4.1

1 year ago

23.1.3-beta.5534.0

12 months ago

23.2.2

11 months ago

23.2.1

11 months ago

23.2.3

11 months ago

23.2.0

11 months ago

21.6.0

1 year ago

21.6.2

1 year ago

21.6.1

1 year ago

23.1.4-beta.5549.0

12 months ago

22.3.0-beta.5500.0

12 months ago

23.1.3-beta.5536.0

12 months ago

21.1.2

1 year ago

21.2.0

1 year ago

21.2.1

1 year ago

21.1.1

1 year ago

21.1.0

1 year ago

21.0.1

1 year ago

20.7.0

1 year ago

21.0.0

1 year ago

20.6.0

1 year ago

20.5.0

1 year ago

20.4.0

1 year ago

20.3.1

1 year ago

20.3.0

1 year ago

20.2.0

1 year ago

20.1.4

1 year ago

20.1.6

1 year ago

20.1.5

1 year ago

20.1.3

1 year ago

20.1.2

1 year ago

20.1.1

1 year ago

20.1.0

1 year ago

20.0.5

1 year ago

20.0.4

1 year ago

20.0.1

1 year ago

20.0.0

1 year ago

20.0.3

1 year ago

20.0.2

1 year ago

19.6.0

1 year ago

19.4.1

1 year ago

19.4.0

1 year ago

19.4.2

1 year ago

19.5.0

1 year ago

19.3.0

1 year ago

19.3.1

1 year ago

19.2.4

1 year ago

19.2.3

1 year ago

19.2.2

1 year ago

19.2.1

1 year ago

19.2.0

1 year ago

19.1.2

1 year ago

19.1.0

1 year ago

19.1.1

1 year ago

19.0.0

1 year ago

18.4.2

1 year ago

18.3.1

1 year ago

18.3.0

1 year ago

18.4.1

1 year ago

18.4.0

1 year ago

18.2.1

1 year ago

18.0.3

1 year ago

18.0.2

1 year ago

18.0.1

1 year ago

18.0.0

1 year ago

17.4.0

1 year ago

17.3.0

1 year ago

17.3.1

1 year ago

17.2.0

1 year ago

17.1.2

1 year ago

17.1.1

1 year ago

17.1.0

1 year ago

17.0.0

1 year ago

16.2.3

1 year ago

16.2.2

1 year ago

16.2.1

1 year ago

16.2.0

1 year ago

16.1.2

1 year ago

16.1.1

1 year ago

16.1.0

1 year ago

16.0.0

1 year ago

15.2.4

1 year ago

15.2.5

1 year ago

15.2.3

1 year ago

15.1.0

1 year ago

15.2.0

1 year ago

15.2.1

1 year ago

15.2.2

1 year ago

15.0.0

1 year ago

15.0.1

1 year ago

8.0.1

2 years ago

8.0.0

2 years ago

5.1.0

2 years ago

4.1.0

2 years ago

6.6.0

2 years ago

6.8.1

2 years ago

6.8.0

2 years ago

6.2.0

2 years ago

7.0.0

2 years ago

6.4.0

2 years ago

5.0.0

2 years ago

6.0.0

2 years ago

6.5.0

2 years ago

6.7.0

2 years ago

6.9.0

2 years ago

6.9.1

2 years ago

6.1.0

2 years ago

6.3.0

2 years ago

7.1.1

2 years ago

7.1.0

2 years ago

3.1.1

2 years ago

3.1.0

2 years ago

2.43.0

2 years ago

2.41.2

2 years ago

2.41.1

2 years ago

2.41.3

2 years ago

2.41.0

2 years ago

3.3.0

2 years ago

3.2.0

2 years ago

4.0.0

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.42.0

2 years ago

2.40.1

2 years ago

2.34.0

2 years ago

2.40.0

2 years ago

2.39.3

2 years ago

2.38.0

2 years ago

2.37.3

2 years ago

2.37.2

2 years ago

2.37.4

2 years ago

2.37.1

2 years ago

2.37.0

2 years ago

2.36.0

2 years ago

2.36.1

2 years ago

2.35.1

2 years ago

2.35.0

2 years ago

2.35.2

2 years ago

2.33.0

2 years ago

2.32.0

2 years ago

2.32.2

2 years ago

2.32.1

2 years ago

2.31.1

2 years ago

2.31.0

2 years ago

2.30.0

2 years ago

2.29.0

2 years ago

2.28.0

2 years ago

2.27.0

2 years ago

2.26.0

3 years ago

2.25.0

3 years ago

2.24.0

3 years ago

2.23.0

3 years ago

2.22.0

3 years ago

2.21.0

3 years ago

2.20.0

3 years ago

2.19.1

3 years ago

2.19.0

3 years ago

2.18.0

3 years ago

2.17.4

3 years ago

2.17.3

3 years ago

2.17.2

3 years ago

2.17.1

3 years ago

2.17.0

3 years ago

2.16.0

3 years ago

2.15.1

3 years ago

2.15.0

3 years ago

2.14.2

3 years ago

2.14.1

3 years ago

2.14.0

3 years ago

2.13.0

3 years ago

2.12.0

3 years ago

2.11.2

3 years ago

2.11.1

3 years ago

2.11.0

3 years ago

2.10.0

3 years ago

2.9.13

3 years ago

2.9.12

3 years ago

2.9.11

3 years ago

2.9.10

3 years ago

2.9.9

3 years ago

2.9.9-next.766.0

3 years ago

2.9.9-next.762.0

3 years ago

2.9.9-next.761.0

3 years ago

2.9.9-next.759.0

3 years ago

2.9.9-next.758.0

3 years ago

2.9.9-next.757.0

3 years ago

2.9.9-next.756.0

3 years ago

2.9.9-next.755.0

3 years ago

2.9.9-next.753.0

3 years ago

2.9.9-next.752.0

3 years ago

2.9.9-beta.751.0

3 years ago

2.9.9-next.750.0

3 years ago

2.9.9-next.749.0

3 years ago

2.9.9-next.748.0

3 years ago

2.9.9-next.745.0

3 years ago

2.9.9-next.744.0

3 years ago

2.9.9-next.737.0

3 years ago

2.9.9-next.734.0

3 years ago

2.9.8

3 years ago

2.9.8-beta.721.0

3 years ago

2.9.8-next.710.0

3 years ago

2.9.8-next.709.0

3 years ago

2.9.8-next.701.0

3 years ago

2.9.8-beta.694.0

3 years ago

2.9.7-next.689.0

3 years ago

2.9.7

3 years ago

2.9.7-beta.686.0

3 years ago

2.9.6

3 years ago

2.9.6-beta.667.0

3 years ago

2.9.6-beta.666.0

3 years ago

2.9.6-beta.665.0

3 years ago

2.9.6-beta.664.0

3 years ago

2.9.5

3 years ago

2.9.5-next.662.0

3 years ago

2.9.4

3 years ago

2.9.4-beta.660.0

3 years ago

2.9.3

3 years ago

2.9.3-beta.655.0

3 years ago

2.9.3-beta.654.0

3 years ago

2.9.3-beta.653.0

3 years ago

2.9.3-beta.652.0

3 years ago

2.9.3-beta.651.0

3 years ago

2.9.3-beta.649.0

3 years ago

2.9.3-beta.648.0

3 years ago

2.9.3-beta.647.0

3 years ago

2.9.3-beta.646.0

3 years ago

2.9.3-beta.644.0

3 years ago

2.9.3-beta.623.0

3 years ago

2.9.2

3 years ago

2.9.2-beta.619.0

3 years ago

2.9.1

3 years ago

2.9.1-beta.617.0

3 years ago

2.9.0

3 years ago

2.9.0-beta.615.0

3 years ago

2.9.0-beta.607.0

3 years ago

2.9.0-beta.606.0

3 years ago

2.9.0-beta.605.0

3 years ago

2.9.0-beta.601.0

3 years ago

2.8.4

3 years ago

2.8.4-beta.589.0

3 years ago

2.8.4-beta.587.0

3 years ago

2.8.4-beta.555.0

3 years ago

2.8.3

3 years ago

2.8.3-beta.542.0

3 years ago

2.8.2

3 years ago

2.8.2-beta.540.0

3 years ago

2.8.2-beta.533.0

3 years ago

2.8.2-beta.530.0

3 years ago

2.8.2-497.0

3 years ago

2.8.1-496.0

3 years ago

2.8.1

3 years ago

2.8.1-486.0

3 years ago

2.8.1-485.0

3 years ago

2.8.1-484.0

3 years ago

2.8.1-459.0

3 years ago

2.8.0

3 years ago

2.7.2-450.0

3 years ago

2.7.2-449.0

3 years ago

2.7.2-448.0

3 years ago

2.7.1

3 years ago

2.7.1-401.0

3 years ago

2.7.0

3 years ago

2.6.6-390.0

3 years ago

2.6.5

3 years ago

2.6.5-384.0

3 years ago

2.6.4

3 years ago

2.6.4-374.0

3 years ago

2.6.4-366.0

3 years ago

2.6.4-365.0

3 years ago

2.6.4-364.0

3 years ago

2.6.4-359.0

3 years ago

2.6.4-switch.0

3 years ago

2.6.4-ui97.0

3 years ago

2.6.4-ui94.0

3 years ago

2.6.2-ui78.3

3 years ago

2.6.3

3 years ago

2.6.3-92.0

3 years ago

2.6.2-ui78.2

3 years ago

2.6.2

3 years ago

2.6.2-ui78.1

3 years ago

2.6.2-ui78.0

3 years ago

2.6.1

3 years ago

2.6.0

3 years ago

2.5.1-zindex.1

3 years ago

2.5.1-zindex.0

3 years ago

2.5.0

3 years ago

2.4.1-ui87.2

3 years ago

2.4.1-ui87.0

3 years ago

2.4.0

3 years ago

2.3.1-ui58.2

3 years ago

2.3.1-ui58.1

3 years ago

2.3.1-ui58.0

3 years ago

2.3.1

3 years ago

2.3.1-alpha.1

3 years ago

2.3.1-alpha.0

3 years ago

2.3.0

3 years ago

2.2.4-alpha.1

3 years ago

2.2.4-alpha.0

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.2.1

3 years ago

2.1.3

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

1.6.1

3 years ago

1.6.0

3 years ago

1.5.0

3 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.0

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.20.9

3 years ago

0.20.8

3 years ago

0.20.7

3 years ago

0.20.6

3 years ago

0.20.5

3 years ago

0.20.4

3 years ago

0.19.0-icons

3 years ago

0.18.5

4 years ago

0.18.4

4 years ago

0.18.3

4 years ago

0.18.2

4 years ago

0.18.1

4 years ago

0.17.0

4 years ago

0.16.4

4 years ago

0.16.3

4 years ago

0.16.2

4 years ago

0.16.1

4 years ago

0.16.0

4 years ago

0.15.1

4 years ago

0.15.0

4 years ago

0.14.0

4 years ago

0.13.1

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.1

4 years ago

0.11.0

4 years ago

0.10.0

4 years ago

0.9.3

4 years ago

0.9.2

4 years ago

0.9.1

4 years ago

0.9.0

4 years ago

0.8.7

4 years ago

0.8.6

4 years ago

0.8.5

4 years ago

0.8.4

4 years ago

0.8.3

4 years ago

0.8.2

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.7.5

4 years ago

0.7.4

4 years ago

0.7.3

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.6.2

4 years ago

0.6.1

4 years ago

0.5.7

4 years ago

0.5.6

4 years ago

0.5.5

4 years ago

0.5.4

4 years ago

0.5.3

4 years ago

0.5.2

4 years ago

0.5.1

4 years ago

0.5.0

4 years ago

0.4.2

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.3.9

4 years ago

0.3.7

4 years ago

0.3.6

4 years ago

0.3.5

4 years ago

0.3.4

4 years ago

0.3.3

4 years ago

0.3.2

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.19

4 years ago

0.2.18

4 years ago

0.2.17

4 years ago

0.2.16

4 years ago

0.2.15

4 years ago

0.2.14

4 years ago

0.2.13

4 years ago

0.2.12

4 years ago

0.2.11

4 years ago

0.2.10

4 years ago

0.1.17

4 years ago

0.1.15

4 years ago

0.1.14

4 years ago

0.1.13

4 years ago

0.1.12

4 years ago

0.1.11

4 years ago

0.1.10

4 years ago

0.1.9

4 years ago

0.1.6

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago