Ad-design-tokens NPM

🎟 Design tokens of AD EDUCATION group

Design tokens are the single source of truth to name and store a design decision, distributed so teams can use it across design tools and coding languages. They are exported from Figma and transformed into a JSON file with mui theme template.

📚 Table of contents

🗺 Roadmap

⏳ | Planning to build
🛠 | Work in progress
🧪 | Testing
♻ | Can be refactored
✅ | Done

Tokens	Status
Color	✅
Contrast text	✅
Border Radius	✅
Box Shadow	✅
Font family	✅
Font weight	✅
Typo heading	✅
Components	✅
Reference	⏳

⬇️ Install

 npm i ad-design-tokens

👩‍💻 Usage

For usage, you have to import @mui/material into your project.

JS

// _app.jsx

import { createTheme, ThemeProvider } from '@mui/material/styles';
import adTheme from 'ad-design-tokens/themes/adTheme.json';

const theme = createTheme(deepmerge(adTheme.core, { palette: adTheme.palette[themeMode] }));

export default function App () {
	return (
		<ThemeProvider theme={theme}>
			<App/>
		</ThemeProvider>
	);
}

TS

//theme.ts

import {createTheme, Theme, ThemeOptions} from "@mui/material/styles"
import adTheme from "ad-design-tokens/themes/adTheme.json"
import {deepmerge} from "@mui/utils"

export let themeMode = 'light'

interface CustomThemeOptions extends Omit<ThemeOptions, 'shadows' | 'typography'> {
    shadows: string[],
    typography: object
}

declare module '@mui/material/styles' {
    export function createTheme(options?: CustomThemeOptions): Theme
}

export const theme = createTheme(deepmerge<CustomThemeOptions>(adTheme.core, {palette: adTheme.palette[themeMode]}))

// _app.tsx

import '../styles/globals.css'
import type {AppProps} from 'next/app'
import {ThemeProvider} from "@mui/material/styles"
import {theme} from './theme'

function MyApp({Component, pageProps}: AppProps) {
    return (
        <ThemeProvider theme={theme}>
            <Component {...pageProps} />
        </ThemeProvider>
    )
}

export default MyApp

Exception for fonts

You have to import fonts and fonts weights manually.

<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

✏️ Edit tokens in Figma

To edit tokens in Figma, you have to download the plugin FIGMA TOKENS or change the file named "tokens.json".

Setup FIGMA TOKENS and sync with Github

https://docs.tokens.studio/sync/github

Your plugin configuration should look like this.

For more convenience, you can paste json template in FIGMA TOKENS by clicking on the brackets icon.

After tokens configuration, click on ↥ to push the file on Github. Then write a commit message.

⚠️ Make sure Github Actions is enabled on the repository before pushing.

To publish the tokens on the npm registry, add a new NPM_TOKEN secrets and use a npm access token.

Color token

⚠️ Required : you have to create a light or/and dark keys.

Using FIGMA TOKENS

Edit "tokens.json" file

{
	// color used in light and dark theme
	"common": {
		"white": {
			"value": "#fff",
			"type": "color"
		},
		"black": {
			"value": "#000",
			"type": "color"
		}
	},
	// color for the light theme
	"light": {
		"primary": {
			"main": {
				"value": "#0dad8d",
				"type": "color"
			},
			"light": {
				"value": "#11c89f",
				"type": "color"
			},
			"dark": {
				"value": "#0b987c",
				"type": "color"
			},
			"contrastText": {
				"value": "#fff",
				"type": "color"
			}
		}
	},
	//color for the dark theme
	"dark": {
		"primary": {
			"main": {
				"value": "#0dad8d",
				"type": "color"
			},
			"light": {
				"value": "#11c89f",
				"type": "color"
			},
			"dark": {
				"value": "#0b987c",
				"type": "color"
			},
			"contrastText": {
				"value": "#fff",
				"type": "color"
			}
		}
	}
}

Typography token

Using FIGMA TOKENS

Edit "tokens.json" file

{
	"h1": {
		"fontFamily": "Causten",
		"fontWeight": "200",
		"lineHeight": "normal",
		"fontSize": "6rem",
		"letterSpacing": "normal",
		"paragraphSpacing": "normal",
		"textCase": "none",
		"textDecoration": "none",
		"type": "typography"
	}
}

Font family token

Using FIGMA TOKENS

Edit "tokens.json" file

{
	"fontFamily": {
		"Causten": {
			"value": "Causten",
			"type": "fontFamilies"
		}
	}
}

Font weight token

⚠️ Required : MUI only accept light, regular, medium and bold font weights.

Using FIGMA TOKENS

Edit "tokens.json" file

{
	"fontWeights": {
		"300": {
			"value": "Light",
			"type": "fontWeights"
		},
		"400": {
			"value": "Regular",
			"type": "fontWeights"
		},
		"500": {
			"value": "Medium",
			"type": "fontWeights"
		},
		"700": {
			"value": "Bold",
			"type": "fontWeights"
		}
	}
}

Border radius token

Using FIGMA TOKENS

Edit "tokens.json" file

{
	"borderRadius": {
		"value": "4px",
		"type": "borderRadius"
	}
}

Box shadow token

⚠️ Required : For MUI, the numbers must follow each other from 0 to ∞. The larger the number the larger the shadow will be.

Using FIGMA TOKENS

Edit "tokens.json" file

{
	"0": {
		"value": {
			"x": "0",
			"y": "0",
			"blur": "0",
			"spread": "0",
			"color": "#000",
			"type": "dropShadow"
		},
		"type": "boxShadow"
	},
	"1": {
		"value": {
			"x": "0",
			"y": "2px",
			"blur": "1px",
			"spread": "0",
			"color": "#00000024",
			"type": "dropShadow"
		},
		"type": "boxShadow"
	},
	"2": {
		"value": {
			"x": "0",
			"y": "2px",
			"blur": "2px",
			"spread": "0",
			"color": "#00000024",
			"type": "dropShadow"
		},
		"type": "boxShadow"
	}
}

Component token

⚠️ Required : Component token is a type "other". Inside the "value" field you must define a valid JSON.

Using FIGMA TOKENS

Edit "tokens.json" file

{
	"MuiButton-root": {
		"value": "{\"padding\": \"0.625rem 1rem\"}",
		"type": "other"
	},
	"MuiButton-sizeSmall": {
		"value": "{\"padding\" : \"0.375rem 0.625rem\"}",
		"type": "other"
	},
	"MuiButton-sizeLarge": {
		"value": "{\"padding\": \"0.75rem 1.375rem\"}",
		"type": "other"
	}
}