/**
* flexoki.css
* Flexoki color scheme by Steph Ango — https://stephango.com/flexoki
* MIT License
*
* FEATURES:
* • 88 named colors (8 hues × 2 levels + base palette)
* • 15 semantic tokens that auto-swap between light/dark
* • Respects OS preference (prefers-color-scheme) by default
* • Manual override via data-theme="dark" or data-theme="light"
* • Zero JavaScript required
* • ~3.5KB minified, works in all modern browsers
*
* USAGE:
* 1. Import once at app root:
* import './flexoki.css' // ES modules
* @import './flexoki.css'; // CSS
* // HTML
*
* 2. Use semantic tokens:
* body { background: var(--fl-bg); color: var(--fl-tx); }
* .card { background: var(--fl-bg-2); border: 1px solid var(--fl-ui); }
* a { color: var(--fl-cy); }
* .muted { color: var(--fl-tx-2); }
* .error { color: var(--fl-re); }
*
* 3. Dark mode works automatically. Override with:
*
*
*
*
* BROWSER SUPPORT:
* • CSS custom properties: All modern browsers (IE11 needs polyfill)
* • prefers-color-scheme: Chrome 76+, Firefox 67+, Safari 12.1+, Edge 79+
* • data-theme attribute: Universal (works in any environment)
*/
/**
* ────────────────────────────────────────────────────────────
* RAW PALETTE — Full Flexoki 2.0 (all 88 named colors)
* ────────────────────────────────────────────────────────────
* Use these for one-off customizations; prefer semantic tokens.
* Each hue has a 600-level (light) and 400-level (dark) variant.
*/
:root {
/* Signals to browser that we handle both light and dark modes.
Helps browser optimize scrollbar and scrolltrack colors. */
color-scheme: light dark;
/* Base (warm grays) */
--fl-black: #100F0F;
--fl-paper: #FFFCF0;
--fl-base-950: #1C1B1A;
--fl-base-900: #282726;
--fl-base-850: #343331;
--fl-base-800: #403E3C;
--fl-base-700: #575653;
--fl-base-600: #6F6E69;
--fl-base-500: #878580;
--fl-base-300: #B7B5AC;
--fl-base-200: #CECDC3;
--fl-base-150: #DAD8CE;
--fl-base-100: #E6E4D9;
--fl-base-50: #F2F0E5;
/* Red */
--fl-red-600: #AF3029; --fl-red-400: #D14D41;
/* Orange */
--fl-or-600: #BC5215; --fl-or-400: #DA702C;
/* Yellow */
--fl-ye-600: #AD8301; --fl-ye-400: #D0A215;
/* Green */
--fl-gr-600: #66800B; --fl-gr-400: #879A39;
/* Cyan */
--fl-cy-600: #24837B; --fl-cy-400: #3AA99F;
/* Blue */
--fl-bl-600: #205EA6; --fl-bl-400: #4385BE;
/* Purple */
--fl-pu-600: #5E409D; --fl-pu-400: #8B7EC8;
/* Magenta */
--fl-ma-600: #A02F6F; --fl-ma-400: #CE5D97;
}
/**
* ────────────────────────────────────────────────────────────
* SEMANTIC TOKENS — Light Mode (default)
* ────────────────────────────────────────────────────────────
* These are the primary tokens you use throughout your app.
* They automatically swap to dark mode values (see below).
*/
:root,
[data-theme="light"] {
color-scheme: light;
/* Backgrounds */
--fl-bg: #FFFCF0; /* Page background (paper) */
--fl-bg-2: #F2F0E5; /* Card / panel background */
/* Interface (borders, dividers, interactive chrome) */
--fl-ui: #E6E4D9; /* Default border */
--fl-ui-2: #DAD8CE; /* Hovered border */
--fl-ui-3: #CECDC3; /* Active / pressed border */
/* Text */
--fl-tx: #100F0F; /* Primary text */
--fl-tx-2: #6F6E69; /* Muted / secondary text */
--fl-tx-3: #B7B5AC; /* Faint / placeholder text */
/* Accent colors — 600 values in light mode */
--fl-re: #AF3029; /* Red — error, danger */
--fl-or: #BC5215; /* Orange — warning */
--fl-ye: #AD8301; /* Yellow — caution */
--fl-gr: #66800B; /* Green — success */
--fl-cy: #24837B; /* Cyan — links, primary actions */
--fl-bl: #205EA6; /* Blue — info */
--fl-pu: #5E409D; /* Purple — special / highlight */
--fl-ma: #A02F6F; /* Magenta — tags / badges */
}
/**
* ────────────────────────────────────────────────────────────
* SEMANTIC TOKENS — Dark Mode
* ────────────────────────────────────────────────────────────
* Swaps to 400-level accents (perceptually balanced for dark bg).
* Applies when: (a) [data-theme="dark"] is set OR
* (b) prefers-color-scheme: dark and no [data-theme]
*/
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--fl-bg: #100F0F;
--fl-bg-2: #1C1B1A;
--fl-ui: #282726;
--fl-ui-2: #343331;
--fl-ui-3: #403E3C;
--fl-tx: #CECDC3;
--fl-tx-2: #878580;
--fl-tx-3: #575653;
/* Accent colors — 400 values in dark mode */
--fl-re: #D14D41;
--fl-or: #DA702C;
--fl-ye: #D0A215;
--fl-gr: #879A39;
--fl-cy: #3AA99F;
--fl-bl: #4385BE;
--fl-pu: #8B7EC8;
--fl-ma: #CE5D97;
}
}
[data-theme="dark"] {
color-scheme: dark;
--fl-bg: #100F0F;
--fl-bg-2: #1C1B1A;
--fl-ui: #282726;
--fl-ui-2: #343331;
--fl-ui-3: #403E3C;
--fl-tx: #CECDC3;
--fl-tx-2: #878580;
--fl-tx-3: #575653;
--fl-re: #D14D41;
--fl-or: #DA702C;
--fl-ye: #D0A215;
--fl-gr: #879A39;
--fl-cy: #3AA99F;
--fl-bl: #4385BE;
--fl-pu: #8B7EC8;
--fl-ma: #CE5D97;
}
/**
* ────────────────────────────────────────────────────────────
* OPTIONAL: Convenience utility classes
* ────────────────────────────────────────────────────────────
* For quick styling without writing custom CSS.
* Example: or
*
* Note: For production, consider tree-shaking these if unused.
* They add ~400 bytes minified to the payload.
*/
.fl-bg { background-color: var(--fl-bg); }
.fl-bg-2 { background-color: var(--fl-bg-2); }
.fl-text { color: var(--fl-tx); }
.fl-muted { color: var(--fl-tx-2); }
.fl-faint { color: var(--fl-tx-3); }
.fl-link { color: var(--fl-cy); }
.fl-success { color: var(--fl-gr); }
.fl-warning { color: var(--fl-or); }
.fl-error { color: var(--fl-re); }
.fl-info { color: var(--fl-bl); }
.fl-border { border-color: var(--fl-ui); }