{"id":14529410,"url":"https://github.com/tokenami/tokenami","last_synced_at":"2025-09-02T00:31:18.794Z","repository":{"id":214953477,"uuid":"655692377","full_name":"tokenami/tokenami","owner":"tokenami","description":"CSS-in-JS reinvented for scalable, typesafe design systems. A modern approach to just-in-time atomic CSS using CSS variables—no bundler required.","archived":false,"fork":false,"pushed_at":"2025-08-29T17:25:19.000Z","size":2550,"stargazers_count":969,"open_issues_count":20,"forks_count":11,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-08-29T19:14:03.028Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tokenami.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tokenami.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-06-19T12:03:37.000Z","updated_at":"2025-08-28T17:46:11.000Z","dependencies_parsed_at":"2024-04-19T18:27:18.459Z","dependency_job_id":"843aa1ef-9b65-4f3a-9c8e-de7001974b3c","html_url":"https://github.com/tokenami/tokenami","commit_stats":null,"previous_names":["tokenami/tokenami"],"tags_count":43,"template":false,"template_full_name":null,"purl":"pkg:github/tokenami/tokenami","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokenami%2Ftokenami","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokenami%2Ftokenami/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokenami%2Ftokenami/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokenami%2Ftokenami/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tokenami","download_url":"https://codeload.github.com/tokenami/tokenami/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokenami%2Ftokenami/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272755265,"owners_count":24987631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-05T00:00:59.581Z","updated_at":"2025-09-02T00:31:18.612Z","avatar_url":"https://github.com/tokenami.png","language":"TypeScript","readme":"![image](https://github.com/user-attachments/assets/73712e13-2af9-46c4-a3df-48590cbb4c8a)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003eCSS-in-JS Reinvented for Scalable, Typesafe Design Systems\u003c/h3\u003e\n  \u003cp\u003e\n    A modern approach to \u003ca href=\"https://css-tricks.com/just-in-time-css/\"\u003ejust-in-time\u003c/a\u003e atomic CSS using CSS variables—\u003cstrong\u003eno bundler required\u003c/strong\u003e.\n  \u003c/p\u003e\n\n  \u003cimg src=\"https://github.com/tokenami/tokenami/assets/175330/8cdfcdf8-05da-4096-8e0b-5645e1b329e5\" alt=\"React support\" width=\"40\" /\u003e\n  \u003cimg src=\"https://github.com/preactjs.png\" alt=\"Preact support\" width=\"40\" /\u003e\n  \u003cimg src=\"https://github.com/vuejs.png\" alt=\"Vue support\" width=\"40\" /\u003e\n  \u003cimg src=\"https://github.com/solidjs.png\" alt=\"SolidJS support\" width=\"40\" /\u003e\n  \u003cimg src=\"https://github.com/qwikdev.png\" alt=\"Qwik support\" width=\"40\" /\u003e\n\n\u003c/div\u003e\n\n\u003e [!Warning]\n\u003e Tokenami is still in early development. You might find bugs or missing features. Before reporting issues, please check our [existing issues](https://github.com/tokenami/tokenami/issues) first.\n\n## Contents\n\n- [Why Tokenami?](#user-content-why-tokenami)\n- [Quick start](#user-content-quick-start)\n  - [Installation](#user-content-installation)\n  - [Basic setup](#user-content-basic-setup)\n- [Core concepts](#user-content-core-concepts)\n  - [Theming](#user-content-theming)\n  - [Grid values](#user-content-grid-values)\n  - [Arbitrary selectors](#user-content-arbitrary-selectors)\n  - [Arbitrary values](#user-content-arbitrary-values)\n- [Styling](#user-content-styling)\n  - [CSS utility](#user-content-css-utility)\n  - [CSS compose](#user-content-css-compose)\n    - [Variants](#user-content-variants)\n    - [Extending styles](#user-content-extending-styles)\n- [Design systems](#user-content-design-systems)\n  - [Using the official system](#user-content-using-the-official-system)\n  - [Building your own system](#user-content-building-your-own-system)\n  - [Global styles](#user-content-global-styles)\n  - [Breakpoints](#user-content-breakpoints)\n  - [Animation](#user-content-animation)\n- [Advanced usage](#user-content-advanced-usage)\n  - [Custom selectors](#user-content-custom-selectors)\n  - [Property aliases](#user-content-property-aliases)\n  - [Theming properties](#user-content-theming-properties)\n  - [Custom properties](#user-content-custom-properties)\n- [TypeScript integration](#user-content-typescript-integration)\n  - [Utility types](#user-content-utility-types)\n  - [CI setup](#user-content-ci-setup)\n- [Troubleshooting](#user-content-troubleshooting)\n  - [Why the CSS variable syntax?](#user-content-why-the-css-variable-syntax)\n  - [VSCode setup](#user-content-vscode-setup)\n  - [Supported libraries](#user-content-supported-libraries)\n  - [Supported browsers](#user-content-supported-browsers)\n  - [Supported editors](#user-content-supported-editors)\n  - [Browserslist](#user-content-browserslist)\n- [Community](#user-content-community)\n  - [Contributing](#user-content-contributing)\n  - [Contributors](#user-content-contributors)\n  - [Credits](#user-content-credits)\n\n## Why Tokenami?\n\nThe React team [no longer recommends](https://github.com/reactwg/react-18/discussions/110) CSS-in-JS solutions that inject styles. Instead, they suggest:\n\n\u003e [...] use [`\u003clink rel=\"stylesheet\"\u003e`](https://github.com/reactwg/react-18/discussions/108) for static styles and plain inline styles for dynamic values. E.g. `\u003cdiv style={{...}}\u003e`\n\nIn other words—write CSS like we used to. But what about the benefits CSS-in-JS gave us? Some CSS-in-JS tools extract static styles into `.css` files, but they often need [bundler setup](https://vanilla-extract.style/documentation/integrations/next/) and have [build-time limitations](https://panda-css.com/docs/guides/dynamic-styling).\n\n\u003cdetails\u003e\n\u003csummary\u003eRead more\u003c/summary\u003e\n\u003cbr/\u003e\n\nDevelopers use these tools despite the learning curve because they want:\n\n- Type checking and suggestions for design system tokens\n- Style deduplication\n- Critical path CSS\n- Style scoping\n- Composition without specificity conflicts\n\nTailwind CSS adopts a different strategy:\n\n- Atomic CSS so styles have a cap on how large they can grow\n- Statically generated styles with a simple CLI script, no bundler integration needed\n- Quick prototyping with inline styles\n- Editor tools suggest classes from your theme\n\nOn the flip side:\n\n- Removing values from your theme won't flag redundant references\n- We must memorise Tailwind's custom class names which spawns things like the [Tailwind Cheatsheet](https://tailwindcomponents.com/cheatsheet/)\n- Specificity issues when composing unless we use third-party packages like [tailwind-merge](https://www.npmjs.com/package/tailwind-merge)\n- Styling inline can be unpleasant to maintain, resulting in third-party packages like [cva](https://cva.style/docs)\n- Classes must exist as [complete unbroken strings](https://tailwindcss.com/docs/content-configuration#dynamic-class-names)\n- Debugging in dev tools is tricky because styles are spread across atomic classes\n\n### Introducing Tokenami\n\nTokenami aims to improve some of these areas by using atomic CSS variables instead of atomic classes, and bringing all necessary tools under one roof. It features:\n\n- Simple naming convention—convert any CSS property to a CSS variable (e.g. `padding` becomes `--padding`)\n- Smaller stylesheet using atomic CSS variables (e.g. one `padding: var(--padding)` rule vs. many `.p-1`, `.p-2` classes)\n- Config file for providing design system constraints\n- Feature-rich intellisense when authoring styles\n- Tiny `css` utility for variant support and composition without specificity conflicts\n- Dynamic style support (e.g. `style={css({ '--color': props.color })}`)\n- Aliasable properties (e.g. `style={css({ '--p': 4 })}` for padding)\n- Custom selector support enabling descendant selectors\n- Improved debugging experience in dev tools (coming soon)\n- Static style generation\n- No bundler integration needed\n\u003c/details\u003e\n\n| Tokenami DX                                                                               | HTML output                                                                                |\n| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |\n| ![Input](https://github.com/user-attachments/assets/2a675b7e-5415-4b8c-b801-6735a504bf47) | ![Output](https://github.com/user-attachments/assets/3537d155-22f5-4f98-afff-ee05b092972d) |\n\n## Quick start\n\nJump right in with our [vite starter](https://github.com/tokenami/tokenami-vite), or configure your own project. Tokenami offers a CLI tool for generating static styles, a [~2.5kb](https://bundlephobia.com/package/@tokenami/css) CSS utility for authoring your styles, and a TypeScript plugin to enhance the developer experience.\n\n### Installation\n\nInstall using your package manager of choice:\n\n```sh\nnpm install -D tokenami \u0026\u0026 npm install @tokenami/css\n```\n\nThen initialise your project:\n\n```sh\nnpx tokenami init\n```\n\n### Basic setup\n\n#### 1. Add Tokenami to your TypeScript config (`tsconfig.json` or `jsconfig.json`):\n\n```json\n{\n  \"include\": [\".tokenami/tokenami.env.d.ts\", \"src\"],\n  \"compilerOptions\": {\n    \"plugins\": [{ \"name\": \"tokenami\" }]\n  }\n}\n```\n\n#### 2. Run the CLI script to watch files and build your CSS:\n\n```sh\nnpx tokenami --output ./public/styles.css --watch\n```\n\nYou can change where the CSS file is generated by changing the `--output` flag. By default, it uses `./public/tokenami.css`.\n\n#### 3. Reference the CSS file in the `\u003chead\u003e` of your document, and start styling with Tokenami properties:\n\nMake sure your editor uses the workspace version of TypeScript. Check your editor's docs, like [VSCode's guide](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript). VSCode users should also [enable suggestions for strings](#user-content-vscode-setup).\n\n```tsx\nimport { css } from '@tokenami/css';\n\nfunction Page() {\n  return \u003ch1 style={css({ '--margin-top': 0, '--margin-bottom': 5 })}\u003eHello, World!\u003c/h1\u003e;\n}\n```\n\n## Core concepts\n\nTokenami is built around a few key ideas:\n\n- Turn any CSS property into a variable by adding `--` (e.g. `--padding`)\n- Use `---` (triple dash) for custom CSS variables\n- Add selectors with underscores (e.g. `--hover_padding`)\n- Add breakpoints the same way (e.g. `--md_padding`)\n- Combine selectors and breakpoints (e.g. `--md_hover_padding`)\n\n### Theming\n\n\u003e [!Tip]\n\u003e Want to skip theme setup? Use our [official design system](https://github.com/tokenami/tokenami/blob/main/packages/ds/README.md) which comes with dark mode, fluid typography, RTL support, and more. Jump to [using the official system](#user-content-using-the-official-system).\n\nTokenami relies on your theme to provide design system constraints. Create one in `.tokenami/tokenami.config`:\n\n```ts\nexport default createConfig({\n  theme: {\n    color: {\n      'slate-100': '#f1f5f9',\n      'slate-700': '#334155',\n      'sky-500': '#0ea5e9',\n    },\n    radii: {\n      rounded: '10px',\n      circle: '9999px',\n      none: 'none',\n    },\n  },\n});\n```\n\nName your theme groups and tokens however you like. These names become part of your CSS variables.\n\n#### Multiple themes\n\nUse the `modes` key to define multiple themes. Choose any names for your modes. Tokens that are shared across themes should be placed in a `root` object:\n\n```ts\nexport default createConfig({\n  theme: {\n    modes: {\n      light: {\n        color: {\n          primary: '#f1f5f9',\n          secondary: '#334155',\n        },\n      },\n      dark: {\n        color: {\n          primary: '#0ea5e9',\n          secondary: '#f1f5f9',\n        },\n      },\n    },\n    root: {\n      radii: {\n        rounded: '10px',\n        circle: '9999px',\n        none: 'none',\n      },\n    },\n  },\n});\n```\n\nThis creates `.theme-light` and `.theme-dark` classes. Add them to your page to switch themes.\n\nCustomise the theme selector using the `themeSelector` config:\n\n```ts\nexport default createConfig({\n  themeSelector: (mode) =\u003e (mode === 'root' ? ':root' : `[data-theme=${mode}]`),\n});\n```\n\n### Grid values\n\nTokenami uses a grid system for spacing. When you pass a number to properties like padding and margin, it multiplies that number by your grid value. For example, with a grid of `4px`, using `--padding: 2` adds `8px` of padding.\n\nBy default, the grid is set to `0.25rem`. You can change it in your config:\n\n```ts\nexport default createConfig({\n  grid: '10px',\n  // ... rest of your config\n});\n```\n\n### Arbitrary selectors\n\nUse arbitrary selectors to prototype quickly:\n\n```tsx\n\u003cdiv\n  style={css({\n    '--{\u0026:hover}_color': 'var(--color_primary)',\n    '--{\u0026:has(:focus)}_border-color': 'var(--color_highlight)',\n    '--{\u0026[data-state=open]}_border-color': 'var(--color_primary)',\n    '--{\u0026_p}_color': 'var(--color_primary)',\n  })}\n/\u003e\n```\n\nThey can be used to style the **current element, and its descendants** only.\n\n### Arbitrary values\n\nYou can avoid TypeScript errors for one-off inline values by using a triple-dash fallback.\n\n```tsx\n\u003cdiv style={css({ '--padding': 'var(---, 20px)' })} /\u003e\n```\n\nThis prevents TypeScript errors and sets padding to `20px`. Tokenami intentionally adds friction to the developer experience here. This is to encourage sticking to your theme guidelines and to help you quickly spot values in your code that don't.\n\n## Styling\n\n### CSS utility\n\nThe `css` utility is used to author your styles and helps with overrides and avoiding specificity issues. Use `css` for inline styles.\n\n#### Usage\n\nPass your base styles as the first parameter, then any overrides:\n\n```tsx\nfunction Button(props) {\n  return (\n    \u003cbutton\n      {...props}\n      style={css(\n        { '--padding': 4 }, // Base styles\n        props.style // Overrides\n      )}\n    /\u003e\n  );\n}\n```\n\n#### Overrides\n\nAdd conditional styles as extra parameters. The last override wins:\n\n```tsx\nfunction Button(props) {\n  const disabled = props.disabled \u0026\u0026 {\n    '--opacity': 0.5,\n    '--pointer-events': 'none',\n  };\n\n  return (\n    \u003cbutton\n      {...props}\n      style={css(\n        { '--padding': 4 }, // Base styles\n        disabled, // Conditional styles\n        props.style // Props override\n      )}\n    /\u003e\n  );\n}\n```\n\n### CSS compose\n\nThe `css.compose` API helps you build reusable components with variants. Styles in the compose block are extracted into your stylesheet and replaced with a class name to reduce repetition in your markup.\n\nHere's a basic example:\n\n```tsx\nconst button = css.compose({\n  '--background': 'var(--color_primary)',\n  '--hover_background': 'var(--color_primary-dark)',\n\n  variants: {\n    size: {\n      small: { '--padding': 2 },\n      large: { '--padding': 6 },\n    },\n  },\n});\n\nfunction Button({ size = 'small', ...props }) {\n  const [cn, css] = button({ size });\n  return \u003cbutton {...props} className={cn(props.className)} style={css(props.style)} /\u003e;\n}\n```\n\n#### Variants\n\nThe `variants` object lets you define different style variations:\n\n```tsx\nconst card = css.compose({\n  '--border-radius': 'var(--radii_rounded)',\n  '--color': 'var(--color_white)',\n  '--font-size': 'var(--text-size_sm)',\n\n  variants: {\n    color: {\n      blue: { '--background-color': 'var(--color_blue)' },\n      green: { '--background-color': 'var(--color_green)' },\n    },\n    size: {\n      small: { '--padding': 2 },\n      large: { '--padding': 6 },\n    },\n  },\n});\n```\n\nUse multiple variants together:\n\n```tsx\nfunction Card(props) {\n  const [cn, css] = card({ color: 'blue', size: 'large' });\n  return \u003cdiv {...props} className={cn(props.className)} style={css(props.style)} /\u003e;\n}\n```\n\nVariants are treated like overrides, so appear inline:\n\n```html\n\u003cdiv class=\"tk-abc\" style=\"--background-color: var(--color_blue); --padding: 6;\"\u003eboop\u003c/div\u003e\n```\n\n#### Extending styles\n\nUse `includes` to combine styles from multiple components or `css` utilities. Conflicting styles (e.g. `--background`) are moved inline to ensure correct overrides:\n\n```tsx\n// Reusable focus styles (will appear inline)\nconst focusable = css({\n  '--focus_outline': 'var(--outline_sm)',\n  '--outline-offset': 'var(--outline-offset_sm)',\n});\n\n// Base button styles (will be extracted into stylesheet)\nconst button = css.compose({\n  '--background': 'var(--color_primary)',\n  '--color': 'var(--color_white)',\n  '--padding': 4,\n});\n\n// New button that includes both\nconst tomatoButton = css.compose({\n  includes: [button, focusable],\n  '--background': 'var(--color_tomato)',\n});\n```\n\nOutput:\n\n```html\n\u003cbutton\n  class=\"tk-abc\"\n  style=\"--focus_outline: var(--outline_sm); --outline-offset: var(--outline-offset_sm); --background: var(--color_tomato);\"\n\u003e\n  click me\n\u003c/button\u003e\n```\n\n## Design systems\n\nDesign systems help teams build consistent interfaces. Tokenami eases the friction of creating and consuming design systems, whether you're building your own or using our official one.\n\n### Using the official system\n\nOur [official design system](https://github.com/tokenami/tokenami/blob/main/packages/ds/README.md) comes with:\n\n- Global reset based on [Preflight from Tailwind](https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/preflight.css)\n- [Radix UI colours](https://www.radix-ui.com/colors) with automatic dark mode\n- [Fluid spacing and font sizes](https://utopia.fyi/) for responsive design\n- Right-to-left support built in (`padding-left` becomes `padding-inline-start` etc.)\n- Short aliases for common properties (e.g. `--p` for padding)\n\nFollow [the `@tokenami/ds` docs](https://github.com/tokenami/tokenami/blob/main/packages/ds/README.md) to get started.\n\n### Building your own system\n\nWant to create your own portable design system? Create a shared Tokenami config and stylesheet package that projects can consume:\n\n```tsx\nimport designSystemConfig from '@acme/design-system';\nimport { createConfig } from '@tokenami/css';\n\nexport default createConfig({\n  ...designSystemConfig,\n  include: ['./app/**/*.{ts,tsx}', 'node_modules/@acme/design-system/tokenami.css'],\n});\n```\n\n### Global styles\n\nProvide global styles in your config to include them as part of your design system.\n\n```ts\nexport default createConfig({\n  globalStyles: {\n    '*, *::before, *::after': {\n      boxSizing: 'border-box',\n    },\n    body: {\n      fontFamily: 'system-ui, sans-serif',\n      lineHeight: 1.5,\n      margin: 0,\n      padding: 0,\n    },\n  },\n});\n```\n\n### Breakpoints\n\nDefine your breakpoints in the `responsive` config:\n\n```ts\nexport default createConfig({\n  responsive: {\n    md: '@media (min-width: 700px)',\n    lg: '@media (min-width: 1024px)',\n    'md-self': '@container (min-width: 400px)', // Container queries work too!\n  },\n});\n```\n\nUse them by adding the breakpoint name before any property:\n\n```tsx\n\u003cdiv\n  style={css({\n    '--padding': 2, // Base padding\n    '--md_padding': 4, // Padding at medium breakpoint\n    '--lg_padding': 6, // Padding at large breakpoint\n    '--md-self_padding': 8, // Padding when container is medium\n  })}\n/\u003e\n```\n\n### Animation\n\nAdd keyframes to your config and reference them in your theme:\n\n```ts\nexport default createConfig({\n  keyframes: {\n    wiggle: {\n      '0%, 100%': { transform: 'rotate(-3deg)' },\n      '50%': { transform: 'rotate(3deg)' },\n    },\n  },\n  theme: {\n    anim: {\n      wiggle: 'wiggle 1s ease-in-out infinite',\n    },\n  },\n});\n```\n\nApply the animation to an element:\n\n```tsx\n\u003cdiv style={css({ '--animation': 'var(--anim_wiggle)' })} /\u003e\n```\n\n## Advanced usage\n\nTokenami has some advanced features that can help you build more powerful design systems.\n\n### Custom selectors\n\nSome [common selectors](https://github.com/tokenami/tokenami/blob/main/packages/tokenami/stubs/tokenami.config.ts#L28) are built in, but you can add your own. Use the ampersand (`\u0026`) to mark where the current element's selector should be injected:\n\n```ts\nexport default createConfig({\n  selectors: {\n    'parent-hover': '.parent:hover \u003e \u0026',\n    // Nested selectors work too\n    hover: ['@media (hover: hover) and (pointer: fine)', '\u0026:hover'],\n  },\n});\n```\n\nUse them in your components:\n\n```tsx\n\u003cdiv className=\"parent\"\u003e\n  \u003cimg src=\"...\" alt=\"\" /\u003e\n  \u003cbutton style={css({ '--parent-hover_color': 'var(--color_primary)' })} /\u003e\n\u003c/div\u003e\n```\n\n### Property aliases\n\nAliases allow you to create shorthand names for properties. When using custom aliases, the `css` utility must be configured to ensure conflicts are resolved correctly across component boundaries.\n\n#### 1. Create a file in your project to configure the utility. You can name this file however you like:\n\n```ts\n// css.ts\nimport { createCss } from '@tokenami/css';\nimport config from '../.tokenami/tokenami.config';\n\nexport const css = createCss(config);\n```\n\n#### 2. Configure the aliases in your config file:\n\n```ts\nexport default createConfig({\n  aliases: {\n    p: ['padding'],\n    px: ['padding-inline'],\n    py: ['padding-block'],\n    size: ['width', 'height'],\n  },\n});\n```\n\n#### 3. Use the aliases:\n\n```tsx\n\u003cdiv style={css({ '--p': 4, '--px': 2, '--size': '100%' })} /\u003e\n```\n\n### Theming properties\n\nTokenami maps your properties to some [default theme keys](https://github.com/tokenami/tokenami/blob/main/packages/tokenami/stubs/tokenami.config.ts#L43) out of the box. For example, `--border-color` accepts tokens from your `color` theme object, while `--padding` works with your grid system. You can customise these mappings in the `properties` key:\n\n```ts\nexport default createConfig({\n  theme: {\n    container: {\n      half: '50%',\n      full: '100%',\n    },\n    pet: {\n      cat: '\"🐱\"',\n      dog: '\"🐶\"',\n    },\n  },\n  properties: {\n    width: ['grid', 'container'],\n    height: ['grid', 'container'],\n    content: ['pet'],\n  },\n});\n```\n\nWith this configuration, passing `var(--container_half)` to a `content` property would error because `container` does not exist in its property config, but `var(--pet_dog)` would be allowed:\n\n```tsx\n\u003cdiv\n  style={css({\n    '--width': 'var(--container_half)', // Works ✅\n    '--content': 'var(--pet_cat)', // Works ✅\n    '--content': 'var(--container_half)', // Error ❌\n  })}\n/\u003e\n```\n\n### Custom properties\n\nCreate your own properties for design system features. For example, make gradient properties that use your colour tokens by adding them to the `customProperties` key:\n\n```ts\nexport default createConfig({\n  theme: {\n    color: {\n      primary: '#f1f5f9',\n      secondary: '#334155',\n    },\n    gradient: {\n      // use your custom properties to configure the gradient\n      radial: 'radial-gradient(circle at top, var(--gradient-from), var(--gradient-to) 80%)',\n    },\n  },\n  properties: {\n    'background-image': ['gradient'],\n  },\n  customProperties: {\n    'gradient-from': ['color'],\n    'gradient-to': ['color'],\n  },\n});\n```\n\nThen use them as follows:\n\n```tsx\n\u003cdiv\n  style={css({\n    '--background-image': 'var(--gradient_radial)',\n    '--gradient-from': 'var(--color_primary)',\n    '--gradient-to': 'var(--color_secondary)',\n  })}\n/\u003e\n```\n\n## TypeScript integration\n\n### Utility types\n\n#### Variants\n\nUse the `Variants` type to extend your component props with the available variants:\n\n```tsx\nimport { type Variants } from '@tokenami/css';\n\ntype ButtonElementProps = React.ComponentPropsWithoutRef\u003c'button'\u003e;\ninterface ButtonProps extends ButtonElementProps, Variants\u003ctypeof button\u003e {}\n```\n\n#### TokenamiStyle\n\nFor components using the `css` utility, use `TokenamiStyle` to type its style prop:\n\n```tsx\nimport { type TokenamiStyle, css } from '@tokenami/css';\n\ninterface ButtonProps extends TokenamiStyle\u003cReact.ComponentProps\u003c'button'\u003e\u003e {}\n\nfunction Button(props: ButtonProps) {\n  return \u003cbutton {...props} style={css({}, props.style)} /\u003e;\n}\n```\n\nNow you can pass Tokenami properties directly with proper type checking:\n\n```tsx\n\u003cButton style={{ '--padding': 4 }} /\u003e\n```\n\n### TokenValue\n\nUse `TokenValue` to get a union of CSS variable tokens based on your theme.\n\nGiven this theme:\n\n```ts\nexport default createConfig({\n  theme: {\n    color: {\n      'slate-100': '#f1f5f9',\n      'slate-700': '#334155',\n    },\n    radii: {\n      rounded: '10px',\n      circle: '9999px',\n    },\n  },\n});\n```\n\nIt will output the following types:\n\n```ts\nimport { type TokenValue } from '@tokenami/css';\n\ntype Color = TokenValue\u003c'color'\u003e; // var(--color_slate-100) | var(--color_slate-700)\ntype Radii = TokenValue\u003c'radii'\u003e; // var(--radii_rounded) | var(--radii_circle)\n```\n\n### CI setup\n\nTokenami uses widened types during development for better performance. When you run `tsc` in the command line, it uses these widened types and won't show custom Tokenami errors.\n\nFor accurate type checking in CI, run both commands:\n\n```sh\ntokenami check; tsc --noEmit\n```\n\n## Troubleshooting\n\nCommon questions and how to solve them. If you need additional support or encounter any issues, please don't hesitate to join the [discord server](https://discord.gg/CAU4HNR4XK).\n\n### Why the CSS variable syntax?\n\nTokenami applies your authored styles directly to the `style` attribute to minimise runtime overhead. Since the `style` attribute doesn't support media queries or pseudo-selectors, we use CSS variables to enable them. Making everything a CSS variable simplifies the learning curve.\n\nCSS variables also have lower specificity than direct CSS properties in the `style` attribute. This allows overriding Tokenami's styles by adding a stylesheet after Tokenami's when needed.\n\n\u003e [!Tip]\n\u003e Don't worry about typing extra dashes! Just type `bord` and Tokenami's intellisense will help autocomplete it in the right format.\n\n### VSCode setup\n\nVSCode won't suggest completions for partial strings by default. This can make it harder to use Tokenami's suggestions. To fix this, add to your `.vscode/settings.json`:\n\n```json\n{\n  \"editor.quickSuggestions\": {\n    \"strings\": true\n  }\n}\n```\n\n| BEFORE                                                                                                               | AFTER                                                                                                                |\n| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |\n| ![CleanShot 2024-09-08 at 14 10 10](https://github.com/user-attachments/assets/9b99edb4-dec0-402e-99c9-671525332ccf) | ![CleanShot 2024-09-08 at 14 09 43](https://github.com/user-attachments/assets/ad2ed719-c2ca-4929-902d-5fdf5142468b) |\n\n### Supported libraries\n\nTokenami currently works with:\n\n| \u003cimg src=\"https://github.com/tokenami/tokenami/assets/175330/8cdfcdf8-05da-4096-8e0b-5645e1b329e5\" alt=\"\" width=\"24\" /\u003e\u003cbr/\u003eReact | \u003cimg src=\"https://github.com/preactjs.png\" alt=\"\" width=\"24\" /\u003e\u003cbr /\u003ePreact | \u003cimg src=\"https://github.com/vuejs.png\" alt=\"\" width=\"24\" /\u003e\u003cbr /\u003eVue | \u003cimg src=\"https://github.com/solidjs.png\" alt=\"\" width=\"24\" /\u003e\u003cbr /\u003eSolidJS | \u003cimg src=\"https://github.com/qwikdev.png\" alt=\"\" width=\"24\" /\u003e\u003cbr /\u003eQwik |\n| :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :----------------------------------------------------------------------: |\n|                                                                ✅                                                                 |                                     ✅                                      |                                  ✅                                   |                                     ✅                                      |                                    ✅                                    |\n\nWe're still in early development and plan to support more libraries in the future.\n\n### Supported browsers\n\nTokenami relies on [cascade layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers), so it works in browsers that support `@layer`:\n\n| \u003cimg src=\"https://github.com/tokenami/tokenami/assets/175330/8588dacd-a77f-44ee-9111-cea6601ebc35\" alt=\"Edge\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eEdge | \u003cimg src=\"https://github.com/tokenami/tokenami/assets/175330/b2b38574-5290-44ba-bb28-87e139f8efb8\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eFirefox | \u003cimg src=\"https://github.com/tokenami/tokenami/assets/175330/ae970301-390d-426e-9ea7-974267917df6\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eChrome | \u003cimg src=\"https://github.com/tokenami/tokenami/assets/175330/16c7374c-a466-4fbe-9459-44c3b30bb688\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eSafari | \u003cimg src=\"https://github.com/tokenami/tokenami/assets/175330/16c7374c-a466-4fbe-9459-44c3b30bb688\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eiOS Safari | \u003cimg src=\"https://github.com/tokenami/tokenami/assets/175330/e9eaad5e-ef39-4423-ad4b-2e61c0bcc873\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eOpera |\n| :--------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------: |\n|                                                                         99+                                                                          |                                                                            97+                                                                             |                                                                           99+                                                                            |                                                                          15.4+                                                                           |                                                                              15.4+                                                                               |                                                                          86+                                                                           |\n\n### Supported editors\n\nTokenami is officially supported in the following editors:\n\n- [VSCode](https://code.visualstudio.com/)\n- [Cursor](https://www.cursor.com/)\n- [Zed](https://zed.dev/)\n\n### Browserslist\n\nYou can use [browserslist](https://browsersl.ist/) to add autoprefixing to your CSS properties in the generated CSS file. However, Tokenami currently doesn't support vendor-prefixed **values**, which is being tracked in [this issue](https://github.com/tokenami/tokenami/issues/103).\n\n\u003e [!Important]\n\u003e Tokenami does not support browsers below the listed [supported browser versions](#user-content-browser-support). We recommend using `\"browserslist\": [\"supports css-cascade-layers\"]` if you're unsure.\n\n## Community\n\n### Contributing\n\nBefore raising a bug, please check if it's [already in our todo list](https://github.com/tokenami/tokenami/issues). Need help? Join our [Discord server](https://discord.gg/CAU4HNR4XK).\n\n### Contributors\n\n- Paweł Błaszczyk ([@pawelblaszczyk\\_](https://twitter.com/pawelblaszczyk_))\n\n### Credits\n\nA big thanks to:\n\n- [Tailwind V3](https://v3.tailwindcss.com/) for inspiring many of Tokenami's features\n- [Stitches](https://stitches.dev/) for variants inspiration\n- [CSS Hooks](https://css-hooks.com/) for custom selectors inspiration\n- [Lightning CSS](https://lightningcss.dev/) for generating the Tokenami stylesheet\n\nPlease do check out these projects if Tokenami isn't quite what you're looking for.\n","funding_links":[],"categories":["TypeScript","others","**1. Libraries**"],"sub_categories":["Styles"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokenami%2Ftokenami","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftokenami%2Ftokenami","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokenami%2Ftokenami/lists"}