{"_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"}]}]}]}]}]}]},"body":{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"defineTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"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-18a3aa"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d0e15d"},"children":[{"type":"text","value":"defineTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"colors"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"primary"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'green'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"secondary"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'yellow'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'nuxt'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d0e15d"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"designTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"colors"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"primary"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'green'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"secondary"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'yellow'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"      },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"})"}]}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-0cfbe3"},"children":[{"type":"text","value":"$dt"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-899a7c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d0e15d"},"children":[{"type":"text","value":"useTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"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-18a3aa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0cfbe3"},"children":[{"type":"text","value":"primaryColor"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899a7c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d0e15d"},"children":[{"type":"text","value":"$dt"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'colors.primary'"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":")"}]}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"{ "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d0e15d"},"children":[{"type":"text","value":"$dt"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'colors.primary'"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":") }"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"Hello"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"World"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"\"postcss\""}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"scoped"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"background-color:"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"v-bind"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"($"}]},{"type":"element","tag":"span","props":{"class":"ct-ca372e"},"children":[{"type":"text","value":"dt"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'colors.primary'"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"$dt"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"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-18a3aa"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"extend"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"colors"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"primary"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d0e15d"},"children":[{"type":"text","value":"$dt"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'colors.primary'"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-1dce5e"},"children":[{"type":"text","value":"$dt"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'#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-18a3aa"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d0e15d"},"children":[{"type":"text","value":"defineHandler"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-18a3aa"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d0e15d"},"children":[{"type":"text","value":"$tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-689026"},"children":[{"type":"text","value":"'colors.base'"}]},{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f942d"},"children":[{"type":"text","value":"})"}]}]}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ca372e{color:#D19A66}.ct-899a7c{color:#56B6C2}.ct-0cfbe3{color:#E5C07B}.ct-d0e15d{color:#61AFEF}.ct-689026{color:#98C379}.ct-1dce5e{color:#E06C75}.ct-1f942d{color:#ABB2BF}.ct-18a3aa{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"defining-theme-tokens","depth":3,"text":"Defining theme tokens"},{"id":"consuming-theme-tokens","depth":3,"text":"Consuming theme tokens"}]}},"_type":"markdown","_id":"content:1.guide:3.API.md","_source":"content","_file":"1.guide/3.API.md","_extension":"md"}