{"_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,"body":{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"npm install @nuxtjs/design-tokens --save-dev"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"yarn add --dev @nuxtjs/design-tokens"}]}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0af4e1"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0af4e1"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4abd05"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7eeb39"},"children":[{"type":"text","value":"'@nuxtjs/design-tokens'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"  ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0af4e1"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"defineTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-0af4e1"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7eeb39"},"children":[{"type":"text","value":"'@nuxtjs/design-tokens'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0af4e1"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0af4e1"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4abd05"},"children":[{"type":"text","value":"defineTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"colors"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"primary"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7eeb39"},"children":[{"type":"text","value":"'green'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"secondary"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7eeb39"},"children":[{"type":"text","value":"'yellow'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"<!-- "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"Template"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"usage"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"{ "}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4abd05"},"children":[{"type":"text","value":"$tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7eeb39"},"children":[{"type":"text","value":"'colors.primary'"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":") }"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"   <"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"1 "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7eeb39"},"children":[{"type":"text","value":"\"headerTitle\""}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"My"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"Theme"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"Header"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"1>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7eeb39"},"children":[{"type":"text","value":"\"postcss\""}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"scoped"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"/* <"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"usage"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"headerTitle"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"background-color:"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"v-bind"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"($"}]},{"type":"element","tag":"span","props":{"class":"ct-dae964"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7eeb39"},"children":[{"type":"text","value":"'colors.secondary'"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-aa29bd"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-b51c53"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-dae964{color:#D19A66}.ct-7eeb39{color:#98C379}.ct-aa29bd{color:#E06C75}.ct-4abd05{color:#61AFEF}.ct-0af4e1{color:#C678DD}.ct-b51c53{color:#ABB2BF}"}]}]},"_type":"markdown","_id":"content:1.guide:2.get-started.md","_source":"content","_file":"1.guide/2.get-started.md","_extension":"md"}