# ad-design-tokens

> Design tokens of AD EDUCATION group

Latest version **3.5.0** (published 2022-09-08) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install ad-design-tokens
pnpm add ad-design-tokens
yarn add ad-design-tokens
bun add ad-design-tokens
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.5.0 |
| Published | 2022-09-08 |
| First published | 2022-07-06 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | FlanB |
| Maintainers | flanb |
| Keywords | ad education, design tokens, theme, mui |

## Links

- npm: https://www.npmjs.com/package/ad-design-tokens
- Repository: https://github.com/FlanB/ad-design-tokens
- Homepage: https://github.com/FlanB/ad-design-tokens#readme
- Issues: https://github.com/FlanB/ad-design-tokens/issues
- npm.io page: https://npm.io/package/ad-design-tokens

## Recent versions

- 3.5.0 (latest) — 2022-09-08
- 3.4.0 — 2022-09-06
- 3.3.0 — 2022-09-06
- 3.2.0 — 2022-07-22
- 3.1.0 — 2022-07-21
- 3.0.0 — 2022-07-21
- 2.12.0 — 2022-07-21
- 2.11.0 — 2022-07-21
- 2.10.0 — 2022-07-21
- 2.9.0 — 2022-07-20
- 2.8.0 — 2022-07-20
- 2.7.0 — 2022-07-20
- 2.6.0 — 2022-07-17
- 2.5.0 — 2022-07-15
- 2.4.4 — 2022-07-15
- … 21 more at https://npm.io/package/ad-design-tokens/versions

## README

# 🎟 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](#-roadmap)
- [⬇️ Install](#%EF%B8%8F-install)
- [👩‍💻 Usage](#-usage)
  - [JS](#js)
  - [TS](#ts)
  - [Exeption for fonts](#exception-for-fonts)
- [✏️ Edit tokens in Figma](#%EF%B8%8F-edit-tokens-in-figma)
- [© Copyrights](#-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

```bash
 npm i ad-design-tokens
```

## 👩‍💻 Usage

For usage, you have to
import [@mui/material](https://mui.com/material-ui/getting-started/installation/) into your project.

### JS

```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

```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]}))

```
```tsx
// _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.

```html
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
```
OR
```css
@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](https://www.figma.com/community/plugin/843461159747178978) or change the file named "tokens.json".

- [Setup FIGMA TOKENS](#setup-figma-tokens)
- [Color token](#color-token)
- [Typography token](#typography-token)
- [Font family token](#font-family-token)
- [Font weight token](#font-weight-token)
- [Border radius token](#border-radius-token)
- [Box shadow token](#box-shadow-token)
- [Components token](#component-token)

### Setup FIGMA TOKENS and sync with Github

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

Your plugin configuration should look like this.

<img width="350" alt="image" src="https://user-images.githubusercontent.com/72792827/180406743-de1f720c-9794-40d3-9ba5-093de303ce30.png">

---

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

<img width="387" alt="Figma tokens" src="https://user-images.githubusercontent.com/72792827/180412522-53f4e5cd-5b44-4636-8ddc-57d42a9b9dce.png">

---

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

<img width="496" alt="image" src="https://user-images.githubusercontent.com/72792827/180470382-cc01148d-a1a1-4c37-acbe-788847e31377.png">
<img width="437" alt="image" src="https://user-images.githubusercontent.com/72792827/180470487-ee305f24-98dd-4d86-958e-c3b4f64b8e52.png">

⚠️ 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.

<img width="1124" alt="image" src="https://user-images.githubusercontent.com/72792827/180477675-542c4973-bb9d-4a39-ad15-d856b0fd0eb4.png">

### Color token

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

- #### Using FIGMA TOKENS

<img width="244" alt="image" src="https://user-images.githubusercontent.com/72792827/180411644-f7471eb4-0106-4e54-9f19-750d7a6272af.png">

- #### Edit "tokens.json" file

```Hjson
{
	// 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

<img width="344" alt="image" src="https://user-images.githubusercontent.com/72792827/180417201-6d8dbe04-e16e-4e03-80a8-a93ee36137d7.png">

- #### Edit "tokens.json" file

```Hjson
{
	"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

<img width="349" alt="image" src="https://user-images.githubusercontent.com/72792827/180417868-e79b1b9d-1ccf-43be-95be-5d3dc8b5f01e.png">

- #### Edit "tokens.json" file

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

### Font weight token

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

- #### Using FIGMA TOKENS

<img width="345" alt="image" src="https://user-images.githubusercontent.com/72792827/180419372-11273dce-b932-49b7-9b4c-b61b63b6d91c.png">

- #### Edit "tokens.json" file

```Hjson
{
	"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

<img width="347" alt="image" src="https://user-images.githubusercontent.com/72792827/180434563-9874a6c5-f053-4fd1-9df8-e3561c617e43.png">

- #### Edit "tokens.json" file

```Hjson
{
	"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

<img width="345" alt="image" src="https://user-images.githubusercontent.com/72792827/180450298-0909952f-151f-401e-9fe4-eeeffef89912.png">

- #### Edit "tokens.json" file

```Hjson
{
	"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

<img width="352" alt="image" src="https://user-images.githubusercontent.com/72792827/180452036-fffeefb3-85b4-4d2c-a644-7e8c54cca1f9.png">

- #### Edit "tokens.json" file

```Hjson
{
	"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](https://github.com/FlanB))

---
_Source: https://npm.io/package/ad-design-tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._