CSS Variables
You can override a variety of design system tokens provided by the Willamette theme, as well as the underlying Web Awesome framework.
Global Tokens #
| Variable | Value | Description |
|---|---|---|
--wll-color-brand |
oklch(0.6117 0.1606 165.28) |
The primary color which informs the entire scheme |
--wll-body-background |
--wa-color-brand-fill-quiet--wa-color-surface-default |
The color of the overall page background (including header/footer) |
--wll-main-background |
--wa-color-surface-defaultcolor-mix(in display-p3, var(--wa-color-brand-05), var(--wa-color-neutral-05) 60%) |
The color of the main content region of the page |
--wll-color-metadata |
color-mix(in display-p3, var(--wa-color-neutral-50), var(--wll-color-brand) 15%) |
A faded text color used for secondary information (like blog post date) |
--wll-color-glow-shadow |
--wa-color-brand-95--wa-color-brand-05 |
A color used to add a glow effect around the edge of certain components like post cards |
--wll-layout-padding |
--wa-space-l |
The spacing used within various layout regions |
--wll-layout-padding-large |
--wa-space-2xl |
The spacing for the main region on large screens (1100px+) |
--wll-desktop-font-scaling |
calc(55% + .75vw); |
A responsive base font size for a large screen size range |
--wll-font-weight-major-heading |
400 |
Used by page titles (<h1>) |
Customized Web Awesome Tokens #
Willamette overrides a handful of design system tokens provided by the Web Awesome framework.
| Variable | Value | Description |
|---|---|---|
--wa-font-family-body |
"Reddit Sans", ui-sans-serif, system-ui, sans-serif |
The main font used for all text content |
--wa-font-family-longform |
"Bagnard Serif", ui-serif, serif |
The font used for certain headings and prose content |
--wa-font-family-code |
"JetBrains Mono", ui-monospace, monospace |
The font used for code blocks |
--wa-font-weight-heading |
800 |
Headings font weight (other than page titles aka <h1>) |
--wa-color-surface-default |
color-mix(in display-p3, var(--wa-color-brand-10), var(--wa-color-neutral-05) 60%) |
Used to provide the page background color |
--wa-color-brand-fill-quiet |
--wa-color-surface-default |
There are many other tokens you can customize yourself to alter parts of the theme. See the Web Awesome design tokens documentation for more details.
Component-Scoped Tokens #
Another category of tokens are at the level of specific components on the page, the header for example. You’ll need to use a specific CSS selector in order to target one and override the variables.
body #
| Variable | Value | Description |
|---|---|---|
--header-block-padding |
calc(var(--layout-padding) / 1.5) calc(var(--layout-padding) / 3) |
The vertical space around the header / navbar |
--sidebar-start-min-inline-size |
calc(var(--wa-space-scale) * 15rem) |
|
--sidebar-start-max-inline-size |
calc(var(--wa-space-scale) * 28rem) |
|
--sidebar-end-min-inline-size |
calc(var(–wa-space-scale) * 15rem) | |
--sidebar-end-max-inline-size |
calc(var(–wa-space-scale) * 25rem) |
body > header #
| Variable | Value | Description |
|---|---|---|
--navbar-gap |
var(--wa-space-m) |
|
--logo-gap |
var(--wa-space-xs) |
|
--logo-height |
55px |
|
--logo-height-large |
75px |
|
--logo-width |
27vw |
|
--logo-font-family |
var(--wa-font-family-longform) |
|
--logo-font-weight |
var(--wll-font-weight-major-heading) |
|
--logo-font-size |
var(--wa-font-size-l) |