ad-design-tokens

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
• Install
• Usage
  • JS
  • TS
  • Exeption for fonts
• Edit tokens in Figma
• Copyrights

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"/>

OR

@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
• Color token
• Typography token
• Font family token
• Font weight token
• Border radius token
• Box shadow token
• Components token

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"
	}
}

Copyrights

Clément RENOU (@FlanB)