@strategies/tokens v4.3.27
Strategies' Design System Tokens
These are the tokenized descriptors of the design system, written as SCSS.
Installation
yarn add @strategeies/tokens
Change token value
- The tokens are stored in JSON files located in the
src
folder. - We use Style Dictionary to generate SCSS variable files from these JSON files.
- One of the advantages of storing tokens in JSON format is that they can be easily integrated into the
token
function. So that, tokens can be used in js/jsx/ts/tsx files
Update the scss file with latest token values
pnpm run build
Usage
Include the global styles to normalize the styling environment
// In your top-level SCSS file (e.g. App.scss)
@import '~@strategies/tokens';
If you are using vite
, please remove the tide ~
in the import statement, like this
// In your top-level SCSS file (e.g. App.scss)
@import '@strategies/tokens';
Using the tokens in css or scss file
@use '~@strategies/tokens/color';
@use '~@strategies/tokens/font';
.YourComponent {
color: color.$blue;
font-size: font.$size-small;
}
Using the tokens in js/jsx/ts/tsx file
- the `token
function is for getting the value by passing in a path string
- to use the
token
function, please install another package@strategeies/ui
pnpm add --save-dev @strategeies/ui
- usage example
import { ConfigProvider } from 'antd';
import { token } from '@strategeies/ui';
export const ButtonAntConfig = ({children}) => {
return (
<ConfigProvider
theme={{
token: {
/* token fn here */
colorPrimary: token('color.text.danger', '#ff0000'),
}
}}>
{children}
</ConfigProvider>
)
}
export default ButtonAntConfig;
5 months ago
5 months ago
5 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
4 months ago
5 months ago
4 months ago
5 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
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
4 months ago
3 months ago
3 months ago
3 months ago
3 months ago
2 months ago
2 months ago
3 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 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
1 year ago
12 months ago
1 year 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
1 year ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
11 months 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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
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