OHC Network Wiki:Design/Preview: Difference between revisions
From OHC Network Wiki
More languages
More actions
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; |
| <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; |
| <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; |
| <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; |
| <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; |
| <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; |
| <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; |
| <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; |
| <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> |
||
|} |
|} |
||