Template:Plugin row/styles.css: Difference between revisions

← Older edit

Content deleted Content added

Inline

@@ Line 1: / Line 1: @@
+/* OHC Network Wiki -- component styles, careui design system.
-/* Care plugin cards — theme-aware via Citizen vars, OHC teal #0f8b6c. */
+   Colour comes exclusively from the --ohc-* token layer in
+   MediaWiki:Common.css; do not introduce literals here. Note the
+   TemplateStyles sanitizer rejects var() in border-radius, font-family,
+   padding and border-color, so those stay literal.
+   Reference: [[OHC Network Wiki:Design/careui]] */
 .plugin-grid {
@@ Line 15: / Line 20: @@
 .plugin-card {
-    border: 1px solid var(--border-color-base, #d0d5dd);
+    border: 1px solid var(--ohc-border);
-    border-radius: 12px;
+    border-radius: 10px;
     padding: 16px;
-    background: var(--color-surface-1, #ffffff);
+    background: var(--ohc-card);
     transition: box-shadow 0.15s;
 }
 .plugin-card:hover {
-    box-shadow: 0 4px 14px rgba(15,139,108,0.14);
+    box-shadow: 0 4px 14px var(--ohc-shadow-color);
 }
@@ Line 38: / Line 43: @@
     font-size: 1em;
     margin-right: auto;
-    color: var(--color-progressive, #0f8b6c);
+    color: var(--ohc-primary);
     text-decoration: none;
 }
@@ Line 52: / Line 57: @@
 }
-.plugin-card__badge--be { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
+.plugin-card__badge--be { background: var(--ohc-status-info-bg); color: var(--ohc-status-info); border: 1px solid var(--ohc-status-info-border); }
-.plugin-card__badge--fe { background: #fce7f3; color: #be185d; border: 1px solid #fbcfe8; }
+.plugin-card__badge--fe { background: var(--ohc-status-accent-bg); color: var(--ohc-status-accent); border: 1px solid var(--ohc-status-accent-border); }
-.plugin-card__badge--both { background: rgba(15,139,108,0.1); color: #0f8b6c; border: 1px solid rgba(15,139,108,0.22); }
+.plugin-card__badge--both { background: var(--ohc-status-neutral-bg); color: var(--ohc-status-neutral); border: 1px solid var(--ohc-status-neutral-border); }
-.plugin-card__badge--active { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
+.plugin-card__badge--active { background: var(--ohc-status-success-bg); color: var(--ohc-status-success); border: 1px solid var(--ohc-status-success-border); }
-.plugin-card__badge--stable { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
+.plugin-card__badge--stable { background: var(--ohc-status-info-bg); color: var(--ohc-status-info); border: 1px solid var(--ohc-status-info-border); }
-.plugin-card__badge--experimental { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
+.plugin-card__badge--experimental { background: var(--ohc-status-warning-bg); color: var(--ohc-status-warning); border: 1px solid var(--ohc-status-warning-border); }
-.plugin-card__badge--deprecated { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
+.plugin-card__badge--deprecated { background: var(--ohc-status-danger-bg); color: var(--ohc-status-danger); border: 1px solid var(--ohc-status-danger-border); }
 .plugin-card__description {
-    color: var(--color-subtle, #475569);
+    color: var(--ohc-soft-foreground);
     font-size: 0.88em;
     line-height: 1.5;
@@ Line 72: / Line 76: @@
     gap: 6px;
     font-size: 0.8em;
-    color: var(--color-subtle, #64748b);
+    color: var(--ohc-soft-foreground);
     align-items: center;
 }
 .plugin-card__tag {
-    background: var(--color-surface-2, #f1f5f9);
+    background: var(--ohc-muted-background);
     padding: 1px 6px;
-    border-radius: 5px;
+    border-radius: 6px;
-    color: var(--color-base, #475569);
+    color: var(--ohc-soft-foreground);
 }