Design tokens / Dark mode

[techniq]

Use CSS variables and/or extend Tailwind color palette to easily support dark mode, and provide more flexibility for styling customization beyond accent color and theme support (per-component classes)

Design token comparison spreadsheet

---

Thoughts / Questions

• What to call text/content on a color?
  • COLOR-content (daisy), COLOR-foreground (shadcn), on-COLOR (skeleton), COLOR-text (~open props)
• What to call main background?
  • base-100 (daisy), background (shadcn)
• What to call main text color
  • base-content (daisy), foreground (shadcn), font-color-base (skeleton), text-1 (open props)
• What color space to use (hsl, rgb, oklch)?
  • rgb()
    • Most universal, used by Tailwind, Skeleton
  • hsl()
    • Probably the most developer friendly ATM
    • Used by shadcn
  • oklch()
    • Only supported in last 1-2 years (Safari 15.4+).
    • Supports P3 colors
    • Used by Daisy UI
• Additional properties like general borders, roundness, etc
• Should use explicit colors (most) or shades (skeleton, next-ui)
  • Shades support nice pairings (skeleton) but explicit are easier to setup (and more generally used)
  • Shades allow for darker shades without having to use color-mix(), which only has support this year (Safari 16.2, Chrome 111)
• Ability to reuse themes
• Should hovered filled buttons get more transparent, lighter, darker?
  • Currently getting darker
  • Using color-mix() works for any of these, but only supported in last 8-12 months? Progressive enhancement, or find way to fallback to using opacity
    • Tailwind @supports via arbitrary variant - [@supports(display:grid)]:grid
• Should each component expose their own colors (like Button for --bg-color, --text-color, --border-color, etc) or is setting --ux-primary / --ux-primary-content sufficient
  • Would be a descent lift, but maybe worth it
  • Some components already expose CSS variables for styling (ProgressBar as --color, Field/TextField). Switch current uses explicit bg-*, border-* but might be worth changing
• When should we use primary, secondary, accent, neutral, etc? Always primary unless explicit?

---

TODO

• Determine tokens (colors, borders, etc)
• Update all components to use tokens
• Add dark mode (and maybe other themes)
• Ability to switch themes
  • https://github.com/saadeghi/theme-change
  • https://github.com/huntabyte/mode-watcher
  • https://www.skeleton.dev/utilities/lightswitches
  • https://flowbite.com/docs/customize/dark-mode/#dark-mode-switcher
  • Extract Theme selector as component (to be used in other projects)
• Consider renaming current settings: {{ theme: ... }} to classes or overrides
• Support defining theme in tailwind config
  • daisy ui example
• Add examples for mappings existing themes
  • Daisy UI
  • Skeleton
  • Basic tailwind colors
• Debate on using bg-mix-[theme(colors.primary)/+90] instead of bg-primary-50 (and +80 / -100)
  • Added lighter/darker shades for all theme colors (ex. colors.primary-600)
• Support changing color space (oklch, hsl, rgb)
• Remove usage of old CSS variables var(--color-blue-100), etc (tableBackground, etc)
• Color replacement
  • Replace bg-white with bg-surface-100 (or similar)
  • Replace text-black with text-surface-content (or similar)
  • Replace bg-black (and bg-black/5, bg-black/50, etc) possibly with bg-surface-content
  • Replace border-* colors
  • Replace *-black-*
  • Replace *-white-*
  • Replace *-gray-*
  • Replace #ddd
  • All old color references (look for -500, etc). Example: Table's var(--color-blue-500)
• Globally change the default border color to border-surface-300
• Rename --ux-{COLOR} to --color-{COLOR} (after current --color* variables are evaluated
• Add more colors
  • accent
  • neutral
• Rename error color to danger
• Add borders (and other styles) to config
• Refine/remove default Drawer/Dialog action styles
• Update mdsvex code background (like <Code>/<Preview>)
• Fix tailwind prose classes (markdown pages)
• Consider setting <input> default background with global styles (same for scrollbars - Scrollbar styling (globally or util class) #122)
• Improve handling of system color scheme / theme in ThemeButton
• Remove daisyui required dependency (see LayerChart issue)
  • Possible become separate package
  • Maybe just generate theme.json file that can be easily referenced
• Add default light / dark themes
• Update templates
• Update Customization guide

[techniq]

Open Props (https://open-props.style/#colors)

--brand: var(--brand-dark);
--text-1: var(--text-1-dark);
--text-2: var(--text-2-dark);
--surface-1: var(--surface-1-dark);
--surface-2: var(--surface-2-dark);
--surface-3: var(--surface-3-dark);
--surface-4: var(--surface-4-dark);
--shadow-{1-6}
--inner-shadow-{0-4}
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
--font-size-{00-8}
--font-size-fluid-{0-3}
--font-weight-{1-9}
--font-letterspacing-{0-7}
--font-lineheight-{00-5}

shadcn/ui (https://ui.shadcn.com/docs/theming)

 /* Default background color of <body />...etc */
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;

/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

/* Background color for <Card /> */
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;

/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;

/* Default border color */
--border: 214.3 31.8% 91.4%;

/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 214.3 31.8% 91.4%;

/* Primary colors for <Button /> */
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

/* Secondary colors for <Button /> */
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

/* Used for destructive actions such as <Button variant="destructive"> */
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;

/* Used for focus ring */
--ring: 215 20.2% 65.1%;

/* Border radius for card, input and buttons */
--radius: 0.5rem;

Daisy UI (https://daisyui.com/docs/colors/)

primary
Primary color	required	Class name: bg-primary
CSS variable: hsl(var(--p))

primary-focus
Primary color when focused	optional
Will be a darker tone of primary if not specified	Class name: bg-primary-focus
CSS variable: hsl(var(--pf))

primary-content
Foreground content color to use on primary color	optional
Will be a readable tone of primary if not specified	Class name: bg-primary-content
CSS variable: hsl(var(--pc))

secondary
Secondary color	required	Class name: bg-secondary
CSS variable: hsl(var(--s))

secondary-focus
Secondary color when focused	optional
Will be a darker tone of secondary if not specified	Class name: bg-secondary-focus
CSS variable: hsl(var(--sf))

secondary-content
Foreground content color to use on secondary color	optional
Will be a readable tone of secondary if not specified	Class name: bg-secondary-content
CSS variable: hsl(var(--sc))

accent
Accent color	required	Class name: bg-accent
CSS variable: hsl(var(--a))

accent-focus
Accent color when focused	optional
Will be a darker tone of accent if not specified	Class name: bg-accent-focus
CSS variable: hsl(var(--af))

accent-content
Foreground content color to use on accent color	optional
Will be a readable tone of accent if not specified	Class name: bg-accent-content
CSS variable: hsl(var(--ac))

neutral
Neutral color	required	Class name: bg-neutral
CSS variable: hsl(var(--n))

neutral-focus
Neutral color when focused	optional
Will be a darker tone of neutral if not specified	Class name: bg-neutral-focus
CSS variable: hsl(var(--nf))

neutral-content
Foreground content color to use on neutral color	optional
Will be a readable tone of neutral if not specified	Class name: bg-neutral-content
CSS variable: hsl(var(--nc))

base-100
Base color of page, used for blank backgrounds	required	Class name: bg-base-100
CSS variable: hsl(var(--b1))

base-200
Base color, a little darker	optional
Will be a darker tone of base-100 if not specified	Class name: bg-base-200
CSS variable: hsl(var(--b2))

base-300
Base color, even more darker	optional
Will be a darker tone of base-200 if not specified	Class name: bg-base-300
CSS variable: hsl(var(--b3))

base-content
Foreground content color to use on base color	optional
Will be a readable tone of base-100 if not specified	Class name: bg-base-content
CSS variable: hsl(var(--bc))

info
Info color	optional
Will be a default blue color if not specified	Class name: bg-info
CSS variable: hsl(var(--in))

info-content
Foreground content color to use on info color	optional
Will be a readable tone of info if not specified	Class name: bg-info-content
CSS variable: hsl(var(--inc))

success
Success color	optional
Will be a default green color if not specified	Class name: bg-success
CSS variable: hsl(var(--su))

success-content
Foreground content color to use on success color	optional
Will be a readable tone of success if not specified	Class name: bg-success-content
CSS variable: hsl(var(--suc))

warning
Warning color	optional
Will be a default orange color if not specified	Class name: bg-warning
CSS variable: hsl(var(--wa))

warning-content
Foreground content color to use on warning color	optional
Will be a readable tone of warning if not specified	Class name: bg-warning-content
CSS variable: hsl(var(--wac))

error
Error color	optional
Will be a default red color if not specified	Class name: bg-error
CSS variable: hsl(var(--er))

error-content
Foreground content color to use on error color	optional
Will be a readable tone of error if not specified	Class name: bg-error-content
CSS variable: hsl(var(--erc))

React Aria

--border-color: var(--spectrum-alias-border-color);
--border-color-pressed: var(--spectrum-alias-border-color-down);
--border-color-disabled: var(--spectrum-alias-border-color-disabled);
--background-color: var(--spectrum-global-color-gray-50);
--background-color-pressed: var(--spectrum-global-color-gray-100);
--text-color: var(--spectrum-alias-text-color);
--text-color-disabled: var(--spectrum-alias-text-color-disabled);
--focus-ring-color: slateblue;

Skeleton

--theme-font-family-base: system-ui;
--theme-font-family-heading: system-ui;
--theme-font-color-base: 0 0 0;
--theme-font-color-dark: 255 255 255;
--theme-rounded-base: 9999px;
--theme-rounded-container: 8px;
--theme-border-base: 1px;
--on-primary: 0 0 0;
--on-secondary: 255 255 255;
--on-tertiary: 0 0 0;
--on-success: 0 0 0;
--on-warning: 0 0 0;
--on-error: 255 255 255;
--on-surface: 255 255 255;
--color-primary-50: 219 245 236;
--color-primary-100: 207 241 230;
--color-primary-200: 195 238 224;
--color-primary-300: 159 227 205;
--color-primary-400: 87 207 167;
--color-primary-500: 15 186 129;
--color-primary-600: 14 167 116;
--color-primary-700: 11 140 97;
--color-primary-800: 9 112 77;
--color-primary-900: 7 91 63;
--color-secondary-50: 229 227 251;
--color-secondary-100: 220 218 250;
--color-secondary-200: 211 209 249;
--color-secondary-300: 185 181 245;
--color-secondary-400: 132 126 237;
--color-secondary-500: 79 70 229;
--color-secondary-600: 71 63 206;
--color-secondary-700: 59 53 172;
--color-secondary-800: 47 42 137;
--color-secondary-900: 39 34 112;
--color-tertiary-50: 219 242 252;
--color-tertiary-100: 207 237 251;
--color-tertiary-200: 195 233 250;
--color-tertiary-300: 159 219 246;
--color-tertiary-400: 86 192 240;
--color-tertiary-500: 14 165 233;
--color-tertiary-600: 13 149 210;
--color-tertiary-700: 11 124 175;
--color-tertiary-800: 8 99 140;
--color-tertiary-900: 7 81 114;
--color-success-50: 237 247 220;
--color-success-100: 230 245 208;
--color-success-200: 224 242 197;
--color-success-300: 206 235 162;
--color-success-400: 169 219 92;
--color-success-500: 132 204 22;
--color-success-600: 119 184 20;
--color-success-700: 99 153 17;
--color-success-800: 79 122 13;
--color-success-900: 65 100 11;
--color-warning-50: 252 244 218;
--color-warning-100: 251 240 206;
--color-warning-200: 250 236 193;
--color-warning-300: 247 225 156;
--color-warning-400: 240 202 82;
--color-warning-500: 234 179 8;
--color-warning-600: 211 161 7;
--color-warning-700: 176 134 6;
--color-warning-800: 140 107 5;
--color-warning-900: 115 88 4;
--color-error-50: 249 221 234;
--color-error-100: 246 209 228;
--color-error-200: 244 198 221;
--color-error-300: 238 163 200;
--color-error-400: 225 94 159;
--color-error-500: 212 25 118;
--color-error-600: 191 23 106;
--color-error-700: 159 19 89;
--color-error-800: 127 15 71;
--color-error-900: 104 12 58;
--color-surface-50: 228 230 238;
--color-surface-100: 219 222 233;
--color-surface-200: 210 214 227;
--color-surface-300: 182 189 210;
--color-surface-400: 128 140 177;
--color-surface-500: 73 90 143;
--color-surface-600: 66 81 129;
--color-surface-700: 55 68 107;
--color-surface-800: 44 54 86;
--color-surface-900: 36 44 70;

[techniq]

• Skeleton UI
  • https://www.skeleton.dev/docs/colors
  • https://www.skeleton.dev/docs/tokens
  • Multiple shades per color
    • --color-primary-{50-900}
    • --color-secondary-{50-900}
    • --color-tertiary-{50-900}
    • --color-success-{50-900}
    • --color-warning-{50-900}
    • --color-error-{50-900}
    • --color-surface-{50-900}
    • --theme-border-base
    • --theme-rounded-container
    • --theme-rounded-base
    • --theme-font-color-base
    • --theme-font-color-dark
    • --theme-font-family-base
    • --theme-font-family-heading
    • --on-{color}
• shadcn/ui
  • https://ui.shadcn.com/docs/theming
  • Colors
    • --primary{-foreground}
    • --secondary{-foreground}
    • --accent{-foreground}
    • --muted{-foreground}
    • --destructive{-foreground}
    • --popover{-foreground}
    • --card{-foreground}
  • --input
  • --border
  • --radius
  • --ring
• Open props
  • https://open-props.style/#colors
  • Color schemes
  • Light / Dark button example
  • Adaptive Ghost buttons example
  • Pagination example
  • Normalized demo page
  • --brand
  • --text-{1-2}
  • --surface-{1-4}
  • --shadow-{1-6}
  • --inner-shadow-{0-4}
  • --surface-shadow
  • --shadow-stregth
  • --font-size-{0-8}
  • --font-size-fluid-{0-3}
  • --font-weight-{1-9}
  • --font-letterspacing-{0-7}
  • --font-lineheight-{0-5}
• Daisy UI
  • https://daisyui.com/docs/colors/
  • --primary{-content}
  • --secondary{-content}
  • --accent{-content}
  • --neutral{-content}
  • --info{-content}
  • --success{-content}
  • --warning{-content}
  • --error{-content}
  • --base-{100-300,content}
• tremor
  • https://www.tremor.so/docs/getting-started/theming
  • --brand{-faint,muted,subtle,DEFAULT,emphasis,inverted}
  • --background{-muted,subtle,DEFAULT,emphasis}
  • --border
  • --ring
  • --content{-subtle,DEFAULT,emphasis,strong,inverted}
• Next UI
  • https://nextui.org/docs/customization/theme
  • HSL
  • base
  • --foreground{-50-900}
  • --background{-50-900}
  • --divider{-50-900}
  • --overlay{-50-900}
  • --focus{-50-900}
  • --content1{-50-900}
  • --primary{-50-900}
  • --secondary{-50-900}
  • --success{-50-900}
  • --warning{-50-900}
  • --danger{-50-900}
  • ...
• Colors
  • https://translate-tailwind-colors.vercel.app/

[techniq]

Shipped!