openvibers/openvibe.design Commits

The chat button and arena lines read on light themes (#112)

OP OpenVibers committed 12 days ago · 5a851dae44 · 2 files, +22 −8

Changes

ddiff --git a/public/css/design.css b/public/css/design.css
iindex 3bf24bf..9c698df 100644
---- a/public/css/design.css
++++ b/public/css/design.css
@@@ -317,7 +317,7 @@ html.ar-fit .ar-shot--desktop .ar-shot-frame, html.ar-fit .ar-shot--desktop::bef
.dv-chat > label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.dv-chat-row { display: flex; align-items: center; gap: 8px; }
.dv-chat-row input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input, var(--bg-primary)); color: var(--text-primary); font: inherit; font-size: .92rem; }
--.dv-chat-row button, .dv-element button[type=submit] { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 800; cursor: pointer; }
++.dv-chat-row button, .dv-element button[type=submit] { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent-strong, var(--accent)); color: var(--on-accent-strong, var(--on-accent)); font: inherit; font-weight: 800; cursor: pointer; }
.dv-chat-row button:disabled, .dv-element button[type=submit]:disabled { opacity: .55; cursor: not-allowed; }
.dv-chat-status, .dv-element .dv-status { min-height: 1.3em; margin: 8px 0 0; font-size: .84rem; color: var(--text-muted); }
.dv-chat-status.is-error, .dv-element .dv-status.is-error { color: var(--danger-text, #f87171); }
@@@ -589,7 +589,7 @@ html.ar-fit .ar-shot--desktop .ar-shot-frame, html.ar-fit .ar-shot--desktop::bef
.ar-kind[aria-current] .ar-kind-i { background: var(--room-strong); color: var(--bg-primary, #0a0f1c); }
.ar-kind-t { display: grid; gap: 1px; min-width: 0; }
.ar-kind-t b { font-size: .88rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
--.ar-kind-t small { font-size: .72rem; line-height: 1.3; color: var(--text-muted, #7386a3); }
++.ar-kind-t small { font-size: .72rem; line-height: 1.3; color: var(--text-secondary, #96a7c2); }
.ar-judge { margin-top: 18px; scroll-margin-top: 72px; }
.ar-brief h2 { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: -.02em; text-wrap: balance; }
@@@ -632,18 +632,18 @@ html.ar-fit .ar-shot--desktop .ar-shot-frame, html.ar-fit .ar-shot--desktop::bef
.ar-kb-rows { list-style: none; margin: 10px 0 0; padding: 0; font-variant-numeric: tabular-nums; }
.ar-kb-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) 3.4em 3.6em; align-items: baseline; gap: 6px; padding: 6px 2px; border-top: 1px solid color-mix(in srgb, var(--border, #26344d) 70%, transparent); font-size: .86rem; }
.ar-kb-row > :nth-child(n+3) { text-align: right; }
--.ar-kb-th { border-top: 0; padding-top: 0; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
--.ar-kb-rank { font-weight: 800; color: var(--text-muted, #7386a3); }
++.ar-kb-th { border-top: 0; padding-top: 0; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary, #96a7c2); }
++.ar-kb-rank { font-weight: 800; color: var(--text-secondary, #96a7c2); }
.ar-kb-model { font-weight: 700; overflow-wrap: anywhere; }
.ar-kb-elo { font-weight: 800; }
--.ar-kb-games { color: var(--text-muted, #7386a3); }
++.ar-kb-games { color: var(--text-secondary, #96a7c2); }
.ar-kb-rows .ar-kb-row:nth-child(2) :is(.ar-kb-rank, .ar-kb-model, .ar-kb-elo) { color: var(--room-strong); }
.ar-kb-more { margin-top: 2px; }
.ar-kb-more summary { cursor: pointer; padding: 6px 2px; font-size: .8rem; font-weight: 750; color: var(--room-strong); }
.ar-kb-more .ar-kb-rows { margin-top: 0; }
.ar-kb-more .ar-kb-row:nth-child(2) :is(.ar-kb-rank, .ar-kb-model, .ar-kb-elo) { color: inherit; }
--.ar-kb-empty { margin: 10px 0 0; color: var(--text-muted, #7386a3); font-size: .86rem; }
--.ar-kb-links { margin: 10px 0 0; font-size: .78rem; color: var(--text-muted, #7386a3); }
++.ar-kb-empty { margin: 10px 0 0; color: var(--text-secondary, #96a7c2); font-size: .86rem; }
++.ar-kb-links { margin: 10px 0 0; font-size: .78rem; color: var(--text-secondary, #96a7c2); }
.ar-kb-links a { color: var(--text-secondary, #96a7c2); }
.ar-provisional { padding: 0 6px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .04em; vertical-align: 1px; background: color-mix(in srgb, var(--text-muted, #7386a3) 18%, transparent); color: var(--text-muted, #7386a3); }
ddiff --git a/test/contrast.test.js b/test/contrast.test.js
iindex 91983a5..8b1c205 100644
---- a/test/contrast.test.js
++++ b/test/contrast.test.js
@@@ -12,4 +12,18 @@ assert.ok(
'the LIVE badge darkens its red under white text'
);
assert.ok(!css.includes('.pv-badge { position: absolute; left: 8px; top: 8px; padding: 1px 7px; border-radius: 5px; background: var(--live-red, #e11d48);'), 'the plain live red is gone from the badge');
--console.log('contrast: the LIVE badge reads');
++// The chat and element submit buttons were white on the plain accent (3.7:1). The accent strong pair is text-safe.
++assert.ok(
++ css.includes('background: var(--accent-strong, var(--accent)); color: var(--on-accent-strong, var(--on-accent));'),
++ 'the chat and element submit buttons use the accent strong pair'
++);
++// The arena's small lines were muted text on a tint (4.1-4.4:1); the secondary text is the readable pair.
++assert.ok(
++ css.includes('.ar-kind-t small { font-size: .72rem; line-height: 1.3; color: var(--text-secondary, #96a7c2); }'),
++ 'the arena kind line uses the secondary text'
++);
++assert.ok(
++ !/\.ar-kb-[a-z]+ \{[^\n]*color: var\(--text-muted, #7386a3\)/.test(css),
++ 'no arena leaderboard line uses the muted text'
++);
++console.log('contrast: the LIVE badge, the submit buttons and the arena lines read');