Incomplete reference for Willemstad's CSS custom properties, useful for developers and advanced customisation.
## Core Colour System
### Base Colours
```css
/* Background colours */
--background-primary: /* Main background */
--background-primary-alt: /* Slightly different shade */
--background-secondary: /* Sidebar backgrounds */
--background-secondary-alt: /* Alternate sidebar shade */
/* Text colours */
--text-normal: /* Primary text colour */
--text-muted: /* Secondary text colour */
--text-faint: /* Least prominent text */
--text-on-accent: /* Text on coloured backgrounds */
```
### Accent System
```css
/* Three-tier accent system */
--color-accent: /* Primary interactive colour */
--color-accent-1: /* Secondary accent colour */
--color-accent-2: /* Tertiary accent colour */
/* Note! In Obsidian, accent -> accent-1 -> accent-2 goes from dark to light */
/* Accent variations */
--color-accent-hover: /* Hover states */
--color-accent-active: /* Active states */
```
### Rainbow Colours
```css
/* Standard colour palette */
--color-red: /* Error, delete, urgent */
--color-orange: /* Warning, attention */
--color-yellow: /* Caution, highlight */
--color-green: /* Success, create, positive */
--color-cyan: /* Information, neutral */
--color-blue: /* Links, primary actions */
--color-purple: /* Special, creative */
--color-pink: /* Secondary, decorative */
```
## Typography Variables
### Font Families
```css
/* Typeface definitions */
--font-text: /* Main body text */
--font-text-theme: /* Theme-specific body text */
--font-interface: /* UI elements */
--font-interface-theme: /* Theme-specific UI */
--font-monospace: /* Code and technical text */
--font-monospace-theme: /* Theme-specific monospace */
/* Specific context fonts */
--font-heading: /* Header text */
--font-editor: /* Editor content */
--font-menu: /* Menu text */
--font-ui: /* General UI text */
--font-mermaid: /* Mermaid diagram text */
/* Mobile variants */
--font-editor-m: /* Mobile editor */
--font-menu-m: /* Mobile menus */
--font-ui-m: /* Mobile UI */
```
### Font Sizing
```css
/* Header sizes */
--h1-size: /* Largest heading */
--h2-size: /* Second level heading */
--h3-size: /* Third level heading */
--h4-size: /* Fourth level heading */
--h5-size: /* Fifth level heading */
--h6-size: /* Smallest heading */
/* Body text sizing */
--font-size-normal: /* Standard text size */
--font-size-small: /* Smaller text */
--font-size-smaller: /* Smallest text */
```
## Layout & Spacing
### Border Radius
```css
--radius-s: /* Small radius */
--radius-m: /* Medium radius */
--radius-l: /* Large radius */
--radius-xl: /* Extra large radius */
/* Theme-specific radius */
--shape-roundish: /* Customisable border radius */
```
### Spacing System
```css
/* Margin values */
--margin-callout: /* Callout spacing */
--header-margin: /* Header element margins */
--header-padding: /* Header element padding */
/* Icon and interface spacing */
--sidebar-icon-size: /* Sidebar toggle button icons */
--header-icon-size: /* Header button icons */
--tab-icon-size: /* Tab button icons */
--hover-frac: /* Hover animation scale factor */
```
### Layout Dimensions
```css
/* Line length controls */
--width-vll: /* Variable line length */
--file-line-width: /* Editor line width */
/* Interface element sizes */
--ribbon-width: /* Sidebar ribbon width */
--status-bar-width: /* Status bar dimensions */
```
## Visual Effects
### Blur & Transparency
```css
/* Blur values */
--blur-1: /* Minimal blur */
--blur-2: /* Light blur */
--blur-4: /* Medium blur */
--blur-8: /* Heavy blur */
/* Backdrop filters */
--blur-floating-ribbon: /* Floating ribbon blur */
--status-bar-glass-blur: /* Status bar glass effect */
```
### Shadows & Depth
```css
/* Shadow system */
--shadow-s: /* Small shadow */
--shadow-m: /* Medium shadow */
--shadow-l: /* Large shadow */
/* Theme shadow controls */
--yes-shadows: /* Enable/disable shadows */
```
## Component-Specific Variables
### Headers
```css
/* Header colours */
--col-accent-custom-headers-0: /* H1 colour */
--col-accent-custom-headers-1: /* H2 colour */
--col-accent-custom-headers-2: /* H3 colour */
--col-accent-custom-headers-0B: /* H4 colour */
--col-accent-custom-headers-1B: /* H5 colour */
--col-accent-custom-headers-2B: /* H6 colour */
/* Header text colours */
--col-custom-headers-H1: /* H1 text colour */
--col-custom-headers-H2: /* H2 text colour */
--col-custom-headers-H3: /* H3 text colour */
--col-custom-headers-H4: /* H4 text colour */
--col-custom-headers-H5: /* H5 text colour */
--col-custom-headers-H6: /* H6 text colour */
/* Header styling */
--header-hex-size: /* Hash symbol size */
--col-header-hex: /* Hash symbol colour */
```
### Highlighting
```css
/* Highlight colours */
--col-highlight-text: /* Highlighted text colour */
--col-highlight-0: /* Default highlight (==) */
--col-highlight-1: /* Italic + highlight (*==) */
--col-highlight-2: /* Bold + highlight (**==) */
--col-highlight-3: /* Bold + italic + highlight (***==) */
```
### Callouts
```css
/* Infobox sizing */
--infobox-title-font-size: /* Title size */
--infobox-max-width: /* Maximum width */
--infobox-set-width: /* Ideal width */
/* Aside positioning */
--aside-text-align: /* Text alignment */
--aside-float: /* Float direction */
--aside-infobox-float: /* HTML infobox float */
/* Column spacing */
--callout-columns-margin-top: /* Column spacing */
```
### Status Bar
```css
/* Status bar layout */
--status-bar-full-justify-content: /* Content alignment */
--status-bar-bottom-float-margin: /* Float distance */
--status-bar-max-width: /* Maximum width */
--status-bar-glass-blur: /* Glass effect blur */
```
### Tables
```css
/* Table appearance */
--table-header-background: /* Header background */
--table-row-even-background: /* Even row colour */
--table-row-odd-background: /* Odd row colour */
--table-border-color: /* Border colour */
```
## Modal & Interface
### Modal Sizing
```css
/* Modal dimensions */
--modal-width-settings: /* Settings modal width */
--modal-width-community-plugin: /* Plugin store width */
--modal-width-community-theme: /* Theme store width */
--modal-width-publish: /* Publish modal width */
--modal-height-settings: /* Settings modal height */
--modal-height-community-plugin: /* Plugin store height */
--modal-height-community-theme: /* Theme store height */
--modal-height-publish: /* Publish modal height */
```
### Titlebar
```css
/* Titlebar styling */
--col-titlebar-accent: /* Titlebar accent colour */
--startup-obsidian-image: /* Startup icon */
```
### Tabs
```css
/* Tab styling */
--tab-stacked-text-transform: /* Stacked tab rotation */
--tab-stacked-text-align: /* Stacked tab alignment */
--file-header-justify: /* File header alignment */
```
## Plugin-Specific Variables
### Calendar
```css
--color-text-today: /* Today's date colour */
--PComm001-col-year: /* Year display colour */
```
### Kanban
```css
/* Kanban layout */
--PComm002-sp-maxheight: /* Side pane max height */
--PComm002-wp-maxheight: /* Workspace max height */
/* Canvas background */
--PComm002-CB-bg-colour: /* Background colour */
--PComm002-CB-dot-colour: /* Dot colour */
--PComm002-CB-dot-size: /* Dot size */
--PComm002-CB-dot-spacing: /* Dot spacing */
```
### Advanced Tables
```css
--PComm007-toolbar-justification: /* Toolbar alignment */
--PComm007-toolbar-title-justification: /* Title alignment */
```