openvibers/openvibe.design Commits
The chat button and arena lines read on light themes (#112)
Changes
@@@ -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); }@@@ -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');
@@ -317,7 +317,7 @@ html.ar-fit .ar-shot--desktop .ar-shot-frame, html.ar-fit .ar-shot--desktop::bef
@@ -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 > 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 { 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 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-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, .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); }
.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
@@ -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[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 { 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 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-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; }
.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
@@ -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-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 { 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-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-model { font-weight: 700; overflow-wrap: anywhere; }
.ar-kb-elo { font-weight: 800; }
.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-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 { 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 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-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-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-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); }
.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); }
@@ -12,4 +12,18 @@ assert.ok(
@@ -12,4 +12,18 @@ assert.ok(
'the LIVE badge darkens its red under white text'
'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');
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');