Toggle search
Toggle menu
421
1
5
1.2K
OHC Network Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

OHC Network Wiki:Design/careui: Difference between revisions

From OHC Network Wiki
More languages
More actions
Robo (talk | contribs)
Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
42 edits
Content deleted Content added
VisualWikitext
Document OHC design-token spec for maintainers (via create-page on MediaWiki MCP Server)
 
Bot: rewrite as the careui design-system reference — generated token tables, layer map, and the TemplateStyles sanitizer limits established by probing this wiki - Claude
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{#description2:OHC Network Wiki design system — the ohc.network / Care·ui language applied to this wiki.}}
{{#description2:OHC Network Wiki design system — careui, ported to MediaWiki.}}


'''This wiki uses [https://careui.ohc.network careui]''', Open Healthcare Network's
'''Design system''' — the maintainer's single source of truth for how the wiki expresses the ohc.network brand (teal #0f8b6c · deep ink #173d34 · lime #b8f36f) and the Care·ui typography (Switzer, Figtree, Geist Mono).
design system ([https://github.com/ohcnetwork/careui github.com/ohcnetwork/careui]).
Colour, type, shape and spacing all come from careui rather than from a wiki-specific
palette.


== Palette ==
== The one rule ==

'''Never write a colour literal outside [[MediaWiki:Common.css]].'''

Every component references <code>var(--ohc-*)</code>. This is what makes dark mode
work: a literal cannot adapt, so a hardcoded colour is a dark-mode bug waiting to
be filed. Before this port there were 96 colour literals across the component
stylesheets, and dark mode was visibly broken on cards, badges, infoboxes and
navboxes.

== How it fits together ==


{| class="wikitable"
{| class="wikitable"
! Layer !! Page !! Responsibility
! Role
! Light
! Dark
! Used for
|-
| Primary accent
| <code>#0f8b6c</code>
| <code>#14a980</code>
| Links, buttons, badges, active states
|-
|-
| Typefaces + tokens || [[MediaWiki:Common.css]] || <code>@font-face</code> for Figtree/Geist Mono, and every <code>--ohc-*</code> token for both themes. The single source of colour.
| Accent (hover / gradient)
| <code>#12806a</code>
| <code>#0f8b6c</code>
| Hover states, button gradients
|-
|-
| Skin chrome || [[MediaWiki:Citizen.css]] || Rebinds Citizen's own OKLCH knobs to the careui tokens — accent, neutrals, surfaces, borders, radius, type scale.
| Ink (deep green)
| <code>#173d34</code>
| <code>#e6efe9</code>
| Title bars, headings, infobox/navbox headers
|-
|-
| Content || [[MediaWiki:Common.css]] || careui prose rules scoped to <code>.mw-parser-output</code>, plus the unified table treatment.
| Lime (highlight)
| <code>#b8f36f</code>
| <code>#a3e635</code>
| Section-underline accents, hover pop
|-
|-
| Components || <code>Template:*/styles.css</code> || Infobox, navbox, sidebar, cards, badges, admonitions. Token references only.
| Sage (muted line)
| <code>#d8e1db</code>
| <code>#1b2f28</code>
| Borders, dividers
|-
| Surface (off-white)
| <code>#f7f9f6</code> / <code>#fbfcfb</code>
| <code>#052e24</code>-tinted
| Page + card backgrounds
|}
|}


== Typography ==
== Colour tokens ==

Values are resolved from Tailwind v4.3.2's ramps, which is what careui's own
tokens indirect onto. careui's build-time syntax (<code>@theme inline</code>,
<code>--alpha()</code>) does not survive outside a Tailwind build and is expanded
here.


{| class="wikitable"
{| class="wikitable"
! Token !! Light !! Dark !! careui source
! Role
|-
! Family
| <code>--ohc-background</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ffffff;"></span> <code>#ffffff</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#0a0a0a;"></span> <code>#0a0a0a</code> || literal
! Source
|-
| <code>--ohc-soft-background</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fafafa;"></span> <code>#fafafa</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#171717;"></span> <code>#171717</code> || neutral-50
|-
| <code>--ohc-muted-background</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#f5f5f5;"></span> <code>#f5f5f5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#262626;"></span> <code>#262626</code> || neutral-100
|-
| <code>--ohc-strong-background</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#e5e5e5;"></span> <code>#e5e5e5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#404040;"></span> <code>#404040</code> || neutral-200
|-
| <code>--ohc-muted</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#f5f5f5;"></span> <code>#f5f5f5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#262626;"></span> <code>#262626</code> || neutral-100
|-
| <code>--ohc-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#0a0a0a;"></span> <code>#0a0a0a</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fafafa;"></span> <code>#fafafa</code> || neutral-950
|-
| <code>--ohc-muted-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#404040;"></span> <code>#404040</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#e5e5e5;"></span> <code>#e5e5e5</code> || neutral-700
|-
| <code>--ohc-soft-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#525252;"></span> <code>#525252</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#d4d4d4;"></span> <code>#d4d4d4</code> || neutral-600
|-
| <code>--ohc-disabled-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#d4d4d4;"></span> <code>#d4d4d4</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#404040;"></span> <code>#404040</code> || neutral-300
|-
| <code>--ohc-placeholder-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#737373;"></span> <code>#737373</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#525252;"></span> <code>#525252</code> || neutral-500
|-
| <code>--ohc-inverse-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ffffff;"></span> <code>#ffffff</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#000000;"></span> <code>#000000</code> || literal
|-
| <code>--ohc-card</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ffffff;"></span> <code>#ffffff</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#171717;"></span> <code>#171717</code> || literal
|-
| <code>--ohc-card-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#0a0a0a;"></span> <code>#0a0a0a</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ffffff;"></span> <code>#ffffff</code> || neutral-950
|-
| <code>--ohc-popover</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ffffff;"></span> <code>#ffffff</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#0a0a0a;"></span> <code>#0a0a0a</code> || literal
|-
| <code>--ohc-popover-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#0a0a0a;"></span> <code>#0a0a0a</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fafafa;"></span> <code>#fafafa</code> || neutral-950
|-
| <code>--ohc-primary</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#006045;"></span> <code>#006045</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#00d492;"></span> <code>#00d492</code> || emerald-800
|-
| <code>--ohc-primary-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ecfdf5;"></span> <code>#ecfdf5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#002c22;"></span> <code>#002c22</code> || emerald-50
|-
| <code>--ohc-secondary</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#f5f5f5;"></span> <code>#f5f5f5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#262626;"></span> <code>#262626</code> || neutral-100
|-
| <code>--ohc-secondary-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#171717;"></span> <code>#171717</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fafafa;"></span> <code>#fafafa</code> || neutral-900
|-
| <code>--ohc-accent</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#f5f5f5;"></span> <code>#f5f5f5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#404040;"></span> <code>#404040</code> || neutral-100
|-
| <code>--ohc-accent-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#171717;"></span> <code>#171717</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fafafa;"></span> <code>#fafafa</code> || neutral-900
|-
| <code>--ohc-destructive</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#e7000b;"></span> <code>#e7000b</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ff6467;"></span> <code>#ff6467</code> || red-600
|-
| <code>--ohc-destructive-foreground</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fef2f2;"></span> <code>#fef2f2</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fef2f2;"></span> <code>#fef2f2</code> || red-50
|-
| <code>--ohc-soft-border</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#f5f5f5;"></span> <code>#f5f5f5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(255, 255, 255, 0.05);"></span> <code>rgba(255, 255, 255, 0.05)</code> || neutral-100
|-
| <code>--ohc-border</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#e5e5e5;"></span> <code>#e5e5e5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(255, 255, 255, 0.09);"></span> <code>rgba(255, 255, 255, 0.09)</code> || neutral-200
|-
| <code>--ohc-strong-border</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#d4d4d4;"></span> <code>#d4d4d4</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(255, 255, 255, 0.15);"></span> <code>rgba(255, 255, 255, 0.15)</code> || neutral-300
|-
| <code>--ohc-stronger-border</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#a1a1a1;"></span> <code>#a1a1a1</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(255, 255, 255, 0.22);"></span> <code>rgba(255, 255, 255, 0.22)</code> || neutral-400
|-
| <code>--ohc-inverse-border</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ffffff;"></span> <code>#ffffff</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fafafa;"></span> <code>#fafafa</code> || literal
|-
| <code>--ohc-input</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#d4d4d4;"></span> <code>#d4d4d4</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(255, 255, 255, 0.15);"></span> <code>rgba(255, 255, 255, 0.15)</code> || neutral-300
|-
| <code>--ohc-ring</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(97, 95, 255, 0.75);"></span> <code>rgba(97, 95, 255, 0.75)</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(97, 95, 255, 0.75);"></span> <code>rgba(97, 95, 255, 0.75)</code> || literal
|-
| <code>--ohc-primary-bg</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ecfdf5;"></span> <code>#ecfdf5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#002c22;"></span> <code>#002c22</code> || emerald-50
|-
| <code>--ohc-primary-border</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#a4f4cf;"></span> <code>#a4f4cf</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#006045;"></span> <code>#006045</code> || emerald-200
|-
| <code>--ohc-shadow-color</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(0, 0, 0, 0.10);"></span> <code>rgba(0, 0, 0, 0.10)</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(0, 0, 0, 0.55);"></span> <code>rgba(0, 0, 0, 0.55)</code> || literal
|-
| <code>--ohc-shadow-color-strong</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(0, 0, 0, 0.18);"></span> <code>rgba(0, 0, 0, 0.18)</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:rgba(0, 0, 0, 0.70);"></span> <code>rgba(0, 0, 0, 0.70)</code> || literal
|-
| <code>--ohc-chart-1</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#f54900;"></span> <code>#f54900</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#1447e6;"></span> <code>#1447e6</code> || orange-600
|-
| <code>--ohc-chart-2</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#009966;"></span> <code>#009966</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#00c950;"></span> <code>#00c950</code> || emerald-600
|-
|-
| <code>--ohc-chart-3</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#104e64;"></span> <code>#104e64</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fe9a00;"></span> <code>#fe9a00</code> || cyan-900
| Body
| Switzer (400–700)
| Fontshare, same link as ohc.network
|-
|-
| <code>--ohc-chart-4</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ffb900;"></span> <code>#ffb900</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ad46ff;"></span> <code>#ad46ff</code> || amber-400
| Display / headings
| Figtree (400–800)
| Google Fonts
|-
|-
| <code>--ohc-chart-5</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#f0b100;"></span> <code>#f0b100</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ff2056;"></span> <code>#ff2056</code> || yellow-500
| Code / data
| Geist Mono (400–600)
| Google Fonts
|}
|}


=== Brand ramp ===
Font stacks live in [[MediaWiki:Citizen.css]]; the actual <code>@font-face</code> stylesheets are injected by the <code>ohc-fonts</code> gadget.


careui parameterises <code>--primary-*</code> so a downstream project can swap the
== Skin tokens ([[MediaWiki:Citizen.css]]) ==
brand ramp. We keep careui's default, '''emerald'''. The full ramp is exposed as
<code>--ohc-primary-50</code> … <code>--ohc-primary-950</code> for tints.


{| class="wikitable"
Citizen builds its whole palette from the progressive OKLCH hue. Rebinding the knobs re-colors links, hover, search, TOC and the sage surface tints across both themes:
! Step !! Value
|-
| <code>--ohc-primary-50</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ecfdf5;"></span> <code>#ecfdf5</code>
|-
| <code>--ohc-primary-100</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#d0fae5;"></span> <code>#d0fae5</code>
|-
| <code>--ohc-primary-200</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#a4f4cf;"></span> <code>#a4f4cf</code>
|-
| <code>--ohc-primary-300</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#5ee9b5;"></span> <code>#5ee9b5</code>
|-
| <code>--ohc-primary-400</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#00d492;"></span> <code>#00d492</code>
|-
| <code>--ohc-primary-500</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#00bc7d;"></span> <code>#00bc7d</code>
|-
| <code>--ohc-primary-600</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#009966;"></span> <code>#009966</code>
|-
| <code>--ohc-primary-700</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#007a55;"></span> <code>#007a55</code>
|-
| <code>--ohc-primary-800</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#006045;"></span> <code>#006045</code>
|-
| <code>--ohc-primary-900</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#004f3b;"></span> <code>#004f3b</code>
|-
| <code>--ohc-primary-950</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#002c22;"></span> <code>#002c22</code>
|}


=== Status palette ===
<pre>
--color-progressive-oklch__h: 169;
--color-progressive-oklch__c: 0.11;
--color-progressive-oklch__l: 56.8%;
--color-progressive-hsl__h: 165; /* HSL fallback: 165, 80%, 31% */
--color-surface-0-oklch__l: 97.5%; /* airy sage page background */
--border-radius-base: 8px; /* Care·ui roundness (default 4px) */
--width-layout: 1120px; /* slightly wider docs column */
</pre>


careui has no status colours — it ships <code>primary</code>, <code>destructive</code>
Dark theme ([[skin-theme-clientpref-night]]) lifts the accent lightness to 62% so teal links keep contrast on the deep-green surfaces.
and a <code>chart-1..5</code> set whose hues '''intentionally differ between light and

dark''', which makes them wrong for status badges (a "development" chip must not
== Component-to-file map ==
change hue when the reader flips theme). So this is a deliberate extension, built in
careui's idiom: same ramps, same steps careui uses for foreground/background pairs.


{| class="wikitable"
{| class="wikitable"
! Status !! Ramp !! Text !! Background !! Hairline !! Used for
! Component
! Where the CSS lives
|-
|-
| <code>success</code> || emerald || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#007a55;"></span> <code>#007a55</code> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#00d492;"></span> <code>#00d492</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ecfdf5;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#002c22;"></span> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#a4f4cf;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#006045;"></span> || production, active
| Hero, buttons, badges, cards, signal, infobox, navbox, sidebar, message boxes
| [[Template:OHC/styles.css]]
|-
|-
| <code>info</code> || blue || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#1447e6;"></span> <code>#1447e6</code> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#51a2ff;"></span> <code>#51a2ff</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#eff6ff;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#162456;"></span> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#bedbff;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#193cb8;"></span> || development, stable, backend
| Admonitions, doc meta badges, version pills
| [[Template:Docs/styles.css]]
|-
|-
| <code>warning</code> || amber || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#bb4d00;"></span> <code>#bb4d00</code> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ffb900;"></span> <code>#ffb900</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fffbeb;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#461901;"></span> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fee685;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#973c00;"></span> || staging, experimental
| Main Page landing blocks (search pill, navgrid, statsbar, quicklinks)
| [[Template:Main page/styles.css]]
|-
|-
| <code>danger</code> || red || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#c10007;"></span> <code>#c10007</code> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ff6467;"></span> <code>#ff6467</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fef2f2;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#460809;"></span> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#ffc9c9;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#9f0712;"></span> || inactive, deprecated
| Deployment sidebar, infra table, plugin grid
| [[Template:Deployment/styles.css]]
|-
|-
| <code>accent</code> || purple || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#8200db;"></span> <code>#8200db</code> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#c27aff;"></span> <code>#c27aff</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#faf5ff;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#3c0366;"></span> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#e9d4ff;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#6e11b0;"></span> || preview, frontend
| Deployment catalog cards
| [[Template:Deployment catalog row/styles.css]]
|-
|-
| <code>neutral</code> || neutral || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#404040;"></span> <code>#404040</code> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#a1a1a1;"></span> <code>#a1a1a1</code> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#fafafa;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#0a0a0a;"></span> || <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#e5e5e5;"></span> / <span style="display:inline-block;width:1em;height:1em;vertical-align:-0.15em;border:1px solid var(--ohc-border);border-radius:3px;background:#262626;"></span> || demo, unclassified
| Care plugin cards
|}
| [[Template:Plugin row/styles.css]]

== Typography ==

{| class="wikitable"
! Role !! Family !! Source
|-
|-
| Everything || Figtree Variable (300–900) || <code>@fontsource-variable/figtree@5.2.10</code>, pinned on jsDelivr
| Skin chrome (header, links, search, radius, fonts)
|-
| [[MediaWiki:Citizen.css]]
| Code || Geist Mono Variable (100–900) || <code>@fontsource-variable/geist-mono@5.2.8</code>, pinned on jsDelivr
|}
|}


These are the '''same files careui itself uses'''. They are declared as
== Gadgets ==
<code>@font-face</code> in [[MediaWiki:Common.css]], not injected from JavaScript —
the previous gadget-based approach guaranteed a flash of fallback text and in
practice often failed to apply at all.

Switzer has been dropped; careui is Figtree throughout. careui derives heading
hierarchy from '''weight''', not colour, so every heading is
<code>--ohc-foreground</code> and only size and weight step down.

== Shape ==

careui's radius scale is one <code>--radius</code> (10px) with ±4px steps:
<code>sm 6</code> · <code>md 8</code> · <code>lg 10</code> · <code>xl 14</code> ·
<code>2xl 18</code> · <code>3xl 22</code> · <code>full 9999</code>.

Citizen derives <code>medium = 2 × base</code> and <code>large = 3 × base</code>,
which cannot express that scale, so all three are set explicitly in
[[MediaWiki:Citizen.css]].

== Editing TemplateStyles: known limits ==

The TemplateStyles sanitizer is stricter than normal CSS. These were established by
probing the live wiki, not from documentation. '''A rejected declaration fails the
whole page save''' with <code>templatestyles-error-bad-value-for-property</code> —
it is not silently dropped.


{| class="wikitable"
{| class="wikitable"
! !! <code>var()</code> accepted?
! Gadget
! Purpose
|-
|-
| <code>color</code>, <code>background</code>, <code>background-color</code> || '''Yes'''
| <code>ohc-fonts</code>
| Injects Switzer / Figtree / Geist Mono stylesheets
|-
|-
| <code>border</code> (shorthand), <code>border-''side''</code>, <code>border-''side''-color</code> || '''Yes'''
| <code>ohc-copy-code</code>
| Copy button on every code block
|-
|-
| <code>box-shadow</code> — '''colour slot only''' || '''Yes''' (<code>0 4px 12px var(--x)</code>); a whole-value <code>var()</code> is rejected
| <code>ohc-search-hotkey</code>
| Press <code>/</code> to focus search anywhere
|-
|-
| <code>outline</code>, <code>text-decoration-color</code>, <code>linear-gradient()</code> || '''Yes'''
| <code>ohc-back-to-top</code>
| Floating back-to-top pill
|-
|-
| <code>border-radius</code>, <code>font-family</code>, <code>padding</code>, <code>border-color</code> || '''No''' — keep these literal
| <code>ohc-version-switcher</code>
|-
| CARE 3.x version dropdown on doc pages
| <code>color-mix()</code> || '''No''' — derive the value as a token in [[MediaWiki:Common.css]] instead
|-
| custom-property declarations (<code>--x: y</code>) || '''No''' — declare in [[MediaWiki:Common.css]]
|-
| <code>corner-shape</code> (careui squircles) || '''No''' — unrecognised property
|}
|}

Registration lives in [[MediaWiki:Gadgets-definition]].
Because <code>color-mix()</code> and custom properties are both unavailable on the
template side, any derived tint (<code>bg-primary/10</code> in careui terms) must be
pre-computed as its own token — hence <code>--ohc-primary-bg</code>,
<code>--ohc-primary-border</code> and the <code>--ohc-status-*-bg</code> family.

== Checking your work ==

* [[OHC Network Wiki:Design/Preview]] renders every component in one page — open it in both themes.
* Contrast floors are careui's: '''4.5:1''' body, '''3:1''' large text and UI chrome.
* Remember MediaWiki invalidates dependent pages '''lazily'''. After editing a
<code>styles.css</code>, a page may serve stale CSS from the parser cache for a
while; force a re-parse with <code>?action=purge</code> before concluding
something is broken.


[[Category:OHC templates]]
[[Category:OHC templates]]
Retrieved from "https://ohcnwiki.tellmey.fyi/OHC_Network_Wiki:Design/careui"
This page has been accessed 162 times.