CSS variables are implemented on MediaWiki:Common.css.
Usage example
[...] style="background:var(--tg-color-surface-3);" [...]
Tokens
Border
Shorthand
| CSS variable | Value |
|---|---|
--tg-border-base |
1px solid var(--tg-border-color-base) |
Border color
| CSS variable | Value | Example |
|---|---|---|
--tg-border-color-base |
rgba( 0, 0, 0, 0.08 ) | |
--tg-border-color-subtle |
rgba( 0, 0, 0, 0.05 ) | |
--tg-border-color-interactive |
rgba( 0, 0, 0, 0.11 ) |
Border radius
| CSS variable | Value | Example |
|---|---|---|
--tg-border-radius-sharp |
0 | |
--tg-border-radius-small |
4px | |
--tg-border-radius-medium |
8px | |
--tg-border-radius-large |
12px | |
--tg-border-radius-pill |
9999px | |
--tg-border-radius-circle |
50% |
Color
Surface
--tg-color-surface-0
oklch( 97% 0.01 78 )
#f9f4ee
Base surface (e.g. site background)
--tg-color-surface-1
oklch( 99% 0.01 78 )
#fffbf6
Elevated surface (e.g. popup, modals)
--tg-color-surface-2
oklch( 95% 0.02 78 )
#f6ede0
Surface above base surface (e.g. cards, infobox)
--tg-color-surface-3
oklch( 92% 0.03 78 )
#f0e3cf
Surface above surface 2 (e.g. section background within cards)
--tg-color-surface-4
oklch( 89% 0.03 78 )
#e6d9c5
Surface above surface 3
--tg-color-surface-5
oklch( 89% 0.03 78 )
#e3d2b8
Surface above surface 4
Text
--tg-color-emphasized
oklch( 23% 0.02 130 )
#1a1f15
--tg-color-base
oklch( 30% 0.02 130 )
#2a3025
--tg-color-subtle
oklch( 45% 0.04 130 )
#4e5a42
Progressive
--tg-color-progressive
oklch( 53% 0.14 130 )
#507b07
--tg-color-progressive--hover
oklch( 56% 0.14 130 )
#588418
--tg-color-progressive--active
oklch( 50% 0.13 130 )
#4a710a
Typography
| Text type | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Header 1 | --tg-font-family-heading
|
--tg-font-weight-semibold
|
--tg-font-size-xxx-large
|
--tg-line-height-xxx-small
|
| EB Garamond | 600 | 2rem | 1.25 | |
| Header 2 | --tg-font-family-heading
|
--tg-font-weight-semibold
|
--tg-font-size-xx-large
|
--tg-line-height-xxx-small
|
| EB Garamond | 600 | 1.5rem | 1.25 | |
| Header 3 | --tg-font-family-heading
|
--tg-font-weight-semibold
|
--tg-font-size-x-large
|
--tg-line-height-xxx-small
|
| EB Garamond | 600 | 1.25rem | 1.25 | |
| Header 4 | --tg-font-family-heading
|
--tg-font-weight-semibold
|
--tg-font-size-large
|
--tg-line-height-xxx-small
|
| EB Garamond | 600 | 1.125rem | 1.25 | |
| Header 5 | --tg-font-family-body
|
--tg-font-weight-semibold
|
--tg-font-size-medium
|
--tg-line-height-xxx-small
|
| Lora | 600 | 1rem | 1.25 | |
| Header 6 | --tg-font-family-body
|
--tg-font-weight-medium
|
--tg-font-size-medium
|
--tg-line-height-xxx-small
|
| Lora | 500 | 1rem | 1.25 | |
| Body | --tg-font-family-body
|
--tg-font-weight-regular
|
--tg-font-size-medium
|
--tg-line-height
|
| Lora | 400 | 1rem | 1.6 | |
| Description | --tg-font-family-body
|
--tg-font-weight-regular
|
--tg-font-size-small
|
--tg-line-height
|
| Lora | 400 | 0.875rem | 1.6 | |
| Quote | --tg-font-family-body
|
--tg-font-weight-regular
|
--tg-font-size-small
|
--tg-line-height
|
| Lora | 400 | 0.875rem | 1.6 | |
| Caption | --tg-font-family-body
|
--tg-font-weight-regular
|
--tg-font-size-x-small
|
--tg-line-height-xx-small
|
| Lora | 400 | 0.8125rem | 1.375 |