WCP Theme Collection — Penrith Beacon® Default Collection

1. Dracula

A gothic castle silhouetted against a deep blue-charcoal night sky — the stonework is the colour of shadowed slate and the darkness inside runs a near-absolute charcoal, while from the tall arched windows hot-pink candlelight bleeds outward, an incongruously vivid warmth against the cold purple-grey dark, as though something theatrical and glamorous has taken up residence in the ancient ruin.

Author	Zeno Rocha
Author URL	https://draculatheme.com
Theme URL	https://draculatheme.com

Light WCAG 2.2:AA

UUID: d1b8afb1-0350-45b8-9319-e747854831f3

Surfaces
Background--wcp-color-bg	`#f6f7f8`
Surface--wcp-color-surface	`#e9eaf1`
Surface raised--wcp-color-surface-raised	`#dbdeea`
surface sunken--wcp-color-surface-sunken	`#f9f9fa`
overlay--wcp-color-overlay	`rgba(246,247,248,0.75)`
Borders
Border--wcp-color-border	`#7b83b4`
border strong--wcp-color-border-strong	`rgba(18,19,28,0.25)`
Text
Text--wcp-color-text	`#12131c`
Text muted--wcp-color-text-muted	`#4f5472`
text disabled--wcp-color-text-disabled	`rgba(18,19,28,0.38)`
text inverse--wcp-color-text-inverse	`#f6f7f8`
link--wcp-color-link	`#03728b`
Brand
Primary--wcp-color-primary	`#ff159b`
primary dim--wcp-color-primary-dim	`rgba(255,21,155,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#ff159b`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#e9eaf1`
widget border--wcp-widget-border	`#7b83b4`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: a72fcd01-9e3b-4a88-b14c-d9f7e2c83501

Surfaces
Background--wcp-color-bg	`#282a36`
Surface--wcp-color-surface	`#343746`
Surface raised--wcp-color-surface-raised	`#44475a`
surface sunken--wcp-color-surface-sunken	`#282a36`
overlay--wcp-color-overlay	`rgba(40,42,54,0.75)`
Borders
Border--wcp-color-border	`#7280ad`
border strong--wcp-color-border-strong	`rgba(248,248,242,0.25)`
Text
Text--wcp-color-text	`#f9f9f5`
Text muted--wcp-color-text-muted	`#95a0c1`
text disabled--wcp-color-text-disabled	`rgba(98,114,164,0.5)`
text inverse--wcp-color-text-inverse	`#282a36`
link--wcp-color-link	`#90e9fd`
Brand
Primary--wcp-color-primary	`#ff7ec8`
primary dim--wcp-color-primary-dim	`rgba(255,121,198,0.15)`
primary on--wcp-color-primary-on	`#3f3f3f`
Status
Success--wcp-color-success	`#50fa7b`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(80,250,123,0.12)`
Warning--wcp-color-warning	`#f1fa8c`
warning surface--wcp-color-warning-surface	`rgba(241,250,140,0.12)`
Danger--wcp-color-danger	`#ff5555`
danger surface--wcp-color-danger-surface	`rgba(255,85,85,0.12)`
Info--wcp-color-info	`#8be9fd`
info surface--wcp-color-info-surface	`rgba(139,233,253,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.5)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#ff79c6`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#343746`
widget border--wcp-widget-border	`#6272a4`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.5)`

High Contrast WCAG 2.2:AA

UUID: d97f287a-ebe7-4e32-8ef0-b15394412cb7

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#0385a3`
Brand
Primary--wcp-color-primary	`#b00065`
primary dim--wcp-color-primary-dim	`rgba(176,0,101,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#b00065`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

2. Nord

A frozen fjord on the Norwegian coast in late January — the water has locked to a pale ice-grey and the sky above it is a deep blue-dark that holds no warmth at all, while along the shoreline birch trunks glow almost white in the faint reflected light, and everything — ice, sky, birch, stone — exists in the same family of cold blues and silvers, as perfectly controlled and restrained as the Arctic itself.

Author	Arctic Ice Studio
Author URL	https://nordtheme.com
Theme URL	https://nordtheme.com

Light WCAG 2.2:AA

UUID: 55c5589b-091e-4e8d-b120-3ab2f1f1edaa

Surfaces
Background--wcp-color-bg	`#f6f7f8`
Surface--wcp-color-surface	`#e9ecf1`
Surface raised--wcp-color-surface-raised	`#dbe0eb`
surface sunken--wcp-color-surface-sunken	`#f9fafb`
overlay--wcp-color-overlay	`rgba(246,247,248,0.75)`
Borders
Border--wcp-color-border	`#7387b0`
border strong--wcp-color-border-strong	`rgba(17,21,29,0.25)`
Text
Text--wcp-color-text	`#11151d`
Text muted--wcp-color-text-muted	`#4f5b72`
text disabled--wcp-color-text-disabled	`rgba(17,21,29,0.38)`
text inverse--wcp-color-text-inverse	`#f6f7f8`
link--wcp-color-link	`#486d92`
Brand
Primary--wcp-color-primary	`#4290a7`
primary dim--wcp-color-primary-dim	`rgba(66,144,167,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#4290a7`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#e9ecf1`
widget border--wcp-widget-border	`#7387b0`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: 6b5bd0ad-39ac-4bcd-8a04-54959b39bef2

Surfaces
Background--wcp-color-bg	`#2e3440`
Surface--wcp-color-surface	`#3b4252`
Surface raised--wcp-color-surface-raised	`#434c5e`
surface sunken--wcp-color-surface-sunken	`#2e3440`
overlay--wcp-color-overlay	`rgba(46,52,64,0.75)`
Borders
Border--wcp-color-border	`#818da4`
border strong--wcp-color-border-strong	`rgba(236,239,244,0.25)`
Text
Text--wcp-color-text	`#eff1f5`
Text muted--wcp-color-text-muted	`#dbe0ea`
text disabled--wcp-color-text-disabled	`rgba(216,222,233,0.5)`
text inverse--wcp-color-text-inverse	`#2e3440`
link--wcp-color-link	`#98b2cc`
Brand
Primary--wcp-color-primary	`#8bc1d1`
primary dim--wcp-color-primary-dim	`rgba(136,192,208,0.15)`
primary on--wcp-color-primary-on	`#494949`
Status
Success--wcp-color-success	`#a3be8c`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(163,190,140,0.12)`
Warning--wcp-color-warning	`#ebcb8b`
warning surface--wcp-color-warning-surface	`rgba(235,203,139,0.12)`
Danger--wcp-color-danger	`#bf616a`
danger surface--wcp-color-danger-surface	`rgba(191,97,106,0.12)`
Info--wcp-color-info	`#81a1c1`
info surface--wcp-color-info-surface	`rgba(129,161,193,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 12px rgba(0,0,0,.4)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#88c0d0`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#3b4252`
widget border--wcp-widget-border	`#4c566a`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 12px rgba(0,0,0,.4)`

High Contrast WCAG 2.2:AA

UUID: 349560a8-e348-4f1a-9c39-2014b444dea7

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#547ea9`
Brand
Primary--wcp-color-primary	`#2c606f`
primary dim--wcp-color-primary-dim	`rgba(44,96,111,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#2c606f`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

3. Catppuccin Mocha

A late-night coffee shop seen through a rain-fogged window — inside, the walls are a deep warm charcoal, the ambient light softens everything to lavender and rose and pale blue-purple, and the steam rising from mugs on the counter catches the coloured light in pastel drifts, the whole interior a carefully composed palette of muted candy tones held in warm darkness, cosy and precise as a macaron box.

Author	Catppuccin Community
Author URL	https://catppuccin.com
Theme URL	https://catppuccin.com

Light WCAG 2.2:AA

UUID: 18e322a0-6131-4f0c-ab8b-46adbbb08516

Surfaces
Background--wcp-color-bg	`#f6f6f9`
Surface--wcp-color-surface	`#e8e8f2`
Surface raised--wcp-color-surface-raised	`#d8d8ee`
surface sunken--wcp-color-surface-sunken	`#f9f9fb`
overlay--wcp-color-overlay	`rgba(246,246,249,0.75)`
Borders
Border--wcp-color-border	`#8080b7`
border strong--wcp-color-border-strong	`rgba(16,16,30,0.25)`
Text
Text--wcp-color-text	`#10101e`
Text muted--wcp-color-text-muted	`#4f4f72`
text disabled--wcp-color-text-disabled	`rgba(16,16,30,0.38)`
text inverse--wcp-color-text-inverse	`#f6f6f9`
link--wcp-color-link	`#0a5fe6`
Brand
Primary--wcp-color-primary	`#a464f0`
primary dim--wcp-color-primary-dim	`rgba(164,100,240,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#a464f0`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#e8e8f2`
widget border--wcp-widget-border	`#8080b7`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: d3a11c29-4dbd-4fa6-a6de-145c13045867

Surfaces
Background--wcp-color-bg	`#1e1e2e`
Surface--wcp-color-surface	`#313244`
Surface raised--wcp-color-surface-raised	`#45475a`
surface sunken--wcp-color-surface-sunken	`#1e1e2e`
overlay--wcp-color-overlay	`rgba(30,30,46,0.75)`
Borders
Border--wcp-color-border	`#797c96`
border strong--wcp-color-border-strong	`rgba(205,214,244,0.25)`
Text
Text--wcp-color-text	`#d1d9f4`
Text muted--wcp-color-text-muted	`#a9afc9`
text disabled--wcp-color-text-disabled	`rgba(166,173,200,0.5)`
text inverse--wcp-color-text-inverse	`#1e1e2e`
link--wcp-color-link	`#8db7fa`
Brand
Primary--wcp-color-primary	`#cdaaf7`
primary dim--wcp-color-primary-dim	`rgba(203,166,247,0.15)`
primary on--wcp-color-primary-on	`#494949`
Status
Success--wcp-color-success	`#a6e3a1`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(166,227,161,0.12)`
Warning--wcp-color-warning	`#f9e2af`
warning surface--wcp-color-warning-surface	`rgba(249,226,175,0.12)`
Danger--wcp-color-danger	`#f38ba8`
danger surface--wcp-color-danger-surface	`rgba(243,139,168,0.12)`
Info--wcp-color-info	`#89b4fa`
info surface--wcp-color-info-surface	`rgba(137,180,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 20px rgba(0,0,0,.5)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#cba6f7`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#313244`
widget border--wcp-widget-border	`#585b70`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 20px rgba(0,0,0,.5)`

High Contrast WCAG 2.2:AA

UUID: c0ccbd20-bd4d-464a-8172-f4842cb9399c

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#2374f5`
Brand
Primary--wcp-color-primary	`#7516e7`
primary dim--wcp-color-primary-dim	`rgba(117,22,231,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#7516e7`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

4. Tokyo Night

Midnight in Tokyo's Shinjuku district seen from a high-floor window — the street grid below is a near-absolute deep navy, and through the rain the neon signs bleed blue and violet and electric-cornflower light across the wet tarmac, each colour smeared and doubled in the puddles, so that the whole city seems constructed equally from darkness and its own vivid electric reflection.

Author	enkia
Author URL	https://github.com/enkia/tokyo-night-vscode-theme
Theme URL	https://github.com/enkia/tokyo-night-vscode-theme

Light WCAG 2.2:AA

UUID: cab90df0-187d-4cee-b547-7e90283935d7

Surfaces
Background--wcp-color-bg	`#f6f6f9`
Surface--wcp-color-surface	`#e6e7f4`
Surface raised--wcp-color-surface-raised	`#d6d8f0`
surface sunken--wcp-color-surface-sunken	`#f9f9fb`
overlay--wcp-color-overlay	`rgba(246,246,249,0.75)`
Borders
Border--wcp-color-border	`#7d7fb5`
border strong--wcp-color-border-strong	`rgba(14,15,32,0.25)`
Text
Text--wcp-color-text	`#0e0f20`
Text muted--wcp-color-text-muted	`#4f5172`
text disabled--wcp-color-text-disabled	`rgba(14,15,32,0.38)`
text inverse--wcp-color-text-inverse	`#f6f6f9`
link--wcp-color-link	`#006cad`
Brand
Primary--wcp-color-primary	`#4980f4`
primary dim--wcp-color-primary-dim	`rgba(73,128,244,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#4980f4`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#e6e7f4`
widget border--wcp-widget-border	`#7d7fb5`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: d9ac54b8-622c-4811-b387-5fdc7d1af8aa

Surfaces
Background--wcp-color-bg	`#1a1b2e`
Surface--wcp-color-surface	`#24253e`
Surface raised--wcp-color-surface-raised	`#2f3154`
surface sunken--wcp-color-surface-sunken	`#1a1b2e`
overlay--wcp-color-overlay	`rgba(26,27,46,0.75)`
Borders
Border--wcp-color-border	`#656f9f`
border strong--wcp-color-border-strong	`rgba(192,202,245,0.25)`
Text
Text--wcp-color-text	`#c4cdf5`
Text muted--wcp-color-text-muted	`#9da8cf`
text disabled--wcp-color-text-disabled	`rgba(154,165,206,0.5)`
text inverse--wcp-color-text-inverse	`#1a1b2e`
link--wcp-color-link	`#82d0ff`
Brand
Primary--wcp-color-primary	`#7ea5f7`
primary dim--wcp-color-primary-dim	`rgba(122,162,247,0.15)`
primary on--wcp-color-primary-on	`#3a3a3a`
Status
Success--wcp-color-success	`#9ece6a`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(158,206,106,0.12)`
Warning--wcp-color-warning	`#e0af68`
warning surface--wcp-color-warning-surface	`rgba(224,175,104,0.12)`
Danger--wcp-color-danger	`#f7768e`
danger surface--wcp-color-danger-surface	`rgba(247,118,142,0.12)`
Info--wcp-color-info	`#7dcfff`
info surface--wcp-color-info-surface	`rgba(125,207,255,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 20px rgba(0,0,0,.6)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#7aa2f7`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#24253e`
widget border--wcp-widget-border	`#414868`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 20px rgba(0,0,0,.6)`

High Contrast WCAG 2.2:AA

UUID: a0d50a5a-1391-4421-8a51-8ab687dc8ed4

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#007fcc`
Brand
Primary--wcp-color-primary	`#0d4dd3`
primary dim--wcp-color-primary-dim	`rgba(13,77,211,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#0d4dd3`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

5. Gruvbox Dark

A woodworker's bench under a single incandescent bulb late at night — the workshop walls have darkened over decades to a warm charcoal that is never cold, the tool handles are worn to a polished amber-gold by years of use, and in the light of the bulb the fresh wood shavings on the floor glow a bright honey-yellow, the entire scene the colour of experienced craft and accumulated warmth.

Author	Pavel Pertsev (morhetz)
Author URL	https://github.com/morhetz/gruvbox
Theme URL	https://github.com/morhetz/gruvbox

Light WCAG 2.2:AA

UUID: c90cd013-c3fc-475b-abb4-3e3d3555fcf5

Surfaces
Background--wcp-color-bg	`#f8f7f7`
Surface--wcp-color-surface	`#eeecec`
Surface raised--wcp-color-surface-raised	`#e4e2e2`
surface sunken--wcp-color-surface-sunken	`#fafafa`
overlay--wcp-color-overlay	`rgba(248,247,247,0.75)`
Borders
Border--wcp-color-border	`#b27878`
border strong--wcp-color-border-strong	`rgba(25,21,21,0.25)`
Text
Text--wcp-color-text	`#191515`
Text muted--wcp-color-text-muted	`#724f4f`
text disabled--wcp-color-text-disabled	`rgba(25,21,21,0.38)`
text inverse--wcp-color-text-inverse	`#f8f7f7`
link--wcp-color-link	`#527165`
Brand
Primary--wcp-color-primary	`#b17d04`
primary dim--wcp-color-primary-dim	`rgba(177,125,4,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`4px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#b17d04`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#eeecec`
widget border--wcp-widget-border	`#b27878`
widget radius--wcp-widget-radius	`4px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: fddd994e-71ad-4006-9c1e-b251e6beb7ac

Surfaces
Background--wcp-color-bg	`#282828`
Surface--wcp-color-surface	`#3c3836`
Surface raised--wcp-color-surface-raised	`#504945`
surface sunken--wcp-color-surface-sunken	`#282828`
overlay--wcp-color-overlay	`rgba(40,40,40,0.75)`
Borders
Border--wcp-color-border	`#8f8177`
border strong--wcp-color-border-strong	`rgba(235,219,178,0.25)`
Text
Text--wcp-color-text	`#ecdcb6`
Text muted--wcp-color-text-muted	`#aea08c`
text disabled--wcp-color-text-disabled	`rgba(168,153,132,0.5)`
text inverse--wcp-color-text-inverse	`#282828`
link--wcp-color-link	`#88a99c`
Brand
Primary--wcp-color-primary	`#fabe33`
primary dim--wcp-color-primary-dim	`rgba(250,189,47,0.15)`
primary on--wcp-color-primary-on	`#515151`
Status
Success--wcp-color-success	`#b8bb26`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(184,187,38,0.12)`
Warning--wcp-color-warning	`#fabd2f`
warning surface--wcp-color-warning-surface	`rgba(250,189,47,0.12)`
Danger--wcp-color-danger	`#fb4934`
danger surface--wcp-color-danger-surface	`rgba(251,73,52,0.12)`
Info--wcp-color-info	`#83a598`
info surface--wcp-color-info-surface	`rgba(131,165,152,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`4px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 12px rgba(0,0,0,.5)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#fabd2f`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#3c3836`
widget border--wcp-widget-border	`#665c54`
widget radius--wcp-widget-radius	`4px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 12px rgba(0,0,0,.5)`

High Contrast WCAG 2.2:AA

UUID: ce639f34-34dc-4447-acb2-2faacf200d44

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#5e8274`
Brand
Primary--wcp-color-primary	`#7c5803`
primary dim--wcp-color-primary-dim	`rgba(124,88,3,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`4px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#7c5803`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`4px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

6. Monokai

A vintage electric sign above a nightclub entrance at 2 a.m. — the background is the deep near-black of unlit alley brickwork, and from the sign the letters burn in a vivid hot red-pink that is almost too saturated to look at directly, while scattered across the darkness are smaller points of aqua-green, orange, and pale yellow, each colour fully committed and uncompromising, the palette of something designed to be seen through noise and dark.

Author	Wimer Hazenberg
Author URL	https://monokai.pro
Theme URL	https://monokai.pro

Light WCAG 2.2:AA

UUID: f81b9b9b-d8db-4f02-bd05-ac8b0a542a7a

Surfaces
Background--wcp-color-bg	`#f8f8f7`
Surface--wcp-color-surface	`#efefeb`
Surface raised--wcp-color-surface-raised	`#e6e7df`
surface sunken--wcp-color-surface-sunken	`#fafafa`
overlay--wcp-color-overlay	`rgba(248,248,247,0.75)`
Borders
Border--wcp-color-border	`#868f51`
border strong--wcp-color-border-strong	`rgba(25,26,20,0.25)`
Text
Text--wcp-color-text	`#191a14`
Text muted--wcp-color-text-muted	`#6a6f4d`
text disabled--wcp-color-text-disabled	`rgba(25,26,20,0.38)`
text inverse--wcp-color-text-inverse	`#f8f8f7`
link--wcp-color-link	`#0f778b`
Brand
Primary--wcp-color-primary	`#f9347b`
primary dim--wcp-color-primary-dim	`rgba(249,52,123,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#f9347b`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#efefeb`
widget border--wcp-widget-border	`#868f51`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: cc0d722b-48ac-495f-b8d2-d9f3304b97f8

Surfaces
Background--wcp-color-bg	`#272822`
Surface--wcp-color-surface	`#3e3d32`
Surface raised--wcp-color-surface-raised	`#49483e`
surface sunken--wcp-color-surface-sunken	`#272822`
overlay--wcp-color-overlay	`rgba(39,40,34,0.75)`
Borders
Border--wcp-color-border	`#8e8972`
border strong--wcp-color-border-strong	`rgba(248,248,242,0.25)`
Text
Text--wcp-color-text	`#f9f9f5`
Text muted--wcp-color-text-muted	`#aba897`
text disabled--wcp-color-text-disabled	`rgba(117,113,94,0.5)`
text inverse--wcp-color-text-inverse	`#272822`
link--wcp-color-link	`#6adaef`
Brand
Primary--wcp-color-primary	`#f9347b`
primary dim--wcp-color-primary-dim	`rgba(249,38,114,0.15)`
primary on--wcp-color-primary-on	`#1e1e1e`
Status
Success--wcp-color-success	`#a6e22e`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(166,226,46,0.12)`
Warning--wcp-color-warning	`#e6db74`
warning surface--wcp-color-warning-surface	`rgba(230,219,116,0.12)`
Danger--wcp-color-danger	`#f92672`
danger surface--wcp-color-danger-surface	`rgba(249,38,114,0.12)`
Info--wcp-color-info	`#66d9ef`
info surface--wcp-color-info-surface	`rgba(102,217,239,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.5)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#f92672`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#3e3d32`
widget border--wcp-widget-border	`#75715e`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.5)`

High Contrast WCAG 2.2:AA

UUID: 76249f64-c03b-433f-8e7c-59c78f55e2df

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#11879d`
Brand
Primary--wcp-color-primary	`#b50545`
primary dim--wcp-color-primary-dim	`rgba(181,5,69,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#b50545`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

7. One Dark

An empty open-plan office late at night, lit only by monitor screens — the walls and ceiling recede into a blue-tinted charcoal dark, the screens project a soft cold blue that is the only light source, and the desk surfaces catch that blue the way matte surfaces hold light, everything quiet and resolute, the colour of a developer in deep concentration long after everyone else has gone home.

Author	Atom / GitHub
Author URL	https://github.com/atom/atom
Theme URL	https://github.com/atom/atom

Light WCAG 2.2:AA

UUID: 22acf829-a356-479e-af60-9be4a89cb47b

Surfaces
Background--wcp-color-bg	`#f7f7f8`
Surface--wcp-color-surface	`#eaecf0`
Surface raised--wcp-color-surface-raised	`#dce1ea`
surface sunken--wcp-color-surface-sunken	`#f9fafa`
overlay--wcp-color-overlay	`rgba(247,247,248,0.75)`
Borders
Border--wcp-color-border	`#7387b0`
border strong--wcp-color-border-strong	`rgba(18,21,27,0.25)`
Text
Text--wcp-color-text	`#12151b`
Text muted--wcp-color-text-muted	`#4f5b72`
text disabled--wcp-color-text-disabled	`rgba(18,21,27,0.38)`
text inverse--wcp-color-text-inverse	`#f7f7f8`
link--wcp-color-link	`#136db7`
Brand
Primary--wcp-color-primary	`#198ae7`
primary dim--wcp-color-primary-dim	`rgba(25,138,231,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#198ae7`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#eaecf0`
widget border--wcp-widget-border	`#7387b0`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: ab07c05a-5ff7-445d-ac86-0e5ee6ab1887

Surfaces
Background--wcp-color-bg	`#282c34`
Surface--wcp-color-surface	`#2c313c`
Surface raised--wcp-color-surface-raised	`#3e4451`
surface sunken--wcp-color-surface-sunken	`#282c34`
overlay--wcp-color-overlay	`rgba(40,44,52,0.75)`
Borders
Border--wcp-color-border	`#717b93`
border strong--wcp-color-border-strong	`rgba(171,178,191,0.25)`
Text
Text--wcp-color-text	`#adb4c1`
Text muted--wcp-color-text-muted	`#949ba7`
text disabled--wcp-color-text-disabled	`rgba(92,99,112,0.5)`
text inverse--wcp-color-text-inverse	`#282c34`
link--wcp-color-link	`#65b1ef`
Brand
Primary--wcp-color-primary	`#65b1ef`
primary dim--wcp-color-primary-dim	`rgba(97,175,239,0.15)`
primary on--wcp-color-primary-on	`#3f3f3f`
Status
Success--wcp-color-success	`#98c379`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(152,195,121,0.12)`
Warning--wcp-color-warning	`#e5c07b`
warning surface--wcp-color-warning-surface	`rgba(229,192,123,0.12)`
Danger--wcp-color-danger	`#e06c75`
danger surface--wcp-color-danger-surface	`rgba(224,108,117,0.12)`
Info--wcp-color-info	`#61afef`
info surface--wcp-color-info-surface	`rgba(97,175,239,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.4)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#61afef`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#2c313c`
widget border--wcp-widget-border	`#4b5263`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.4)`

High Contrast WCAG 2.2:AA

UUID: 7afd85a1-f448-4855-8c75-80c1f0346e21

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#167ed2`
Brand
Primary--wcp-color-primary	`#105c9b`
primary dim--wcp-color-primary-dim	`rgba(16,92,155,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#105c9b`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

8. Solarized Dark

The deepest part of a tropical ocean at night seen from a glass-bottomed research vessel — the water is a deep teal-black, precise and still, and in the bioluminescent zones below the surface isolated points of cyan and sky-blue pulse against the dark, the whole environment calibrated to a perfection that nature achieves only in the places where few ever look, a palette of scientific exactness and quiet depth.

Author	Ethan Schoonover
Author URL	https://ethanschoonover.com/solarized/
Theme URL	https://ethanschoonover.com/solarized/

Light WCAG 2.2:AA

UUID: 3d6cdd3e-20ce-4b2e-b839-c85a4b51aa29

Surfaces
Background--wcp-color-bg	`#f5f9fa`
Surface--wcp-color-surface	`#e6f1f4`
Surface raised--wcp-color-surface-raised	`#d6eaf0`
surface sunken--wcp-color-surface-sunken	`#f8fbfc`
overlay--wcp-color-overlay	`rgba(245,249,250,0.75)`
Borders
Border--wcp-color-border	`#5b92a0`
border strong--wcp-color-border-strong	`rgba(14,28,32,0.25)`
Text
Text--wcp-color-text	`#0e1c20`
Text muted--wcp-color-text-muted	`#4f6b72`
text disabled--wcp-color-text-disabled	`rgba(14,28,32,0.38)`
text inverse--wcp-color-text-inverse	`#f5f9fa`
link--wcp-color-link	`#2071aa`
Brand
Primary--wcp-color-primary	`#268dd6`
primary dim--wcp-color-primary-dim	`rgba(38,141,214,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#268dd6`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#e6f1f4`
widget border--wcp-widget-border	`#5b92a0`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: 10ab0dcf-361a-4680-9d10-3d6cbd09c5c8

Surfaces
Background--wcp-color-bg	`#002b36`
Surface--wcp-color-surface	`#073642`
Surface raised--wcp-color-surface-raised	`#0b4a56`
surface sunken--wcp-color-surface-sunken	`#002b36`
overlay--wcp-color-overlay	`rgba(0,43,54,0.75)`
Borders
Border--wcp-color-border	`#657e86`
border strong--wcp-color-border-strong	`rgba(131,148,150,0.25)`
Text
Text--wcp-color-text	`#8b9b9d`
Text muted--wcp-color-text-muted	`#8a9da5`
text disabled--wcp-color-text-disabled	`rgba(101,123,131,0.5)`
text inverse--wcp-color-text-inverse	`#002b36`
link--wcp-color-link	`#48a0dd`
Brand
Primary--wcp-color-primary	`#268dd6`
primary dim--wcp-color-primary-dim	`rgba(38,139,210,0.15)`
primary on--wcp-color-primary-on	`#1e1e1e`
Status
Success--wcp-color-success	`#859900`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(133,153,0,0.12)`
Warning--wcp-color-warning	`#b58900`
warning surface--wcp-color-warning-surface	`rgba(181,137,0,0.12)`
Danger--wcp-color-danger	`#dc322f`
danger surface--wcp-color-danger-surface	`rgba(220,50,47,0.12)`
Info--wcp-color-info	`#268bd2`
info surface--wcp-color-info-surface	`rgba(38,139,210,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.6)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#268bd2`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#073642`
widget border--wcp-widget-border	`#586e75`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.6)`

High Contrast WCAG 2.2:AA

UUID: 28d7d477-33ba-4028-bde1-fbc52bd3d117

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#2480bf`
Brand
Primary--wcp-color-primary	`#195e8f`
primary dim--wcp-color-primary-dim	`rgba(25,94,143,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#195e8f`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

9. Rosé Pine

A Victorian writing room at the very end of evening — the walls are a deep purple-charcoal, the lamp on the desk is low and casts a dusty-rose warmth across the papers and the worn leather of the chair, and at the window the last of the night sky holds a violet so dark it is almost black, the whole room suffused with the colour of late Romanticism: beautiful, melancholy, and completely self-contained.

Author	Emilia Dunfelt
Author URL	https://rosepinetheme.com
Theme URL	https://rosepinetheme.com

Light WCAG 2.2:AA

UUID: d619eb8c-791d-4bd7-97cb-874bbcd7cbe3

Surfaces
Background--wcp-color-bg	`#f6f6f9`
Surface--wcp-color-surface	`#e9e8f3`
Surface raised--wcp-color-surface-raised	`#dbd8ee`
surface sunken--wcp-color-surface-sunken	`#f9f9fb`
overlay--wcp-color-overlay	`rgba(246,246,249,0.75)`
Borders
Border--wcp-color-border	`#877fb6`
border strong--wcp-color-border-strong	`rgba(18,15,31,0.25)`
Text
Text--wcp-color-text	`#120f1f`
Text muted--wcp-color-text-muted	`#554f72`
text disabled--wcp-color-text-disabled	`rgba(18,15,31,0.38)`
text inverse--wcp-color-text-inverse	`#f6f6f9`
link--wcp-color-link	`#31717d`
Brand
Primary--wcp-color-primary	`#e64f7a`
primary dim--wcp-color-primary-dim	`rgba(230,79,122,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#e64f7a`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#e9e8f3`
widget border--wcp-widget-border	`#877fb6`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: 67637421-bd4d-460d-ba9c-6f5c462feb4e

Surfaces
Background--wcp-color-bg	`#191724`
Surface--wcp-color-surface	`#1f1d2e`
Surface raised--wcp-color-surface-raised	`#26233a`
surface sunken--wcp-color-surface-sunken	`#191724`
overlay--wcp-color-overlay	`rgba(25,23,36,0.75)`
Borders
Border--wcp-color-border	`#6b6689`
border strong--wcp-color-border-strong	`rgba(224,222,244,0.25)`
Text
Text--wcp-color-text	`#e3e1f5`
Text muted--wcp-color-text-muted	`#88849e`
text disabled--wcp-color-text-disabled	`rgba(110,106,134,0.5)`
text inverse--wcp-color-text-inverse	`#191724`
link--wcp-color-link	`#9fd0d9`
Brand
Primary--wcp-color-primary	`#eb7395`
primary dim--wcp-color-primary-dim	`rgba(235,111,146,0.15)`
primary on--wcp-color-primary-on	`#323232`
Status
Success--wcp-color-success	`#31748f`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(49,116,143,0.12)`
Warning--wcp-color-warning	`#f6c177`
warning surface--wcp-color-warning-surface	`rgba(246,193,119,0.12)`
Danger--wcp-color-danger	`#eb6f92`
danger surface--wcp-color-danger-surface	`rgba(235,111,146,0.12)`
Info--wcp-color-info	`#9ccfd8`
info surface--wcp-color-info-surface	`rgba(156,207,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 20px rgba(0,0,0,.5)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#eb6f92`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#1f1d2e`
widget border--wcp-widget-border	`#403d52`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 20px rgba(0,0,0,.5)`

High Contrast WCAG 2.2:AA

UUID: f15bbf8c-b6bb-4252-a8e0-bede76762bd4

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#3a8492`
Brand
Primary--wcp-color-primary	`#ae1943`
primary dim--wcp-color-primary-dim	`rgba(174,25,67,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#ae1943`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

10. Ayu Dark

A campfire burning low at the edge of a lake on a clear summer night — the sky above is a near-absolute deep blue-black that holds every star, the fire itself burns at its edges in warm amber and gold, and the reflection of both fire and stars on the still water doubles the spectacle, the darkness vast and detailed, the warmth small and precise.

Author	Ike Ku (dempfi)
Author URL	https://github.com/dempfi/ayu
Theme URL	https://github.com/dempfi/ayu

Light WCAG 2.2:AA

UUID: 1a110177-1f0d-4f48-be49-0e700be1d38d

Surfaces
Background--wcp-color-bg	`#f6f7f9`
Surface--wcp-color-surface	`#e6eaf4`
Surface raised--wcp-color-surface-raised	`#d6def0`
surface sunken--wcp-color-surface-sunken	`#f9f9fb`
overlay--wcp-color-overlay	`rgba(246,247,249,0.75)`
Borders
Border--wcp-color-border	`#7586b1`
border strong--wcp-color-border-strong	`rgba(14,19,32,0.25)`
Text
Text--wcp-color-text	`#0e1320`
Text muted--wcp-color-text-muted	`#4f5a72`
text disabled--wcp-color-text-disabled	`rgba(14,19,32,0.38)`
text inverse--wcp-color-text-inverse	`#f6f7f9`
link--wcp-color-link	`#137293`
Brand
Primary--wcp-color-primary	`#ae7c19`
primary dim--wcp-color-primary-dim	`rgba(174,124,25,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#ae7c19`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#e6eaf4`
widget border--wcp-widget-border	`#7586b1`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: ef5178f8-d30d-42b7-aac1-9028eae0811c

Surfaces
Background--wcp-color-bg	`#0d1017`
Surface--wcp-color-surface	`#131721`
Surface raised--wcp-color-surface-raised	`#1a1f29`
surface sunken--wcp-color-surface-sunken	`#0d1017`
overlay--wcp-color-overlay	`rgba(13,16,23,0.75)`
Borders
Border--wcp-color-border	`#596588`
border strong--wcp-color-border-strong	`rgba(191,189,182,0.25)`
Text
Text--wcp-color-text	`#c1bfb8`
Text muted--wcp-color-text-muted	`#79808e`
text disabled--wcp-color-text-disabled	`rgba(86,91,102,0.5)`
text inverse--wcp-color-text-inverse	`#0d1017`
link--wcp-color-link	`#3dbbe6`
Brand
Primary--wcp-color-primary	`#e6b554`
primary dim--wcp-color-primary-dim	`rgba(230,180,80,0.15)`
primary on--wcp-color-primary-on	`#4c4c4c`
Status
Success--wcp-color-success	`#7fd962`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(127,217,98,0.12)`
Warning--wcp-color-warning	`#e6b450`
warning surface--wcp-color-warning-surface	`rgba(230,180,80,0.12)`
Danger--wcp-color-danger	`#f07178`
danger surface--wcp-color-danger-surface	`rgba(240,113,120,0.12)`
Info--wcp-color-info	`#39bae6`
info surface--wcp-color-info-surface	`rgba(57,186,230,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.6)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#e6b450`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#131721`
widget border--wcp-widget-border	`#2d3345`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.6)`

High Contrast WCAG 2.2:AA

UUID: d63b6764-9e03-443a-a475-960cd8ffb582

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#1684a9`
Brand
Primary--wcp-color-primary	`#765411`
primary dim--wcp-color-primary-dim	`rgba(118,84,17,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#765411`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

11. Cyberpunk

A narrow street in a near-future city at 3 a.m., flooded with rain — the sky is a near-absolute violet-black so dark it has weight, and through the downpour the neon signs bleed electric magenta and hot pink downward into the puddles on the road, creating moving pools of vivid colour in absolute darkness, the world reduced to the contrast between nothing and everything, between the dark and the neon that punctures it.

Author	Anthony Harrison
Author email	widgets@penrithbeacon.com
Author URL	https://penrithbeacon.com
Theme URL	https://penrithbeacon.com

Light WCAG 2.2:AA

UUID: f35eeb85-60d9-4675-bf71-18683552f46f

Surfaces
Background--wcp-color-bg	`#f7f5fa`
Surface--wcp-color-surface	`#ebe6f4`
Surface raised--wcp-color-surface-raised	`#e0d6f0`
surface sunken--wcp-color-surface-sunken	`#f9f8fc`
overlay--wcp-color-overlay	`rgba(247,245,250,0.75)`
Borders
Border--wcp-color-border	`#917bb4`
border strong--wcp-color-border-strong	`rgba(21,14,32,0.25)`
Text
Text--wcp-color-text	`#150e20`
Text muted--wcp-color-text-muted	`#5d4f72`
text disabled--wcp-color-text-disabled	`rgba(21,14,32,0.38)`
text inverse--wcp-color-text-inverse	`#f7f5fa`
link--wcp-color-link	`#006f9e`
Brand
Primary--wcp-color-primary	`#fe2371`
primary dim--wcp-color-primary-dim	`rgba(254,35,113,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`2px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#fe2371`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#ebe6f4`
widget border--wcp-widget-border	`#917bb4`
widget radius--wcp-widget-radius	`2px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: e10609cb-2da3-4f28-920c-b7fc51845755

Surfaces
Background--wcp-color-bg	`#060010`
Surface--wcp-color-surface	`#100025`
Surface raised--wcp-color-surface-raised	`#1a003a`
surface sunken--wcp-color-surface-sunken	`#060010`
overlay--wcp-color-overlay	`rgba(6,0,16,0.75)`
Borders
Border--wcp-color-border	`#fe327b`
border strong--wcp-color-border-strong	`rgba(240,240,240,0.25)`
Text
Text--wcp-color-text	`#f2f2f2`
Text muted--wcp-color-text-muted	`#8a8a8a`
text disabled--wcp-color-text-disabled	`rgba(136,136,136,0.5)`
text inverse--wcp-color-text-inverse	`#060010`
link--wcp-color-link	`#05b5ff`
Brand
Primary--wcp-color-primary	`#fe327b`
primary dim--wcp-color-primary-dim	`rgba(255,45,120,0.15)`
primary on--wcp-color-primary-on	`#212121`
Status
Success--wcp-color-success	`#00ff41`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(0,255,65,0.12)`
Warning--wcp-color-warning	`#ffff00`
warning surface--wcp-color-warning-surface	`rgba(255,255,0,0.12)`
Danger--wcp-color-danger	`#ff2d78`
danger surface--wcp-color-danger-surface	`rgba(255,45,120,0.12)`
Info--wcp-color-info	`#00b4ff`
info surface--wcp-color-info-surface	`rgba(0,180,255,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`2px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 0 20px rgba(255,45,120,.3)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#ff2d78`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#100025`
widget border--wcp-widget-border	`#ff2d78`
widget radius--wcp-widget-radius	`2px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 0 20px rgba(255,45,120,.3)`

High Contrast WCAG 2.2:AA

UUID: 4bdfc79d-516b-408c-b4f8-8b0177b12b4c

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#0083ba`
Brand
Primary--wcp-color-primary	`#b40141`
primary dim--wcp-color-primary-dim	`rgba(180,1,65,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`2px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#b40141`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`2px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`

12. Forest

A stand of old-growth Douglas fir at the end of dusk, when the sky has not quite lost its last light — the canopy is near-black, a ceiling of dark layered needles, the trunks thick and deep pine-green where they catch the remaining light, and from the forest floor upward the air holds a dark sage-green that is the accumulated colour of ten thousand living things breathing in the dark, the whole forest a single organism composing itself for night.

Author	Anthony Harrison
Author email	widgets@penrithbeacon.com
Author URL	https://harrisonofthenorth.com
Theme URL	https://penrithbeacon.com

Light WCAG 2.2:AA

UUID: b8b71f7f-eb59-448c-9e45-3b4fe691b2d2

Surfaces
Background--wcp-color-bg	`#f7f9f6`
Surface--wcp-color-surface	`#ecf4e7`
Surface raised--wcp-color-surface-raised	`#e1f0d6`
surface sunken--wcp-color-surface-sunken	`#fafbf9`
overlay--wcp-color-overlay	`rgba(247,249,246,0.75)`
Borders
Border--wcp-color-border	`#709655`
border strong--wcp-color-border-strong	`rgba(22,32,14,0.25)`
Text
Text--wcp-color-text	`#16200e`
Text muted--wcp-color-text-muted	`#5e724f`
text disabled--wcp-color-text-disabled	`rgba(22,32,14,0.38)`
text inverse--wcp-color-text-inverse	`#f7f9f6`
link--wcp-color-link	`#3671a9`
Brand
Primary--wcp-color-primary	`#599b39`
primary dim--wcp-color-primary-dim	`rgba(89,155,57,0.12)`
primary on--wcp-color-primary-on	`#000000`
Status
Success--wcp-color-success	`#15803d`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(21,128,61,0.12)`
Warning--wcp-color-warning	`#b45309`
warning surface--wcp-color-warning-surface	`rgba(180,83,9,0.12)`
Danger--wcp-color-danger	`#dc2626`
danger surface--wcp-color-danger-surface	`rgba(220,38,38,0.12)`
Info--wcp-color-info	`#1d4ed8`
info surface--wcp-color-info-surface	`rgba(29,78,216,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 1px 4px rgba(0,0,0,.08)`
shadow md--wcp-shadow-md	`0 2px 8px rgba(0,0,0,.10)`
shadow lg--wcp-shadow-lg	`0 4px 16px rgba(0,0,0,.12)`
shadow xl--wcp-shadow-xl	`0 8px 32px rgba(0,0,0,.15)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#599b39`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#ecf4e7`
widget border--wcp-widget-border	`#709655`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 1px 4px rgba(0,0,0,.08)`

Dark WCAG 2.2:AA

UUID: 94153276-8395-48df-a4a8-9cadebb605e6

Surfaces
Background--wcp-color-bg	`#1a2214`
Surface--wcp-color-surface	`#22301a`
Surface raised--wcp-color-surface-raised	`#2d4020`
surface sunken--wcp-color-surface-sunken	`#1a2214`
overlay--wcp-color-overlay	`rgba(26,34,20,0.75)`
Borders
Border--wcp-color-border	`#56823b`
border strong--wcp-color-border-strong	`rgba(200,216,192,0.25)`
Text
Text--wcp-color-text	`#cad9c3`
Text muted--wcp-color-text-muted	`#7c9c6d`
text disabled--wcp-color-text-disabled	`rgba(122,154,106,0.5)`
text inverse--wcp-color-text-inverse	`#1a2214`
link--wcp-color-link	`#6198cd`
Brand
Primary--wcp-color-primary	`#5ca13b`
primary dim--wcp-color-primary-dim	`rgba(90,158,58,0.15)`
primary on--wcp-color-primary-on	`#282828`
Status
Success--wcp-color-success	`#5a9e3a`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(90,158,58,0.12)`
Warning--wcp-color-warning	`#d4a017`
warning surface--wcp-color-warning-surface	`rgba(212,160,23,0.12)`
Danger--wcp-color-danger	`#c0392b`
danger surface--wcp-color-danger-surface	`rgba(192,57,43,0.12)`
Info--wcp-color-info	`#3a7ab8`
info surface--wcp-color-info-surface	`rgba(58,122,184,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.5)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#5a9e3a`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#22301a`
widget border--wcp-widget-border	`#3d5c2a`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.5)`

High Contrast WCAG 2.2:AA

UUID: 5be8bb5c-9d10-4db5-a1a7-8ca2645e540e

Surfaces
Background--wcp-color-bg	`#000000`
Surface--wcp-color-surface	`#0d0d0d`
Surface raised--wcp-color-surface-raised	`#1a1a1a`
surface sunken--wcp-color-surface-sunken	`#000000`
overlay--wcp-color-overlay	`rgba(0,0,0,0.88)`
Borders
Border--wcp-color-border	`#767676`
border strong--wcp-color-border-strong	`rgba(255,255,255,0.35)`
Text
Text--wcp-color-text	`#ffffff`
Text muted--wcp-color-text-muted	`#cccccc`
text disabled--wcp-color-text-disabled	`rgba(255,255,255,0.4)`
text inverse--wcp-color-text-inverse	`#000000`
link--wcp-color-link	`#3c7ebe`
Brand
Primary--wcp-color-primary	`#3a6525`
primary dim--wcp-color-primary-dim	`rgba(58,101,37,0.15)`
primary on--wcp-color-primary-on	`#ffffff`
Status
Success--wcp-color-success	`#4ade80`
success on--wcp-color-success-on	`#000000`
success surface--wcp-color-success-surface	`rgba(74,222,128,0.12)`
Warning--wcp-color-warning	`#fbbf24`
warning surface--wcp-color-warning-surface	`rgba(251,191,36,0.12)`
Danger--wcp-color-danger	`#f87171`
danger surface--wcp-color-danger-surface	`rgba(248,113,113,0.12)`
Info--wcp-color-info	`#60a5fa`
info surface--wcp-color-info-surface	`rgba(96,165,250,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`8px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.7)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.5)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.6)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.7)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#3a6525`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#0d0d0d`
widget border--wcp-widget-border	`#767676`
widget radius--wcp-widget-radius	`8px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.7)`