[null,{"_path":"/guide/get-started","_draft":false,"_partial":false,"_empty":false,"title":"Get Started","description":"Create and use Design Tokens from your Nuxt app in a few simple steps.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"🚀. "},{"type":"element","tag":"span","props":{"class":"text-xl"},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxtjs/design-tokens"}]},{"type":"text","value":" to your project."}]}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"npm install @nuxtjs/design-tokens --save-dev\n","filename":"NPM","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install @nuxtjs/design-tokens --save-dev\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"yarn add --dev @nuxtjs/design-tokens\n","filename":"Yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add --dev @nuxtjs/design-tokens\n"}]}]}]}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: [\n    '@nuxtjs/design-tokens'\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":"export default defineNuxtConfig({\n  modules: [\n    '@nuxtjs/design-tokens'\n  ]\n})\n"}]}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"noto:information"},"children":[]},{"type":"text","value":" As "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxtjs/design-tokens"}]},{"type":"text","value":" provides integrations with other "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt modules"}]},{"type":"text","value":", you might want to add it as the first module of the list."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"👩‍🎨. "},{"type":"element","tag":"span","props":{"class":"text-xl"},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Define your design tokens."}]}]}]},{"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":"p","props":{},"children":[{"type":"text","value":"🎨. "},{"type":"element","tag":"span","props":{"class":"text-xl"},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Use your tokens!"}]}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n<!-- Template usage -->\n<main>\n <header :style=\"{ backgroundColor: $tokens('colors.primary') }\">\n   <h1 class=\"headerTitle\">My Theme Header</h1>\n </header>\n</main>\n</template>\n\n<style lang=\"postcss\" scoped>\n/* <style> template usage */\n.headerTitle {\n  background-color: v-bind($tokens('colors.secondary'))\n}\n</style>\n","filename":"layout/default.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n<!-- Template usage -->\n<main>\n <header :style=\"{ backgroundColor: $tokens('colors.primary') }\">\n   <h1 class=\"headerTitle\">My Theme Header</h1>\n </header>\n</main>\n</template>\n\n<style lang=\"postcss\" scoped>\n/* <style> template usage */\n.headerTitle {\n  background-color: v-bind($tokens('colors.secondary'))\n}\n</style>\n"}]}]}]}]},"toc":false,"_type":"markdown","_id":"content:1.guide:2.get-started.md","_source":"content","_file":"1.guide/2.get-started.md","_extension":"md"}]