@strategies/tokens NPM

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;

@everything-registry/sub-chunk-876 @zalastax/nolb-_stra @strategies/firestore-input @strategies/henshu-app @strategies/kaizen @strategies/notification @strategies/react-timeline @strategies/ui @strategies/ui.date @strategies/visualizer.viewers.colorizer

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

7 months ago

6 months ago

7 months ago

6 months ago

7 months ago

6 months ago

7 months ago

7 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

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

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

5 months ago

6 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

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

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago