fix(kimi-web): improve dark mono button contrast #1750
+49
−5
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -343,6 +343,7 @@ html[data-accent="mono"] { | |
| html[data-color-scheme="dark"][data-accent="mono"] { | ||
| --accent-primary: #e8eaed; | ||
| --color-accent: #e8eaed; | ||
| --color-text-on-accent: #171717; | ||
|
There was a problem hiding this comment.
In dark mono mode (and the repeated system-dark override below), this global token now resolves to Useful? React with 👍 / 👎.
Author
There was a problem hiding this comment. Fixed in 8a9d3ca. The off thumb now uses |
||
| --color-accent-hover: #c9cdd4; | ||
| --color-accent-soft: #21262d; | ||
| --color-accent-bd: #444c56; | ||
|
|
@@ -358,6 +359,7 @@ html[data-color-scheme="dark"][data-accent="mono"] { | |
| html[data-color-scheme="system"][data-accent="mono"] { | ||
| --accent-primary: #e8eaed; | ||
| --color-accent: #e8eaed; | ||
| --color-text-on-accent: #171717; | ||
| --color-accent-hover: #c9cdd4; | ||
| --color-accent-soft: #21262d; | ||
| --color-accent-bd: #444c56; | ||
|
|
@@ -398,11 +400,13 @@ html[data-color-scheme="dark"][data-accent="mono"] { | |
| --color-surface-sunken: #f3f5f8; | ||
| /* Foreground text colours. `--color-text` is the default solid body / UI | ||
| colour (headings and emphasis share it); muted / faint step down for | ||
| secondary and tertiary copy; on-accent is text drawn on the accent fill; | ||
| inverse stays light on dark image and modal overlays. */ | ||
| --color-text: rgba(0, 0, 0, 0.9); | ||
| --color-text-muted: #6b7280; | ||
| --color-text-faint: #9aa3af; | ||
| --color-text-on-accent: #ffffff; | ||
| --color-text-inverse: #ffffff; | ||
| --color-line: #e7eaee; | ||
| --color-line-strong: #d4d9e0; | ||
| /* Neutral selected fill (sidebar rows, list pickers) — deliberately NOT | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { readFileSync } from 'node:fs'; | ||
|
|
||
| import { describe, expect, it } from 'vitest'; | ||
|
|
||
| const css = readFileSync(new URL('../src/style.css', import.meta.url), 'utf8'); | ||
| const composer = readFileSync(new URL('../src/components/chat/Composer.vue', import.meta.url), 'utf8'); | ||
| const switchComponent = readFileSync(new URL('../src/components/ui/Switch.vue', import.meta.url), 'utf8'); | ||
| const designTokens = css.slice(css.indexOf('DESIGN TOKENS v2')); | ||
|
|
||
| function declarationBlock(source: string, selector: string): string { | ||
| const selectorIndex = source.indexOf(`${selector} {`); | ||
| expect(selectorIndex).toBeGreaterThanOrEqual(0); | ||
| const openBrace = source.indexOf('{', selectorIndex); | ||
| const closeBrace = source.indexOf('}', openBrace); | ||
| return source.slice(openBrace + 1, closeBrace); | ||
| } | ||
|
|
||
| describe('dark mono theme contrast', () => { | ||
| it('defines a stable light foreground for dark overlays', () => { | ||
| expect(declarationBlock(designTokens, ':root')).toMatch(/--color-text-inverse:\s*#ffffff;/); | ||
| }); | ||
|
|
||
| it.each(['.att-lightbox-name', '.att-lightbox-close'])('keeps %s readable on the dark overlay', (selector) => { | ||
| expect(declarationBlock(composer, selector)).toMatch(/color:\s*var\(--color-text-inverse\);/); | ||
| }); | ||
|
|
||
| it.each([ | ||
| ['.ui-switch__thumb', '--color-text-inverse'], | ||
| ['.ui-switch.is-on .ui-switch__thumb', '--color-text-on-accent'], | ||
| ])('uses %s background token %s', (selector, token) => { | ||
| expect(declarationBlock(switchComponent, selector)).toMatch(new RegExp(`background:\\s*var\\(${token}\\);`)); | ||
| }); | ||
|
|
||
| it.each([ | ||
| 'html[data-color-scheme="dark"][data-accent="mono"]', | ||
| 'html[data-color-scheme="system"][data-accent="mono"]', | ||
| ])('uses dark text on the near-white accent for %s', (selector) => { | ||
| expect(declarationBlock(css, selector)).toMatch(/--color-text-on-accent:\s*#171717;/); | ||
| }); | ||
| }); |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the dark mono theme, changing the global
--color-text-on-accenttoken to#171717fixes near-white accent buttons, but this token is also used for non-accent overlay controls on dark backgrounds, such asComposer.vue's.att-video-badge,.att-lightbox-name, and.att-lightbox-close. When a user opens media attachments or sees a video badge in dark mono, those labels/icons become near-black onrgba(0,0,0,...)overlays and are effectively hidden; consider scoping the dark foreground to primary/accent-filled controls or overriding these overlay controls back to a light foreground.Useful? React with 👍 / 👎.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed in ab2906f. I rebased onto the latest main, kept
--color-text-on-accentfor accent-filled controls, and added a stable--color-text-inversefor the dark media overlay..att-lightbox-nameand.att-lightbox-closenow use the inverse token. Regression coverage verifies both contracts; the full kimi-web suite (599 tests), typecheck, style check, and build pass.