co.gaiwan.oak.html.tokens — co.gaiwan/oak 0.5.227-rc

--accent-color clj

Default: var(--oak-green-12)

--action-primary clj

Main button/link color.

Default: var(--blue-6)

--bg-call-to-action clj

Call to action button background

Default: var(--oak-green-10)

--bg-call-to-action-dark clj

Call to action button lighter color

Default: var(--oak-green-12)

--bg-call-to-action-hover clj

Call to action button hover state background

Default: var(--oak-green-11)

--bg-call-to-action-light clj

Call to action button lighter color

Default: var(--oak-green-8)

--bg-interactive clj

Background for hover/active states on backgrounds.

Default: var(--gray-2)

--bg-panel clj

Background for layered elements (e.g., cards, panels).

Default: var(--white)

--bg-surface clj

The main background of the page/app.

Default: var(--oak-green-00)

--black clj

Default: #000

--blue-0 clj

Default: #e7f5ff

--blue-1 clj

Default: #d0ebff

--blue-10 clj

Default: #145591

--blue-11 clj

Default: #114678

--blue-12 clj

Default: #0d375e

--blue-2 clj

Default: #a5d8ff

--blue-3 clj

Default: #74c0fc

--blue-4 clj

Default: #4dabf7

--blue-5 clj

Default: #339af0

--blue-6 clj

Default: #228be6

--blue-7 clj

Default: #1c7ed6

--blue-8 clj

Default: #1971c2

--blue-9 clj

Default: #1864ab

--border-call-to-action clj

Border for CTA buttons

Default: var(--oak-green-12)

--border-input clj

Border for form inputs

Default: var(--gray-4)

--border-panel clj

Border for panels

Default: var(--gray-6)

--border-subtle clj

Faint lines, dividers, or subtle separators.

Default: var(--gray-4)

--button-border clj

Default: var(--gray-10)

--button-color clj

Default: var(--gray-5)

--button-color-dark clj

Default: var(--gray-6)

--button-color-hover clj

Default: var(--gray-7)

--button-color-light clj

Default: var(--gray-4)

--font-system-ui clj

Default: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif

--gray-0 clj

Default: #f8f9fa

--gray-1 clj

Default: #dee2e6

--gray-10 clj

Default: #16191d

--gray-11 clj

Default: #0d0f12

--gray-12 clj

Default: #030507

--gray-2 clj

Default: #ced4da

--gray-3 clj

Default: #adb5bd

--gray-4 clj

Default: #9AA2AA

--gray-5 clj

Default: #868e96

--gray-6 clj

Default: #686F77

--gray-7 clj

Default: #495057

--gray-8 clj

Default: #343a40

--gray-9 clj

Default: #212529

--oak-green-0 clj

Default: #f4fde2

--oak-green-00 clj

Default: #F6FBEE

--oak-green-1 clj

Default: #E6F2D7

--oak-green-10 clj

Default: #688F74

--oak-green-11 clj

Default: #5A8469

--oak-green-12 clj

Default: #4e765c

--oak-green-13 clj

Default: #24312D

--oak-green-2 clj

Default: #D8E7CC

--oak-green-3 clj

Default: #CADCC1

--oak-green-4 clj

Default: #BCD1B6

--oak-green-5 clj

Default: #AEC6AB

--oak-green-6 clj

Default: #A0BBA0

--oak-green-7 clj

Default: #92B095

--oak-green-8 clj

Default: #84A58A

--oak-green-9 clj

Default: #769A7F

--radius-1 clj

Default: 2px

--radius-2 clj

Default: 5px

--radius-3 clj

Default: 1rem

--radius-4 clj

Default: 2rem

--radius-5 clj

Default: 4rem

--radius-6 clj

Default: 8rem

--red-0 clj

Default: #fff5f5

--red-1 clj

Default: #ffe3e3

--red-10 clj

Default: #972020

--red-11 clj

Default: #651515

--red-12 clj

Default: #320B0B

--red-2 clj

Default: #ffc9c9

--red-3 clj

Default: #ffa8a8

--red-4 clj

Default: #ff8787

--red-5 clj

Default: #ff6b6b

--red-6 clj

Default: #fa5252

--red-7 clj

Default: #f03e3e

--red-8 clj

Default: #e03131

--red-9 clj

Default: #c92a2a

--shadow-1 clj

Subtle elevation; ideal for small interactive elements or faint borders.

Default: 0 1px 3px 0 var(--shadow-color)

--shadow-2 clj

General purpose lift; recommended for cards, standard containers, and panels.

Default: 0 4px 6px -1px var(--shadow-color)

--shadow-3 clj

Clear elevation; best for layered elements like modals, popovers, or floating menus.

Default: 0 10px 15px -3px var(--shadow-color)

--shadow-4 clj

Stronger, pronounced elevation; used for components that need deep visual separation.

Default: 0 20px 25px -5px var(--shadow-color-strong)

--shadow-5 clj

Deepest shadow; reserved for maximum elevation, such as full-screen overlays or sticky headers.

Default: 0 25px 50px -12px var(--shadow-color-strong)

--shadow-6-inner clj

Creates an inset/pressed look, often used for input fields or toggled states.

Default: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)

--shadow-color clj

Base color and opacity for all shadows in the system.

Default: rgba(0, 0, 0, 0.1)

--shadow-color-strong clj

A higher opacity shadow color for deeper, more pronounced effects.

Default: rgba(0, 0, 0, 0.25)

--size-00 clj

Default: -.25rem

--size-000 clj

Default: -.5rem

--size-1 clj

Default: .25rem

--size-10 clj

Default: 5rem

--size-11 clj

Default: 7.5rem

--size-12 clj

Default: 10rem

--size-13 clj

Default: 15rem

--size-14 clj

Default: 20rem

--size-15 clj

Default: 30rem

--size-2 clj

Default: .5rem

--size-3 clj

Default: 1rem

--size-4 clj

Default: 1.25rem

--size-5 clj

Default: 1.5rem

--size-6 clj

Default: 1.75rem

--size-7 clj

Default: 2rem

--size-8 clj

Default: 3rem

--size-9 clj

Default: 4rem

--size-fluid-1 clj

Default: max(.5rem,min(1vw,1rem))

--size-fluid-10 clj

Default: max(20rem,min(40vw,30rem))

--size-fluid-11 clj

Default: max(25rem,min(50vw,35rem))

--size-fluid-12 clj

Default: max(30rem,min(60vw,45rem))

--size-fluid-13 clj

Default: max(35rem,min(70vw,55rem))

--size-fluid-14 clj

Default: max(40rem,min(80vw,65rem))

--size-fluid-15 clj

Default: max(45rem,min(90vw,75rem))

--size-fluid-2 clj

Default: max(1rem,min(2vw,1.5rem))

--size-fluid-3 clj

Default: max(1.5rem,min(3vw,2rem))

--size-fluid-4 clj

Default: max(2rem,min(4vw,3rem))

--size-fluid-5 clj

Default: max(4rem,min(5vw,5rem))

--size-fluid-6 clj

Default: max(5rem,min(7vw,7.5rem))

--size-fluid-7 clj

Default: max(7.5rem,min(10vw,10rem))

--size-fluid-8 clj

Default: max(10rem,min(20vw,15rem))

--size-fluid-9 clj

Default: max(15rem,min(30vw,20rem))

--status-error clj

Background/icon for negative feedback or errors.

Default: var(--red-8)

--status-info clj

Background/icon for informational messages.

Default: var(--blue-6)

--status-success clj

Background/icon for positive feedback.

Default: var(--oak-green-6)

--status-warning clj

Background/icon for caution or warnings.

Default: var(--yellow-7)

--text-button clj

Default: var(--gray-0)

--text-call-to-action clj

Text color for call-to-action elements

Default: var(--white)

--text-heading clj

Text color for headings

Default: var(--accent-color)

--text-inverted clj

Text color used on dark or accent backgrounds (e.g., buttons).

Default: var(--gray-0)

--text-panel clj

Text color used in layered panels; slightly less dominant than surface-text.

Default: var(--gray-8)

--text-subtle clj

Secondary text, captions, or placeholder text.

Default: var(--gray-6)

--text-surface clj

Default text color for the main surface background.

Default: var(--gray-12)

--white clj

Default: #fff

--yellow-0 clj

Default: #fff9db

--yellow-1 clj

Default: #fff3bf

--yellow-10 clj

Default: #b35c00

--yellow-11 clj

Default: #804200

--yellow-12 clj

Default: #663500

--yellow-2 clj

Default: #ffec99

--yellow-3 clj

Default: #ffe066

--yellow-4 clj

Default: #ffd43b

--yellow-5 clj

Default: #fcc419

--yellow-6 clj

Default: #fab005

--yellow-7 clj

Default: #f59f00

--yellow-8 clj

Default: #f08c00

--yellow-9 clj

Default: #e67700

dark-mode-tokens clj

prop-default-val clj

(prop-default-val prop)