[{"_path":"/guide/introduction","_draft":false,"_partial":false,"_empty":false,"title":"Introduction","description":"What makes Design Tokens so useful.","excerpt":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Design Tokens Community Group's goal is to provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale.\n"},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/community/design-tokens","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Source"}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"text","value":"Learn more about "},{"type":"element","tag":"a","props":{"href":"https://backlight.dev/blog/design-tokens","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Design Tokens"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@nuxtjs/design-tokens"}]},{"type":"text","value":" offers a straightforward way to use Design Tokens definition inside your Nuxt app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is powered by "},{"type":"element","tag":"a","props":{"href":"https://amzn.github.io/style-dictionary","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Style Dictionary"}]},{"type":"text","value":", a powerful library by Amazon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can define a set of Design Tokens as they would define a set of configurations options for their app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, these tokens get processed by Style Dictionary on each file save, and gets injected into your Nuxt app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This allows global usage of tokens anywhere in the app, even in external files like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tailwind.config"}]},{"type":"text","value":"..."}]}]},"_type":"markdown","_id":"content:1.guide:1.introduction.md","_source":"content","_file":"1.guide/1.introduction.md","_extension":"md"},{"_path":"/guide/api","_draft":false,"_partial":false,"_empty":false,"title":"API","description":"Discover how to create and use your tokens with @nuxtjs/design-tokens API.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tokens"}]},{"type":"text","value":" are a "},{"type":"element","tag":"a","props":{"href":"https://design-tokens.github.io/community-group/format/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Design Tokens format"}]},{"type":"text","value":" compatible object definition that gets processed by "},{"type":"element","tag":"a","props":{"href":"https://amzn.github.io/style-dictionary","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Style Dictionary"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This allows the options defined by the theme author in his "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"designTokens.tokens"}]},{"type":"text","value":" key to be type-safe for the theme user that will configure his theme via the same key or a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tokens.config"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"h3","props":{"id":"defining-theme-tokens"},"children":[{"type":"text","value":"Defining theme tokens"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is two ways to define theme tokens:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"designTokens.tokens"}]},{"type":"text","value":" key in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tokens.config.{js|ts}"}]},{"type":"text","value":" file at the root of your project."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both of these options will be merged in the end."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These two ways will both work for theme authors and theme users as they will get processed in order of priority (user configuration > theme defaults)."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"import { defineTokens } from '@nuxtjs/design-tokens'\n\nexport default defineTokens({\n  colors: {\n    primary: {\n      value: 'green'\n    },\n    secondary: {\n      value: 'yellow'\n    },\n  }\n})\n","filename":"tokens.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineTokens } from '@nuxtjs/design-tokens'\n\nexport default defineTokens({\n  colors: {\n    primary: {\n      value: 'green'\n    },\n    secondary: {\n      value: 'yellow'\n    },\n  }\n})\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  designTokens: {\n    tokens: {\n      colors: {\n        primary: {\n          value: 'green'\n        },\n        secondary: {\n          value: 'yellow'\n        },\n      },\n    }\n  }\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  designTokens: {\n    tokens: {\n      colors: {\n        primary: {\n          value: 'green'\n        },\n        secondary: {\n          value: 'yellow'\n        },\n      },\n    }\n  }\n})\n"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"consuming-theme-tokens"},"children":[{"type":"text","value":"Consuming theme tokens"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme tokens gets processed by "},{"type":"element","tag":"a","props":{"href":"https://amzn.github.io/style-dictionary","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Style Dictionary"}]},{"type":"text","value":" and generates build targets that are globally accessible in your Nuxt project."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".nuxt/theme/"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tokens.css"}]},{"type":"text","value":" global CSS variables injected to your Nuxt "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<head>"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tokens.scss"}]},{"type":"text","value":" for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"scss"}]},{"type":"text","value":" contexts."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tokens.json"}]},{"type":"text","value":" if you want to import it from a JSON context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"index.ts"}]},{"type":"text","value":" to import it from runtime or from any TypeScript context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":" to import it from runtime or from any JavaScript context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"types.d.ts"}]},{"type":"text","value":" for global type inference ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$dt()"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$tokens()"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useTokens()"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"defineTokens"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.designTokens.tokens"}]},{"type":"text","value":")."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Composable usage"}]},{"type":"element","tag":"code","props":{"code":"const { $dt } = useTokens()\n\nconst primaryColor = $dt('colors.primary')\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const { $dt } = useTokens()\n\nconst primaryColor = $dt('colors.primary')\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<template>"}]},{"type":"text","value":" usage"}]},{"type":"element","tag":"code","props":{"code":"<template>\n<div :style=\"{ backgroundColor: $dt('colors.primary') }\">\n  Hello World\n</div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n<div :style=\"{ backgroundColor: $dt('colors.primary') }\">\n  Hello World\n</div>\n</template>\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<style"}]},{"type":"text","value":" usage"}]},{"type":"element","tag":"code","props":{"code":"<style lang=\"postcss\" scoped>\n.header {\n  background-color: v-bind($dt('colors.primary'));\n}\n</style>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<style lang=\"postcss\" scoped>\n.header {\n  background-color: v-bind($dt('colors.primary'));\n}\n</style>\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" usage"}]},{"type":"element","tag":"code","props":{"code":"import { $dt } from '@nuxtjs/design-tokens'\n\nexport default {\n  theme: {\n    extend: {\n      colors: {\n        primary: $dt('colors.primary')\n      }\n    }\n  }\n}\n","filename":"tailwind.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { $dt } from '@nuxtjs/design-tokens'\n\nexport default {\n  theme: {\n    extend: {\n      colors: {\n        primary: $dt('colors.primary')\n      }\n    }\n  }\n}\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server"}]},{"type":"text","value":" usage"}]},{"type":"element","tag":"code","props":{"code":"import { $dt } from '#design-tokens'\n\nexport default defineHandler(() => {\n  return $tokens('colors.base')\n})\n","filename":"server/api/token.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { $dt } from '#design-tokens'\n\nexport default defineHandler(() => {\n  return $tokens('colors.base')\n})\n"}]}]}]}]}]}]},"_type":"markdown","_id":"content:1.guide:3.API.md","_source":"content","_file":"1.guide/3.API.md","_extension":"md"}]