{"id":48793208,"url":"https://github.com/dash-ui/styles","last_synced_at":"2026-04-13T21:11:15.678Z","repository":{"id":35943018,"uuid":"220105735","full_name":"dash-ui/styles","owner":"dash-ui","description":"≡𝘿𝙖𝙨𝙝 A tiny, powerful, framework-agnostic CSS-in-JS library","archived":false,"fork":false,"pushed_at":"2023-10-17T09:28:44.000Z","size":2176,"stargazers_count":35,"open_issues_count":8,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-26T06:55:07.712Z","etag":null,"topics":["css","css-framework","css-in-js","css-in-react","css-in-ts","css-in-typescript","css-patterns","css-variables","design-system","design-tokens","typescript"],"latest_commit_sha":null,"homepage":"https://dash-ui.now.sh","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/dash-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-06T22:54:42.000Z","updated_at":"2024-06-24T11:08:30.000Z","dependencies_parsed_at":"2024-06-18T19:58:23.815Z","dependency_job_id":"5313e504-3d35-481d-b0c2-6f8eb75a0451","html_url":"https://github.com/dash-ui/styles","commit_stats":{"total_commits":333,"total_committers":4,"mean_commits":83.25,"dds":0.2732732732732732,"last_synced_commit":"b608327afbadc495257fb1954e38e84dc28d942d"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"purl":"pkg:github/dash-ui/styles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Fstyles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Fstyles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Fstyles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Fstyles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dash-ui","download_url":"https://codeload.github.com/dash-ui/styles/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dash-ui%2Fstyles/sbom","scorecard":{"id":323649,"data":{"date":"2025-08-11","repo":{"name":"github.com/dash-ui/styles","commit":"b608327afbadc495257fb1954e38e84dc28d942d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/release.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/styles/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/styles/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/styles/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/styles/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/dash-ui/styles/release.yml/main?enable=pin","Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned","Info: 0 out of 2 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"30 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4","Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-f9xv-q969-pqx4","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T01:57:55.543Z","repository_id":35943018,"created_at":"2025-08-18T01:57:55.543Z","updated_at":"2025-08-18T01:57:55.543Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31770941,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T20:17:16.280Z","status":"ssl_error","status_checked_at":"2026-04-13T20:17:08.216Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","css-framework","css-in-js","css-in-react","css-in-ts","css-in-typescript","css-patterns","css-variables","design-system","design-tokens","typescript"],"created_at":"2026-04-13T21:11:14.664Z","updated_at":"2026-04-13T21:11:15.591Z","avatar_url":"https://github.com/dash-ui.png","language":"TypeScript","readme":"\u003chr\u003e\n \u003cimg src='https://github.com/dash-ui/styles/raw/main/assets/logo.png'/\u003e\n \n \u003e A tiny, powerful, framework-agnostic CSS-in-JS library\n\n```sh\nnpm i @dash-ui/styles\n```\n\n \u003cp\u003e\n \u003ca href=\"https://bundlephobia.com/result?p=@dash-ui/styles\"\u003e\n \u003cimg alt=\"Bundlephobia\" src=\"https://img.shields.io/bundlephobia/minzip/@dash-ui/styles?style=for-the-badge\u0026labelColor=24292e\"\u003e\n \u003c/a\u003e\n \u003ca aria-label=\"Types\" href=\"https://www.npmjs.com/package/@dash-ui/styles\"\u003e\n \u003cimg alt=\"Types\" src=\"https://img.shields.io/npm/types/@dash-ui/styles?style=for-the-badge\u0026labelColor=24292e\"\u003e\n \u003c/a\u003e\n \u003ca aria-label=\"Code coverage report\" href=\"https://codecov.io/gh/dash-ui/styles\"\u003e\n \u003cimg alt=\"Code coverage\" src=\"https://img.shields.io/codecov/c/gh/dash-ui/styles?style=for-the-badge\u0026labelColor=24292e\"\u003e\n \u003c/a\u003e\n \u003ca aria-label=\"Build status\" href=\"https://github.com/dash-ui/styles/actions/workflows/release.yml\"\u003e\n \u003cimg alt=\"Build status\" src=\"https://img.shields.io/github/workflow/status/dash-ui/styles/release/main?style=for-the-badge\u0026labelColor=24292e\"\u003e\n \u003c/a\u003e\n \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/@dash-ui/styles\"\u003e\n \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@dash-ui/styles?style=for-the-badge\u0026labelColor=24292e\"\u003e\n \u003c/a\u003e\n \u003ca aria-label=\"License\" href=\"https://jaredlunde.mit-license.org/\"\u003e\n \u003cimg alt=\"MIT License\" src=\"https://img.shields.io/npm/l/@dash-ui/styles?style=for-the-badge\u0026labelColor=24292e\"\u003e\n \u003c/a\u003e\n\n \u003c/p\u003e\n\n---\n\n## Features\n\n- [x] **Tiny** ([\u003c 6kB](https://bundlephobia.com/result?p=@dash-ui/styles@latest)), but\n comprehensive api\n- [x] **Bring your own UI framework** React, Preact, Vue, Svelte, etc.\n- [x] **Strongly typed** with TypeScript\n- [x] **CSS variables** are a first-class citizen\n- [x] **Themes** are easy and built with design tokens (CSS variables) and selectors\n- [x] [**Constructable Stylesheets**](https://web.dev/constructable-stylesheets/) are used when available\n- [x] **_Fast_**, some may say blazing™\n- [x] **Autoprefixing** for vendor-specific styles\n- [x] **Nesting** `div { \u003e * + * { margin-left: 4px; } }`\n- [x] **Minification**\n- [x] **Server rendering** [made easy](#server-rendering)\n- [x] **Flushable globals** make adding and removing global styles a breeze\n- [x] **Available as a [UMD](https://unpkg.com/browse/@dash-ui/styles@latest/dist/umd/) and [ES Module](https://cdn.skypack.dev/@dash-ui/styles/)**\n\n## Quick start\n\n[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-ui-react-example-029p5)\n\n```jsx harmony\n// React example\nimport * as React from \"react\";\nimport { styles } from \"@dash-ui/styles\";\n\n// Any global styles or tokens that are inserted into the DOM\n// can be easily ejected by calling the function they return.\nconst flushTokens = styles.insertTokens({\n color: {\n // var(--color-brand)\n brand: \"#ee5b5f\",\n // var(--color-white)\n white: \"#fafafa\",\n },\n elevation: {\n // var(--elevation-resting)\n resting:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n },\n radius: {\n // var(--radius-primary)\n primary: \"4px\",\n },\n});\n\nconst flushGlobal = styles.insertGlobal`\n body {\n min-height: 100vh;\n }\n`;\n\n// `styles` is a function for composing style variants in a\n// deterministic way. In the example below, you'll see an example\n// of a button with default styles and two variants: one for a\n// 'brand' background color and one for a 'black' background color.\nconst button = styles.variants({\n // The object in this callback is a mapping to the CSS\n // tokens above. `default` here is a special style name\n // that will be applied to each invocation of `button()`\n default: ({ radius }) =\u003e `\n display: inline-block;\n border: none;\n background: transparent;\n padding: 0.5rem 1rem;\n font-weight: 700;\n border-radius: ${radius.primary};\n box-shadow: ${elevation.resting};\n color: ${color.white};\n \n /**\n * Dash uses a CSS preprocessor called stylis so nesting,\n * autoprefixing, etc. come out of the box.\n * https://www.npmjs.com/package/stylis\n */\n :active {\n transform: translateY(1px);\n }\n `,\n // Styles can also be defined in the object format\n brand: ({ color }) =\u003e ({\n backgroundColor: color.brand,\n }),\n // Lastly, styles need not use callbacks if they don't need\n // access to design tokens\n black: {\n backgroundColor: \"#000\",\n },\n});\n\nconst Component = (props) =\u003e (\n \u003cdiv\u003e\n {/**\n * Styles are composed in the order they're defined in arguments,\n * so they are completely deterministic.\n */}\n \u003cbutton className={button(\"solid\", \"brand\")}\u003eSolid brand\u003c/button\u003e\n {/**\n * That is, in the button below `black`'s background color will\n * take precendence over the `brand` background color.\n */}\n \u003cbutton className={button({ outline: true, brand: true, black: true })}\u003e\n Solid black\n \u003c/button\u003e\n \u003c/div\u003e\n);\n```\n\n## API docs\n\n### Creating styles\n\n| | Description |\n| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [`styles.variants()`](#stylesvariants) | `styles.variants()` is a function for composing style variants in a deterministic way. It returns a function which when called will insert your styles into the DOM and create a unique class name. |\n| [`styles.one()`](#stylesone) | A function that accepts a tagged template literal, style object, or style callback, and returns a function. That function inserts the style into a `\u003cstyle\u003e` tag and returns a class name when called. |\n| [`styles.cls()`](#stylescls) | A function that accepts a tagged template literal, style object, or style callback. Calling this will immediately insert the CSS into the DOM and return a unique class name for the styles. This is a shortcut for `styles.one({display: 'flex'})()`. |\n| [`styles.lazy()`](#styleslazy) | A function that uses lazy evalution to create styles with indeterminate values. Calling this will immediately insert the CSS into the DOM and return a unique class name for the styles. |\n| [`styles.join()`](#stylesjoin) | A function that joins CSS strings, inserts them into the DOM right away, and returns a class name. |\n| [`styles.keyframes()`](#styleskeyframes) | A function that accepts a tagged template literal, style object, or style callback. Using this will immediately insert a global `@keyframes` definition into the DOM and return the name of the keyframes instance. |\n| [`styles.theme()`](#stylestheme) | A function that returns the generated class name for a given theme when using [`styles.insertThemes()`](#stylesinsertthemes) to create CSS variable-based themes. |\n| [`styles.insertThemes()`](#stylesinsertthemes) | This creates a CSS variable-based theme by defining tokens within a class name selector matching the theme name. Apart from that it works the same way [`styles.insertTokens()`](#stylesinserttokens) does. This function returns a function that will flush the styles inserted by [`styles.insertTokens()`](#stylesinserttokens) when it is called. |\n| [`styles.insertTokens()`](#stylesinserttokens) | Inserts design tokens into the DOM and makes them available for use in style callbacks. The name of the design tokens is automatically generated based upon the depth of the mapping i.e. `foo.bar.baz` -\u003e `--foo-bar-baz`. This function returns a function that will flush the tokens that were inserted when it is called. |\n| [`styles.insertGlobal()`](#stylesoneinsertglobal) | A function that accepts a tagged template literal, style object, or style callback. Using this will immediately insert styles into the DOM relative to the root document. This function returns a function that will flush the styles inserted when it is called. |\n| [`styles.hash()`](#styleshash) | The hashing function used for creating unique selector names. |\n| [`styles.tokens`](#stylestokens) | The design tokens configured in the instance. |\n| [`styles.dash`](#stylesdash) | The instance of underlying the Dash cache used by this instance. This was automatically created by [`createDash()`](#createdash) when [`createStyles()`](#createstyles) was called. Dash controls the caching, style sheets, auto-prefixing, and DOM insertion that happens in the [`styles.variants()`](#stylesvariants) instance. |\n\n### Server rendering\n\nDash has robust server rendering utilities out of the box. If you're using React, there\nare even more helpers available for Gatsby, Next.js, etc. available in\n[`@dash-ui/react`](https://github.com/dash-ui/react).\n\n| | Description |\n| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [`createStylesFromCache()`](#createstylesfromcache) | Creates a string of CSS based on the dash `inserted` cache. This is an extremely fast way to generate a CSS string. It returns an object containing the hash names of all of the styles used as well as the CSS string. Note that this function is unsafe in asynchronous render environments because multiple pages using the same cache will dirty the results. This means it will not work with Gatsby, for example. |\n| [`createStyleTagFromCache()`](#createstyletagfromcache) | Creates a `\u003cstyle\u003e` tag w/ CSS based on the dash `inserted` cache. This is an extremely fast way to generate a `\u003cstyle\u003e` tag. Note that this function is unsafe in asynchronous render environments because multiple pages using the same cache will dirty the results. This means it will not work with Gatsby, for example. |\n| [`writeStylesFromCache()`](#writestylesfromcache) | Writes a CSS to a file based on the dash `inserted` cache. This is an extremely fast way to generate a CSS file. Note that this function is unsafe in asynchronous render environments because multiple pages using the same cache will dirty the results. This means it will not work with Gatsby, for example. |\n| [`createStylesFromString()`](#createstylesfromstring) | Creates a string of CSS based on an HTML string. This function will parse your HTML output for Dash class names and pull the styles associated with them from the Dash cache. It returns an object containing the hash names of all of the styles used as well as the CSS string. This is a safe way to generate style strings in an asynchronous environment. |\n| [`createStyleTagFromString()`](#createstyletagfromstring) | Creates a `\u003cstyle\u003e` tag w/ CSS based on an HTML string. This function will parse your HTML output for Dash class names and pull the styles associated with them from the Dash cache. This is a safe way to generate `\u003cstyle\u003e` tags in an asynchronous environment. |\n| [`writeStylesFromString()`](#writestylesfromstring) | Writes a CSS to a file based on an HTML string. This function will parse your HTML output for Dash class names and pull the styles associated with them from the Dash cache. This is a safe way to generate CSS files in an asynchronous environment. |\n\n### Creating a custom `styles` instance\n\n| | Description |\n| --------------------------------- | ----------------------------------------------------------------------------------------------- |\n| [`createStyles()`](#createstyles) | A factory function that returns a new `styles` instance with your custom configuration options. |\n| [`createDash()`](#createdash) | Dash is a tiny, performant CSS-in-JS style rule sheet manager similar to Emotion. |\n\n### Utilities\n\n| | Description |\n| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [`compileStyles()`](#compilestyles) | A utility function that will compile style objects and callbacks into CSS strings. |\n| [`hash()`](#hash) | An FNV-1a hashing algorithm with a 32-bit offset basis. FNV-1a hashes are designed to be fast while maintaining a low collision rate. The high dispersion rate makes them well-suited for hashing nearly identical strings. This is the default hash used by [`createStyles()`](#createstyles). |\n\n### TypeScript support\n\nDash is written in TypeScript. It's also strongly typed, creating a beautiful IntelliSense\nexperience in VSCode and providing solid insurance to your TypeScript application.\n\n| | Description |\n| ----------------------------------------------- | -------------------------------------------------------------------------- |\n| [Strongly typed tokens](#strongly-typed-tokens) | Learn how to add autocomplete and type safety to your design tokens. |\n| [Strongly typed themes](#strongly-typed-tokens) | Learn how to add autocomplete and type safety to your CSS variable themes. |\n\n## Awesome @dash-ui libraries\n\nWrite something awesome for Dash, [tell me about it](https://twitter.com/jaredLunde), and\nI will put it here.\n\n| | Description |\n| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [`@dash-ui/layout`](https://github.com/dash-ui/layout#readme) | Framework-agnostic layout primitives for [@dash-ui](https://github.com/dash-ui). |\n| [`@dash-ui/jest`](https://github.com/dash-ui/jest#readme) | The easiest way to test React, Preact, and Preact X components with [@dash-ui](https://github.com/dash-ui). This includes snapshot serialization and a custom Jest matcher. |\n| [`@dash-ui/react`](https://github.com/dash-ui/react#readme) | React components and hooks for [@dash-ui](https://github.com/dash-ui). |\n| [`@dash-ui/react-layout`](https://github.com/dash-ui/react-layout#readme) | Layout primitives for React and [@dash-ui](https://github.com/dash-ui), including Box, Cluster, Grid, Row, Column, and Layer. |\n| [`@dash-ui/mq`](https://github.com/dash-ui/mq#readme) | A utility function for adding stored media queries and breakpoints to [@dash-ui](https://github.com/dash-ui) styles. |\n| [`@dash-ui/transition`](https://github.com/dash-ui/transition#readme) | A library for creating performant and composable CSS transitions with [@dash-ui](https://github.com/dash-ui). |\n\n## Why does this exist?\n\nIn the days before Emotion was subsumed by the React community and\n[effectively ruined](https://github.com/emotion-js/emotion/issues/1059), there existed a beautiful,\nsimple CSS-in-JS API. It returned class names instead of objects. It was easy to use. It didn't require\na babel plugin or a JSX pragma. It wasn't inextricably tied to React or React context trees.\n\nAbout a year after I created that Emotion issue, I started work on Dash. I've worked tirelessly\nsince to create a library I genuinely liked using. I wanted to create a library that combined the\nsimplicity of CSS with the versatility of JavaScript - as CSS-in-JS has always intended.\n\nDash can be used in React, but doesn't rely on it. It can also be used in Vue, Svelte, and\nanywhere else you can use JavaScript. Themes are created with CSS variables and selectors,\nnot React context.\n\nI hope you'll give it a chance.\n\n---\n\n### styles.variants()\n\n`styles.variants()` is a function for composing style variants in a deterministic way. It returns a\nfunction which when called will insert your styles into the DOM and create a unique class name.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-styles-example-slp3z?file=/src/App.tsx)\n\n```jsx harmony\n// React example\nimport * as React from \"react\";\nimport { styles } from \"@dash-ui/styles\";\n\nconst button = styles.variants({\n // The object in this callback is a mapping to the CSS\n // tokens above. `default` here is a special style name\n // that will be applied to each invocation of `button()`\n default: ({ radius }) =\u003e `\n display: inline-block;\n border: none;\n background: transparent;\n padding: 0.5rem 1rem;\n font-weight: 700;\n border-radius: ${radius.primary};\n box-shadow: ${elevation.resting};\n\n :active {\n transform: translateY(1px);\n }\n `,\n // Styles can also be defined in the object format\n primary: ({ color }) =\u003e ({\n backgroundColor: color.primary,\n color: color.white,\n }),\n // Lastly, styles need not use callbacks if they don't need\n // access to design tokens\n black: {\n backgroundColor: \"#000\",\n color: \"#fff\",\n },\n});\n\nconst Component = (props) =\u003e (\n \u003cReact.Fragment\u003e\n {/**\n * Styles are composed in the order they're defined in arguments,\n * so they are completely deterministic. Calling the `button`\n * function returns a string class name.\n */}\n \u003cbutton className={button(\"solid\", \"brand\")}\u003eSolid brand\u003c/button\u003e\n {/**\n * That is, in the button below `black`'s background color will\n * take precendence over the `brand` background color because it\n * is declared after `brand`.\n */}\n \u003cbutton className={button({ outline: true, brand: true, black: true })}\u003e\n Solid black\n \u003c/button\u003e\n \u003c/React.Fragment\u003e\n);\n```\n\n#### Arguments\n\n```typescript\nstyles\u003cN extends string\u003e(styleMap: StyleMap\u003cN, V\u003e): Style\u003cN, V\u003e\n```\n\n| Argument | Type | Required? | Description |\n| -------- | ----------------------- | --------- | ----------------------- |\n| styleMap | [`StyleMap`](#stylemap) | Yes | A key/CSS value mapping |\n\n#### Returns\n\n```ts\n/**\n * A function that inserts styles from the style map into the DOM when called\n * with those style names selected.\n *\n * @param args A series of style names or style name/boolean maps which\n * select the styles from the style map you want to compose into a singular\n * deterministic style and class name.\n */\nexport type Style\u003cN extends string, V extends DashTokens = DashTokens\u003e = {\n (...args: StyleArguments\u003cN\u003e): string;\n /**\n * A function that returns the raw, CSS string for a given\n * name in the style map.\n *\n * @param names A series of style names or style name/boolean maps which\n * select the styles from the style map you want to compose into a singular\n * CSS string.\n */\n css(...names: StyleArguments\u003cN\u003e): string;\n /**\n * The style map that this `style()` instance was instantiated with.\n */\n styles: StyleMap\u003cN, V\u003e;\n};\n\nexport type StyleArguments\u003cN extends string\u003e = (\n | N\n | {\n [Name in N]?: boolean | null | undefined | string | number;\n }\n | Falsy\n)[];\n```\n\n### StyleMap\n\n```ts\nexport type StyleMap\u003cN extends string, V extends DashTokens = DashTokens\u003e = {\n [Name in N | \"default\"]?: StyleValue\u003cV\u003e;\n};\n\nexport type StyleValue\u003cV extends DashTokens = DashTokens\u003e =\n | string\n | StyleCallback\u003cV\u003e\n | StyleObject;\n\nexport type StyleObject = {\n [property: string]: StyleObject | string | number;\n};\n\nexport type StyleCallback\u003cV extends DashTokens = DashTokens\u003e = (\n tokens: V\n) =\u003e StyleObject | string;\n```\n\n---\n\n### styles.one()\n\nA function that accepts a tagged template literal, style object, or style callback, and\nreturns a function. That function inserts the style into a `\u003cstyle\u003e` tag and returns a\nclass name when called.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-stylesone-example-0mq1t?file=/src/App.tsx)\n\n```jsx harmony\n// React example\nimport * as React from \"react\";\nimport { styles } from \"@dash-ui/styles\";\n\n// Can be a tagged template literal\nconst heading = styles.one`\n font-size: 2rem;\n font-weight: bold;\n`;\n\n// Or an object\nconst heading = styles.one({\n fontSize: \"2rem\",\n fontWeight: \"bold\",\n});\n\n// Or a callback\nconst heading = styles.one(({ font }) =\u003e ({\n fontSize: font.size.heading,\n fontWeight: \"bold\",\n}));\n\nconst Heading = () =\u003e \u003ch1 className={heading()}\u003eHello world\u003c/h1\u003e;\n```\n\n#### Returns\n\n```ts\n/**\n * A function that inserts styles into the DOM when called without\n * a falsy value. If the first argument is falsy, the styles will\n * not be inserted and a class name will not be returned.\n */\nexport type StylesOne = {\n (createClassName?: boolean | number | string | null): string;\n /**\n * A method that returns a CSS string if the first argument is not falsy.\n */\n css(createCss?: boolean | number | string | null): string;\n};\n```\n\n---\n\n### styles.cls()\n\nA function that accepts a tagged template literal, style object, or style callback.\nCalling this will immediately insert the CSS into the DOM and return a unique class\nname for the styles. This is a shortcut for `styles.one({display: 'flex'})()`.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-stylescls-example-vffy5?file=/src/App.tsx)\n\n```jsx harmony\n// React example\nimport * as React from \"react\";\nimport { styles } from \"@dash-ui/styles\";\n\n// The styles here will only be injected into the DOM\n// immediately when the style is created. This is cached\n// so it will only happen on the first call. Any\n// subsequent calls merely return a class name.\nconst Box = () =\u003e (\n \u003cdiv\n className={styles.cls(\n ({ color }) =\u003e `\n width: 200px;\n height: 200px;\n background-color: ${color.primary};\n\n :hover {\n background-color: ${color.secondary};\n }\n `\n )}\n /\u003e\n);\n```\n\n#### Returns\n\n```ts\nstring; // A class name\n```\n\n---\n\n### styles.lazy()\n\nA function that uses lazy evalution to create styles with indeterminate values.\nCalling this will immediately insert the CSS into the DOM and return a unique\nclass name for the styles.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-styleslazy-example-7kymy?file=/src/App.tsx)\n\n```jsx harmony\n// React example\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { styles } from \"@dash-ui/styles\";\n\n// The lazy function can return style objects, style callbacks,\n// and strings\nconst bgColor = styles.lazy((colorName) =\u003e ({ color }) =\u003e ({\n backgroundColor: color[colorName],\n}));\n\nconst Box = ({ bg = \"primary\" }) =\u003e \u003cdiv className={bgColor(bg)} /\u003e;\n```\n\n#### Returns\n\n```ts\n/**\n * A function that inserts indeterminate styles based on the value\n * into the DOM when called.\n *\n * @param value A JSON serializable value to create indeterminate\n * styles from\n */\nexport type StylesLazy\u003cValue extends LazyValue\u003e = {\n (value?: Value): string;\n /**\n * A method that returns indeterminate CSS strings based on the value\n * when called.\n *\n * @param value A JSON serializable value to create indeterminate\n * styles from\n */\n css(value?: Value): string;\n};\n```\n\n---\n\n### styles.join()\n\nA function that joins CSS strings, inserts them into the DOM right away, and returns a\nclass name.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-stylesjoin-example-t7jft?file=/src/App.tsx)\n\n```jsx harmony\n// React example\nimport * as React from \"react\";\nimport { styles } from \"@dash-ui/styles\";\n\n// Create a style for primary bg color\nconst bgPrimary = styles.one(\n ({ color }) =\u003e `\n background-color: ${color.primary};\n `\n);\n\n// Creates styles for a box with 2 widths\nconst box = styles.variants({\n default: {\n width: 200,\n height: 200,\n },\n big: {\n width: 400,\n height: 400,\n },\n});\n\n// This joins CSS strings together and immediately\n// inserts them into the DOM while returning a\n// class name\nconst PrimaryBox = () =\u003e (\n \u003cdiv className={styles.join(bgPrimary.css(), box.css(\"big\"))} /\u003e\n);\n```\n\n#### Arguments\n\n```ts\nstyles.join(...css: string[]): string\n```\n\n| Argument | Type | Required? | Description |\n| -------- | ---------- | --------- | ---------------------------------------------------------- |\n| ...css | `string[]` | Yes | One or several CSS strings you want to join into one style |\n\n#### Returns\n\n```ts\nstring; // A class name\n```\n\n---\n\n### styles.keyframes()\n\nA function that accepts a tagged template literal, style object, or style callback.\nInvoking it will immediately inject its styles into the DOM and return an animation\nname which can then be referenced in other styles.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-styleskeyframes-example-kuk2o?file=/src/App.tsx)\n\n```jsx harmony\n// React example\nimport * as React from \"react\";\nimport { styles } from \"@dash-ui/styles\";\n\n// Immediately injects keyframes styles into the\n// DOM and returns an animation name which can then\n// be referenced in other styles.\nconst zoomy = styles.keyframes`\n 0% {\n transform: scale(0.0);\n }\n\n 60% {\n transform: scale(1.4);\n }\n\n 80% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0.0);\n }\n`;\n\n// Creates styles for a zoomy box\nconst zoomyBox = styles.one({\n animationName: zoomy,\n animationDuration: `2000ms`,\n animationIterationCount: \"infinite\",\n backgroundColor: \"#008489\",\n width: 100,\n height: 100,\n margin: \"48px auto\",\n});\n\nconst ZoomyBox = () =\u003e \u003cdiv className={zoomyBox()} /\u003e;\n```\n\n#### Returns\n\n```ts\nstring; // An animation name\n```\n\n---\n\n### styles.theme()\n\nA function that returns the generated class name for a given theme when using\n[`styles.insertThemes()`](#stylesinsertthemes) to create CSS variable-based themes.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-stylestheme-example-58n8z?file=/src/App.tsx:0-1368)\n\n```tsx\n// React example\nimport * as React from \"react\";\nimport { createStyles } from \"@dash-ui/styles\";\n\n// Creating our own styles instance gives us strong\n// types for `themes` and `tokens` without having\n// to declare DashTokens and DashThemes types in\n// our app\nconst styles = createStyles({\n themes: {\n // Light mode design tokens\n light: {\n bgColor: \"#FAFAFA\",\n primaryColor: \"#ee5b5f\",\n },\n // Dark mode design tokens\n dark: {\n bgColor: \"#272727\",\n primaryColor: \"#333\",\n },\n } as const,\n});\n\nexport const App = () =\u003e {\n const [mode, setMode] = React.useState\u003c\"light\" | \"dark\"\u003e(\"light\");\n\n React.useEffect(() =\u003e\n styles.insertGlobal(({ bgColor }) =\u003e ({\n body: { backgroundColor: bgColor },\n }))\n );\n\n return (\n // Sets the theme name on the body element\n // The theme class name is what determines\n // which CSS variable values take precedence\n // in the cascade\n \u003cbody className={styles.theme(mode)}\u003e\n \u003cdiv\n className={styles.cls(\n ({ bgColor, primaryColor }) =\u003e `\n width: 200px;\n height: 200px;\n background-color: ${primaryColor};\n `\n )}\n /\u003e\n\n \u003cbutton\n onClick={() =\u003e setMode((mode) =\u003e (mode === \"light\" ? \"dark\" : \"light\"))}\n \u003e\n Switch to {mode === \"light\" ? \"dark\" : \"light\"} mode\n \u003c/button\u003e\n \u003c/body\u003e\n );\n};\n```\n\n#### Arguments\n\n```typescript\ntheme(name: T): string\n```\n\n| Argument | Type | Required? | Description |\n| -------- | -------- | --------- | --------------------- |\n| name | `string` | Yes | The name of the theme |\n\n#### Returns\n\n```typescript\nstring; // A class name\n```\n\n---\n\n### styles.insertThemes()\n\nThis creates a CSS variable-based theme by defining tokens within a class name selector\nmatching the theme name. Apart from that it works the same way\n[`styles.insertTokens()`](#stylesinserttokens) does. This function returns a\nfunction that will flush the styles inserted by [`styles.insertTokens()`](#stylesinserttokens)\nwhen it is called.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-stylesinsertthemes-example-6ohbd?file=/src/App.tsx)\n\n```tsx\n// React example\nimport * as React from \"react\";\nimport { createStyles } from \"@dash-ui/styles\";\n\n// Creating our own styles instance gives us strong\n// types for `themes` and `tokens` without having\n// to declare DashTokens and DashThemes types in\n// our app\nconst styles = createStyles({\n themes: {\n // Light mode design tokens\n light: {\n primaryColor: \"#ee5b5f\",\n },\n // Dark mode design tokens\n dark: {\n primaryColor: \"#272727\",\n },\n },\n});\n\nexport const App = () =\u003e {\n const [mode, setMode] = React.useState\u003c\"light\" | \"dark\"\u003e(\"light\");\n const [darkModePrimary, setDarkModePrimary] = React.useState(\"#272727\");\n const [lightModePrimary, setLightModePrimary] = React.useState(\"#ee5b5f\");\n\n React.useEffect(\n // Here we are updating our theme values each\n // time they change for a given mode.\n () =\u003e\n styles.insertThemes({\n light: {\n primaryColor: lightModePrimary,\n },\n dark: {\n primaryColor: darkModePrimary,\n },\n }),\n [darkModePrimary, lightModePrimary]\n );\n\n return (\n // Sets the theme name on the body element\n // The theme class name is what determines\n // which CSS variable values take precedence\n // in the cascade\n \u003cbody className={styles.theme(mode)}\u003e\n \u003cdiv\n className={styles.cls(\n ({ primaryColor }) =\u003e `\n width: 200px;\n height: 200px;\n background-color: ${primaryColor};\n `\n )}\n /\u003e\n\n \u003cdiv\u003e\n \u003cbutton\n onClick={() =\u003e\n setMode((mode) =\u003e (mode === \"light\" ? \"dark\" : \"light\"))\n }\n \u003e\n Switch to {mode === \"light\" ? \"dark\" : \"light\"} mode\n \u003c/button\u003e\n \u003c/div\u003e\n\n \u003clabel\u003e\n \u003ch4\u003eLight mode primary color\u003c/h4\u003e\n \u003cinput\n value={lightModePrimary}\n onChange={(e) =\u003e setLightModePrimary(e.target.value)}\n /\u003e\n \u003c/label\u003e\n\n \u003clabel\u003e\n \u003ch4\u003eDark mode primary color\u003c/h4\u003e\n \u003cinput\n value={darkModePrimary}\n onChange={(e) =\u003e setDarkModePrimary(e.target.value)}\n /\u003e\n \u003c/label\u003e\n \u003c/body\u003e\n );\n};\n```\n\n#### Arguments\n\n```typescript\ninsertThemes(\n themes: DeepPartial\u003c\n {\n [Name in DashThemeNames]: DashTokens\n }\n \u003e\n ): () =\u003e void\n```\n\n| Argument | Type | Required? | Description |\n| -------- | ----------------------------------------------------- | --------- | ------------------------------------------- |\n| themes | `DeepPartial\u003c{[Name in DashThemeNames]: DashTokens}\u003e` | Yes | A mapping of theme name/CSS variable pairs. |\n\n#### Returns\n\n```typescript\n// A function that flushes the style sheet created by\n// inserting the new variable values when invoked\n() =\u003e void\n```\n\n---\n\n### styles.insertTokens()\n\nInserts design tokens into the DOM and makes them available for use in style callbacks. The\nname of the design tokens is automatically generated based upon the depth of the mapping\ni.e. `foo.bar.baz` -\u003e `--foo-bar-baz`. This function returns a function that will flush\nthe tokens that were inserted when it is called.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-stylesinserttokens-example-orsif?file=/src/App.tsx)\n\n```tsx\n// React example\nimport * as React from \"react\";\nimport { createStyles } from \"@dash-ui/styles\";\n\n// Creating our own styles instance gives us strong\n// types for `tokens` without having to declare\n// DashTokens in our app\nconst styles = createStyles({\n tokens: {\n primaryColor: \"#ee5b5f\",\n },\n});\n\nexport const App = () =\u003e {\n const [primaryColor, setPrimaryColor] = React.useState(\"#ee5b5f\");\n\n React.useEffect(\n // Here we are updating our variable values each\n // time they change.\n () =\u003e\n styles.insertTokens({\n primaryColor,\n }),\n [primaryColor]\n );\n\n return (\n \u003cdiv\u003e\n \u003cdiv\n className={styles.cls(\n ({ primaryColor }) =\u003e `\n width: 200px;\n height: 200px;\n background-color: ${primaryColor};\n `\n )}\n /\u003e\n\n \u003clabel\u003e\n \u003ch4\u003ePrimary color\u003c/h4\u003e\n \u003cinput\n value={primaryColor}\n onChange={(e) =\u003e setPrimaryColor(e.target.value)}\n /\u003e\n \u003c/label\u003e\n \u003c/div\u003e\n );\n};\n```\n\n#### Arguments\n\n```typescript\ninsertTokens(tokens: DeepPartial\u003cDashTokens\u003e, selector?: string): () =\u003e void\n```\n\n| Argument | Type | Required? | Default | Description |\n| -------- | ------------------------- | --------- | --------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| tokens | `DeepPartial\u003cDashTokens\u003e` | Yes | | A map of CSS variable name/value pairs |\n| selector | `string` | No | `\":root\"` | Including a selector will only make these CSS variable definitions take effect within the selector, e.g. a class name or ID. |\n\n#### Returns\n\n```typescript\n// A function that flushes the style sheet created by\n// inserting the new variable values when invoked\n() =\u003e void\n```\n\n---\n\n### styles.insertGlobal()\n\nA function that accepts a tagged template literal, style object, or style callback. Using\nthis will immediately insert styles into the DOM relative to the root document. This function\nreturns a function that will flush the styles inserted when it is called.\n\n#### Example\n\n[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-stylesinsertglobal-example-on4jz?file=/src/App.tsx)\n\n```tsx\n// React example\nimport * as React from \"react\";\nimport { styles } from \"@dash-ui/styles\";\n\nconst flushStyles = styles.insertGlobal({\n body: {\n minHeight: \"100vh\",\n backgroundColor: \"#ee5b5f\",\n color: \"#fff\",\n fontFamily: \"Inter, -apple-system, sans-serif\",\n },\n h1: {\n margin: \"1rem\",\n fontSize: \"3rem\",\n },\n});\n\nexport const App = () =\u003e {\n return (\n \u003cdiv\u003e\n \u003ch1\u003eHello world\u003c/h1\u003e\n \u003cbutton onClick={flushStyles}\u003eFlush styles\u003c/button\u003e\n \u003c/div\u003e\n );\n};\n```\n\n#### Returns\n\n```typescript\n// A function that flushes the style sheet created when\n// inserting the new global styles\n() =\u003e void\n```\n\n---\n\n### styles.hash()\n\nThe hashing function used for creating unique selector names. This can be\nconfigured by creating your own `styles` instance with [`createStyles()`](#createstyles).\n\n#### Example\n\n```js\nimport { styles } from \"@dash-ui/styles\";\n\nconsole.log(styles.hash(\"foo: bar;\"));\n// 1rcc4tl\n```\n\n#### Arguments\n\n```typescript\nhash(string: string): string\n```\n\n| Argument | Type | Required? | Description |\n| -------- | -------- | --------- | ----------------------------- |\n| string | `string` | Yes | The string you'd like to hash |\n\n#### Returns\n\n```typescript\nstring; // A hash of the input string\n```\n\n---\n\n### styles.tokens\n\nThe design tokens configured in the instance\n\n#### Example\n\n```js\nimport {styles} from '@dash-ui/styles`\n\nstyles.insertTokens({foo: 'bar'})\nconsole.log(styles.tokens)\n// {foo: 'var(--foo)'}\n```\n\n---\n\n### styles.dash\n\nThe instance of underlying the Dash cache used by this instance. This was automatically\ncreated by [`createDash()`](#createdash) when [`createStyles()`](#createstyles) was called.\nDash controls the caching, style sheets, auto-prefixing, and DOM insertion that happens\nin the `styles` instance.\n\n#### Example\n\n```jsx harmony\nimport { styles } from \"@dash-ui/styles\";\n// Inserts a style named 'foo' under the selector '.foo'\n// into the default style sheet\nstyles.dash.insert(\"foo\", \".foo\", \"display: flex;\");\n```\n\n---\n\n### createStyles()\n\nA factory function that returns a new `styles` instance with your custom configuration options.\nI would suggest that you almost always create your own `styles` instance - especially when\nusing TypeScript.\n\n#### Example\n\n```js\nimport {createStyles, createDash} from '@dash-ui/styles`\n\nconst styles = createStyles({\n dash: createDash({key: 'css', prefix: false}),\n mangleTokens: typeof process !== 'undefined' \u0026\u0026 process.env.NODE_ENV === 'production',\n tokens: {\n gap: {\n sm: '0.25rem',\n md: '0.5rem',\n lg: '1rem'\n }\n }\n})\n\nconst oneStyle = styles.one(({gap}) =\u003e `\n margin: ${gap.md};\n`)\n```\n\n#### Arguments\n\n```typescript\nfunction createStyles\u003c\n V extends DashTokens = DashTokens,\n T extends string = DashThemeNames\n\u003e(options: CreateStylesOptions\u003cV, T\u003e = {}): Styles\u003cV, T\u003e;\n```\n\n| Argument | Type | Required? | Description |\n| -------- | --------------------------------------------- | --------- | --------------------- |\n| options | [`CreateStylesOptions`](#createstylesoptions) | No | Configuration options |\n\n#### Returns\n\nA new `styles` instance\n\n```typescript\nStyles\u003cV, T\u003e\n```\n\n### CreateStylesOptions\n\n| Option | Type | Required? | Default | Description |\n| ------------ | ------------------------------------- | --------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| dash | [`Dash`](#createdash) | No | `createDash()` | An instance of Dash created by the [`createDash()`](#createdash) factory |\n| tokens | `DashTokens` | No | | Inserts design tokens into the DOM and makes them available for use in style callbacks. The name of the design tokens is automatically generated based upon the depth of the mapping i.e. `foo.bar.baz` -\u003e `--foo-bar-baz`. |\n| themes | `DashThemes` | No | | A mapping of theme name/CSS variable pairs. This Creates a CSS variable-based theme by defining tokens within a class name selector matching the theme name. Apart from that it works the same way `tokens` does. |\n| mangleTokens | `boolean \\| {[key: string]: boolean}` | No | `false` | When `true` this will mangle CSS variable names. You can also provide an object with `{key: boolean}` pairs of reserved keys which will not be mangled. |\n| hash | `(string: string) =\u003e string` | No | [`hash`](#hash) | Use your own hash function for creating selector names. By default Dash uses an fnv1a hashing algorithm. |\n\n---\n\n### createDash()\n\nDash is a tiny, performant CSS-in-JS style rule sheet manager similar to Emotion.\n\n#### Example\n\n```js\nimport { createDash } from \"@dash-ui/styles\";\n\nconst dash = createDash({ key: \"css\", prefix: false });\n// Inserts a style named 'flex' under the selector '.flex'\n// into the default style sheet\ndash.insert(\"flex\", \".flex\", \"display: flex;\");\n```\n\n#### Arguments\n\n```typescript\nfunction createDash(options: CreateDashOptions = {}): Dash;\n```\n\n| Argument | Type | Required? | Description |\n| -------- | ----------------------------------------- | --------- | --------------------- |\n| options | [`CreateDashOptions`](#createdashoptions) | No | Configuration options |\n\n#### Returns\n\n```typescript\n// An instance of Dash\nexport type Dash = {\n /**\n * The sheet key\n */\n readonly key: string;\n /**\n * The default style sheet used by this instance of Dash\n */\n readonly sheet: DashStyleSheet;\n /**\n * Used for tracking external sheets. You can safely add/delete new\n * custom sheets using this. Those sheets can be used in the `insert()`\n * method. The primary reason you'd want to use this is so that you can\n * create independently flushable styles/sheets.\n */\n readonly sheets: DashSheets;\n /**\n * The instance of Stylis used by this Dash instance\n */\n readonly stylis: typeof Stylis;\n /**\n * A cache of Stylis rules saved by their keys. This is only used\n * on the server for generating CSS files and strings from the keys\n * used in the cache.\n */\n readonly cache: Map\u003cstring, string\u003e;\n /**\n * A function for inserting style rules into the document and cache.\n *\n * @param key The unique key of the rule. This is used for caching.\n * @param selector The CSS selector to insert the rule under. Omit this\n * when inserting a global style.\n * @param styles The rules string you'd like to insert into the document or cache.\n * @param styleSheet The style sheet to insert a rule into, for example `dash.sheet`.\n */\n insert(\n key: string,\n selector: string,\n styles: string,\n styleSheet?: DashStyleSheet\n ): void;\n /**\n * An insertion cache. This tracks which keys have already been inserted into\n * the DOM to prevent duplicates.\n */\n readonly inserted: Set\u003cstring\u003e;\n};\n```\n\n### CreateDashOptions\n\n| Option | Type | Required? | Default | Description |\n| ------------- | ----------------------------------------------------------------- | --------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| key | `string` | No | `\"ui\"` | Keys in sheets used to associate `\u003cstyle\u003e` tags with this specific Dash instances via the `dash-cache` property. This is also used as a class name prefix in `styles`. |\n| nonce | `string` | No | | For security policies. A nonce is an arbitrary number that can be used just once in a cryptographic communication. |\n| stylisPlugins | `Plugable[]` | No | | An array of Stylis plugins. See: https://www.npmjs.com/package/stylis |\n| prefix | `boolean \\| ((key: string, value: any, context: any) =\u003e boolean)` | No | `true` | Turns on/off vendor prefixing. When a boolean, all prefixes will be turned on/off. Use a function to define your own prefixes for a given key/value. |\n| container | `HTMLElement` | No | `document.head` | This is the container that `\u003cstyle\u003e` tags will be injected into when style rules are inserted. |\n\n---\n\n### compileStyles()\n\nA utility function that will compile style objects and callbacks into CSS strings.\n\n#### Example\n\n```js\nimport { compileStyles } from \"@dash-ui/styles\";\n\nconst css = compileStyles({\n display: \"flex\",\n \"\u003e * + *\": {\n marginLeft: \"0.5rem\",\n },\n});\nconsole.log(css);\n// \"display:flex;\u003e * + *{margin-left:0.5rem;}\"\n\nconst red = compileStyles(({ red }) =\u003e ({ color: red }), { red: \"var(--red)\" });\nconsole.log(red);\n// \"color:var(--red);\"\n```\n\n#### Arguments\n\n| Argument | Type | Required? | Description |\n| -------- | ------------------------ | --------- | ------------------------------------------ |\n| styles | `StyleValue\u003cV\u003e \\| Falsy` | Yes | A style callback, object, or string |\n| tokens | `DashTokens` | No | A map of design tokens for style callbacks |\n\n#### Returns\n\n```typescript\nstring; // A CSS string\n```\n\n---\n\n### hash()\n\nAn FNV-1a hashing algorithm with a 32-bit offset basis. FNV-1a hashes are designed to be\nfast while maintaining a low collision rate. The high dispersion rate makes them\nwell-suited for hashing nearly identical strings. This is the default hash used by\n[`createStyles()`](#createstyles).\n\n#### Example\n\n```js\nimport { hash } from \"@dash-ui/styles\";\n\nconsole.log(hash(\"foo: bar;\"));\n// 1rcc4tl\n```\n\n#### Arguments\n\n```typescript\nfunction hash(string: string): string;\n```\n\n| Argument | Type | Required? | Description |\n| -------- | -------- | --------- | ----------------------------- |\n| string | `string` | Yes | The string you'd like to hash |\n\n#### Returns\n\n```typescript\nstring; // A hash of the input string\n```\n\n---\n\n### createStylesFromCache()\n\nCreates a string of CSS based on the Dash `inserted` cache. This is an extremely fast\nway to generate a CSS string. It returns an object containing the hash names of\nall of the styles used as well as the CSS string.\n\nNote that this function is unsafe in asynchronous render environments because multiple\npages using the same cache will dirty the results. This means it will not work with\nGatsby, for example.\n\n#### Example\n\n```js\nimport { styles } from \"@dash-ui/styles\";\nimport { createStylesFromCache } from \"@dash-ui/styles/server\";\n\n// Inserts a new class for `display: flex;`\nstyles.cls`display: flex;`;\n\n// Reads from the cache\nconst { css, names } = createStylesFromCache(styles);\n\n// A CSS string generated from the cache\nconsole.log(css);\n// \".ui-1ut9bc3{display:flex;}\"\n\n// A list of all of the names that were in the cache\nconsole.log(names);\n// [\"1ut9bc3\"]\n```\n\n#### Arguments\n\n```typescript\nexport function createStylesFromCache(\n styles = require(\"@dash-ui/styles\").styles,\n options: CreateServerStylesOptions = {}\n): ServerStylesResult;\n```\n\n| Argument | Type | Required? | Default | Description |\n| -------- | --------------------------------------------------------- | --------- | --------------------- | --------------------- |\n| styles | `styles` | No | `styles` | A `styles` instance |\n| options | [`CreateServerStylesOptions`](#createserverstylesoptions) | No | `{clearCache: false}` | Configuration options |\n\n#### Returns\n\n```typescript\nexport interface ServerStylesResult {\n /**\n * A CSS string containing all of the styles that were used\n */\n css: string;\n /**\n * Hash names of all of the styles used in the generated CSS\n */\n names: string[];\n}\n```\n\n### CreateServerStylesOptions\n\n| Option | Type | Required? | Default | Description |\n| ---------- | --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| clearCache | `boolean` | No | `false` | Clears the Dash `inserted` cache after styles have been generated. This is useful in synchronous environments when you only want to generate CSS strings for the styles that were actually used in a given page/render. |\n\n---\n\n### createStyleTagFromCache()\n\nCreates a `\u003cstyle\u003e` tag w/ CSS based on the dash `inserted` cache. This is an\nextremely fast way to generate a `\u003cstyle\u003e` tag.\n\nNote that this function is unsafe\nin asynchronous render environments because multiple pages using the same cache\nwill dirty the results. This means it will not work with Gatsby, for example.\n\n#### Example\n\n```js\nimport { styles } from \"@dash-ui/styles\";\nimport { createStyleTagFromCache } from \"@dash-ui/styles/server\";\n\n// Inserts a new class for `display: flex;`\nstyles.cls`display: flex;`;\n\n// Reads from the cache\nconst styleTag = createStyleTagFromCache(styles);\n\n// A \u003cstyle\u003e tag generated from the cache\nconsole.log(styleTag);\n// \"\u003cstyle data-dash=\\\"1ut9bc3\\\" data-cache=\\\"ui\\\"\u003e.ui-1ut9bc3{display:flex;}\u003c/style\u003e\"\n```\n\n#### Arguments\n\n```typescript\nexport function createStyleTagFromCache(\n styles = require(\"@dash-ui/styles\").styles,\n options: CreateServerStylesOptions = {}\n): string;\n```\n\n| Argument | Type | Required? | Default | Description |\n| -------- | --------------------------------------------------------- | --------- | --------------------- | --------------------- |\n| styles | `styles` | No | `styles` | A `styles` instance |\n| options | [`CreateServerStylesOptions`](#createserverstylesoptions) | No | `{clearCache: false}` | Configuration options |\n\n#### Returns\n\n```typescript\nstring; // A \u003cstyle\u003e tag with css generated from the cache\n```\n\n---\n\n### writeStylesFromCache()\n\nWrites a CSS to a file based on the dash `inserted` cache. This is an extremely fast\nway to generate a CSS file.\n\nNote that this function is unsafe in asynchronous render\nenvironments because multiple pages using the same cache will dirty the results. This\nmeans it will not work with Gatsby, for example.\n\n#### Example\n\n```js\nimport { styles } from \"@dash-ui/styles\";\nimport { writeStylesFromCache } from \"@dash-ui/styles/server\";\n\n// Inserts a new class for `display: flex;`\nstyles.cls`display: flex;`;\n\n// Reads from the cache\nwriteStylesFromCache(\"../public/css\", styles).then(\n ({ filename, css, names }) =\u003e {\n // The filename where the file was written\n console.log(filename);\n // \"../public/css/ui-115aj09.css\"\n\n // A CSS string generated from the cache\n console.log(css);\n // \".ui-1ut9bc3{display:flex;}\"\n\n // A list of all of the names that were in the cache\n console.log(names);\n // [\"1ut9bc3\"]\n }\n);\n```\n\n#### Arguments\n\n```typescript\nasync function writeStylesFromCache(\n outputPath = \"\",\n styles = require(\"@dash-ui/styles\").styles,\n options?: WriteStylesOptions \u0026 { clearCache?: boolean }\n): Promise\u003cWriteServerStylesResult\u003e;\n```\n\n| Argument | Type | Required? | Default | Description |\n| ---------- | ----------------------------------------------------------------------------------- | --------- | --------------------- | ----------------------------------------------------------------------------- |\n| outputPath | `string` | No | `\"\"` | An absolute or relative path dictating where you want to output the CSS file. |\n| styles | `styles` | No | `styles` | A `styles` instance |\n| options | [`WriteServerStylesOptions \u0026 CreateServerStylesOptions`](#writeserverstylesoptions) | No | `{clearCache: false}` | Configuration options |\n\n#### Returns\n\n```typescript\nexport interface WriteServerStylesResult {\n /**\n * The filename of the generated file. This is the `outputPath` joined\n * to the basename of the CSS file that was generated.\n */\n filename: string;\n /**\n * The basename of the CSS file that was generated.\n */\n name: string;\n /**\n * The output path of the CSS file excluding the basename.\n */\n path: string;\n /**\n * The CSS string that was generated and written to the output\n * file.\n */\n css: string;\n /**\n * The hash names of all of the styles that were inserted into\n * the generated CSS string.\n */\n names: string[];\n}\n```\n\n### WriteServerStylesOptions\n\n| Option | Type | Required? | Description |\n| ------ | ---------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| name | `string` | No | Use this if you want to create your own name for the CSS file. By default, this function will create a filename based on the hash of the generated CSS string and the key in Dash. |\n| hash | `(string: string) =\u003e string` | No | Use a custom hash function for creating the name of your CSS file. By default this function will use the hash function attached to your `styles` instance. |\n\n---\n\n### createStylesFromString()\n\nCreates a string of CSS based on an HTML string. This function will parse your HTML\noutput for Dash class names and pull the styles associated with them from the Dash cache.\nIt returns an object containing the hash names of all of the styles used as well as the\nCSS string.\n\nThis is a safe way to generate style strings in an asynchronous environment.\n\n#### Example\n\n```js\nimport { styles } from \"@dash-ui/styles\";\nimport { createStylesFromString } from \"@dash-ui/styles/server\";\n\n// Inserts a new class for `display: flex;`\nstyles.cls`display: flex;`;\n\n// This function will match names in the style cache against\n// class names found in your HTML string. It will create CSS\n// from the names it finds.\nconst { css, names } = createStylesFromString(\n '\u003cdiv class=\"ui-1ut9bc3\"\u003e\u003c/div\u003e',\n styles\n);\n\n// A CSS string generated from the cache\nconsole.log(css);\n// \".ui-1ut9bc3{display:flex;}\"\n\n// A list of all of the names that were in the cache\nconsole.log(names);\n// [\"1ut9bc3\"]\n```\n\n#### Arguments\n\n```typescript\nexport function createStylesFromString(\n html: string,\n styles = require(\"@dash-ui/styles\").styles\n): ServerStylesResult;\n```\n\n| Argument | Type | Required? | Default | Description |\n| -------- | -------- | --------- | -------- | ------------------- |\n| html | `string` | Yes | | An HTML string |\n| styles | `styles` | No | `styles` | A `styles` instance |\n\n#### Returns\n\n```typescript\nexport interface ServerStylesResult {\n /**\n * A CSS string containing all of the styles that were used\n */\n css: string;\n /**\n * Hash names of all of the styles used in the generated CSS\n */\n names: string[];\n}\n```\n\n---\n\n### createStyleTagFromString()\n\nCreates a `\u003cstyle\u003e` tag w/ CSS based on an HTML string. This function will parse your HTML\noutput for Dash class names and pull the styles associated with them from the Dash cache.\n\nThis is a safe way to generate `\u003cstyle\u003e` tags in an asynchronous environment.\n\n#### Example\n\n```js\nimport { styles } from \"@dash-ui/styles\";\nimport { createStyleTagFromString } from \"@dash-ui/styles/server\";\n\n// Inserts a new class for `display: flex;`\nstyles.cls`display: flex;`;\n\n// This function will match names in the style cache against\n// class names found in your HTML string. It will create a \u003cstyle\u003e\n// tag from the names it finds.\nconst styleTag = createStyleTagFromString(\n '\u003cdiv class=\"ui-1ut9bc3\"\u003e\u003c/div\u003e',\n styles\n);\n\nconsole.log(styleTag);\n// \"\u003cstyle data-dash=\\\"1ut9bc3\\\" data-cache=\\\"ui\\\"\u003e.ui-1ut9bc3{display:flex;}\u003c/style\u003e\"\n```\n\n#### Arguments\n\n```typescript\nfunction createStyleTagFromString(\n html: string,\n styles = require(\"@dash-ui/styles\").styles\n): string;\n```\n\n| Argument | Type | Required? | Default | Description |\n| -------- | -------- | --------- | -------- | ------------------- |\n| html | `string` | Yes | | An HTML string |\n| styles | `styles` | No | `styles` | A `styles` instance |\n\n#### Returns\n\n```typescript\nstring; // A \u003cstyle\u003e tag with css generated from the cache\n```\n\n---\n\n### writeStylesFromString()\n\nWrites a CSS to a file based on an HTML string. This function will parse your HTML\noutput for Dash class names and pull the styles associated with them from the Dash\ncache.\n\nThis is a safe way to generate CSS files in an asynchronous environment.\n\n#### Example\n\n```js\nimport { styles } from \"@dash-ui/styles\";\nimport { writeStylesFromString } from \"@dash-ui/styles/server\";\n\n// Inserts a new class for `display: flex;`\nstyles.cls`display: flex;`;\n\n// This function will match names in the style cache against\n// class names found in your HTML string. It will create a CSS\n// file from the names it finds.\nwriteStylesFromString(\n '\u003cdiv class=\"ui-1ut9bc3\"\u003e\u003c/div\u003e',\n \"../public/css\",\n styles\n).then(({ filename, css, names }) =\u003e {\n // The filename where the file was written\n console.log(filename);\n // \"../public/css/ui-115aj09.css\"\n\n // A CSS string generated from the cache\n console.log(css);\n // \".ui-1ut9bc3{display:flex;}\"\n\n // A list of all of the names that were in the cache\n console.log(names);\n // [\"1ut9bc3\"]\n});\n```\n\n#### Arguments\n\n```typescript\nasync function writeStylesFromString(\n html: string,\n outputPath = \"\",\n styles = require(\"@dash-ui/styles\").styles,\n options?: WriteServerStylesOptions\n): Promise\u003cWriteServerStylesResult\u003e;\n```\n\n| Argument | Type | Required? | Default | Description |\n| ---------- | ------------------------------------------------------- | --------- | -------- | ----------------------------------------------------------------------------- |\n| html | `string` | Yes | | An HTML string |\n| outputPath | `string` | No | `\"\"` | An absolute or relative path dictating where you want to output the CSS file. |\n| styles | `styles` | No | `styles` | A `styles` instance |\n| options | [`WriteServerStylesOptions`](#writeserverstylesoptions) | No | | Configuration options |\n\n#### Returns\n\n```typescript\nexport interface WriteServerStylesResult {\n /**\n * The filename of the generated file. This is the `outputPath` joined\n * to the basename of the CSS file that was generated.\n */\n filename: string;\n /**\n * The basename of the CSS file that was generated.\n */\n name: string;\n /**\n * The output path of the CSS file excluding the basename.\n */\n path: string;\n /**\n * The CSS string that was generated and written to the output\n * file.\n */\n css: string;\n /**\n * The hash names of all of the styles that were inserted into\n * the generated CSS string.\n */\n names: string[];\n}\n```\n\n---\n\n## Strongly typed tokens\n\nYou can strongly type your design tokens a couple of ways. The easiest way is to create your\nown `styles` instance with [`createStyles()`](#createstyles):\n\n[Play with this example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-strongly-typed-tokens-example-1-8e62y?file=/src/App.tsx)\n\n```typescript\nimport { createStyles } from \"@dash-ui/styles\";\n\nexport const styles = createStyles({\n // createStyles() uses these tokens to create a generic\n // for variable usage in the styles instance\n tokens: {\n color: {\n // var(--color-red)\n red: \"#c17\",\n },\n },\n});\n\nstyles.one(({ color }) =\u003e ({\n // Will autocomplete and pass type checking\n color: color.red,\n // bgRed is not in our `tokens` and this will fail\n // type checking\n backgroundColor: color.bgRed,\n}));\n```\n\nYou can also strongly type your design tokens using a module declaration:\n\n[Play with this example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-strongly-typed-tokens-example-2-yk9bc?file=/src/App.tsx)\n\n```typescript\nconst tokens = {\n color: {\n red: \"#c17\",\n },\n};\n\ntype AppTokens = typeof tokens;\n\ndeclare module \"@dash-ui/styles\" {\n export interface DashTokens extends AppTokens {}\n}\n\n// OR alternatively\ndeclare module \"@dash-ui/styles\" {\n export interface DashTokens {\n color: {\n red: string;\n };\n }\n}\n```\n\n## Strongly typed themes\n\nYou can strongly type your CSS variable themes a couple of ways. The easiest way is to create your\nown `styles` instance with [`createStyles()`](#createstyles):\n\n[Play with the example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-strongly-typed-themes-example-1-mww3c?file=/src/App.tsx)\n\n```typescript\nimport { createStyles } from \"@dash-ui/styles\";\n\nexport const styles = createStyles({\n // createStyles() uses these themes to create a generic\n // for variable and theme usage in the styles instance\n themes: {\n light: {\n color: {\n // var(--color-bg)\n bg: \"#fafafa\",\n },\n },\n dark: {\n color: {\n // var(--color-bg)\n bg: \"#1a1a1a\",\n },\n },\n },\n});\n\nstyles.one(({ color }) =\u003e ({\n // Will autocomplete and pass type checking\n backgroundColor: color.bg,\n // \"red\" is not in our `themes` and this will fail\n // type checking\n color: color.red,\n}));\n\n// Likewise, this will pass typechecking\nstyles.theme(\"dark\");\n\n// This will not\nstyles.theme(\"whoami\");\n```\n\nYou can also strongly type your CSS variable themes using a module declaration:\n\n[Play with the example on **CodeSandbox**](https://codesandbox.io/s/dash-uistyles-strongly-typed-themes-example-2-64me1?file=/src/App.tsx)\n\n```typescript\nconst themes = {\n light: {\n color: {\n // var(--color-bg)\n bg: \"#fafafa\",\n },\n },\n dark: {\n color: {\n // var(--color-bg)\n bg: \"#1a1a1a\",\n },\n },\n};\n\ntype AppThemes = typeof themes;\ntype AppTokens = AppThemes[\"dark\"] \u0026 AppThemes[\"light\"];\n\ndeclare module \"@dash-ui/styles\" {\n export interface DashTokens extends AppTokens {}\n export interface DashThemes extends AppThemes {}\n}\n\n// OR alternatively\ndeclare module \"@dash-ui/styles\" {\n export interface DashTokens {\n color: {\n bg: string;\n };\n }\n\n export interface DashThemes {\n light: DashTokens;\n dark: DashTokens;\n }\n}\n```\n\n---\n\n## Acknowledgements\n\nThis library was heavily inspired by the original [Emotion](https://github.com/emotion-js) and fellow\nColoradan [Kye Hohenberger](https://twitter.com/kyehohenberger).\n\nI am grateful to have had that base, however, the implementations of the libraries have diverged\nquite a bit by now.\n\n---\n\n![wait its all functions? always has been](https://i.imgflip.com/5mvok2.jpg)\n\n## LICENSE\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdash-ui%2Fstyles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdash-ui%2Fstyles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdash-ui%2Fstyles/lists"}