Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prosazhin/tailwind-dictionary
Creating a Tailwind Theme from design tokens
https://github.com/prosazhin/tailwind-dictionary
build-system build-tool design design-system design-tokens design-tool dictionary style system tailwind tailwind-theme theme tokens tool
Last synced: 6 days ago
JSON representation
Creating a Tailwind Theme from design tokens
- Host: GitHub
- URL: https://github.com/prosazhin/tailwind-dictionary
- Owner: prosazhin
- License: mit
- Created: 2024-04-26T08:04:12.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-18T15:21:04.000Z (4 months ago)
- Last Synced: 2024-11-07T05:24:18.312Z (9 days ago)
- Topics: build-system, build-tool, design, design-system, design-tokens, design-tool, dictionary, style, system, tailwind, tailwind-theme, theme, tokens, tool
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwind-dictionary
- Size: 49.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind Dictionary
Tailwind Dictionary is a package based on [Style Dictionary](https://github.com/amzn/style-dictionary) that allows creating a Tailwind Theme from design tokens.
## Installation
```bash
$ npm install tailwind-dictionary --save-dev
# or
$ yarn add tailwind-dictionary --dev
```
## Usage
```bash
$ tailwind-dictionary
```
| Flag | Short Flag | Description |
| ----------------- | ---------- | ------------------------------------------------ |
| --config \[path\] | -c | Set the config file to use. Must be a .json file |
## Example
As an example of usage, you can look at the [pbstyles](https://github.com/prosazhin/pbstyles) style library.
### config.json
```json
{
"source": ["tokens/**/*.json"],
"output": "./styles",
"themeAliases": { ... }
}
```
| Property | Type | Description |
| :----------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| source | Array | An array of file path [globs](https://github.com/isaacs/node-glob) to design token files. Exactly like [Style Dictionary](https://github.com/amzn/style-dictionary). |
| output | String | Base path to build the files, must end with a trailing slash. By default is "./styles". |
| themeAliases | Object | Aliases for the Tailwind Theme. [Complete theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js) and [documentation](https://tailwindcss.com/docs/theme). |
### Example of theme aliases
The entire list of keys for the Tailwind theme can be found in the [documentation](https://tailwindcss.com/docs/theme) or [the full default theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js). The most important thing is to use the same keys in the config for the theme as in the original theme, such as “fontFamily”.
Aliases must include a category for CTI, for example `rounded`. They can also include both a category and a type, for instance `font/family`, where `font` is the category and `family` is the type.
#### Config
```json
{
...
"themeAliases": {
"fontFamily": "font/family",
"fontWeight": "font/weight",
"lineHeight": "font/leading",
"borderRadius": "rounded",
"extend": {
"opacity": "opacity"
}
}
}
```
#### Design-tokens
```json
{
"font": {
"family": {
"sans": { "value": "Inter, sans-serif" }
},
"weight": {
"regular": { "value": 400 },
"medium": { "value": 600 },
"bold": { "value": 700 }
},
"leading": {
"none": { "value": 1 },
"tight": { "value": 1.25 },
"normal": { "value": 1.5 }
}
},
"rounded": {
"0": { "value": "0px" },
"4": { "value": "4px" },
"6": { "value": "6px" },
"8": { "value": "8px" },
"999": { "value": "999px" }
},
"opacity": {
"0": { "value": "0" },
"50": { "value": "0.5" },
"100": { "value": "1" }
}
}
```
#### Tailwind Theme
```javascript
module.exports = {
fontFamily: {
sans: 'Inter, sans-serif',
},
fontWeight: {
regular: 400,
medium: 600,
bold: 700,
},
lineHeight: {
none: 1,
tight: 1.25,
normal: 1.5,
},
borderRadius: {
0: '0px',
4: '4px',
6: '6px',
8: '8px',
999: '999px',
},
extend: {
opacity: {
0: '0',
50: '0.5',
100: '1',
},
},
};
```
### Usage in a Tailwind theme
```javascript
const theme = require('./styles/tailwind-theme');
module.exports = {
...
theme: {
...theme,
extend: {
...theme.extend,
},
},
...
};
```
### Example of typography mixins
#### Config
```json
{
...
"themeAliases": {
...
"fontSize": "font/size",
...
}
}
```
#### Design-tokens
```json
{
"font": {
"size": {
"12": { "value": "{size.12}" },
"16": { "value": "{size.16}" },
"20": { "value": "{size.20}" }
},
"h64": {
"font-size": {
"value": "64px",
"mixin": "h64"
},
"line-height": {
"value": "1.25",
"mixin": "h64"
},
"font-weight": {
"value": "700",
"mixin": "h64"
}
}
}
}
```
#### Tailwind Theme
```javascript
module.exports = {
fontSize: {
12: '12px',
16: '16px',
20: '20px',
h64: ['64px', { lineHeight: 1.25, fontWeight: 700 }],
},
};
```
### Example of media query
#### Config
```json
{
...
"themeAliases": {
...
"screens": "screen",
...
}
}
```
#### Design-tokens
```json
{
"screen": {
"xl": {
"min": { "value": "1441px" }
},
"lg": {
"max": { "value": "1440px" },
"min": { "value": "921px" }
}
}
}
```
#### Tailwind Theme
```javascript
module.exports = {
screens: {
xl: { min: '1441px' },
lg: { max: '1440px', min: '921px' },
},
};
```