Skip to content

Commit 91331fe

Browse files
TahulTahul
committed
feat(transforms): add a lot of features (@screen, @dark/light, @component, compose, ...)
1 parent 58cd49e commit 91331fe

File tree

20 files changed

+2431
-1171
lines changed

20 files changed

+2431
-1171
lines changed

‎package.json‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,28 +43,34 @@
4343
"prepare": "yarn dev:prepare"
4444
},
4545
"dependencies": {
46-
"@nuxt/kit": "^3.0.0-rc.6",
46+
"@nuxt/kit": "^3.0.0-rc.8",
4747
"browser-style-dictionary": "^3.1.1-browser.1",
4848
"chroma-js": "^2.4.2",
49-
"untyped": "^0.4.4"
49+
"csstype": "^3.1.0",
50+
"paneer": "^0.0.1",
51+
"postcss-custom-properties": "^12.1.8",
52+
"postcss-easing-gradients": "^3.0.1",
53+
"postcss-nested": "^5.0.6",
54+
"to-ast": "^1.0.0",
55+
"untyped": "^0.4.5"
5056
},
5157
"devDependencies": {
5258
"@nuxt-themes/docus": "npm:@nuxt-themes/docus-edge@latest",
5359
"@nuxt/module-builder": "^0.1.7",
54-
"@nuxt/schema": "^3.0.0-rc.6",
60+
"@nuxt/schema": "^3.0.0-rc.8",
5561
"@nuxt/test-utils": "npm:@nuxt/test-utils-edge@latest",
5662
"@nuxtjs/eslint-config-typescript": "latest",
5763
"@nuxtjs/tailwindcss": "npm:@nuxtjs/tailwindcss-edge@latest",
5864
"browser-style-dictionary": "^3.1.1-browser.1",
59-
"c8": "^7.11.3",
60-
"eslint": "^8.20.0",
65+
"c8": "^7.12.0",
66+
"eslint": "^8.22.0",
6167
"globby": "^13.1.2",
6268
"husky": "^8.0.1",
6369
"jiti": "^1.14.0",
6470
"lint-staged": "^13.0.3",
6571
"lodash": "^4.17.21",
6672
"nuxt": "npm:nuxt3@latest",
67-
"pathe": "^0.3.2",
68-
"vitest": "^0.18.1"
73+
"pathe": "^0.3.5",
74+
"vitest": "^0.22.1"
6975
}
7076
}

‎playground/components/Block.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<button :class="['block', ...variants]">
3+
{{ variants[0] }}
4+
</button>
5+
</template>
6+
7+
<script setup lang="ts">
8+
defineProps({
9+
...$variantProps('block')
10+
})
11+
</script>
12+
13+
<style scoped lang="postcss">
14+
.block {
15+
@component('block');
16+
}
17+
</style>

‎playground/nuxt.config.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ export default defineNuxtConfig({
1010
'@nuxtjs/design-tokens': resolveThemeDir('../src/module.ts')
1111
},
1212

13-
extends: [resolveThemeDir('./theme')],
13+
extends: [resolveThemeDir('./theme')]
1414

15+
/*
1516
designTokens: {
1617
server: false
1718
}
19+
*/
1820
})

‎playground/pages/index.vue‎

Lines changed: 79 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,104 @@
11
<template>
22
<div
3-
class="app flex flex-col bg-lila text-lavender relative overflow-y-auto"
3+
class="app"
44
>
5-
<header class="flex items-center px-8 py-4 sticky top-0 w-full bg-black z-50">
6-
<span class="font-bold">
7-
Hello World
5+
<header>
6+
<span>
7+
@nuxtjs/design-tokens
88
</span>
99
</header>
1010

11-
<div
12-
class="flex-1 rounded-lg relative z-0 p-8 overflow-y-auto"
13-
>
14-
<p class="flex items-center justify-center w-64 h-64 bg-gradient-to-r from-primary-50 to-primary-900 rounded-xl rounded-lg ring-4 ring-black">
15-
Primary
16-
</p>
17-
<p class="flex items-center justify-center w-64 h-64 bg-black rounded-xl mt-8 rounded-lg ring-4 ring-black">
18-
Black
19-
</p>
20-
<p class="flex items-center justify-center w-64 h-64 bg-grape rounded-xl mt-8 rounded-lg ring-4 ring-black">
21-
Grape
22-
</p>
23-
<p class="text-black flex items-center justify-center w-64 h-64 bg-lavender rounded-xl mt-8 rounded-lg ring-4 ring-black">
24-
Lavender
25-
</p>
26-
<p class="flex items-center justify-center w-64 h-64 bg-velvet-500 rounded-xl mt-8 rounded-lg ring-4 ring-black">
27-
Velvet
28-
</p>
29-
</div>
30-
31-
<footer class="flex justify-between items-center px-8 py-4 sticky top-0 w-full bg-black z-50">
32-
<span class="font-bold">
11+
<section>
12+
<Block :variants="['primary']" />
13+
<Block :variants="['black']" />
14+
<Block :variants="['grape']" />
15+
<Block :variants="['lila']" />
16+
<Block :variants="['velvet']" />
17+
</section>
18+
19+
<footer>
20+
<span>
3321
{{ 'Footer' }}
3422
</span>
3523

36-
<span class="font-semibold">Built with @nuxtjs/design-tokens</span>
24+
<span>Built with @nuxtjs/design-tokens</span>
3725
</footer>
3826
</div>
3927
</template>
4028

4129
<script setup lang="ts">
4230
// const { fetch: fetchTokens } = useTokens()
31+
4332
// const { data } = await useAsyncData(fetchTokens)
4433
</script>
4534

35+
<style>
36+
html {
37+
font-family: Inter, sans-serif;
38+
}
39+
</style>
40+
4641
<style scoped lang="postcss">
4742
.app {
4843
height: 100vh;
4944
width: 100vw;
45+
display: flex;
46+
align-items: center;
47+
flex-direction: column;
48+
overflow-y: auto;
5049
background-color: $dt('colors.primary.100');
50+
color: white;
51+
52+
@dark {
53+
background-color: $dt('colors.primary.200');
54+
}
55+
56+
@screen lg {
57+
background-color: $dt('colors.primary.900');
58+
}
59+
60+
header {
61+
display: flex;
62+
align-items: center;
63+
padding: 1rem 2rem;
64+
position: sticky;
65+
top: 0;
66+
width: 100%;
67+
background-color: $dt('colors.black');
68+
z-index: 50;
69+
70+
span {
71+
font-weight: bold;
72+
}
73+
}
74+
75+
section {
76+
flex: 1;
77+
width: 100%;
78+
overflow-y: auto;
79+
padding: 1rem 2rem;
80+
z-index: 50;
81+
82+
& > * + * {
83+
margin-top: 1rem;
84+
}
85+
}
86+
87+
footer {
88+
background-color: $dt('colors.black');
89+
display: flex;
90+
align-items: center;
91+
justify-content: space-between;
92+
padding: 1rem 2rem;
93+
position: sticky;
94+
top: 0;
95+
width: 100%;
96+
background-color: $dt('colors.black');
97+
z-index: 50;
98+
99+
span {
100+
font-weight: bold;
101+
}
102+
}
51103
}
52104
</style>

‎playground/theme/nuxt.config.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import localModule from '../../src/module'
77
// const resolveThemeDir = (path: string) => resolve(themeDir, path)
88

99
export default defineNuxtConfig({
10-
modules: [localModule, '@nuxtjs/tailwindcss'],
10+
// @ts-ignore
11+
modules: [localModule],
12+
1113
theme: {
1214
meta: {
1315
name: 'Playground Theme',
@@ -17,6 +19,7 @@ export default defineNuxtConfig({
1719
motd: true
1820
}
1921
},
22+
2023
tailwindcss: {
2124
viewer: false
2225
}

‎playground/theme/tokens.config.ts‎

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,77 @@
1-
import { defineTokens, palette } from '../../src'
2-
3-
const primary = palette('blue')
1+
import { defineTokens, palette, compose } from '../../src'
42

53
export default defineTokens({
64
colors: {
7-
primary,
8-
5+
primary: palette('rgb(49, 52, 66)'),
96
black: {
107
value: '#1C1D21'
118
},
12-
139
grape: {
1410
value: '#A288A6'
1511
},
16-
1712
lila: {
1813
value: '#BB9BB0'
1914
},
20-
2115
grey: {
2216
value: '#CCBCBC'
2317
},
24-
2518
lavender: {
2619
value: '#F1E3E4'
2720
},
28-
2921
velvet: {
3022
value: '#502274'
3123
}
24+
},
25+
26+
screens: {
27+
sm: { value: '640px' },
28+
md: { value: '768px' },
29+
lg: { value: '1024px' },
30+
xl: { value: '1280px' },
31+
'2xl': { value: '1536px' }
32+
},
33+
34+
components: {
35+
block: compose({
36+
display: 'flex',
37+
alignItems: 'center',
38+
justifyContent: 'center',
39+
borderRadius: '16px',
40+
width: '320px',
41+
height: '320px',
42+
border: '4px solid {colors.black}',
43+
':hover': {
44+
border: '4px solid {colors.velvet}'
45+
},
46+
variants: {
47+
primary: {
48+
backgroundColor: '{colors.primary.500}'
49+
},
50+
black: {
51+
backgroundColor: '{colors.black}'
52+
},
53+
lavender: {
54+
backgroundColor: '{colors.lavender}'
55+
},
56+
lila: {
57+
backgroundColor: '{colors.lila}'
58+
},
59+
velvet: {
60+
backgroundColor: '{colors.velvet}',
61+
':hover': {
62+
border: '4px solid red'
63+
}
64+
},
65+
grape: {
66+
backgroundColor: '{colors.grape}'
67+
},
68+
rounded: {
69+
borderRadius: '50%'
70+
},
71+
padded: {
72+
padding: '4rem'
73+
}
74+
}
75+
})
3276
}
3377
})

0 commit comments

Comments
 (0)