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;