{"id":17963028,"url":"https://github.com/sparanoid/kladenets","last_synced_at":"2025-05-05T03:41:38.961Z","repository":{"id":37856983,"uuid":"176708431","full_name":"sparanoid/kladenets","owner":"sparanoid","description":"Future-proof native CSS variables in :root","archived":false,"fork":false,"pushed_at":"2025-01-30T18:14:36.000Z","size":869,"stargazers_count":28,"open_issues_count":16,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-24T06:06:54.099Z","etag":null,"topics":["css","css-variables"],"latest_commit_sha":null,"homepage":"https://sparanoid.com/lab/kladenets/","language":"HTML","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/sparanoid.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}},"created_at":"2019-03-20T10:22:17.000Z","updated_at":"2024-06-09T14:45:39.000Z","dependencies_parsed_at":"2023-02-15T06:01:47.007Z","dependency_job_id":"991b3177-249c-4580-9f3d-47385f92b8eb","html_url":"https://github.com/sparanoid/kladenets","commit_stats":{"total_commits":124,"total_committers":4,"mean_commits":31.0,"dds":"0.16129032258064513","last_synced_commit":"86b0b42fc1e39423210597e3deca3ede11780a58"},"previous_names":["sparanoid/root-variables"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparanoid%2Fkladenets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparanoid%2Fkladenets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparanoid%2Fkladenets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparanoid%2Fkladenets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sparanoid","download_url":"https://codeload.github.com/sparanoid/kladenets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252436207,"owners_count":21747466,"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","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-variables"],"created_at":"2024-10-29T11:22:54.940Z","updated_at":"2025-05-05T03:41:38.934Z","avatar_url":"https://github.com/sparanoid.png","language":"HTML","readme":"# Kladenets (aka. Root Variables)\n\n[![Test \u0026 Build](https://github.com/sparanoid/kladenets/actions/workflows/test.yml/badge.svg)](https://github.com/sparanoid/kladenets/actions/workflows/test.yml)\n[![npm version](https://img.shields.io/npm/v/kladenets.svg?style=flat)](https://www.npmjs.com/package/kladenets)\n[![Chromatic visual testing](https://shields.io/badge/visual_testing-chromatic-orange?logo=chromatic\u0026style=flat)](https://chromatic.com/library?appId=60f5c0ae4a7e3f003ba05641\u0026branch=master)\n[![Online Storybook](https://shields.io/badge/storybook-branch:_master-ff4785?logo=storybook\u0026style=flat)](https://master--60f5c0ae4a7e3f003ba05641.chromatic.com)\n\nMinimal, future-proof native CSS variables (CSS Custom Properties) framework in `:root` designed with the following features:\n\n- Minimal variables defined: colors, typography, and layout helpers.\n- HSL colors: all colors are HSL-based for more straightforward manipulation (before we have [CSS Color Module Level 4](https://drafts.csswg.org/css-color/) in hands).\n- Easy to migrate: no *magic* variables for flex, or grid layout. You can continue to use your existing layout system.\n- Flexible to extend: all variables can be overridden later in `:root` or in specific scopes.\n- Dark mode ready: extend your existing app with `prefers-color-scheme: dark`, tweak colors with HSL, and you're ready to go.\n\n## Installation\n\n### unpkg\n\n```html\n\u003c!-- Stable --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/kladenets\"\u003e\n\n\u003c!-- Latest --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/kladenets@next\"\u003e\n```\n\n### jsDelivr\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/kladenets/kladenets.css\"\u003e\n```\n\n### Package Manager\n\n```shell\npnpm add kladenets\nyarn add kladenets\nnpm i -S kladenets\n```\n\n## Usage\n\n### Direct CSS\n\nSee `app.css` for example.\n\n### Import `node_modules` in Webpack\n\n```css\n@import '~kladenets';\n\nbody {\n  color: var(--text-color);\n}\n```\n\n### Import in JavaScript\n\n```js\nimport 'kladenets'\n\n// styled-components example\nconst Component = styled.div`\n  color: var(--text-color);\n`\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsparanoid%2Fkladenets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsparanoid%2Fkladenets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsparanoid%2Fkladenets/lists"}