w/s wiki-styles-2 utility framework for Pokémon Central Wiki
wiki-styles-2 · visual reference

A utility-first toolkit
for Pokémon Central Wiki.

A focused SCSS framework that ships Pokémon-native color tokens, a robust nesting-aware border-radius system, responsive layout primitives, and a handful of opinionated components — all compiled to a single CSS file deployed to MediaWiki.

… color tokens
6 max nesting depth
3 breakpoints
§ 01 · Try it

Drive --c and --border-radius in real time

Most utilities read from CSS custom properties so the same class works with any color or radius. Set the variables inline and the output adapts.

--c #e62829
--border-radius 10px
.bg-solid .text-auto .roundy
.bg-gradient .text-auto .roundy
§ 02 · Color tokens

Pokémon-native palette as --c-* variables

Every type, game, region, and UI surface is exposed as a CSS custom property on :root. Each token ships with up to five variants — click any swatch to copy its var() expression.

Filter …
Aliases

Each row shows the base swatch plus only the variants that are defined for that token. Click any swatch to open the detail sheet — copy the var() name or the raw value, see WCAG contrast, preview foreground samples.

Using a token in code

Fuoco Acqua Erba Elettro Buio Folletto
§ 03 · Backgrounds

Solid, gradient & neutral surfaces

Each utility sets --bg-color as a side effect so .text-auto can pick a readable foreground without further configuration.

ClassReadsEffect
.bg-solid--cbackground-color: var(--c)
.bg-gradient--from, --toalias of .bg-gradient-r
.bg-gradient-r--from, --tolinear-gradient(to right, …)
.bg-gradient-l--from, --tolinear-gradient(to left, …)
.bg-gradient-t--from, --tolinear-gradient(to top, …)
.bg-gradient-b--from, --tolinear-gradient(to bottom, …)
.bg-radiant--from, --toradial-gradient(--from, --to)
.bg-white / .white-bg—theme-aware light surface (uses light-dark())
.bg-black / .black-bg—theme-aware dark surface

Solid fill

Fuoco Acqua Folletto

Gradient directions

Four linear directions + one radial. All consume --from and --to.

.bg-gradient (→) .bg-gradient-l (←) .bg-gradient-t (↑) .bg-gradient-b (↓) .bg-radiant

Theme-aware neutrals

.bg-white / .bg-black consume MediaWiki's --background-color-base / --background-color-inverted when those are loaded, and fall back to light-dark() otherwise.

Toggle the theme in the top bar to watch .bg-white swap automatically while the Pokémon-type colors stay invariant — those are domain colors, not theme colors.

.bg-white .bg-black
§ 04 · Text color

Auto-contrast and explicit foregrounds

.text-auto reads --bg-color (set by background utilities) and picks black or white via the relative-color oklch() luminance threshold. Explicit overrides are also provided.

ClassBehavior
.text-autoblack or white, picked from --bg-color luminance
.text-black / .black-textcolor: var(--color-base, #000)
.text-white / .white-textcolor: var(--color-inverted, #fff)
.text-auto · light bg .text-auto · dark bg .text-black forced .text-white forced
§ 05 · Display

Box display utilities

All four primitives gain responsive variants — see Responsive.

ClassCSS
.blockdisplay: block
.inline-blockdisplay: inline-block
.inlinedisplay: inline
.hiddendisplay: none
.block .inline-block .inline
§ 06 · Flex

Direction, alignment & composite shortcuts

Full flexbox vocabulary plus opinionated shortcuts for the most common combinations.

Playground

Toggle each axis and watch the class string update. Copy the result into your template.

direction
justify (main)
align (cross)
wrap
flex flex-row flex-main-center flex-items-center
A B C D

Container & direction

ClassCSS
.flexdisplay: flex
.inline-flexdisplay: inline-flex
.flex-rowflex-direction: row
.flex-row-reverseflex-direction: row-reverse
.flex-columnflex-direction: column
.flex-column-reverseflex-direction: column-reverse
.flex-wrapflex-wrap: wrap
.flex-nowrapflex-wrap: nowrap
.flex-wrap-reverseflex-wrap: wrap-reverse
123
123

Main axis · justify-content

ClassCSS
.flex-main-startjustify-content: flex-start
.flex-main-endjustify-content: flex-end
.flex-main-centerjustify-content: center
.flex-main-space-betweenjustify-content: space-between
.flex-main-space-aroundjustify-content: space-around
.flex-main-space-evenlyjustify-content: space-evenly
start··
·center·
··end
between··
evenly··

Cross axis · align-items

ClassCSS
.flex-items-startalign-items: flex-start
.flex-items-endalign-items: flex-end
.flex-items-centeralign-items: center
.flex-items-stretchalign-items: stretch
.flex-items-baselinealign-items: baseline

Cross axis · align-content

ClassCSS
.flex-cross-startalign-content: flex-start
.flex-cross-endalign-content: flex-end
.flex-cross-centeralign-content: center
.flex-cross-stretchalign-content: stretch
.flex-cross-space-betweenalign-content: space-between
.flex-cross-space-aroundalign-content: space-around

Per-item · align-self

ClassCSS
.flex-item-self-startalign-self: flex-start
.flex-item-self-endalign-self: flex-end
.flex-item-self-centeralign-self: center
.flex-item-self-stretchalign-self: stretch
.flex-item-self-baselinealign-self: baseline

Composite shortcuts

Pre-baked combos for the most-typed sequences.

ClassEquivalent
.flex-row-stretch-aroundrow + stretch + space-around
.flex-row-center-aroundrow + center + space-around
.flex-row-center-stretchrow + center + stretch
.flex-item-fillflex: 1 1 0
.flex-main-equal > *flex: 1 1 0 (apply to children)
.flex-main-stretch > *flex: 1 1 auto (apply to children)
A B C
stretch around
§ 07 · Grid

Twelve-column grid with spans & placement

Generated for 1 → 12 across every utility. Use .col-span-full and .row-span-full for edge-to-edge children.

Placement playground

Three items on a 12-column × 4-row grid. Pick each item's column & row start/end to compose .col-start-* .col-end-* .row-start-* .row-end-* placements; copy the live class string.

A B C
item
col-start
col-end
row-start
row-end
ClassCSS
.griddisplay: grid
.inline-griddisplay: inline-grid
.grid-cols-n (n = 1…12)grid-template-columns: repeat(n, minmax(0, 1fr))
.grid-rows-n (n = 1…12)grid-template-rows: repeat(n, minmax(0, 1fr))
.col-span-n (n = 1…12)grid-column: span n / span n
.col-span-fullgrid-column: 1 / -1
.row-span-n (n = 1…12)grid-row: span n / span n
.row-span-fullgrid-row: 1 / -1
.col-start-n, .col-end-n (n = 1…13)grid-column-{start,end}: n
.row-start-n, .row-end-n (n = 1…13)grid-row-{start,end}: n
.col-auto, .row-autogrid-column: auto / grid-row: auto
.grid-flow-row, .grid-flow-colgrid-auto-flow: row | column
.grid-flow-row-dense, .grid-flow-col-densegrid-auto-flow: row dense | column dense
1 2 3 4 .col-span-2 .col-span-2 .col-span-full
§ 08 · Spacing & gap

.gap-N · independent axes via .gap-x-N, .gap-y-N

A unified scale that works with both flex and grid containers. Step matches Tailwind's standard rhythm (4 px increments) until the last few values where it widens.

ClassValue
.gap-00
.gap-px1px
.gap-10.25rem · 4px
.gap-20.5rem · 8px
.gap-30.75rem · 12px
.gap-41rem · 16px
.gap-51.25rem · 20px
.gap-61.5rem · 24px
.gap-71.75rem · 28px
.gap-82rem · 32px
.gap-92.25rem · 36px
.gap-102.5rem · 40px
.gap-112.75rem · 44px
.gap-123rem · 48px
.gap-143.5rem · 56px
.gap-164rem · 64px
.gap-205rem · 80px
.gap-246rem · 96px
.gap-287rem · 112px
.gap-328rem · 128px
.gap-x-nsame scale, applied to column-gap
.gap-y-nsame scale, applied to row-gap

Scale visualizer

gap step 3
flex gap-3
A B C
gap-1··
gap-3··
gap-6··
gap-x-6·· gap-y-1··
§ 09 · Sizes

Percentage widths in 5% steps

.width-N and .max-width-N where N runs 5 → 100 in steps of 5. .height-100 when you need to fill a container vertically.

ClassCSS
.width-n (n = 5, 10, 15, …, 100)width: n%
.width-autowidth: auto
.max-width-n (n = 5, 10, 15, …, 100)max-width: n%
.max-width-automax-width: auto
.height-100height: 100%

Width & max-width sliders

width-N 50
max-width-N 100
width-50 max-width-100
effective: —
.width-25
.width-50
.width-75
.width-100
§ 10 · Typography

Scale & alignment

Nine sizes and four alignment utilities. The family is set globally to Rooney Sans with system-sans fallbacks.

ClassCSS
.text-xsfont-size: 0.75rem · 12px
.text-smfont-size: 0.875rem · 14px
.text-basefont-size: 1rem · 16px
.text-lgfont-size: 1.125rem · 18px
.text-xlfont-size: 1.25rem · 20px
.text-2xlfont-size: 1.5rem · 24px
.text-3xlfont-size: 1.875rem · 30px
.text-4xlfont-size: 2.25rem · 36px
.text-5xlfont-size: 3rem · 48px
.text-lefttext-align: left
.text-centertext-align: center
.text-righttext-align: right
.text-justifytext-align: justify

Scale

xs sm base lg xl 2xl 3xl 4xl 5xl

Alignment

.text-left — Lorem ipsum dolor sit amet.
.text-center — Lorem ipsum dolor sit amet.
.text-right — Lorem ipsum dolor sit amet.
.text-justify — A lazy fennekin jumps over a particularly thoughtful larvitar watching the morning light spill across the canopy.
§ 11 · Roundy & nesting

Directional border-radius with depth-aware recalculation

.roundy rounds all four corners; the directional variants target a side or a single corner. When roundy elements are nested, an :is() descendant rule subtracts the parent's --padding from --border-radius so inner corners never poke outside outer ones.

ClassEffect
.roundyall four corners
.roundy-top, .roundy-bottomtop or bottom pair
.roundy-left, .roundy-rightleft or right pair
.roundy-top-left, .roundy-top-rightsingle corner (top side)
.roundy-bottom-left, .roundy-bottom-rightsingle corner (bottom side)
.circleborder-radius: 50%

Directional variants

.roundy
.roundy-top
.roundy-bottom
.roundy-left
.roundy-right
.roundy-top-left
.roundy-top-right
.roundy-bottom-left
.roundy-bottom-right
.circle

Nested recalculation — interactive

Each level reads its parent's --border-radius and --padding, subtracts, and writes --br-effective to itself. Inner labels show the computed value at each depth.

Depth 4
--border-radius 20px
--padding 6px
Depth--br-effective

Same math, applied to .pcw-table

Corner cells inherit the recalculated radius automatically — the demo below uses the same slider values.

#NameType
001BulbasaurErba/Veleno
004CharmanderFuoco
007SquirtleAcqua
025PikachuElettro
§ 13 · Tabs

Accordion tabs from <details>

Native semantic disclosure. Set name="X" on sibling <details> to make them mutually exclusive — opening one closes the others.

CSS variableDefaultPurpose
--tabs-bgvar(--c-pcwiki-light)inactive tab background
--tabs-bg-activevar(--c-pcwiki)open tab background
--tabs-radiusvar(--default-border-radius)tab corner radius
--tabs-gap0.25remspacing between siblings
Acqua
First-generation Water-type starter line: Squirtle → Wartortle → Blastoise.
Fuoco
First-generation Fire-type starter line: Charmander → Charmeleon → Charizard.
Erba
First-generation Grass-type starter line: Bulbasaur → Ivysaur → Venusaur.
§ 14 · PCW table

Drop-in styling for data tables

.pcw-table styles a regular <table> with a gradient header row, light body rows, and corner cells that follow --border-radius. Two header modes — default (first <tbody> row, MediaWiki convention) or .sortable (semantic <thead>) — plus optional scroll and sticky-head modifiers.

ModifierEffect
.pcw-tablebase styling: rounded corners, gradient header, light body rows. The first <tbody> row is rendered as the header.
.sortabletreat the semantic <thead> row as the header instead. Use when the table has proper thead/tbody structure.
.scrollablewrap the table in horizontal overflow for wide content.
.sticky-headpin the header row to the top during vertical scroll.

Default — first <tbody> row is the header

Skip <thead> entirely; put header <th> cells as the first row of <tbody>. Matches MediaWiki's wikitable convention.

#NameTypeRegion
001BulbasaurErba/VelenoKanto
152ChikoritaErbaJohto
252TreeckoErbaHoenn
387TurtwigErbaSinnoh

.sortable — semantic <thead>

Use proper <thead>/<tbody> structure. The thead row carries the gradient; the body rows stay on the light surface.

#NameTypeRegion
001BulbasaurErba/VelenoKanto
152ChikoritaErbaJohto
252TreeckoErbaHoenn
387TurtwigErbaSinnoh

.scrollable — wide tables

The table establishes its own horizontal overflow context. Try scrolling the table below sideways — the page itself doesn't scroll.

#NameType 1Type 2 HPAtkDefSpASpDSpe RegionGen
001BulbasaurErbaVeleno454949656545KantoI
004CharmanderFuoco—395243605065KantoI
007SquirtleAcqua—444865506443KantoI
025PikachuElettro—355540505090KantoI
150MewtwoPsico—1061109015490130KantoI

.sticky-head — pinned header

The header row sticks to the top while scrolling through long tables. The demo below is wrapped in a max-height container so scrolling stays inside the card.

#NameTypeRegion
001BulbasaurErba/VelenoKanto
025PikachuElettroKanto
152ChikoritaErbaJohto
155CyndaquilFuocoJohto
158TotodileAcquaJohto
252TreeckoErbaHoenn
255TorchicFuocoHoenn
258MudkipAcquaHoenn
387TurtwigErbaSinnoh
390ChimcharFuocoSinnoh
393PiplupAcquaSinnoh
495SnivyErbaUnima
498TepigFuocoUnima
501OshawottAcquaUnima
§ 15 · Responsive variants

Desktop-first breakpoint prefixes

Prefix any utility with sm:, md: or lg: to activate it at and below that breakpoint. Resize the window — the banners below disclose which breakpoint they target.

PrefixActivates when
lg:viewport ≤ 992px
md:viewport ≤ 768px
sm:viewport ≤ 576px
(no prefix)always (xs base, viewport ≥ 0)

Almost every utility in display, flex, grid, gap, sizes, and typography ships responsive variants. e.g. md:grid-cols-2 sm:grid-cols-1.

Inspector

Drag the right edge to resize the demo frame. The viewport read-out shows the current width and which prefixes are active; the banners inside the frame disclose themselves accordingly.

…

Static example

…
.md:hidden — disappears ≤ 768px