{"id":23483468,"url":"https://github.com/khtdr/css-vars-design-token","last_synced_at":"2026-02-13T22:01:17.357Z","repository":{"id":257815628,"uuid":"867670239","full_name":"khtdr/css-vars-design-token","owner":"khtdr","description":"CSS Variables as Design Tokens: A Simple Approach to Design Systems","archived":false,"fork":false,"pushed_at":"2025-01-06T22:34:49.000Z","size":262,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-08T09:54:29.965Z","etag":null,"topics":["css","design-tokens","react"],"latest_commit_sha":null,"homepage":"https://khtdr.com/css-vars-design-token.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/khtdr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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,"zenodo":null}},"created_at":"2024-10-04T13:52:40.000Z","updated_at":"2025-01-06T22:34:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"04dc7c74-65a5-421b-b3e0-d1113105700f","html_url":"https://github.com/khtdr/css-vars-design-token","commit_stats":null,"previous_names":["khtdr/css-vars-design-token"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/khtdr/css-vars-design-token","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khtdr%2Fcss-vars-design-token","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khtdr%2Fcss-vars-design-token/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khtdr%2Fcss-vars-design-token/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khtdr%2Fcss-vars-design-token/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/khtdr","download_url":"https://codeload.github.com/khtdr/css-vars-design-token/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khtdr%2Fcss-vars-design-token/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29419578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T06:24:03.484Z","status":"ssl_error","status_checked_at":"2026-02-13T06:23:12.830Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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","design-tokens","react"],"created_at":"2024-12-24T21:12:04.614Z","updated_at":"2026-02-13T22:01:17.322Z","avatar_url":"https://github.com/khtdr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"- [Css-Vars Design Token Documentation](#orgb49fd11)\n  - [Introduction](#org59efcea)\n  - [Installation](#org7406b1f)\n  - [Usage](#orgfba7399)\n    - [Example 1: Simple Usage](#org4917214)\n    - [Example 2: Structured DesignToken Usage](#org2d84413)\n- [Test and code coverage reports](#org1f2e528)\n- [Development \u0026 Contributing](#org9a19d32)\n\n\n\n\u003ca id=\"orgb49fd11\"\u003e\u003c/a\u003e\n\n# Css-Vars Design Token Documentation\n\n`CssVarsDesignToken` simplifies theme management in React applications by leveraging CSS variables and providing hooks for theme selection. By following the provided guidelines, you can easily integrate design tokens and themes into your components for consistent styling.\n\n\n\u003ca id=\"org59efcea\"\u003e\u003c/a\u003e\n\n## Introduction\n\nDefine dark and light themes however you like.\n\n```javascript\nconst themes= {\n    light: {\n        color: { bg: '#fff', fg: '#333' },\n        layout: { margin: 10 }\n    },\n    dark: {\n        color: { bg: '#333', fg: '#fff' },\n        layout: { margin: 20 }\n    }\n}\n```\n\nWrap your app in a `CssVarsDesignTokenProvider`\n\n```javascript\nimport {\n    CssVarsDesignTokenProvider,\n    useCssVarsDesignTokenContext\n} from 'css-vars-design-token';\n\nconst App = () =\u003e\n    \u003cCssVarsDesignTokenProvider themes={themes}\u003e\n        \u003cComponents /\u003e\n    \u003c/CssVarsDesignTokenProvider\u003e\n\nfunction Components() {\n    const { theme, toggle } = useCssVarsDesignTokenContext();\n    return (\n        \u003cdiv\u003e\n            Current Theme: \u003cstrong\u003e{theme}\u003c/strong\u003e\n            \u003cbutton onClick={toggle}\u003eToggle Theme\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\nAnd use CSS Variables wherever you like. The object keys are flattened and converted to CSS variables.\n\n```css\nh1 {\n    color: var(--color-fg);\n    background-color: var(--color-bg);\n    margin: var(--layout-margin);\n}\n```\n\n```html\n\u003cdiv style={{ margin: \"var(--layout-margin)\" }}\u003e\n    Hello World\n\u003c/div\u003e\n```\n\n\n\u003ca id=\"org7406b1f\"\u003e\u003c/a\u003e\n\n## Installation\n\n```sh\nnpm install --save css-vars-design-token\n```\n\nTo use `CssVarsDesignToken` in your project, you need to have installed the following peer dependencies:\n\n-   `react` Any recent version will do.\n\nEnsure that you have these dependencies included in your project.\n\n\n\u003ca id=\"orgfba7399\"\u003e\u003c/a\u003e\n\n## Usage\n\n1.  ****CssVarsDesignTokenProvider****\n    -   The `CssVarsDesignTokenProvider` component is used to provide themes and design tokens to the components within its subtree.\n    -   It accepts the following props:\n        -   `themes`: An object containing theme configurations, where each key represents a theme name and the value is a DesignToken object.\n        -   `style` (optional): Additional CSS styles to apply to the root element.\n\n2.  ****useCssVarsDesignToken****\n    -   Custom hook to access design tokens from the context and to manage themes and toggle between them.\n    -   Should be used within a component wrapped by `CssVarsDesignTokenProvider`.\n\n3.  ****toCssVarsDesignToken****\n    -   Utility function to convert DesignToken objects into CSS variable format.\n\n\n\u003ca id=\"org4917214\"\u003e\u003c/a\u003e\n\n### Example 1: Simple Usage\n\nHere is a simple example demonstrating the usage of CssVarsDesignToken with basic theming:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cstyle\u003e\n      * {\n        background-color: var(--primary);\n        color: var(--secondary);\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript type=\"text/babel\"\u003e\n      function App() {\n        const { toggle } = useCssTheme();\n        return (\n          \u003cdiv\u003e\n            \u003cbutton onClick={toggle}\u003eToggle Theme\u003c/button\u003e\n          \u003c/div\u003e\n        );\n      }\n      ReactDOM.createRoot(document.getElementById('root')).render(\n        \u003cCssVarsDesignTokenProvider\n          themes={{\n            light: { primary: '#333', secondary: '#666' },\n            dark: { primary: '#fff', secondary: '#ccc' }\n          }}\n        \u003e\n          \u003cApp /\u003e\n        \u003c/CssVarsDesignTokenProvider\u003e\n      );\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n\u003ca id=\"org2d84413\"\u003e\u003c/a\u003e\n\n### Example 2: Structured DesignToken Usage\n\nHere is an example using the deeply-structured nature of the Design Token for more complex theming:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cstyle\u003e\n      body {\n        margin: var(--layout-margin);\n        background-color: var(--color-bg);\n        color: var(--color-fg);\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript type=\"text/babel\"\u003e\n      function StructuredThemeComponent() {\n        const { theme, toggle } = useCssTheme();\n        return (\n          \u003cdiv\u003e\n            \u003cp\u003eCurrent Theme: {theme}\u003c/p\u003e\n            \u003cbutton onClick={toggle}\u003eToggle Theme\u003c/button\u003e\n          \u003c/div\u003e\n        );\n      }\n      ReactDOM.createRoot(document.getElementById('root')).render(\n        \u003cCssVarsDesignTokenProvider\n          themes={{\n            light: {\n              color: { bg: '#fff', fg: '#333' },\n              layout: { margin: 10 }\n            },\n            dark: {\n              color: { bg: '#333', fg: '#fff' },\n              layout: { margin: 20 }\n            }\n          }}\n        \u003e\n          \u003cStructuredThemeComponent /\u003e\n        \u003c/CssVarsDesignTokenProvider\u003e\n      );\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n\u003ca id=\"org1f2e528\"\u003e\u003c/a\u003e\n\n# Test and code coverage reports\n\n```\n\n\u003e css-vars-design-token@1.2.0 test:coverage\n\u003e jest --coverage\n\nPASS ./test.tsx\n  Function toCssVars\n    ✓ toCssVars returns the expected flat list of css vars (1 ms)\n  React integrations\n    ✓ Computed style matches the expectation from the token (13 ms)\n    ✓ Computed style matches the other theme upon toggling (8 ms)\n\n---------------------------|---------|----------|---------|---------|-------------------\nFile                       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s \n---------------------------|---------|----------|---------|---------|-------------------\nAll files                  |   92.85 |       65 |     100 |   92.59 |                   \n css-vars-design-token.tsx |   92.85 |       65 |     100 |   92.59 | 23,30             \n---------------------------|---------|----------|---------|---------|-------------------\nTest Suites: 1 passed, 1 total\nTests:       3 passed, 3 total\nSnapshots:   0 total\nTime:        1.635 s\nRan all test suites.\n```\n\n\n\u003ca id=\"org9a19d32\"\u003e\u003c/a\u003e\n\n# Development \u0026 Contributing\n\nThere are additional dependencies for development:\n\n-   `typescript` for auto-completion and type checking.\n-   `jest` for testing.\n-   `webpack` for bundling the project.\n-   `eslint` and `prettier` for linting and formatting.\n-   `http-server` for running the demo locally.\n-   `org-mode` for generating documentation.\n\nThe following npm scripts are available for development:\n\n-   `npm test`: Run Jest for testing.\n-   `npm run build`: Build the project using Webpack in production mode.\n-   `npm run clean`: Remove the `dist` and `coverage` directories.\n-   `npm run demo`: Start a local server to view the demo at \u003chttp://localhost:8080/demo.html\u003e.\n-   `npm run lint`: Lint the project using ESLint.\n-   `npm run format`: Format the TypeScript and JSX files using Prettier.\n-   `npm run test:watch`: Watch mode for running Jest tests.\n-   `npm run test:coverage`: Run Jest with test coverage reporting.\n\nIf you want to contribute to this project, please follow these guidelines:\n\n1.  Fork the repository on [GitHub](\u003chttps://github.com/khtdr/css-vars-design-token\u003e).\n2.  Clone your forked repository locally.\n3.  Make your changes in a feature branch.\n4.  Write tests for your changes if applicable.\n5.  Update the documentation as needed.\n6.  Submit a pull request to the `main` branch.\n7.  Provide a clear description of the changes you made in your pull request.\n\nThank you for contributing to this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhtdr%2Fcss-vars-design-token","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhtdr%2Fcss-vars-design-token","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhtdr%2Fcss-vars-design-token/lists"}