├── .npmrc
├── tsconfig.json
├── website
    ├── tsconfig.json
    ├── tokens.config.ts
    ├── app.config.ts
    ├── content
    │   └── index.md
    ├── app
    │   └── router.options.ts
    ├── components
    │   ├── IconNuxt.vue
    │   ├── ThemeSelect.vue
    │   ├── ClipboardState.vue
    │   ├── TokenBadge.vue
    │   ├── PlaceholderText.vue
    │   ├── Navbar.vue
    │   ├── TokensSection.vue
    │   └── DisplayValue.vue
    ├── pages
    │   └── index.vue
    ├── nuxt.config.ts
    └── app.vue
├── config.ts
├── .eslintrc
├── netlify.toml
├── .gitignore
├── README.md
├── nuxt.config.ts
├── LICENSE
├── src
    ├── module.ts
    └── tokens.config.ts
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./website/.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/config.ts:
--------------------------------------------------------------------------------
1 | import config from './dist/tokens.config'
2 | export default config
3 | 


--------------------------------------------------------------------------------
/website/tokens.config.ts:
--------------------------------------------------------------------------------
1 | import { defineTheme } from 'pinceau'
2 | 
3 | export default defineTheme({
4 | })
5 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@antfu",
3 |   "rules": {
4 |     "curly": ["error", "multi-line", "consistent"]
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build.environment]
2 |   NPM_FLAGS = "--version"
3 |   NODE_OPTIONS = "--max_old_space_size=4096"
4 |   NODE_VERSION = "16"
5 | 
6 | [build]
7 |   command = "npx pnpm i --store=node_modules/.pnpm-store && npm run generate:website"
8 | 


--------------------------------------------------------------------------------
/website/app.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineAppConfig } from 'nuxt/app'
 2 | 
 3 | export default defineAppConfig({
 4 |   prose: {
 5 |     copyButton: {
 6 |       iconCopy: 'ph:copy',
 7 |       iconCopied: 'ph:check',
 8 |     },
 9 |     headings: {
10 |       icon: 'ph:link',
11 |     },
12 |   },
13 | })
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log
 3 | .nuxt
 4 | nuxt.d.ts
 5 | .output
 6 | .env
 7 | package-lock.json
 8 | framework
 9 | dist
10 | .DS_Store
11 | 
12 | # Yarn
13 | .yarn/cache
14 | .yarn/*state*
15 | 
16 | # Local History
17 | .history
18 | 
19 | # VSCode
20 | .vscode/
21 | 
22 | # Local Netlify folder
23 | .netlify
24 | 


--------------------------------------------------------------------------------
/website/content/index.md:
--------------------------------------------------------------------------------
 1 | This website displays an exhaustive list of all **Design Tokens** used in [Nuxt Themes](https://github.com/nuxt-themes).
 2 | 
 3 | You can easily setup and use these tokens using:
 4 | 
 5 | ```bash
 6 | npm install @nuxt-themes/tokens
 7 | ```
 8 | 
 9 | ```ts
10 | defineNuxtConfig({
11 |   extends: ['@nuxt-themes/tokens']
12 | })
13 | ```
14 | 
15 | This design system is built on top of [**Pinceau**](https://github.com/Tahul/pinceau).
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🎨 @nuxt-themes/tokens
 2 | 
 3 | A design system built for **Nuxt**.
 4 | 
 5 | [✨ Documentation](https://nuxt-themes-tokens.netlify.app)
 6 | 
 7 | - Full install ships `6kb` of **CSS** to the client
 8 | - Design Tokens synchronized with NuxtLabs Figma
 9 | - Autocomplete on all token values
10 | - Built on top of [🖌 Pinceau](https://github.com/Tahul/pinceau)
11 | 
12 | ## Install
13 | 
14 | ```bash
15 | npm install @nuxt-themes/tokens
16 | ```
17 | 
18 | ```ts
19 | defineNuxtConfig({
20 |   extends: ['@nuxt-themes/tokens']
21 | })
22 | ```
23 | 
24 | ## License
25 | 
26 | [MIT](./LICENSE) License © 2022-PRESENT [NuxtLabs](https://nuxtlabs.com)
27 | 


--------------------------------------------------------------------------------
/website/app/router.options.ts:
--------------------------------------------------------------------------------
 1 | import type { RouterConfig } from '@nuxt/schema'
 2 | 
 3 | // https://router.vuejs.org/api/#routeroptions
 4 | export default <RouterConfig>{
 5 |   scrollBehavior: (to, _from, savedPosition) => {
 6 |     if (to.hash) {
 7 |       const el = document.querySelector(to.hash) as any
 8 | 
 9 |       if (!el) { return }
10 | 
11 |       const { marginTop } = getComputedStyle(el)
12 | 
13 |       const marginTopValue = parseInt(marginTop) + 64
14 | 
15 |       const offset = ((document.querySelector(to.hash) as any).offsetTop - marginTopValue)
16 | 
17 |       document.body.scrollTo({ top: offset, behavior: 'smooth' })
18 |     }
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from 'nuxt/config'
 2 | 
 3 | // That allows to overwrite these dependencies paths via `.env` for local development
 4 | const envModules = {
 5 |   colorMode: process?.env?.THEME_DEV_COLOR_MODE_PATH || '@nuxtjs/color-mode',
 6 |   tokens: process?.env?.THEME_DEV_PINCEAU_PATH || 'pinceau/nuxt',
 7 | }
 8 | 
 9 | export default defineNuxtConfig({
10 |   modules: [
11 |     envModules.colorMode,
12 |     envModules.tokens,
13 |   ],
14 |   pinceau: {
15 |     configFileName: 'tokens.config',
16 |     colorSchemeMode: 'class',
17 |   },
18 |   colorMode: {
19 |     classSuffix: '',
20 |   },
21 |   build: {
22 |     transpile: ['nuxt/app'],
23 |   },
24 | })
25 | 


--------------------------------------------------------------------------------
/website/components/IconNuxt.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
 3 |     <path
 4 |       fill-rule="evenodd"
 5 |       clip-rule="evenodd"
 6 |       d="M55.7498 27.1551C52.5277 21.615 44.4723 21.6149 41.2502 27.1551L6.13404 87.5346C2.91191 93.0748 6.93956 100 13.3838 100H40.7975C38.0438 97.5934 37.0241 93.4303 39.1079 89.8584L65.7033 44.2694L55.7498 27.1551Z"
 7 |       fill="currentColor"
 8 |     />
 9 |     <path
10 |       d="M78.0002 40.3997C80.6668 35.8668 87.3332 35.8668 89.9998 40.3997L119.061 89.801C121.728 94.3339 118.395 100 113.062 100H54.9383C49.6052 100 46.2719 94.3339 48.9385 89.801L78.0002 40.3997Z"
11 |       fill="currentColor"
12 |     />
13 |   </svg>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/website/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useContent, useContentHead, useRequestEvent } from '#imports'
 3 | const { page, layout } = useContent()
 4 | // Page not found, set correct status code on SSR
 5 | if (!page.value && process.server) {
 6 |   const event = useRequestEvent()
 7 |   event.res.statusCode = 404
 8 | }
 9 | useContentHead(page)
10 | </script>
11 | 
12 | <template>
13 |   <div class="document-driven-page">
14 |     <NuxtLayout :name="layout || 'default'">
15 |       <ContentRenderer v-if="page" :key="page._id" :value="page">
16 |         <template #empty="{ value }">
17 |           <DocumentDrivenEmpty :value="value" />
18 |         </template>
19 |       </ContentRenderer>
20 |       <DocumentDrivenNotFound v-else />
21 |     </NuxtLayout>
22 |   </div>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/website/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { createResolver } from '@nuxt/kit'
 2 | 
 3 | const { resolve } = createResolver(import.meta.url)
 4 | 
 5 | export default defineNuxtConfig({
 6 |   extends: ['@nuxt-themes/typography'],
 7 | 
 8 |   app: {
 9 |     head: {
10 |       title: '@nuxt-themes/tokens',
11 |       meta: [
12 |         {
13 |           key: 'meta',
14 |           name: 'viewport',
15 |           content: 'width=device-width, initial-scale=1, maximum-scale=1',
16 |         },
17 |       ],
18 |     },
19 |   },
20 | 
21 |   modules: ['../src/module', 'nuxt-icon', '@nuxt/content', '@vueuse/motion/nuxt'],
22 | 
23 |   components: [
24 |     {
25 |       path: resolve('./components'),
26 |       global: true,
27 |     },
28 |   ],
29 | 
30 |   content: {
31 |     highlight: {
32 |       theme: {
33 |         dark: 'github-dark',
34 |         default: 'github-light',
35 |       },
36 |       preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'],
37 |     },
38 |   },
39 | 
40 |   typescript: {
41 |     includeWorkspace: true,
42 |   },
43 | 
44 |   build: {
45 |     transpile: ['nuxt/app'],
46 |   },
47 | })
48 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 NuxtLabs <https://nuxtlabs.com>
 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.
22 | 


--------------------------------------------------------------------------------
/website/components/ThemeSelect.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const colorMode = useColorMode()
 3 | const onClick = () => {
 4 |   const values = ['system', 'light', 'dark']
 5 |   const index = values.indexOf(colorMode.preference)
 6 |   const next = (index + 1) % values.length
 7 | 
 8 |   colorMode.preference = values[next]
 9 | }
10 | </script>
11 | 
12 | <template>
13 |   <button aria-label="Color Mode" @click="onClick">
14 |     <ColorScheme>
15 |       <Icon v-if="colorMode.preference === 'dark'" name="uil:moon" />
16 |       <Icon v-else-if="colorMode.preference === 'light'" name="uil:sun" />
17 |       <Icon v-else name="uil:desktop" />
18 |       <template #placeholder>
19 |         <Icon name="uil:sun" />
20 |       </template>
21 |     </ColorScheme>
22 |   </button>
23 | </template>
24 | 
25 | <style scoped lang="ts">
26 | css({
27 |   button: {
28 |     display: 'flex',
29 |     justifyContent: 'center',
30 |     alignItems: 'center',
31 |     'svg, a > svg': {
32 |         height: '{size.16}',
33 |         width: '{size.16}'
34 |       },
35 |       '@xl': {
36 |         'svg, a > svg': {
37 |           height: '{size.32}',
38 |           width: '{size.32}'
39 |         }
40 |       }
41 |   }
42 | })
43 | </style>
44 | 


--------------------------------------------------------------------------------
/website/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { theme } from '#pinceau/theme'
 3 | 
 4 | const categories = computed(
 5 |   () => {
 6 |     return Object.entries(theme).filter(([key]) => !(['prose', 'typography', 'text'].includes(key)))
 7 |   },
 8 | )
 9 | 
10 | const cpType = ref('token')
11 | 
12 | const cpState = ref('')
13 | 
14 | const hoveredToken = ref()
15 | </script>
16 | 
17 | <template>
18 |   <div class="nuxt-themes-tokens">
19 |     <Navbar :type="cpType" :clipboard-state="cpState" :hovered-token="hoveredToken" />
20 | 
21 |     <section class="motd">
22 |       <ContentDoc />
23 |     </section>
24 | 
25 |     <TokensSection v-for="[key, tokens] in categories" :key="key" v-model:hoveredToken="hoveredToken" v-model:clipboardState="cpState" :type="cpType" :name="key" :tokens="tokens" root />
26 |   </div>
27 | </template>
28 | 
29 | <style lang="ts">
30 | css({
31 |   'html, body': {
32 |     width: '100%',
33 |     height: '100%',
34 |     overflowX: 'hidden',
35 |     backgroundColor: '{color.white}',
36 |     color: '{color.black}',
37 |     '@dark': {
38 |       backgroundColor: '{color.black}',
39 |       color: '{color.white}'
40 |     }
41 |   },
42 |   body: {
43 |     overflowY: 'scroll'
44 |   }
45 | })
46 | </style>
47 | 
48 | <style scoped lang="ts">
49 | css({
50 |   section: {
51 |     padding: '{space.8}'
52 |   },
53 |   '.nuxt-themes-tokens': {
54 |     width: '100%',
55 |     marginLeft: 'auto',
56 |     marginRight: 'auto',
57 |   }
58 | })
59 | </style>
60 | 


--------------------------------------------------------------------------------
/website/components/ClipboardState.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   clipboardState: {
 4 |     type: String,
 5 |     required: false,
 6 |   },
 7 | })
 8 | 
 9 | const copied = ref()
10 | const copy = ref()
11 | 
12 | const { apply: applyCopy } = useMotion(copy, {
13 |   initial: {
14 |     scale: 1,
15 |     rotate: 0,
16 |   },
17 | })
18 | const { apply: applyCopied } = useMotion(copied, {
19 |   initial: {
20 |     scale: 0,
21 |     rotate: 180,
22 |   },
23 | })
24 | 
25 | watch(
26 |   () => props.clipboardState,
27 |   (nextState) => {
28 |     if (nextState === 'copied') {
29 |       applyCopy({ scale: 0, rotate: 180 })
30 |       applyCopied({ scale: 1, rotate: 0 })
31 |       return
32 |     }
33 | 
34 |     applyCopied({ scale: 0, rotate: 180 })
35 |     applyCopy({ scale: 1, rotate: 0 })
36 |   },
37 | )
38 | </script>
39 | 
40 | <template>
41 |   <span>
42 |     <span ref="copied">
43 |       <Icon name="ri:paint-brush-fill" />
44 |     </span>
45 |     <span ref="copy">
46 |       <Icon name="lucide:clipboard-copy" />
47 |     </span>
48 |   </span>
49 | </template>
50 | 
51 | <style scoped lang="ts">
52 | css({
53 |   'span': {
54 |     display: 'flex',
55 |     flexDirection: 'column',
56 |     alignItems: 'center',
57 |     justifyContent: 'center',
58 |     height: '{size.32}',
59 |     width: '{size.32}',
60 |     position: 'relative',
61 |     '& > span': {
62 |       position: 'absolute',
63 |       '&:deep(svg)': {
64 |         height: '{size.24}',
65 |         width: '{size.24}'
66 |       },
67 |     }
68 |   }
69 | })
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/module.ts:
--------------------------------------------------------------------------------
 1 | import { createResolver, defineNuxtModule, installModule } from '@nuxt/kit'
 2 | 
 3 | // That allows to overwrite these dependencies paths via `.env` for local development
 4 | const envModules = {
 5 |   colorMode: process?.env?.THEME_DEV_COLOR_MODE_PATH || '@nuxtjs/color-mode',
 6 |   pinceau: process?.env?.THEME_DEV_PINCEAU_PATH || 'pinceau/nuxt',
 7 | }
 8 | 
 9 | const module: any = defineNuxtModule({
10 |   meta: {
11 |     name: '@nuxt-themes/tokens',
12 |     configKey: 'tokens',
13 |   },
14 |   async setup(_, nuxt) {
15 |     const modulePath = createResolver(import.meta.url)
16 | 
17 |     // Push local tokens config in layers
18 |     nuxt.hook(
19 |       'pinceau:options',
20 |       (options) => {
21 |         if (!options) {
22 |           return
23 |         }
24 | 
25 |         options.configLayers = options?.configLayers || []
26 |         options.configLayers.push({
27 |           cwd: modulePath.resolve(),
28 |           configFileName: 'tokens.config',
29 |         })
30 |       },
31 |     )
32 | 
33 |     // Inject sub-exports types to tsconfig paths
34 |     nuxt.hook('prepare:types', (opts) => {
35 |       const tsConfig: typeof opts.tsConfig & { vueCompilerOptions?: any } = opts.tsConfig
36 |       tsConfig.compilerOptions = tsConfig.compilerOptions || {}
37 |       tsConfig.compilerOptions.paths = tsConfig.compilerOptions.paths || {}
38 |       tsConfig.compilerOptions.paths['@nuxt-themes/tokens/config'] = [modulePath.resolve('./tokens.config.ts')]
39 |     })
40 | 
41 |     await installModule(envModules.colorMode, { classSuffix: '' })
42 | 
43 |     await installModule(envModules.pinceau, { colorSchemeMode: 'class' })
44 |   },
45 | })
46 | 
47 | export default module
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@nuxt-themes/tokens",
 3 |   "version": "2.1.1",
 4 |   "description": "Nuxt official Design Tokens definition.",
 5 |   "author": "NuxtLabs <hello@nuxtlabs.com>",
 6 |   "license": "MIT",
 7 |   "repository": "git@github.com:nuxt-themes/tokens.git",
 8 |   "type": "module",
 9 |   "exports": {
10 |     ".": {
11 |       "import": "./dist/module.mjs",
12 |       "require": "./dist/module.cjs"
13 |     },
14 |     "./config": "./config.ts"
15 |   },
16 |   "files": [
17 |     "dist",
18 |     "tokens",
19 |     "config.ts"
20 |   ],
21 |   "scripts": {
22 |     "build": "unbuild",
23 |     "dev": "nuxi dev website",
24 |     "dev:website": "nuxi dev website",
25 |     "build:website": "nuxi generate website",
26 |     "generate:website": "nuxi generate website",
27 |     "lint": "eslint . --fix",
28 |     "release": "release-it"
29 |   },
30 |   "dependencies": {
31 |     "@nuxtjs/color-mode": "^3.3.0",
32 |     "@vueuse/core": "^10.3.0",
33 |     "pinceau": "^0.20.1"
34 |   },
35 |   "devDependencies": {
36 |     "style-value-types": "^5.1.2",
37 |     "@antfu/eslint-config": "^0.40.2",
38 |     "@nuxt-themes/typography": "^1.0.0",
39 |     "@nuxt/content": "^2.7.2",
40 |     "@nuxt/module-builder": "latest",
41 |     "@vueuse/motion": "2.0.0",
42 |     "eslint": "^8.46.0",
43 |     "nuxt": "^3.6.5",
44 |     "nuxt-icon": "^0.5.0",
45 |     "release-it": "^16.1.3",
46 |     "typescript": "^5.1.6"
47 |   },
48 |   "pnpm": {
49 |     "peerDependencyRules": {
50 |       "ignoreMissing": [
51 |         "vue",
52 |         "postcss",
53 |         "postcss-*",
54 |         "@nuxt/kit"
55 |       ]
56 |     }
57 |   },
58 |   "release-it": {
59 |     "hooks": {
60 |       "before:init": [
61 |         "pnpm build"
62 |       ]
63 |     },
64 |     "npm": {
65 |       "access": "public"
66 |     },
67 |     "git": {
68 |       "commitMessage": "chore(release): release v${version}"
69 |     },
70 |     "github": {
71 |       "release": true,
72 |       "releaseName": "v${version}"
73 |     }
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/website/components/TokenBadge.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   token: {
 4 |     type: Object as any,
 5 |     required: false,
 6 |   },
 7 |   clipboardState: {
 8 |     type: String,
 9 |     required: false,
10 |   },
11 |   type: {
12 |     type: String,
13 |     required: false,
14 |   },
15 | })
16 | 
17 | const displayValue = computed(() => {
18 |   if (!props.token) {
19 |     return ''
20 |   }
21 | 
22 |   if (props.type === 'token' && props.token?.path) {
23 |     return `{${props.token.path.join('.')}}`
24 |   }
25 | 
26 |   const variable = props.token?.variable
27 | 
28 |   if (variable) {
29 |     return `{${variable.replace('var(--', '').replace(')', '').split('-').join('.')}}`
30 |   }
31 | 
32 |   return props.token?.attributes?.variable || props.token?.value || props.token?.original?.value || ''
33 | })
34 | 
35 | const badge = ref()
36 | 
37 | const { apply, leave } = useMotion(
38 |   badge,
39 |   {
40 |     initial: {
41 |       y: 100,
42 |       opacity: 0,
43 |       transition: {
44 |         type: 'spring',
45 |         stiffness: 600,
46 |         damping: 35,
47 |       },
48 |     },
49 |     enter: {
50 |       y: 0,
51 |       opacity: 1,
52 |       transition: {
53 |         type: 'spring',
54 |         stiffness: 600,
55 |         damping: 35,
56 |       },
57 |     },
58 |   },
59 | )
60 | </script>
61 | 
62 | <template>
63 |   <Transition @enter="apply('enter')" @leave="(_: any, done: any) => leave(done)">
64 |     <button v-if="token" ref="badge">
65 |       {{ displayValue }}
66 |       <ClipboardState :clipboard-state="clipboardState" />
67 |     </button>
68 |   </Transition>
69 | </template>
70 | 
71 | <style scoped lang="ts">
72 | css({
73 |   button: {
74 |     display: 'flex',
75 |     alignItems: 'center',
76 |     justifyContent: 'center',
77 |     overflow: 'hidden',
78 |     border: '1px solid {color.green.500}',
79 |     backgroundColor: 'rgba({color.green.200}, 0.4)',
80 |     padding: '{space.1} {space.2}',
81 |     borderRadius: '{radii.lg}',
82 |     fontWeight: '{fontWeight.bold}',
83 |     color: '{color.black}',
84 |     '@dark': {
85 |       color: '{color.white}'
86 |     }
87 |   }
88 | })
89 | </style>
90 | 


--------------------------------------------------------------------------------
/website/components/PlaceholderText.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps({
 3 |   single: {
 4 |     type: Boolean,
 5 |     required: false,
 6 |     default: false,
 7 |   },
 8 | })
 9 | </script>
10 | 
11 | <template>
12 |   <p v-bind="$attrs">
13 |     All you need to paint is a few tools, a little instruction, and a vision in your mind. This is your world. That's the way I look when I get home late; black and blue.
14 |   </p>
15 |   <template v-if="!single">
16 |     <p v-bind="$attrs">
17 |       You can work and carry-on and put lots of little happy things in here. You can get away with a lot. In life you need colors.
18 |     </p>
19 |     <p v-bind="$attrs">
20 |       Put it in, leave it alone. Volunteering your time; it pays you and your whole community fantastic dividends. You better get your coat out, this is going to be a cold painting. In nature, dead trees are just as normal as live trees.
21 |     </p>
22 |     <p v-bind="$attrs">
23 |       Isn't that fantastic? Let's get wild today. Put light against light - you have nothing. Put dark against dark - you have nothing. It's the contrast of light and dark that each give the other one meaning. We'll have a super time.
24 |     </p>
25 |     <p v-bind="$attrs">
26 |       We need dark in order to show light. The only prerequisite is that it makes you happy. If it makes you happy then it's good. You can create the world you want to see and be a part of. You have that power. We'll do another happy little painting.
27 |     </p>
28 |     <p v-bind="$attrs">
29 |       Only eight colors that you need. Zip. That easy. You can do anything here. So don't worry about it. You want your tree to have some character. Make it special.
30 |     </p>
31 |     <p v-bind="$attrs">
32 |       Trees get lonely too, so we'll give him a little friend. Think about a cloud. Just float around and be there. You create the dream - then you bring it into your world. And maybe a little bush lives there. You can create anything that makes you happy. Poor old tree.
33 |     </p>
34 |   </template>
35 | </template>
36 | 
37 | <style scoped lang="ts">
38 | css({
39 |   'p': {
40 |     margin: '{space.2} 0',
41 |     truncate: true
42 |   }
43 | })
44 | </style>
45 | 


--------------------------------------------------------------------------------
/website/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { PropType } from 'vue'
 3 | import type { DesignToken } from 'pinceau'
 4 | 
 5 | defineProps({
 6 |   hoveredToken: {
 7 |     type: Object as PropType<DesignToken | undefined>,
 8 |     required: false,
 9 |   },
10 |   clipboardState: {
11 |     type: String,
12 |     required: false,
13 |   },
14 |   type: {
15 |     type: String as PropType<'variable' | 'token'>,
16 |     required: false,
17 |   },
18 | })
19 | </script>
20 | 
21 | <template>
22 |   <header>
23 |     <h1>
24 |       <IconNuxt class="icon" />
25 |       <span>@nuxt-themes/tokens</span>
26 |     </h1>
27 |     <div>
28 |       <TokenBadge :type="type" :clipboard-state="clipboardState" :token="hoveredToken" />
29 |       <ThemeSelect />
30 |       <NuxtLink to="https://github.com/nuxt-themes/tokens" target="_blank">
31 |         <Icon name="fa-brands:github" />
32 |       </NuxtLink>
33 |     </div>
34 |   </header>
35 | </template>
36 | 
37 | <style scoped lang="ts">
38 | css({
39 |   header: {
40 |     overflow: 'hidden',
41 |     height: '{size.64}',
42 |     backdropFilter: 'saturate(180%) blur(20px)',
43 |     width: '100%',
44 |     padding: '{space.4} {space.8}',
45 |     position: 'sticky',
46 |     top: '{space.0}',
47 |     display: 'flex',
48 |     justifyContent: 'space-between',
49 |     alignItems: 'center',
50 |     '@dark': {
51 |       backgroundColor: 'rgba({color.black}, 0.4)',
52 |     },
53 |     a: {
54 |       lineHeight: '0'
55 |     },
56 |     zIndex: '50',
57 |     h1: {
58 |       display: 'flex',
59 |       alignItems: 'center',
60 |       gap: '{space.2}',
61 |       fontSize: '{fontSize.sm}',
62 |       fontWeight: '{fontWeight.black}',
63 |       '@xl': {
64 |         fontSize: '{fontSize.xl}',
65 |       },
66 |       '.icon': {
67 |         width: '{size.32}'
68 |       },
69 |       span: {
70 |         display: 'none'
71 |       },
72 |       '@xs': {
73 |         span: {
74 |           display: 'inline',
75 |         }
76 |       },
77 |     },
78 |     '& > div': {
79 |       display: 'flex',
80 |       justifyContent: 'space-between',
81 |       alignItems: 'center',
82 |       '& > * + *': {
83 |         marginLeft: '{space.4}'
84 |       },
85 |       ':deep(.icon)': {
86 |         height: '{size.16}',
87 |         width: '{size.16}'
88 |       },
89 |       '@xl': {
90 |         ':deep(.icon)': {
91 |           height: '{size.24}',
92 |           width: '{size.24}'
93 |         }
94 |       }
95 |     }
96 |   }
97 | })
98 | </style>
99 | 


--------------------------------------------------------------------------------
/website/components/TokensSection.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import type { PropType } from 'vue'
  3 | import type { DesignToken } from 'pinceau'
  4 | import { useVModel } from '@vueuse/core'
  5 | 
  6 | const props = defineProps({
  7 |   hoveredToken: {
  8 |     type: Object as PropType<DesignToken | undefined>,
  9 |     required: false,
 10 |   },
 11 |   clipboardState: {
 12 |     type: String,
 13 |     required: false,
 14 |   },
 15 |   type: {
 16 |     type: String,
 17 |     required: false,
 18 |   },
 19 |   name: {
 20 |     type: String,
 21 |     required: false,
 22 |   },
 23 |   tokens: {
 24 |     type: Object as PropType<any>,
 25 |     required: true,
 26 |   },
 27 |   nestings: {
 28 |     type: Array,
 29 |     required: false,
 30 |     default: () => ([]),
 31 |   },
 32 |   root: {
 33 |     type: Boolean,
 34 |     required: false,
 35 |   },
 36 |   ...variants,
 37 | })
 38 | 
 39 | const emit = defineEmits(['update:hoveredToken', 'update:clipboardState'])
 40 | 
 41 | const route = useRoute()
 42 | 
 43 | const collapsed = ref<boolean>(route.hash === `#${props.name}` ? false : props.root)
 44 | 
 45 | const hoveredToken = useVModel(props, 'hoveredToken', emit)
 46 | 
 47 | const clipboardState = useVModel(props, 'clipboardState', emit)
 48 | 
 49 | const values = computed<any>(() => Object.entries(props.tokens))
 50 | 
 51 | const collapse = () => {
 52 |   if (!props.root) {
 53 |     return
 54 |   }
 55 | 
 56 |   collapsed.value = !collapsed.value
 57 | }
 58 | </script>
 59 | 
 60 | <template>
 61 |   <section :class="{ root }">
 62 |     <component :is="root ? 'button' : 'div'" @click="collapse">
 63 |       <ProseH2 v-if="name" :id="name">
 64 |         {{ name }}
 65 |       </ProseH2>
 66 |       <div v-if="root">
 67 |         <Icon v-if="collapsed" name="lucide:chevrons-up-down" />
 68 |         <Icon v-else name="lucide:chevrons-down-up" />
 69 |       </div>
 70 |     </component>
 71 | 
 72 |     <ul v-if="!collapsed">
 73 |       <li v-for="[key, value] of values" :key="key">
 74 |         <DisplayValue v-if="value.value" v-model:hoveredToken="hoveredToken" v-model:clipboardState="clipboardState" :token="value" :type="type" :name="key" :nestings="[...nestings, name]" />
 75 |         <TokensSection v-else v-model:hoveredToken="hoveredToken" v-model:clipboardState="clipboardState" :tokens="value" :type="type" flatten :name="key" :nestings="[...nestings, name]" />
 76 |       </li>
 77 |     </ul>
 78 |   </section>
 79 | </template>
 80 | 
 81 | <style scoped lang="ts">
 82 | css({
 83 |   'h2, h3': {
 84 |     fontStyle: 'capitalize',
 85 |     textTransform: 'capitalize',
 86 |     fontFamily: '{font.sans}',
 87 |     fontWeight: 'bold',
 88 |   },
 89 |   section: {
 90 |     '&.root': {
 91 |       '& > button': {
 92 |         borderBottom: '{borderWidth.lg} solid {color.gray.100}',
 93 |         '@dark': {
 94 |           borderBottom: '{borderWidth.lg} solid {color.gray.900}',
 95 |         },
 96 |         h2: {
 97 |           margin: 0
 98 |         },
 99 |         '& > div': {
100 |           fontSize: '{fontSize.2xl}'
101 |         }
102 |       }
103 |     },
104 |     '& > div,button': {
105 |       width: '100%',
106 |       display: 'flex',
107 |       alignItems: 'center',
108 |       flexDirection: 'row',
109 |       justifyContent: 'space-between',
110 |     }
111 |   },
112 |   variants: {
113 |     flatten: {
114 |       true: {
115 |         ul: {
116 |           display: 'grid',
117 |           gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
118 |           gap: '{space.4}',
119 |           "@lg": {
120 |             gap: '{space.16}',
121 |           }
122 |         }
123 |       }
124 |     }
125 |   }
126 | })
127 | </style>
128 | 


--------------------------------------------------------------------------------
/website/components/DisplayValue.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import type { PropType } from 'vue'
  3 | import type { DesignToken } from 'pinceau'
  4 | import * as vt from 'style-value-types'
  5 | import { useClipboard, useVModel } from '@vueuse/core'
  6 | 
  7 | const props = defineProps({
  8 |   hoveredToken: {
  9 |     type: Object as PropType<DesignToken | undefined>,
 10 |     required: false,
 11 |   },
 12 |   type: {
 13 |     type: String,
 14 |     required: false,
 15 |   },
 16 |   clipboardState: {
 17 |     type: String,
 18 |     required: false,
 19 |   },
 20 |   nestings: {
 21 |     type: Array,
 22 |     required: false,
 23 |     default: () => ([]),
 24 |   },
 25 |   name: {
 26 |     type: String,
 27 |     required: true,
 28 |   },
 29 |   token: {
 30 |     type: Object as PropType<DesignToken> as any,
 31 |     required: true,
 32 |   },
 33 | })
 34 | 
 35 | const emit = defineEmits(['update:hoveredToken', 'update:clipboardState'])
 36 | 
 37 | const hoveredToken = useVModel(props, 'hoveredToken', emit)
 38 | 
 39 | const clipboardState = useVModel(props, 'clipboardState', emit)
 40 | 
 41 | const tokenValue = computed(() => props?.token?.value || props.token?.original?.value)
 42 | 
 43 | const copyValue = computed(() => {
 44 |   if (props.token?.variable) {
 45 |     return `{${props.token.variable.replace('var(--', '').replace(')', '').split('-').join('.')}}`
 46 |   }
 47 |   return props.token?.value || ''
 48 | })
 49 | 
 50 | const { copy: _copy } = useClipboard({ source: copyValue })
 51 | 
 52 | const copy = () => {
 53 |   _copy()
 54 |   if (clipboardState.value !== 'copied') {
 55 |     clipboardState.value = 'copied'
 56 |     setTimeout(() => (clipboardState.value = ''), 1000)
 57 |   }
 58 | }
 59 | 
 60 | const leave = () => {
 61 |   hoveredToken.value = undefined
 62 | }
 63 | 
 64 | const enter = () => {
 65 |   hoveredToken.value = props.token
 66 | }
 67 | 
 68 | const isScreen = computed(() => props.nestings.includes('media'))
 69 | 
 70 | const isColor = computed(() => vt.color.test(tokenValue.value))
 71 | 
 72 | const isFont = computed(() => props.token.type === 'font')
 73 | 
 74 | const isRadii = computed(() => props.nestings.includes('radii'))
 75 | 
 76 | const isSize = computed(() => props.nestings.includes('size'))
 77 | 
 78 | const isSpace = computed(() => props.nestings.includes('space'))
 79 | 
 80 | const isShadow = computed(() => props.nestings.includes('shadow'))
 81 | 
 82 | const isBorderWidth = computed(() => props.nestings.includes('borderWidth'))
 83 | 
 84 | const isOpacity = computed(() => props.nestings.includes('opacity'))
 85 | 
 86 | const isFontWeights = computed(() => props.nestings.includes('fontWeight'))
 87 | 
 88 | const isFontSizes = computed(() => props.nestings.includes('fontSize'))
 89 | 
 90 | const isLetterSpacings = computed(() => props.nestings.includes('letterSpacing'))
 91 | 
 92 | const isLeads = computed(() => props.nestings.includes('lead'))
 93 | 
 94 | const isText = computed(() => props.nestings.includes('text'))
 95 | </script>
 96 | 
 97 | <template>
 98 |   <div @mouseenter="enter" @mouseleave="leave" @click="() => copy()">
 99 |     <NuxtLink v-if="name" :id="name" :to="`#${nestings.length ? [...nestings, name].join('-') : name}`">
100 |       <h3>{{ name }}</h3>
101 |     </NuxtLink>
102 |     <span>
103 |       <template v-if="isScreen">
104 |         <div class="box" :style="{ width: tokenValue, height: tokenValue }" />
105 |         <span>{{ tokenValue }}</span>
106 |       </template>
107 |       <template v-else-if="isColor">
108 |         <div class="box color" :style="{ backgroundColor: tokenValue }" />
109 |         <span>{{ tokenValue }}</span>
110 |       </template>
111 |       <template v-else-if="isFont">
112 |         <div class="paragraph" :style="{ fontFamily: tokenValue }">
113 |           <PlaceholderText />
114 |         </div>
115 |         <span>{{ tokenValue }}</span>
116 |       </template>
117 |       <template v-else-if="isShadow">
118 |         <div class="box shadow">
119 |           <div class="shadowed" :style="{ boxShadow: tokenValue }">
120 |         &nbsp;
121 |           </div>
122 |         </div>
123 |         <span>{{ tokenValue }}</span>
124 |       </template>
125 |       <template v-else-if="isRadii">
126 |         <div class="box radii" :style="{ borderRadius: tokenValue }" />
127 |         <span>{{ tokenValue }}</span>
128 |       </template>
129 |       <template v-else-if="isSize">
130 |         <div class="box size" :style="{ width: tokenValue, height: tokenValue }" />
131 |         <span>{{ tokenValue }}</span>
132 |       </template>
133 |       <template v-else-if="isSpace">
134 |         <div class="box space" :style="{ width: '500px', height: '500px', padding: tokenValue }">
135 |           <div />
136 |         </div>
137 |         <span>{{ tokenValue }}</span>
138 |       </template>
139 |       <template v-else-if="isBorderWidth">
140 |         <div class="box borderWidths" :style="{ borderWidth: `${tokenValue}` }" />
141 |         <span>{{ tokenValue }}</span>
142 |       </template>
143 |       <template v-else-if="isOpacity">
144 |         <div class="box opacity">
145 |           <div :style="{ opacity: tokenValue }">
146 |         &nbsp;
147 |           </div>
148 |         </div>
149 |         <span>{{ tokenValue }}</span>
150 |       </template>
151 |       <template v-else-if="isFontWeights">
152 |         <PlaceholderText single :style="{ fontWeight: tokenValue }" />
153 |         <span>{{ tokenValue }}</span>
154 |       </template>
155 |       <template v-else-if="isFontSizes">
156 |         <PlaceholderText single :style="{ fontSize: tokenValue }" />
157 |         <span>{{ tokenValue }}</span>
158 |       </template>
159 |       <template v-else-if="isLetterSpacings">
160 |         <PlaceholderText single :style="{ letterSpacing: tokenValue }" />
161 |         <span>{{ tokenValue }}</span>
162 |       </template>
163 |       <template v-else-if="isLeads">
164 |         <PlaceholderText single class="leads" :style="{ lineHeight: tokenValue }" />
165 |         <span>{{ tokenValue }}</span>
166 |       </template>
167 |       <template v-else>
168 |         <span>{{ tokenValue }}</span>
169 |       </template>
170 |       <p>{{ token.variable }}</p>
171 |     </span>
172 |   </div>
173 | </template>
174 | 
175 | <style scoped lang="ts">
176 | css({
177 |   div: {
178 |     cursor: 'copy'
179 |   },
180 |   ':deep(.leads)': {
181 |     backgroundColor: '{color.green.500}',
182 |     borderRadius: '{radii.sm}  '
183 |   },
184 |   'h3': {
185 |     fontStyle: 'capitalize',
186 |     textTransform: 'capitalize',
187 |     fontFamily: '{font.sans}',
188 |     fontWeight: 'bold',
189 |     marginTop: '{space.2}',
190 |     fontSize: '{fontSize.3xl}'
191 |   },
192 |   '.box': {
193 |     position: 'relative',
194 |     height: '32px',
195 |     width: '32px',
196 |     borderRadius: '{radii.xl}',
197 |     backgroundColor: '{color.black}',
198 |     '@dark': {
199 |       backgroundColor: '{color.white}'
200 |     },
201 |     '&.color': {
202 |       border: '2px solid {color.white}',
203 |       span: {
204 |         position: 'absolute',
205 |         bottom: '{space.2}',
206 |         right: '{space.4}',
207 |         opacity: '50%'
208 |       }
209 |     },
210 |     '&.shadow': {
211 |       border: '2px solid {color.white}',
212 |       display: 'flex',
213 |       alignItems: 'center',
214 |       justifyContent: 'center',
215 |       width: '256px',
216 |       height: '256px',
217 |       backgroundColor: '{color.white}',
218 |       '@dark': {
219 |         backgroundColor: 'white'
220 |       },
221 |       span: {
222 |         position: 'absolute',
223 |         bottom: '{space.4}',
224 |         right: '{space.8}',
225 |         opacity: '50%'
226 |       },
227 |       '& > .shadowed': {
228 |         width: '64px',
229 |         height: '64px',
230 |         borderRadius: '{radii.xl}',
231 |         backgroundColor: '{color.white}',
232 |       },
233 |     },
234 |     '&.size': {
235 |       backgroundColor: '{color.black}',
236 |       '@dark': {
237 |         backgroundColor: '{color.white}'
238 |       },
239 |      },
240 |     '&.radii': {
241 |       border: '8px solid {color.indigoblue.500}',
242 |     },
243 |     '&.space': {
244 |       position: 'relative',
245 |       display: 'flex',
246 |       alignItems: 'center',
247 |       justifyContent: 'center',
248 |       backgroundColor: '{color.black}',
249 |       "@dark": {
250 |         backgroundColor: '{color.white}',
251 |       },
252 |       '& > div': {
253 |         backgroundColor: '{color.white}',
254 |         borderRadius: '{radii.lg}',
255 |         width: '100%',
256 |         height: '100%',
257 |         "@dark": {
258 |           backgroundColor: '{color.black}',
259 |         }
260 |       }
261 |     },
262 |     '&.borderWidths': {
263 |       borderColor: '{color.indigoblue.500}',
264 |       borderStyle: 'solid'
265 |     },
266 |     '&.opacity': {
267 |       display: 'flex',
268 |       alignItems: 'center',
269 |       justifyContent: 'center',
270 |       "@dark": {
271 |         backgroundColor: '{color.white}',
272 |       },
273 |       '& > div': {
274 |         backgroundColor: '{color.white}',
275 |         borderRadius: '{radii.lg}',
276 |         width: '50%',
277 |         height: '50%',
278 |         "@dark": {
279 |           backgroundColor: '{color.black}',
280 |         }
281 |       }
282 |     }
283 |   },
284 |   '.paragraph': {
285 |     fontSize: '{fontSize.xl}'
286 |   },
287 |   'span': {
288 |     '& > span': {
289 |       fontWeight: '{fontWeight.bold}'
290 |     }
291 |   },
292 | })
293 | </style>
294 | 


--------------------------------------------------------------------------------
/src/tokens.config.ts:
--------------------------------------------------------------------------------
  1 | import { defineTheme } from 'pinceau'
  2 | import type { PinceauTheme, PropertyValue } from 'pinceau'
  3 | 
  4 | export default defineTheme({
  5 |   media: {
  6 |     '$schema': {
  7 |       title: 'Your website media queries.',
  8 |       tags: [
  9 |         '@studioInput design-token',
 10 |         '@studioInputTokenType color',
 11 |         '@studioIcon material-symbols:screenshot-monitor-outline-rounded',
 12 |       ],
 13 |     },
 14 |     'xs': '(min-width: 475px)',
 15 |     'sm': '(min-width: 640px)',
 16 |     'md': '(min-width: 768px)',
 17 |     'lg': '(min-width: 1024px)',
 18 |     'xl': '(min-width: 1280px)',
 19 |     '2xl': '(min-width: 1536px)',
 20 |     'rm': '(prefers-reduced-motion: reduce)',
 21 |     'landscape': 'only screen and (orientation: landscape)',
 22 |     'portrait': 'only screen and (orientation: portrait)',
 23 |   },
 24 | 
 25 |   color: {
 26 |     $schema: {
 27 |       title: 'Your website color palette.',
 28 |       tags: [
 29 |         '@studioInput design-token',
 30 |         '@studioInputTokenType color',
 31 |         '@studioIcon ph:palette',
 32 |       ],
 33 |     },
 34 |     white: '#ffffff',
 35 |     black: '#0E0D0D',
 36 |     gray: {
 37 |       50: '#FBFBFB',
 38 |       100: '#F3F3F2',
 39 |       200: '#ECEBE8',
 40 |       300: '#DBD9D3',
 41 |       400: '#ADA9A4',
 42 |       500: '#97948F',
 43 |       600: '#3D3B38',
 44 |       700: '#292724',
 45 |       800: '#1C1B19',
 46 |       900: '#121110',
 47 |     },
 48 |     green: {
 49 |       50: '#ECFFF7',
 50 |       100: '#DBFFF0',
 51 |       200: '#C0FFE4',
 52 |       300: '#86FBCB',
 53 |       400: '#3CEEA5',
 54 |       500: '#0DD885',
 55 |       600: '#039B5A',
 56 |       700: '#01492C',
 57 |       800: '#002817',
 58 |       900: '#00190F',
 59 |     },
 60 |     yellow: {
 61 |       50: '#FFFCEE',
 62 |       100: '#FFF7D9',
 63 |       200: '#FFF3C0',
 64 |       300: '#FFE372',
 65 |       400: '#FFDC4E',
 66 |       500: '#FBCA05',
 67 |       600: '#AB8A07',
 68 |       700: '#463801',
 69 |       800: '#292100',
 70 |       900: '#1B1500',
 71 |     },
 72 |     orange: {
 73 |       50: '#FFF7F2',
 74 |       100: '#FFEFE5',
 75 |       200: '#FFE5D7',
 76 |       300: '#FDAC7E',
 77 |       400: '#FC8E51',
 78 |       500: '#FA630E',
 79 |       600: '#7E3004',
 80 |       700: '#3F1802',
 81 |       800: '#2D1102',
 82 |       900: '#1A0A01',
 83 |     },
 84 |     pumpkin: {
 85 |       50: '#ffe9d9',
 86 |       100: '#ffd3b3',
 87 |       200: '#ffbd8d',
 88 |       300: '#ffa666',
 89 |       400: '#ff9040',
 90 |       500: '#ff7a1a',
 91 |       600: '#e15e00',
 92 |       700: '#a94700',
 93 |       800: '#702f00',
 94 |       900: '#381800',
 95 |     },
 96 |     red: {
 97 |       50: '#FFF9F8',
 98 |       100: '#FFF0EC',
 99 |       200: '#FFE6E1',
100 |       300: '#FFA692',
101 |       400: '#FF7353',
102 |       500: '#FF3B10',
103 |       600: '#AD2203',
104 |       700: '#550F00',
105 |       800: '#340A01',
106 |       900: '#1C0301',
107 |     },
108 |     pear: {
109 |       50: '#f7f8dc',
110 |       100: '#eff0ba',
111 |       200: '#e8e997',
112 |       300: '#e0e274',
113 |       400: '#d8da52',
114 |       500: '#d0d32f',
115 |       600: '#a8aa24',
116 |       700: '#7e801b',
117 |       800: '#545512',
118 |       900: '#2a2b09',
119 |     },
120 |     teal: {
121 |       50: '#d7faf8',
122 |       100: '#aff4f0',
123 |       200: '#87efe9',
124 |       300: '#5fe9e1',
125 |       400: '#36e4da',
126 |       500: '#1cd1c6',
127 |       600: '#16a79e',
128 |       700: '#117d77',
129 |       800: '#0b544f',
130 |       900: '#062a28',
131 |     },
132 |     lightblue: {
133 |       50: '#F1FCFF',
134 |       100: '#DCF7FF',
135 |       200: '#C5F2FF',
136 |       300: '#82E3FF',
137 |       400: '#55E1FF',
138 |       500: '#1AD6FF',
139 |       600: '#0893B1',
140 |       700: '#013858',
141 |       800: '#00232B',
142 |       900: '#001A1F',
143 |     },
144 |     blue: {
145 |       50: '#F2FAFF',
146 |       100: '#E2F4FF',
147 |       200: '#D0EEFF',
148 |       300: '#A1DDFF',
149 |       400: '#64C7FF',
150 |       500: '#1AADFF',
151 |       600: '#01659E',
152 |       700: '#013858',
153 |       800: '#002235',
154 |       900: '#00131D',
155 |     },
156 |     indigoblue: {
157 |       50: '#d9e5ff',
158 |       100: '#b3cbff',
159 |       200: '#8db0ff',
160 |       300: '#6696ff',
161 |       400: '#407cff',
162 |       500: '#1a62ff',
163 |       600: '#0047e1',
164 |       700: '#0035a9',
165 |       800: '#002370',
166 |       900: '#001238',
167 |     },
168 |     royalblue: {
169 |       50: '#dfdbfb',
170 |       100: '#c0b7f7',
171 |       200: '#a093f3',
172 |       300: '#806ff0',
173 |       400: '#614bec',
174 |       500: '#4127e8',
175 |       600: '#2c15c4',
176 |       700: '#211093',
177 |       800: '#160a62',
178 |       900: '#0b0531',
179 |     },
180 |     violet: {
181 |       50: '#ead9ff',
182 |       100: '#d5b3ff',
183 |       200: '#c08dff',
184 |       300: '#ab66ff',
185 |       400: '#9640ff',
186 |       500: '#811aff',
187 |       600: '#6500e1',
188 |       700: '#4c00a9',
189 |       800: '#330070',
190 |       900: '#190038',
191 |     },
192 |     purple: {
193 |       50: '#F8F5FF',
194 |       100: '#F1ECFF',
195 |       200: '#E5DCFF',
196 |       300: '#A589F9',
197 |       400: '#8961FD',
198 |       500: '#6B39FA',
199 |       600: '#370DAD',
200 |       700: '#200273',
201 |       800: '#14014A',
202 |       900: '#080020',
203 |     },
204 |     pink: {
205 |       50: '#ffd9f2',
206 |       100: '#ffb3e5',
207 |       200: '#ff8dd8',
208 |       300: '#ff66cc',
209 |       400: '#ff40bf',
210 |       500: '#ff1ab2',
211 |       600: '#e10095',
212 |       700: '#a90070',
213 |       800: '#70004b',
214 |       900: '#380025',
215 |     },
216 |     ruby: {
217 |       50: '#ffd9e4',
218 |       100: '#ffb3c9',
219 |       200: '#ff8dae',
220 |       300: '#ff6694',
221 |       400: '#ff4079',
222 |       500: '#ff1a5e',
223 |       600: '#e10043',
224 |       700: '#a90032',
225 |       800: '#700021',
226 |       900: '#380011',
227 |     },
228 |   },
229 | 
230 |   width: {
231 |     $schema: {
232 |       title: 'Your website screen sizings.',
233 |       tags: [
234 |         '@studioInput design-token',
235 |         '@studioInputTokenType size',
236 |         '@studioIcon ph:ruler',
237 |       ],
238 |     },
239 |     screen: '100vw',
240 |   },
241 |   height: {
242 |     $schema: {
243 |       title: 'Your website screen sizings.',
244 |       tags: [
245 |         '@studioInput design-token',
246 |         '@studioInputTokenType size',
247 |         '@studioIcon ph:ruler',
248 |       ],
249 |     },
250 |     screen: '100vh',
251 |   },
252 | 
253 |   shadow: {
254 |     '$schema': {
255 |       title: 'Your website shadows.',
256 |       tags: [
257 |         '@studioInput design-token',
258 |         '@studioInputTokenType shadow',
259 |         '@studioIcon mdi:box-shadow',
260 |       ],
261 |     },
262 |     'xs': '0px 1px 2px 0px #000000',
263 |     'sm': '0px 1px 3px 0px #000000, 0px 1px 2px -1px #000000',
264 |     'md': '0px 4px 6px -1px #000000, 0px 2px 4px -2px #000000',
265 |     'lg': '0px 10px 15px -3px #000000, 0px 4px 6px -4px #000000',
266 |     'xl': '0px 20px 25px -5px {color.gray.400}, 0px 8px 10px -6px #000000',
267 |     '2xl': '0px 25px 50px -12px {color.gray.900}',
268 |     'none': '0px 0px 0px 0px transparent',
269 |   },
270 | 
271 |   radii: {
272 |     '$schema': {
273 |       title: 'Your website border radiuses.',
274 |       tags: [
275 |         '@studioInput design-token',
276 |         '@studioInputTokenType size',
277 |         '@studioIcon material-symbols:rounded-corner',
278 |       ],
279 |     },
280 |     'none': '0px',
281 |     '4xs': '2px',
282 |     '3xs': '4px',
283 |     '2xs': '6px',
284 |     'xs': '8px',
285 |     'sm': '10px',
286 |     'md': '12px',
287 |     'lg': '14px',
288 |     'xl': '16px',
289 |     '2xl': '18px',
290 |     '3xl': '20px',
291 |     '4xl': '24px',
292 |     '5xl': '28px',
293 |     '6xl': '32px',
294 |     'full': '9999px',
295 |   },
296 | 
297 |   size: {
298 |     '$schema': {
299 |       title: 'Your website sizings.',
300 |       tags: [
301 |         '@studioInput design-token',
302 |         '@studioInputTokenType size',
303 |         '@studioIcon ph:ruler',
304 |       ],
305 |     },
306 |     '0': '0px',
307 |     '2': '2px',
308 |     '4': '4px',
309 |     '6': '6px',
310 |     '8': '8px',
311 |     '12': '12px',
312 |     '16': '16px',
313 |     '20': '20px',
314 |     '24': '24px',
315 |     '32': '32px',
316 |     '40': '40px',
317 |     '48': '48px',
318 |     '56': '56px',
319 |     '64': '64px',
320 |     '80': '80px',
321 |     '104': '104px',
322 |     '200': '200px',
323 |     'xs': '20rem',
324 |     'sm': '24rem',
325 |     'md': '28rem',
326 |     'lg': '32rem',
327 |     'xl': '36rem',
328 |     '2xl': '42rem',
329 |     '3xl': '48rem',
330 |     '4xl': '56rem',
331 |     '5xl': '64rem',
332 |     '6xl': '72rem',
333 |     '7xl': '80rem',
334 |     'full': '100%',
335 |   },
336 | 
337 |   space: {
338 |     $schema: {
339 |       title: 'Your website spacings.',
340 |       tags: [
341 |         '@studioInput design-token',
342 |         '@studioInputTokenType size',
343 |         '@studioIcon ph:ruler',
344 |       ],
345 |     },
346 |     0: '0px',
347 |     1: '0.25rem',
348 |     2: '0.5rem',
349 |     3: '0.75rem',
350 |     4: '1rem',
351 |     5: '1.25rem',
352 |     6: '1.5rem',
353 |     7: '1.75rem',
354 |     8: '2rem',
355 |     9: '2.25rem',
356 |     10: '2.5rem',
357 |     11: '2.75rem',
358 |     12: '3rem',
359 |     14: '3.5rem',
360 |     16: '4rem',
361 |     20: '5rem',
362 |     24: '6rem',
363 |     28: '7rem',
364 |     32: '8rem',
365 |     36: '9rem',
366 |     40: '10rem',
367 |     44: '11rem',
368 |     48: '12rem',
369 |     52: '13rem',
370 |     56: '14rem',
371 |     60: '15rem',
372 |     64: '16rem',
373 |     72: '18rem',
374 |     80: '20rem',
375 |     96: '24rem',
376 |     px: '1px',
377 |     rem: {
378 |       125: '0.125rem',
379 |       375: '0.375rem',
380 |       625: '0.625rem',
381 |       875: '0.875rem',
382 |     },
383 |   },
384 | 
385 |   borderWidth: {
386 |     $schema: {
387 |       title: 'Your website border widths.',
388 |       tags: [
389 |         '@studioInput design-token',
390 |         '@studioInputTokenType size',
391 |         '@studioIcon material-symbols:border-all-outline-rounded',
392 |       ],
393 |     },
394 |     noBorder: '0',
395 |     sm: '1px',
396 |     md: '2px',
397 |     lg: '3px',
398 |   },
399 | 
400 |   opacity: {
401 |     $schema: {
402 |       title: 'Your website opacities.',
403 |       tags: [
404 |         '@studioInput design-token',
405 |         '@studioInputTokenType opacity',
406 |         '@studioIcon material-symbols:opacity',
407 |       ],
408 |     },
409 |     noOpacity: '0',
410 |     bright: '0.1',
411 |     light: '0.15',
412 |     soft: '0.3',
413 |     medium: '0.5',
414 |     high: '0.8',
415 |     total: '1',
416 |   },
417 | 
418 |   font: {
419 |     $schema: {
420 |       title: 'Your website fonts',
421 |       tags: [
422 |         '@studioInput design-token',
423 |         '@studioInputTokenType font',
424 |         '@studioIcon material-symbols:font-download-rounded',
425 |       ],
426 |     },
427 |     sans: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
428 |     serif: 'ui-serif, Georgia, Cambria, Times New Roman, Times, serif',
429 |     mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
430 |   },
431 |   fontWeight: {
432 |     $schema: {
433 |       title: 'Your website font weights.',
434 |       tags: [
435 |         '@studioInput design-token',
436 |         '@studioInputTokenType font-weight',
437 |         '@studioIcon radix-icons:font-style',
438 |       ],
439 |     },
440 |     thin: '100',
441 |     extralight: '200',
442 |     light: '300',
443 |     normal: '400',
444 |     medium: '500',
445 |     semibold: '600',
446 |     bold: '700',
447 |     extrabold: '800',
448 |     black: '900',
449 |   },
450 |   fontSize: {
451 |     '$schema': {
452 |       title: 'Your website font sizes.',
453 |       tags: [
454 |         '@studioInput design-token',
455 |         '@studioInputTokenType font-size',
456 |         '@studioIcon radix-icons:font-style',
457 |       ],
458 |     },
459 |     'xs': '0.75rem',
460 |     'sm': '0.875rem',
461 |     'base': '1rem',
462 |     'lg': '1.125rem',
463 |     'xl': '1.25rem',
464 |     '2xl': '1.5rem',
465 |     '3xl': '1.875rem',
466 |     '4xl': '2.25rem',
467 |     '5xl': '3rem',
468 |     '6xl': '3.75rem',
469 |     '7xl': '4.5rem',
470 |     '8xl': '6rem',
471 |     '9xl': '8rem',
472 |   },
473 |   letterSpacing: {
474 |     $schema: {
475 |       title: 'Your website letter spacings.',
476 |       tags: [
477 |         '@studioInput design-token',
478 |         '@studioInputTokenType letter-spacing',
479 |         '@studioIcon fluent:font-space-tracking-out-24-filled',
480 |       ],
481 |     },
482 |     tighter: '-0.04em',
483 |     tight: '-0.02em',
484 |     normal: '0em',
485 |     wide: '0.02em',
486 |     wider: '0.04em',
487 |     widest: '0.08em',
488 |   },
489 |   lead: {
490 |     $schema: {
491 |       title: 'Your website line heights.',
492 |       tags: [
493 |         '@studioInput design-token',
494 |         '@studioInputTokenType size',
495 |         '@studioIcon icon-park-outline:auto-line-height',
496 |       ],
497 |     },
498 |     1: '.025rem',
499 |     2: '.5rem',
500 |     3: '.75rem',
501 |     4: '1rem',
502 |     5: '1.25rem',
503 |     6: '1.5rem',
504 |     7: '1.75rem',
505 |     8: '2rem',
506 |     9: '2.25rem',
507 |     10: '2.5rem',
508 |     none: '1',
509 |     tight: '1.25',
510 |     snug: '1.375',
511 |     normal: '1.5',
512 |     relaxed: '1.625',
513 |     loose: '2',
514 |   },
515 |   text: {
516 |     '$schema': {
517 |       title: 'Your website text scales.',
518 |       tags: [
519 |         '@studioInput design-token',
520 |         '@studioInputTokenType size',
521 |         '@studioIcon material-symbols:format-size-rounded',
522 |       ],
523 |     },
524 |     'xs': {
525 |       fontSize: '{fontSize.xs}',
526 |       lineHeight: '{lead.4}',
527 |     },
528 |     'sm': {
529 |       fontSize: '{fontSize.sm}',
530 |       lineHeight: '{lead.5}',
531 |     },
532 |     'base': {
533 |       fontSize: '{fontSize.base}',
534 |       lineHeight: '{lead.6}',
535 |     },
536 |     'lg': {
537 |       fontSize: '{fontSize.lg}',
538 |       lineHeight: '{lead.7}',
539 |     },
540 |     'xl': {
541 |       fontSize: '{fontSize.xl}',
542 |       lineHeight: '{lead.7}',
543 |     },
544 |     '2xl': {
545 |       fontSize: '{fontSize.2xl}',
546 |       lineHeight: '{lead.8}',
547 |     },
548 |     '3xl': {
549 |       fontSize: '{fontSize.3xl}',
550 |       lineHeight: '{lead.9}',
551 |     },
552 |     '4xl': {
553 |       fontSize: '{fontSize.4xl}',
554 |       lineHeight: '{lead.10}',
555 |     },
556 |     '5xl': {
557 |       fontSize: '{fontSize.5xl}',
558 |       lineHeight: '{lead.none}',
559 |     },
560 |     '6xl': {
561 |       fontSize: '{fontSize.6xl}',
562 |       lineHeight: '{lead.none}',
563 |     },
564 |   },
565 | 
566 |   ease: {
567 |     $schema: {},
568 |     linear: 'cubic-bezier(0, 0, 1, 1)',
569 |     default: {
570 |       in: 'cubic-bezier(0.4, 0, 1, 1)',
571 |       out: 'cubic-bezier(0, 0, 0.2, 1)',
572 |       inOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
573 |     },
574 |     sine: {
575 |       in: 'cubic-bezier(0.12, 0, 0.39, 0)',
576 |       out: 'cubic-bezier(0.61, 1, 0.88, 1)',
577 |       inOut: 'cubic-bezier(0.37, 0, 0.63, 1)',
578 |     },
579 |     quad: {
580 |       in: 'cubic-bezier(0.11, 0, 0.5, 0)',
581 |       out: 'cubic-bezier(0.5, 1, 0.89, 1)',
582 |       inOut: 'cubic-bezier(0.45, 0, 0.55, 1)',
583 |     },
584 |     cubic: {
585 |       in: 'cubic-bezier(0.32, 0, 0.67, 0)',
586 |       out: 'cubic-bezier(0.33, 1, 0.68, 1)',
587 |       inOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
588 |     },
589 |     quart: {
590 |       in: 'cubic-bezier(0.5, 0, 0.75, 0)',
591 |       out: 'cubic-bezier(0.25, 1, 0.5, 1)',
592 |       inOut: 'cubic-bezier(0.76, 0, 0.24, 1)',
593 |     },
594 |     quint: {
595 |       in: 'cubic-bezier(0.64, 0, 0.78, 0)',
596 |       out: 'cubic-bezier(0.22, 1, 0.36, 1)',
597 |       inOut: 'cubic-bezier(0.83, 0, 0.17, 1)',
598 |     },
599 |     expo: {
600 |       in: 'cubic-bezier(0.7, 0, 0.84, 0)',
601 |       out: 'cubic-bezier(0.16, 1, 0.3, 1)',
602 |       inOut: 'cubic-bezier(0.87, 0, 0.13, 1)',
603 |     },
604 |     circ: {
605 |       in: 'cubic-bezier(0.55, 0, 1, 0.45)',
606 |       out: 'cubic-bezier(0, 0.55, 0.45, 1)',
607 |       inOut: 'cubic-bezier(0.85, 0, 0.15, 1)',
608 |     },
609 |     back: {
610 |       in: 'cubic-bezier(0.36, 0, 0.66, -0.56)',
611 |       out: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
612 |       inOut: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)',
613 |     },
614 |   },
615 | 
616 |   utils: {
617 |     my: (value: PropertyValue<'margin'>) => {
618 |       return {
619 |         marginTop: value,
620 |         marginBottom: value,
621 |       }
622 |     },
623 |     mx: (value: PropertyValue<'margin'>) => {
624 |       return {
625 |         marginLeft: value,
626 |         marginRight: value,
627 |       }
628 |     },
629 |     py: (value: PropertyValue<'margin'>) => {
630 |       return {
631 |         paddingTop: value,
632 |         paddingBottom: value,
633 |       }
634 |     },
635 |     px: (value: PropertyValue<'margin'>) => {
636 |       return {
637 |         paddingLeft: value,
638 |         paddingRight: value,
639 |       }
640 |     },
641 |     truncate: {
642 |       overflow: 'hidden',
643 |       textOverflow: 'ellipsis',
644 |       whiteSpace: 'nowrap',
645 |     } as any,
646 |     lineClamp: (lines: number | string) => ({
647 |       'overflow': 'hidden',
648 |       'display': '-webkit-box',
649 |       '-webkit-box-orient': 'vertical',
650 |       '-webkit-line-clamp': lines,
651 |     }) as any,
652 |     text: (size: keyof PinceauTheme['text']) => ({
653 |       fontSize: `{text.${size}.fontSize}`,
654 |       lineHeight: `{text.${size}.lineHeight}`,
655 |     }),
656 |     gradientText: (gradient: string) => ({
657 |       '-webkit-text-fill-color': 'transparent',
658 |       'backgroundImage': gradient,
659 |       '-webkit-background-clip': 'text',
660 |       'backgroundClip': 'text',
661 |     }),
662 |   },
663 | })
664 | 


--------------------------------------------------------------------------------