Toggle menu
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/Preview: Difference between revisions

From OHC Network Wiki
More languages
Content deleted Content added
Bot: live component gallery for visual regression checking in both themes - Claude
 
Bot: swatches are pure colour blocks — a text label on a foreground token is illegible by construction and produced false positives in the contrast audit - Claude
 
Line 15: Line 15:
! Token !! Swatch !! Token !! Swatch
! Token !! Swatch !! Token !! Swatch
|-
|-
| <code>--ohc-background</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-background);color:var(--ohc-foreground);">sample</span> || <code>--ohc-soft-background</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-soft-background);color:var(--ohc-foreground);">sample</span>
| <code>--ohc-background</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-background);"></span> || <code>--ohc-soft-background</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-soft-background);"></span>
|-
|-
| <code>--ohc-muted-background</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-muted-background);color:var(--ohc-foreground);">sample</span> || <code>--ohc-strong-background</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-strong-background);color:var(--ohc-foreground);">sample</span>
| <code>--ohc-muted-background</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-muted-background);"></span> || <code>--ohc-strong-background</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-strong-background);"></span>
|-
|-
| <code>--ohc-foreground</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-foreground);color:var(--ohc-foreground);">sample</span> || <code>--ohc-muted-foreground</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-muted-foreground);color:var(--ohc-foreground);">sample</span>
| <code>--ohc-foreground</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-foreground);"></span> || <code>--ohc-muted-foreground</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-muted-foreground);"></span>
|-
|-
| <code>--ohc-soft-foreground</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-soft-foreground);color:var(--ohc-foreground);">sample</span> || <code>--ohc-placeholder-foreground</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-placeholder-foreground);color:var(--ohc-foreground);">sample</span>
| <code>--ohc-soft-foreground</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-soft-foreground);"></span> || <code>--ohc-placeholder-foreground</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-placeholder-foreground);"></span>
|-
|-
| <code>--ohc-card</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-card);color:var(--ohc-foreground);">sample</span> || <code>--ohc-primary</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-primary);color:var(--ohc-foreground);">sample</span>
| <code>--ohc-card</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-card);"></span> || <code>--ohc-primary</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-primary);"></span>
|-
|-
| <code>--ohc-primary-foreground</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-primary-foreground);color:var(--ohc-foreground);">sample</span> || <code>--ohc-primary-bg</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-primary-bg);color:var(--ohc-foreground);">sample</span>
| <code>--ohc-primary-foreground</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-primary-foreground);"></span> || <code>--ohc-primary-bg</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-primary-bg);"></span>
|-
|-
| <code>--ohc-border</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-border);color:var(--ohc-foreground);">sample</span> || <code>--ohc-strong-border</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-strong-border);color:var(--ohc-foreground);">sample</span>
| <code>--ohc-border</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-border);"></span> || <code>--ohc-strong-border</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-strong-border);"></span>
|-
|-
| <code>--ohc-destructive</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-destructive);color:var(--ohc-foreground);">sample</span> || <code>--ohc-accent</code> || <span style="display:inline-block;min-width:9em;padding:0.4em 0.7em;border:1px solid var(--ohc-border);border-radius:8px;background:var(--ohc-accent);color:var(--ohc-foreground);">sample</span>
| <code>--ohc-destructive</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-destructive);"></span> || <code>--ohc-accent</code> || <span style="display:inline-block;width:9em;height:1.6em;vertical-align:middle;border:1px solid var(--ohc-strong-border);border-radius:8px;background:var(--ohc-accent);"></span>
|}
|}