Skip to content

Commit c99106c

Browse files
author
messenjer
committedSep 15, 2022
feat: build css variable from figma-tokens
Using Figma Token plugin export and StyleDictionary, we can auto generate the css-variable with their references + the config override for tailwind (in separated files group by token type)
0 parents  commit c99106c

22 files changed

+22816
-0
lines changed
 

Diff for: ‎.eslintignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
dist
2+
public
3+
styles
4+
5+
# ignore generate imports
6+
auto-imports.d.ts
7+
components.d.ts

Diff for: ‎.eslintrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "@antfu"
3+
}

Diff for: ‎.gitignore

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
*.log*
3+
.nuxt
4+
.nitro
5+
.cache
6+
.output
7+
.env
8+
dist
9+
.vscode

Diff for: ‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Mathieu Laurent
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

Diff for: ‎README.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Figma-tokens : example-tailwindcss-using-css-variables-reference
2+
3+
This repository was created as part of a blogpost on the [Mirahi Digital Garden](https://garden.mirahi.io/).
4+
5+
We will explain how you can transform your tokens stored on [Figma Tokens](https://github.com/six7/figma-tokens) using [token-transformer](https://github.com/six7/figma-tokens/tree/main/token-transformer) and [Style Dictionary](https://github.com/amzn/style-dictionary) to css-variables with references, and use them in your [TailwindCSS](https://github.com/tailwindlabs/tailwindcss) environment with multiple themes.
6+
7+
## Setup
8+
9+
Make sure to install the dependencies:
10+
11+
```bash
12+
# npm
13+
npm install
14+
```
15+
16+
## Build all the styles files (css-variables and tailwind config)
17+
18+
```bash
19+
npm run build-styles
20+
```
21+
22+
## Development Server
23+
24+
Start the development server on http://localhost:3000
25+
26+
```bash
27+
npm run dev
28+
```
29+
30+
Click on the toggle button "dark-light", to switch theme.
31+
32+
<img style="width: 300px" src="assets/images/light-dark.gif" />
33+
34+
## Other examples
35+
36+
You can find [other examples here](https://github.com/six7/figma-tokens-examples) by [Jan Six](https://twitter.com/six7)
37+
38+
## Dependencies
39+
40+
This project uses [style-dictionary](https://github.com/amzn/style-dictionary), [token-transformer](https://github.com/six7/figma-tokens/tree/main/token-transformer), [TailwindCSS](https://github.com/tailwindlabs/tailwindcss), [NuxtJS](https://github.com/nuxt/framework), [@nuxtjs/tailwindcss](https://github.com/nuxt-modules/tailwindcss), [nuxt-icons](https://github.com/nuxt-modules/icon)
41+
42+
## License
43+
44+
[MIT](./LICENSE) License &copy; 2022-PRESENT Mathieu Laurent @ [Mirahi](https://github.com/mirahi-io)
45+
46+
## About
47+
48+
[Mirahi](https://mirahi.io)
49+
50+
We love open source and do our part in sharing our work with the community!
51+
See [our other projects](ttps://github.com/mirahi-io) or [hire our team](https://mirahi.io) to help build your product.

Diff for: ‎app.vue

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script lang="ts" setup>
2+
import './assets/css/main.css'
3+
4+
const isDark = ref(false)
5+
6+
const toggleDarkMode = () => {
7+
isDark.value = !isDark.value
8+
if (isDark.value)
9+
document.documentElement.setAttribute('data-theme', 'dark')
10+
else document.documentElement.setAttribute('data-theme', 'light')
11+
}
12+
13+
const buttonLabel = computed(() => {
14+
return isDark.value ? 'Light' : 'Dark'
15+
})
16+
</script>
17+
18+
<template>
19+
<div class="text-fg-default bg-bg-default">
20+
<button
21+
class="h-10 px-6 font-semibold rounded-md bg-bg-default text-fg-default border-solid border-fg-default border-2"
22+
@click="toggleDarkMode"
23+
>
24+
<Icon v-if="isDark" name="heroicons-outline:sun" />
25+
<Icon v-else name="heroicons-outline:moon" />
26+
{{ buttonLabel }}
27+
</button>
28+
</div>
29+
<div>
30+
<div class="flex justify-center items-center h-screen bg-bg-default">
31+
<div class="grid gap-4 grid-cols-2 grid-rows-2">
32+
<button
33+
class="h-10 px-6 font-semibold rounded-md bg-bg-default text-fg-default border-solid border-fg-default border-2"
34+
>
35+
Primary
36+
</button>
37+
38+
<button
39+
class="h-10 px-6 font-semibold rounded-md bg-bg-muted text-fg-muted border-solid border-fg-muted border-2"
40+
>
41+
Secondary
42+
</button>
43+
</div>
44+
</div>
45+
</div>
46+
</template>

Diff for: ‎assets/css/main.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "../../styles/light-variables.css";
2+
@import "../../styles/dark-variables.css";

Diff for: ‎assets/images/light-dark.gif

14.4 KB
Loading

Diff for: ‎nuxt.config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// https://v3.nuxtjs.org/api/configuration/nuxt.config
2+
export default defineNuxtConfig({
3+
modules: ['@nuxtjs/tailwindcss', 'nuxt-icon'],
4+
})

Diff for: ‎package-lock.json

+21,515
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"lint": "eslint .",
5+
"lint:fix": "eslint . --fix",
6+
"build": "nuxt build",
7+
"build-transform-global": "npx token-transformer tokens.json styles/tokens/global.json global",
8+
"build-transform-light": "npx token-transformer tokens.json styles/tokens/light.json global,light,theme --resolveReferences=false",
9+
"build-transform-dark": "npx token-transformer tokens.json styles/tokens/dark.json global,dark,theme --resolveReferences=false",
10+
"build-transform": "npm run build-transform-global && npm run build-transform-light && npm run build-transform-dark",
11+
"build-tailwind": "node style-token.js",
12+
"build-styles": "npm run build-transform && node style-token.js",
13+
"dev": "nuxt dev",
14+
"generate": "nuxt generate",
15+
"preview": "nuxt preview",
16+
"postinstall": "nuxt prepare"
17+
},
18+
"devDependencies": {
19+
"@antfu/eslint-config": "^0.26.3",
20+
"@nuxtjs/tailwindcss": "^5.3.3",
21+
"eslint": "^8.23.1",
22+
"nuxt": "^3.0.0-rc.10",
23+
"nuxt-icon": "^0.1.5",
24+
"style-dictionary": "^3.7.1"
25+
}
26+
}

Diff for: ‎style-token.js

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
/* eslint-disable no-console */
2+
const StyleDictionaryPackage = require('style-dictionary')
3+
const global = require('./styles/tokens/global.json')
4+
const light = require('./styles/tokens/light.json')
5+
const dark = require('./styles/tokens/dark.json')
6+
7+
const supportedTokenTypeList = [
8+
'color',
9+
]
10+
11+
const formatValue = (tokenType, value) => {
12+
let formattedValue
13+
switch (tokenType) {
14+
case 'color':
15+
default:
16+
formattedValue = value
17+
}
18+
return formattedValue
19+
}
20+
21+
/**
22+
* Custom format that handle reference in css variables
23+
*/
24+
StyleDictionaryPackage.registerFormat({
25+
name: 'css/variables',
26+
formatter({ dictionary }) {
27+
return `${this.selectorName} {
28+
${dictionary.allProperties
29+
.map((token) => {
30+
const value = formatValue(token.type, token.value)
31+
32+
if (dictionary.usesReference(token.original.value)) {
33+
const reference = dictionary.getReferences(token.original.value)
34+
const referenceName = reference[0].name
35+
return ` --${token.name}: var(--${referenceName}, ${value});`
36+
}
37+
38+
return ` --${token.name}: ${value};`
39+
})
40+
.join('\n')}
41+
}`
42+
},
43+
})
44+
45+
/**
46+
* Custom format that generate tailwind color config based on css variables
47+
*/
48+
StyleDictionaryPackage.registerFormat({
49+
name: 'tw/css-variables',
50+
formatter({ dictionary }) {
51+
return (
52+
'module.exports = '
53+
+ `{\n${
54+
dictionary.allProperties
55+
.map((token) => {
56+
const value = formatValue(token.type, token.value)
57+
return ` "${token.path
58+
.slice(1)
59+
.join('-')}": "var(--${token.name}, ${value});"`
60+
})
61+
.join(',\n')
62+
}\n}`
63+
)
64+
},
65+
})
66+
67+
/**
68+
* Returns the files configuration
69+
* for generating seperated tailwind files.
70+
*/
71+
function getConfigTailwindFilesByType(typeList) {
72+
return typeList.map((typeName) => {
73+
return {
74+
destination: `tw-extend/${typeName}.js`,
75+
format: 'tw/css-variables',
76+
filter: {
77+
type: typeName,
78+
},
79+
}
80+
})
81+
}
82+
83+
// HAVE THE STYLE DICTIONARY CONFIG DYNAMICALLY GENERATED
84+
function getStyleDictionaryConfig(tokensConfig = {}) {
85+
const { brand, buildTailwindFiles, tokens, selectorName } = tokensConfig
86+
87+
let configTailwindFilesByType = []
88+
89+
if (buildTailwindFiles) {
90+
configTailwindFilesByType = getConfigTailwindFilesByType(
91+
supportedTokenTypeList,
92+
)
93+
}
94+
95+
return {
96+
tokens,
97+
platforms: {
98+
web: {
99+
transformGroup: 'web',
100+
prefix: 'ui',
101+
buildPath: './styles/',
102+
files: [
103+
{
104+
destination: `${brand}-variables.css`,
105+
format: 'css/variables',
106+
selectorName,
107+
},
108+
...configTailwindFilesByType,
109+
],
110+
},
111+
},
112+
}
113+
}
114+
115+
console.log('Build started...')
116+
117+
const configs = [
118+
// PROCESS THE DESIGN TOKENS FOR THE DIFFEREN BRANDS AND PLATFORMS
119+
{
120+
brand: 'global',
121+
buildTailwindFiles: false,
122+
selectorName: ':root',
123+
tokens: global,
124+
},
125+
{
126+
brand: 'dark',
127+
buildTailwindFiles: false,
128+
selectorName: '[data-theme="dark"]',
129+
tokens: dark,
130+
},
131+
{
132+
brand: 'light',
133+
buildTailwindFiles: true,
134+
selectorName: '[data-theme="light"]',
135+
tokens: light,
136+
},
137+
]
138+
139+
configs.map((config) => {
140+
console.log('\n==============================================')
141+
console.log(`\nProcessing: [Web] [${config.brand}]`)
142+
143+
const StyleDictionary = StyleDictionaryPackage.extend(
144+
getStyleDictionaryConfig(config),
145+
)
146+
147+
StyleDictionary.buildPlatform('web')
148+
149+
console.log('\nEnd processing')
150+
})
151+
152+
console.log('\n==============================================')
153+
console.log('\nBuild completed!')

Diff for: ‎styles/dark-variables.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
[data-theme="dark"] {
2+
--ui-theme-bg-default: var(--ui-colors-black, #171717);
3+
--ui-theme-bg-subtle: var(--ui-colors-grey-900, #323232);
4+
--ui-theme-bg-muted: var(--ui-colors-grey-600, #757575);
5+
--ui-theme-fg-default: var(--ui-colors-white, #ffffff);
6+
--ui-theme-fg-on-accent: var(--ui-colors-white, #ffffff);
7+
--ui-theme-fg-muted: var(--ui-colors-grey-200, #eeeeee);
8+
--ui-theme-fg-subtle: var(--ui-colors-grey-500, #9e9e9e);
9+
--ui-theme-accent-default: var(--ui-colors-blue-500, #3d53f5);
10+
--ui-theme-accent-subtle: var(--ui-colors-blue-950, #060818);
11+
--ui-colors-black: #171717;
12+
--ui-colors-white: #ffffff;
13+
--ui-colors-red-50: #FFF5F7;
14+
--ui-colors-red-100: #fce8ec;
15+
--ui-colors-red-200: #f9d0d9;
16+
--ui-colors-red-300: #f2a2b3;
17+
--ui-colors-red-400: #e95c7b;
18+
--ui-colors-red-500: #df1642;
19+
--ui-colors-red-600: #9c0f2e;
20+
--ui-colors-red-700: #59091a;
21+
--ui-colors-red-800: #2d040d;
22+
--ui-colors-red-900: #160207;
23+
--ui-colors-red-950: #100105;
24+
--ui-colors-blue-50: #eceefe;
25+
--ui-colors-blue-100: #d8ddfd;
26+
--ui-colors-blue-200: #b1bafb;
27+
--ui-colors-blue-300: #8b98f9;
28+
--ui-colors-blue-400: #6475f7;
29+
--ui-colors-blue-500: #3d53f5;
30+
--ui-colors-blue-600: #3142c4;
31+
--ui-colors-blue-700: #253293;
32+
--ui-colors-blue-800: #182162;
33+
--ui-colors-blue-900: #0c1131;
34+
--ui-colors-blue-950: #060818;
35+
--ui-colors-grey-50: #fcfcfc;
36+
--ui-colors-grey-100: #f5f5f5;
37+
--ui-colors-grey-200: #eeeeee;
38+
--ui-colors-grey-300: #e0e0e0;
39+
--ui-colors-grey-400: #bdbdbd;
40+
--ui-colors-grey-500: #9e9e9e;
41+
--ui-colors-grey-600: #757575;
42+
--ui-colors-grey-700: #616161;
43+
--ui-colors-grey-800: #424242;
44+
--ui-colors-grey-900: #323232;
45+
--ui-colors-grey-950: #212121;
46+
}

Diff for: ‎styles/global-variables.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
:root {
2+
--ui-colors-black: #171717;
3+
--ui-colors-white: #ffffff;
4+
--ui-colors-red-50: #FFF5F7;
5+
--ui-colors-red-100: #fce8ec;
6+
--ui-colors-red-200: #f9d0d9;
7+
--ui-colors-red-300: #f2a2b3;
8+
--ui-colors-red-400: #e95c7b;
9+
--ui-colors-red-500: #df1642;
10+
--ui-colors-red-600: #9c0f2e;
11+
--ui-colors-red-700: #59091a;
12+
--ui-colors-red-800: #2d040d;
13+
--ui-colors-red-900: #160207;
14+
--ui-colors-red-950: #100105;
15+
--ui-colors-blue-50: #eceefe;
16+
--ui-colors-blue-100: #d8ddfd;
17+
--ui-colors-blue-200: #b1bafb;
18+
--ui-colors-blue-300: #8b98f9;
19+
--ui-colors-blue-400: #6475f7;
20+
--ui-colors-blue-500: #3d53f5;
21+
--ui-colors-blue-600: #3142c4;
22+
--ui-colors-blue-700: #253293;
23+
--ui-colors-blue-800: #182162;
24+
--ui-colors-blue-900: #0c1131;
25+
--ui-colors-blue-950: #060818;
26+
--ui-colors-grey-50: #fcfcfc;
27+
--ui-colors-grey-100: #f5f5f5;
28+
--ui-colors-grey-200: #eeeeee;
29+
--ui-colors-grey-300: #e0e0e0;
30+
--ui-colors-grey-400: #bdbdbd;
31+
--ui-colors-grey-500: #9e9e9e;
32+
--ui-colors-grey-600: #757575;
33+
--ui-colors-grey-700: #616161;
34+
--ui-colors-grey-800: #424242;
35+
--ui-colors-grey-900: #323232;
36+
--ui-colors-grey-950: #212121;
37+
}

Diff for: ‎styles/light-variables.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
[data-theme="light"] {
2+
--ui-theme-bg-default: var(--ui-colors-white, #ffffff);
3+
--ui-theme-bg-subtle: var(--ui-colors-grey-100, #f5f5f5);
4+
--ui-theme-bg-muted: var(--ui-colors-grey-300, #e0e0e0);
5+
--ui-theme-fg-default: var(--ui-colors-black, #171717);
6+
--ui-theme-fg-on-accent: var(--ui-colors-white, #ffffff);
7+
--ui-theme-fg-muted: var(--ui-colors-grey-700, #616161);
8+
--ui-theme-fg-subtle: var(--ui-colors-grey-500, #9e9e9e);
9+
--ui-theme-accent-default: var(--ui-colors-red-500, #df1642);
10+
--ui-theme-accent-subtle: var(--ui-colors-blue-50, #eceefe);
11+
--ui-colors-black: #171717;
12+
--ui-colors-white: #ffffff;
13+
--ui-colors-red-50: #FFF5F7;
14+
--ui-colors-red-100: #fce8ec;
15+
--ui-colors-red-200: #f9d0d9;
16+
--ui-colors-red-300: #f2a2b3;
17+
--ui-colors-red-400: #e95c7b;
18+
--ui-colors-red-500: #df1642;
19+
--ui-colors-red-600: #9c0f2e;
20+
--ui-colors-red-700: #59091a;
21+
--ui-colors-red-800: #2d040d;
22+
--ui-colors-red-900: #160207;
23+
--ui-colors-red-950: #100105;
24+
--ui-colors-blue-50: #eceefe;
25+
--ui-colors-blue-100: #d8ddfd;
26+
--ui-colors-blue-200: #b1bafb;
27+
--ui-colors-blue-300: #8b98f9;
28+
--ui-colors-blue-400: #6475f7;
29+
--ui-colors-blue-500: #3d53f5;
30+
--ui-colors-blue-600: #3142c4;
31+
--ui-colors-blue-700: #253293;
32+
--ui-colors-blue-800: #182162;
33+
--ui-colors-blue-900: #0c1131;
34+
--ui-colors-blue-950: #060818;
35+
--ui-colors-grey-50: #fcfcfc;
36+
--ui-colors-grey-100: #f5f5f5;
37+
--ui-colors-grey-200: #eeeeee;
38+
--ui-colors-grey-300: #e0e0e0;
39+
--ui-colors-grey-400: #bdbdbd;
40+
--ui-colors-grey-500: #9e9e9e;
41+
--ui-colors-grey-600: #757575;
42+
--ui-colors-grey-700: #616161;
43+
--ui-colors-grey-800: #424242;
44+
--ui-colors-grey-900: #323232;
45+
--ui-colors-grey-950: #212121;
46+
}

Diff for: ‎styles/tokens/dark.json

+194
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
{
2+
"theme": {
3+
"bg": {
4+
"default": {
5+
"value": "{colors.black}",
6+
"type": "color"
7+
},
8+
"subtle": {
9+
"value": "{colors.grey.900}",
10+
"type": "color"
11+
},
12+
"muted": {
13+
"value": "{colors.grey.600}",
14+
"type": "color"
15+
}
16+
},
17+
"fg": {
18+
"default": {
19+
"value": "{colors.white}",
20+
"type": "color"
21+
},
22+
"onAccent": {
23+
"value": "{colors.white}",
24+
"type": "color"
25+
},
26+
"muted": {
27+
"value": "{colors.grey.200}",
28+
"type": "color"
29+
},
30+
"subtle": {
31+
"value": "{colors.grey.500}",
32+
"type": "color"
33+
}
34+
},
35+
"accent": {
36+
"default": {
37+
"value": "{colors.blue.500}",
38+
"type": "color"
39+
},
40+
"subtle": {
41+
"value": "{colors.blue.950}",
42+
"type": "color"
43+
}
44+
}
45+
},
46+
"colors": {
47+
"black": {
48+
"value": "#171717",
49+
"type": "color"
50+
},
51+
"white": {
52+
"value": "#ffffff",
53+
"type": "color"
54+
},
55+
"red": {
56+
"50": {
57+
"value": "#FFF5F7",
58+
"type": "color"
59+
},
60+
"100": {
61+
"value": "#fce8ec",
62+
"type": "color"
63+
},
64+
"200": {
65+
"value": "#f9d0d9",
66+
"type": "color"
67+
},
68+
"300": {
69+
"value": "#f2a2b3",
70+
"type": "color"
71+
},
72+
"400": {
73+
"value": "#e95c7b",
74+
"type": "color"
75+
},
76+
"500": {
77+
"value": "#df1642",
78+
"type": "color"
79+
},
80+
"600": {
81+
"value": "#9c0f2e",
82+
"type": "color"
83+
},
84+
"700": {
85+
"value": "#59091a",
86+
"type": "color"
87+
},
88+
"800": {
89+
"value": "#2d040d",
90+
"type": "color"
91+
},
92+
"900": {
93+
"value": "#160207",
94+
"type": "color"
95+
},
96+
"950": {
97+
"value": "#100105",
98+
"type": "color"
99+
}
100+
},
101+
"blue": {
102+
"50": {
103+
"value": "#eceefe",
104+
"type": "color"
105+
},
106+
"100": {
107+
"value": "#d8ddfd",
108+
"type": "color"
109+
},
110+
"200": {
111+
"value": "#b1bafb",
112+
"type": "color"
113+
},
114+
"300": {
115+
"value": "#8b98f9",
116+
"type": "color"
117+
},
118+
"400": {
119+
"value": "#6475f7",
120+
"type": "color"
121+
},
122+
"500": {
123+
"value": "#3d53f5",
124+
"type": "color"
125+
},
126+
"600": {
127+
"value": "#3142c4",
128+
"type": "color"
129+
},
130+
"700": {
131+
"value": "#253293",
132+
"type": "color"
133+
},
134+
"800": {
135+
"value": "#182162",
136+
"type": "color"
137+
},
138+
"900": {
139+
"value": "#0c1131",
140+
"type": "color"
141+
},
142+
"950": {
143+
"value": "#060818",
144+
"type": "color"
145+
}
146+
},
147+
"grey": {
148+
"50": {
149+
"value": "#fcfcfc",
150+
"type": "color"
151+
},
152+
"100": {
153+
"value": "#f5f5f5",
154+
"type": "color"
155+
},
156+
"200": {
157+
"value": "#eeeeee",
158+
"type": "color"
159+
},
160+
"300": {
161+
"value": "#e0e0e0",
162+
"type": "color"
163+
},
164+
"400": {
165+
"value": "#bdbdbd",
166+
"type": "color"
167+
},
168+
"500": {
169+
"value": "#9e9e9e",
170+
"type": "color"
171+
},
172+
"600": {
173+
"value": "#757575",
174+
"type": "color"
175+
},
176+
"700": {
177+
"value": "#616161",
178+
"type": "color"
179+
},
180+
"800": {
181+
"value": "#424242",
182+
"type": "color"
183+
},
184+
"900": {
185+
"value": "#323232",
186+
"type": "color"
187+
},
188+
"950": {
189+
"value": "#212121",
190+
"type": "color"
191+
}
192+
}
193+
}
194+
}

Diff for: ‎styles/tokens/global.json

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
{
2+
"colors": {
3+
"black": {
4+
"value": "#171717",
5+
"type": "color"
6+
},
7+
"white": {
8+
"value": "#ffffff",
9+
"type": "color"
10+
},
11+
"red": {
12+
"50": {
13+
"value": "#FFF5F7",
14+
"type": "color"
15+
},
16+
"100": {
17+
"value": "#fce8ec",
18+
"type": "color"
19+
},
20+
"200": {
21+
"value": "#f9d0d9",
22+
"type": "color"
23+
},
24+
"300": {
25+
"value": "#f2a2b3",
26+
"type": "color"
27+
},
28+
"400": {
29+
"value": "#e95c7b",
30+
"type": "color"
31+
},
32+
"500": {
33+
"value": "#df1642",
34+
"type": "color"
35+
},
36+
"600": {
37+
"value": "#9c0f2e",
38+
"type": "color"
39+
},
40+
"700": {
41+
"value": "#59091a",
42+
"type": "color"
43+
},
44+
"800": {
45+
"value": "#2d040d",
46+
"type": "color"
47+
},
48+
"900": {
49+
"value": "#160207",
50+
"type": "color"
51+
},
52+
"950": {
53+
"value": "#100105",
54+
"type": "color"
55+
}
56+
},
57+
"blue": {
58+
"50": {
59+
"value": "#eceefe",
60+
"type": "color"
61+
},
62+
"100": {
63+
"value": "#d8ddfd",
64+
"type": "color"
65+
},
66+
"200": {
67+
"value": "#b1bafb",
68+
"type": "color"
69+
},
70+
"300": {
71+
"value": "#8b98f9",
72+
"type": "color"
73+
},
74+
"400": {
75+
"value": "#6475f7",
76+
"type": "color"
77+
},
78+
"500": {
79+
"value": "#3d53f5",
80+
"type": "color"
81+
},
82+
"600": {
83+
"value": "#3142c4",
84+
"type": "color"
85+
},
86+
"700": {
87+
"value": "#253293",
88+
"type": "color"
89+
},
90+
"800": {
91+
"value": "#182162",
92+
"type": "color"
93+
},
94+
"900": {
95+
"value": "#0c1131",
96+
"type": "color"
97+
},
98+
"950": {
99+
"value": "#060818",
100+
"type": "color"
101+
}
102+
},
103+
"grey": {
104+
"50": {
105+
"value": "#fcfcfc",
106+
"type": "color"
107+
},
108+
"100": {
109+
"value": "#f5f5f5",
110+
"type": "color"
111+
},
112+
"200": {
113+
"value": "#eeeeee",
114+
"type": "color"
115+
},
116+
"300": {
117+
"value": "#e0e0e0",
118+
"type": "color"
119+
},
120+
"400": {
121+
"value": "#bdbdbd",
122+
"type": "color"
123+
},
124+
"500": {
125+
"value": "#9e9e9e",
126+
"type": "color"
127+
},
128+
"600": {
129+
"value": "#757575",
130+
"type": "color"
131+
},
132+
"700": {
133+
"value": "#616161",
134+
"type": "color"
135+
},
136+
"800": {
137+
"value": "#424242",
138+
"type": "color"
139+
},
140+
"900": {
141+
"value": "#323232",
142+
"type": "color"
143+
},
144+
"950": {
145+
"value": "#212121",
146+
"type": "color"
147+
}
148+
}
149+
}
150+
}

Diff for: ‎styles/tokens/light.json

+194
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
{
2+
"theme": {
3+
"bg": {
4+
"default": {
5+
"value": "{colors.white}",
6+
"type": "color"
7+
},
8+
"subtle": {
9+
"value": "{colors.grey.100}",
10+
"type": "color"
11+
},
12+
"muted": {
13+
"value": "{colors.grey.300}",
14+
"type": "color"
15+
}
16+
},
17+
"fg": {
18+
"default": {
19+
"value": "{colors.black}",
20+
"type": "color"
21+
},
22+
"onAccent": {
23+
"value": "{colors.white}",
24+
"type": "color"
25+
},
26+
"muted": {
27+
"value": "{colors.grey.700}",
28+
"type": "color"
29+
},
30+
"subtle": {
31+
"value": "{colors.grey.500}",
32+
"type": "color"
33+
}
34+
},
35+
"accent": {
36+
"default": {
37+
"value": "{colors.red.500}",
38+
"type": "color"
39+
},
40+
"subtle": {
41+
"value": "{colors.blue.50}",
42+
"type": "color"
43+
}
44+
}
45+
},
46+
"colors": {
47+
"black": {
48+
"value": "#171717",
49+
"type": "color"
50+
},
51+
"white": {
52+
"value": "#ffffff",
53+
"type": "color"
54+
},
55+
"red": {
56+
"50": {
57+
"value": "#FFF5F7",
58+
"type": "color"
59+
},
60+
"100": {
61+
"value": "#fce8ec",
62+
"type": "color"
63+
},
64+
"200": {
65+
"value": "#f9d0d9",
66+
"type": "color"
67+
},
68+
"300": {
69+
"value": "#f2a2b3",
70+
"type": "color"
71+
},
72+
"400": {
73+
"value": "#e95c7b",
74+
"type": "color"
75+
},
76+
"500": {
77+
"value": "#df1642",
78+
"type": "color"
79+
},
80+
"600": {
81+
"value": "#9c0f2e",
82+
"type": "color"
83+
},
84+
"700": {
85+
"value": "#59091a",
86+
"type": "color"
87+
},
88+
"800": {
89+
"value": "#2d040d",
90+
"type": "color"
91+
},
92+
"900": {
93+
"value": "#160207",
94+
"type": "color"
95+
},
96+
"950": {
97+
"value": "#100105",
98+
"type": "color"
99+
}
100+
},
101+
"blue": {
102+
"50": {
103+
"value": "#eceefe",
104+
"type": "color"
105+
},
106+
"100": {
107+
"value": "#d8ddfd",
108+
"type": "color"
109+
},
110+
"200": {
111+
"value": "#b1bafb",
112+
"type": "color"
113+
},
114+
"300": {
115+
"value": "#8b98f9",
116+
"type": "color"
117+
},
118+
"400": {
119+
"value": "#6475f7",
120+
"type": "color"
121+
},
122+
"500": {
123+
"value": "#3d53f5",
124+
"type": "color"
125+
},
126+
"600": {
127+
"value": "#3142c4",
128+
"type": "color"
129+
},
130+
"700": {
131+
"value": "#253293",
132+
"type": "color"
133+
},
134+
"800": {
135+
"value": "#182162",
136+
"type": "color"
137+
},
138+
"900": {
139+
"value": "#0c1131",
140+
"type": "color"
141+
},
142+
"950": {
143+
"value": "#060818",
144+
"type": "color"
145+
}
146+
},
147+
"grey": {
148+
"50": {
149+
"value": "#fcfcfc",
150+
"type": "color"
151+
},
152+
"100": {
153+
"value": "#f5f5f5",
154+
"type": "color"
155+
},
156+
"200": {
157+
"value": "#eeeeee",
158+
"type": "color"
159+
},
160+
"300": {
161+
"value": "#e0e0e0",
162+
"type": "color"
163+
},
164+
"400": {
165+
"value": "#bdbdbd",
166+
"type": "color"
167+
},
168+
"500": {
169+
"value": "#9e9e9e",
170+
"type": "color"
171+
},
172+
"600": {
173+
"value": "#757575",
174+
"type": "color"
175+
},
176+
"700": {
177+
"value": "#616161",
178+
"type": "color"
179+
},
180+
"800": {
181+
"value": "#424242",
182+
"type": "color"
183+
},
184+
"900": {
185+
"value": "#323232",
186+
"type": "color"
187+
},
188+
"950": {
189+
"value": "#212121",
190+
"type": "color"
191+
}
192+
}
193+
}
194+
}

Diff for: ‎styles/tw-extend/color.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
module.exports = {
2+
"bg-default": "var(--ui-theme-bg-default, #ffffff);",
3+
"bg-subtle": "var(--ui-theme-bg-subtle, #f5f5f5);",
4+
"bg-muted": "var(--ui-theme-bg-muted, #e0e0e0);",
5+
"fg-default": "var(--ui-theme-fg-default, #171717);",
6+
"fg-onAccent": "var(--ui-theme-fg-on-accent, #ffffff);",
7+
"fg-muted": "var(--ui-theme-fg-muted, #616161);",
8+
"fg-subtle": "var(--ui-theme-fg-subtle, #9e9e9e);",
9+
"accent-default": "var(--ui-theme-accent-default, #df1642);",
10+
"accent-subtle": "var(--ui-theme-accent-subtle, #eceefe);",
11+
"black": "var(--ui-colors-black, #171717);",
12+
"white": "var(--ui-colors-white, #ffffff);",
13+
"red-50": "var(--ui-colors-red-50, #FFF5F7);",
14+
"red-100": "var(--ui-colors-red-100, #fce8ec);",
15+
"red-200": "var(--ui-colors-red-200, #f9d0d9);",
16+
"red-300": "var(--ui-colors-red-300, #f2a2b3);",
17+
"red-400": "var(--ui-colors-red-400, #e95c7b);",
18+
"red-500": "var(--ui-colors-red-500, #df1642);",
19+
"red-600": "var(--ui-colors-red-600, #9c0f2e);",
20+
"red-700": "var(--ui-colors-red-700, #59091a);",
21+
"red-800": "var(--ui-colors-red-800, #2d040d);",
22+
"red-900": "var(--ui-colors-red-900, #160207);",
23+
"red-950": "var(--ui-colors-red-950, #100105);",
24+
"blue-50": "var(--ui-colors-blue-50, #eceefe);",
25+
"blue-100": "var(--ui-colors-blue-100, #d8ddfd);",
26+
"blue-200": "var(--ui-colors-blue-200, #b1bafb);",
27+
"blue-300": "var(--ui-colors-blue-300, #8b98f9);",
28+
"blue-400": "var(--ui-colors-blue-400, #6475f7);",
29+
"blue-500": "var(--ui-colors-blue-500, #3d53f5);",
30+
"blue-600": "var(--ui-colors-blue-600, #3142c4);",
31+
"blue-700": "var(--ui-colors-blue-700, #253293);",
32+
"blue-800": "var(--ui-colors-blue-800, #182162);",
33+
"blue-900": "var(--ui-colors-blue-900, #0c1131);",
34+
"blue-950": "var(--ui-colors-blue-950, #060818);",
35+
"grey-50": "var(--ui-colors-grey-50, #fcfcfc);",
36+
"grey-100": "var(--ui-colors-grey-100, #f5f5f5);",
37+
"grey-200": "var(--ui-colors-grey-200, #eeeeee);",
38+
"grey-300": "var(--ui-colors-grey-300, #e0e0e0);",
39+
"grey-400": "var(--ui-colors-grey-400, #bdbdbd);",
40+
"grey-500": "var(--ui-colors-grey-500, #9e9e9e);",
41+
"grey-600": "var(--ui-colors-grey-600, #757575);",
42+
"grey-700": "var(--ui-colors-grey-700, #616161);",
43+
"grey-800": "var(--ui-colors-grey-800, #424242);",
44+
"grey-900": "var(--ui-colors-grey-900, #323232);",
45+
"grey-950": "var(--ui-colors-grey-950, #212121);"
46+
}

Diff for: ‎tailwind.config.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/** @type {import('tailwindcss').Config} */
2+
const colors = require('./styles/tw-extend/color')
3+
4+
module.exports = {
5+
content: [
6+
'components/**/*.{vue,js}',
7+
'layouts/**/*.vue',
8+
'pages/**/*.vue',
9+
'composables/**/*.{js,ts}',
10+
'plugins/**/*.{js,ts}',
11+
'App.{js,ts,vue}',
12+
'app.{js,ts,vue}',
13+
],
14+
theme: {
15+
extend: { colors },
16+
},
17+
plugins: [],
18+
}

Diff for: ‎tokens.json

+244
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
{
2+
"global": {
3+
"colors": {
4+
"black": {
5+
"value": "#171717",
6+
"type": "color"
7+
},
8+
"white": {
9+
"value": "#ffffff",
10+
"type": "color"
11+
},
12+
"red": {
13+
"50": {
14+
"value": "#FFF5F7",
15+
"type": "color"
16+
},
17+
"100": {
18+
"value": "#fce8ec",
19+
"type": "color"
20+
},
21+
"200": {
22+
"value": "#f9d0d9",
23+
"type": "color"
24+
},
25+
"300": {
26+
"value": "#f2a2b3",
27+
"type": "color"
28+
},
29+
"400": {
30+
"value": "#e95c7b",
31+
"type": "color"
32+
},
33+
"500": {
34+
"value": "#df1642",
35+
"type": "color"
36+
},
37+
"600": {
38+
"value": "#9c0f2e",
39+
"type": "color"
40+
},
41+
"700": {
42+
"value": "#59091a",
43+
"type": "color"
44+
},
45+
"800": {
46+
"value": "#2d040d",
47+
"type": "color"
48+
},
49+
"900": {
50+
"value": "#160207",
51+
"type": "color"
52+
},
53+
"950": {
54+
"value": "#100105",
55+
"type": "color"
56+
}
57+
},
58+
"blue": {
59+
"50": {
60+
"value": "#eceefe",
61+
"type": "color"
62+
},
63+
"100": {
64+
"value": "#d8ddfd",
65+
"type": "color"
66+
},
67+
"200": {
68+
"value": "#b1bafb",
69+
"type": "color"
70+
},
71+
"300": {
72+
"value": "#8b98f9",
73+
"type": "color"
74+
},
75+
"400": {
76+
"value": "#6475f7",
77+
"type": "color"
78+
},
79+
"500": {
80+
"value": "#3d53f5",
81+
"type": "color"
82+
},
83+
"600": {
84+
"value": "#3142c4",
85+
"type": "color"
86+
},
87+
"700": {
88+
"value": "#253293",
89+
"type": "color"
90+
},
91+
"800": {
92+
"value": "#182162",
93+
"type": "color"
94+
},
95+
"900": {
96+
"value": "#0c1131",
97+
"type": "color"
98+
},
99+
"950": {
100+
"value": "#060818",
101+
"type": "color"
102+
}
103+
},
104+
"grey": {
105+
"50": {
106+
"value": "#fcfcfc",
107+
"type": "color"
108+
},
109+
"100": {
110+
"value": "#f5f5f5",
111+
"type": "color"
112+
},
113+
"200": {
114+
"value": "#eeeeee",
115+
"type": "color"
116+
},
117+
"300": {
118+
"value": "#e0e0e0",
119+
"type": "color"
120+
},
121+
"400": {
122+
"value": "#bdbdbd",
123+
"type": "color"
124+
},
125+
"500": {
126+
"value": "#9e9e9e",
127+
"type": "color"
128+
},
129+
"600": {
130+
"value": "#757575",
131+
"type": "color"
132+
},
133+
"700": {
134+
"value": "#616161",
135+
"type": "color"
136+
},
137+
"800": {
138+
"value": "#424242",
139+
"type": "color"
140+
},
141+
"900": {
142+
"value": "#323232",
143+
"type": "color"
144+
},
145+
"950": {
146+
"value": "#212121",
147+
"type": "color"
148+
}
149+
}
150+
}
151+
},
152+
"light": {
153+
"theme": {
154+
"bg": {
155+
"default": {
156+
"value": "{colors.white}",
157+
"type": "color"
158+
},
159+
"subtle": {
160+
"value": "{colors.grey.100}",
161+
"type": "color"
162+
},
163+
"muted": {
164+
"value": "{colors.grey.300}",
165+
"type": "color"
166+
}
167+
},
168+
"fg": {
169+
"default": {
170+
"value": "{colors.black}",
171+
"type": "color"
172+
},
173+
"onAccent": {
174+
"value": "{colors.white}",
175+
"type": "color"
176+
},
177+
"muted": {
178+
"value": "{colors.grey.700}",
179+
"type": "color"
180+
},
181+
"subtle": {
182+
"value": "{colors.grey.500}",
183+
"type": "color"
184+
}
185+
},
186+
"accent": {
187+
"default": {
188+
"value": "{colors.red.500}",
189+
"type": "color"
190+
},
191+
"subtle": {
192+
"value": "{colors.blue.50}",
193+
"type": "color"
194+
}
195+
}
196+
}
197+
},
198+
"dark": {
199+
"theme": {
200+
"bg": {
201+
"default": {
202+
"value": "{colors.black}",
203+
"type": "color"
204+
},
205+
"subtle": {
206+
"value": "{colors.grey.900}",
207+
"type": "color"
208+
},
209+
"muted": {
210+
"value": "{colors.grey.600}",
211+
"type": "color"
212+
}
213+
},
214+
"fg": {
215+
"default": {
216+
"value": "{colors.white}",
217+
"type": "color"
218+
},
219+
"onAccent": {
220+
"value": "{colors.white}",
221+
"type": "color"
222+
},
223+
"muted": {
224+
"value": "{colors.grey.200}",
225+
"type": "color"
226+
},
227+
"subtle": {
228+
"value": "{colors.grey.500}",
229+
"type": "color"
230+
}
231+
},
232+
"accent": {
233+
"default": {
234+
"value": "{colors.blue.500}",
235+
"type": "color"
236+
},
237+
"subtle": {
238+
"value": "{colors.blue.950}",
239+
"type": "color"
240+
}
241+
}
242+
}
243+
}
244+
}

Diff for: ‎tsconfig.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// https://v3.nuxtjs.org/concepts/typescript
3+
"extends": "./.nuxt/tsconfig.json"
4+
}

0 commit comments

Comments
 (0)
Please sign in to comment.