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 up to 5 variants in order: md (medium-dark) · d (dark) · base · l (light) · ml (medium-light). Click any swatch to copy its var() expression.

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.

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.

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
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-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 applies the framework's rounding system to a regular <table>: gradient header, light body rows, and corner cells that follow --border-radius. See the Roundy & nesting section for an interactive demo.

ModifierEffect
.pcw-tablebase styling: .roundy + .bg-gradient + .text-auto
.pcw-table.scrollablewraps in horizontal overflow scroll
.pcw-table.sticky-headfirst body row (or thead in sortable) sticks to top on scroll
.pcw-table.sortabletreats thead as the header row instead of first tbody row
#NameTypeRegion
001BulbasaurErba/VelenoKanto
152ChikoritaErbaJohto
252TreeckoErbaHoenn
387TurtwigErbaSinnoh
§ 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.
…
.md:hidden — disappears ≤ 768px