Kladenets.
Minimal, future-proof CSS variables framework in :root by Sparanoid.
Future-proof native CSS variables (CSS Custom Properties) in :root. View documentation at GitHub. You can also inspect elements in your web browser or view page source to see how it works.
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 :root or 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.
Color Demos
Base: Blue
Base: Indigo
Base: Purple
Base: Pink
Base: Red
Base: Orange
Base: Yellow
Base: Green
Base: Teal
Base: Cyan
Variant: Text Color
Variant: Link Color
Variant: Background Color
With a darker background to demostrate the --bg-color, inspect them in your browser.
Variant: Code Color
This color, is inverted based on --link-color. Inspect it in your browser at the <html> node to see how it works.
Buttons Demos (based on Kladenets)
Bootstrap-like buttons. All color schemes are tweaked dynamically based on primary color provided by Kladenets. At the moment, CSS doesn’t support “nesting” varaible override, so you have to define all variables you need to use in that scope.