Minimal, future-proof native CSS variables (CSS Custom Properties) framework in :root designed with the following features:
- Minimal variables defined: colors, typography, and layout helpers.
- HSL colors: all colors are HSL-based for more straightforward manipulation (before we have CSS Color Module Level 4 in hands).
- Easy to migrate: no magic variables for flex, or grid layout. You can continue to use your existing layout system.
- Flexible to extend: all variables can be overridden later in
:rootor in specific scopes. - Dark mode ready: extend your existing app with
prefers-color-scheme: dark, tweak colors with HSL, and you're ready to go.
<!-- Stable -->
<link rel="stylesheet" href="https://unpkg.com/kladenets">
<!-- Latest -->
<link rel="stylesheet" href="https://unpkg.com/kladenets@next"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kladenets/kladenets.css">pnpm add kladenets
yarn add kladenets
npm i -S kladenetsSee app.css for example.
@import '~kladenets';
body {
color: var(--text-color);
}import 'kladenets'
// styled-components example
const Component = styled.div`
color: var(--text-color);
`MIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent