okooooooo/openless
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Style page dark mode readability with style tokens.

Browse Source 
Replace hardcoded light card backgrounds with --ol-style-* tokens and strengthen dark subtle/input contrast.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
HKLHaoBinandCursor committed 2026-06-13 00:47:53 +08:00
1 parent 012cb77cea
commit 356e8ad480
3 files changed
+75 -42
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

openless-all/app/scripts/aura-skin-contract.test.mjs
+32 -1
View File
@@ -186,7 +186,7 @@ assertUsesClassName(
'sample should accept className usage',
);
const [tokens, globalCss, shell, settingsModal, overview, settingsTabs, themeMode, sourceFiles, remoteStyle] = await Promise.all([
const [tokens, globalCss, shell, settingsModal, overview, settingsTabs, themeMode, stylePage, sourceFiles, remoteStyle] = await Promise.all([
read('src/styles/tokens.css'),
read('src/styles/global.css'),
read('src/components/FloatingShell.tsx'),
@@ -194,6 +194,7 @@ const [tokens, globalCss, shell, settingsModal, overview, settingsTabs, themeMod
read('src/pages/Overview.tsx'),
read('src/pages/settings/tabs.tsx'),
read('src/lib/themeMode.ts'),
read('src/pages/Style.tsx'),
walkSourceFiles(srcRoot),
read('src-tauri/src/remote_server/assets/style.css'),
]);
@@ -397,6 +398,36 @@ assert.match(
'themeMode.ts must apply theme via data-ol-theme / dataset.olTheme',
);
const forbiddenStyleCardLightBackgrounds = [
/rgba\(\s*255\s*,\s*255\s*,\s*255/i,
/rgba\(\s*248\s*,\s*250\s*,\s*252/i,
/rgba\(\s*239\s*,\s*246\s*,\s*255/i,
];
for (const pattern of forbiddenStyleCardLightBackgrounds) {
assert.doesNotMatch(
stylePage,
pattern,
'Style.tsx must not hardcode light style-card backgrounds (use --ol-style-* tokens)',
);
}
assert.match(
stylePage,
/--ol-style-card-bg/,
'Style.tsx must reference --ol-style-card-bg for style pack surfaces',
);
assert.match(
stylePage,
/--ol-style-card-ink/,
'Style.tsx must reference --ol-style-card-ink for style pack text',
);
assert.match(
stylePage,
/--ol-style-subtle-bg/,
'Style.tsx must reference --ol-style-subtle-bg for editor subtle surfaces',
);
const illegalCssStringPatterns = [
/color:\s*'var\([^)]+\)';/,
/background:\s*'var\([^)]+\)';/,
openless-all/app/src/pages/Style.tsx
+39 -37
View File
@@ -613,15 +613,11 @@ export function Style() {
textAlign: 'left',
position: 'relative',
border: '0.5px solid',
borderColor: pack.active ? 'var(--ol-blue)' : 'var(--ol-line)',
background: pack.active
? 'linear-gradient(180deg, rgba(239,246,255,0.92), rgba(255,255,255,0.98))'
: isBuiltin
? 'linear-gradient(180deg, rgba(248,250,252,0.92), rgba(241,245,249,0.85))'
: 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92))',
borderColor: pack.active ? 'var(--ol-style-card-border-active)' : 'var(--ol-style-card-border)',
background: pack.active ? 'var(--ol-style-card-bg-active)' : 'var(--ol-style-card-bg)',
borderRadius: 'var(--ol-modal-radius)',
padding: 16,
boxShadow: pack.active ? '0 0 0 3px var(--ol-blue-ring)' : 'none',
boxShadow: pack.active ? 'var(--ol-style-card-shadow-active)' : 'var(--ol-style-card-shadow)',
cursor: 'default',
minHeight: 204,
}}
@@ -629,7 +625,7 @@ export function Style() {
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10, marginBottom: 10 }}>
<div style={{ minWidth: 0 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
<div style={{ fontSize: 14, fontWeight: 600, color: isBuiltin && !pack.active ? 'var(--ol-ink-2)' : 'var(--ol-ink)' }}>
<div style={{ fontSize: 14, fontWeight: 600, color: isBuiltin && !pack.active ? 'var(--ol-style-card-ink-2)' : 'var(--ol-style-card-ink)' }}>
{pack.name}
</div>
<Pill tone={isBuiltin ? 'outline' : 'blue'} size="sm">
@@ -646,7 +642,7 @@ export function Style() {
<div
style={{
fontSize: 12.5,
color: 'var(--ol-ink-3)',
color: 'var(--ol-style-card-ink-3)',
lineHeight: 1.6,
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
@@ -665,8 +661,8 @@ export function Style() {
style={{
width: 36, height: 36, borderRadius: 'var(--ol-r-lg)',
display: 'grid', placeItems: 'center',
background: pack.active ? 'rgba(37,99,235,0.12)' : 'rgba(15,23,42,0.05)',
color: pack.active ? 'var(--ol-blue)' : 'var(--ol-ink-3)',
background: pack.active ? 'var(--ol-style-card-icon-bg-active)' : 'var(--ol-style-card-icon-bg)',
color: pack.active ? 'var(--ol-blue)' : 'var(--ol-style-card-ink-3)',
flexShrink: 0,
}}
>
@@ -683,8 +679,8 @@ export function Style() {
width: 36, height: 36, borderRadius: 'var(--ol-r-lg)',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
flexShrink: 0,
border: '0.5px solid rgba(239,68,68,0.32)',
background: 'rgba(254,242,242,0.6)',
border: '0.5px solid var(--ol-style-delete-border)',
background: 'var(--ol-style-delete-bg)',
color: 'var(--ol-red, #ef4444)',
cursor: busy === 'deleting' ? 'wait' : 'pointer',
opacity: busy === 'deleting' ? 0.55 : 1,
@@ -755,11 +751,11 @@ export function Style() {
justifyContent: 'center',
gap: 8,
textAlign: 'center',
border: '0.5px dashed var(--ol-line-strong)',
border: '0.5px dashed var(--ol-style-add-tile-border)',
borderRadius: 'var(--ol-modal-radius)',
padding: 16,
background: 'transparent',
color: 'var(--ol-ink-3)',
background: 'var(--ol-style-add-tile-bg)',
color: 'var(--ol-style-card-ink-3)',
cursor: busy === 'creating' ? 'wait' : 'pointer',
opacity: busy === 'creating' ? 0.55 : 1,
minHeight: 204,
@@ -770,14 +766,14 @@ export function Style() {
style={{
width: 44, height: 44, borderRadius: 'var(--ol-pill-radius)',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
background: 'rgba(15,23,42,0.04)',
color: 'var(--ol-ink-2)',
background: 'var(--ol-style-add-tile-icon-bg)',
color: 'var(--ol-style-card-ink-2)',
}}
>
<Icon name="plus" size={22} />
</div>
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ol-ink-2)' }}>{t('style.pack.addPackTileTitle')}</div>
<div style={{ fontSize: 12, color: 'var(--ol-ink-4)', lineHeight: 1.55, maxWidth: 220 }}>{t('style.pack.addPackTileHint')}</div>
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ol-style-card-ink-2)' }}>{t('style.pack.addPackTileTitle')}</div>
<div style={{ fontSize: 12, color: 'var(--ol-style-card-ink-3)', lineHeight: 1.55, maxWidth: 220 }}>{t('style.pack.addPackTileHint')}</div>
</motion.button>
</AnimatePresence>
</div>
@@ -990,8 +986,9 @@ export function Style() {
<Card
padding={16}
style={{
background: 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,252,0.95))',
border: '0.5px solid rgba(148,163,184,0.24)',
background: 'var(--ol-style-subtle-bg)',
border: '0.5px solid var(--ol-style-subtle-border)',
boxShadow: 'var(--ol-style-subtle-shadow)',
}}
>
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
@@ -1058,8 +1055,9 @@ export function Style() {
style={{
padding: 14,
borderRadius: 'var(--ol-bubble-radius)',
background: 'linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.95))',
border: '0.5px solid var(--ol-line)',
background: 'var(--ol-style-subtle-bg)',
border: '0.5px solid var(--ol-style-subtle-border)',
boxShadow: 'var(--ol-style-subtle-shadow)',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
@@ -1095,7 +1093,9 @@ export function Style() {
key={`${draft.id}-example-${index}`}
padding={16}
style={{
background: 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98))',
background: 'var(--ol-style-card-bg)',
border: '0.5px solid var(--ol-style-card-border)',
boxShadow: 'var(--ol-style-card-shadow)',
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
@@ -1129,8 +1129,8 @@ export function Style() {
<div
style={{
borderRadius: 'var(--ol-bubble-radius)',
border: '0.5px solid rgba(148,163,184,0.22)',
background: 'rgba(248,250,252,0.9)',
border: '0.5px solid var(--ol-style-subtle-border)',
background: 'var(--ol-style-subtle-bg)',
padding: 14,
}}
>
@@ -1147,8 +1147,8 @@ export function Style() {
<div
style={{
borderRadius: 'var(--ol-bubble-radius)',
border: '0.5px solid rgba(37,99,235,0.16)',
background: 'rgba(239,246,255,0.86)',
border: '0.5px solid var(--ol-style-card-border-active)',
background: 'var(--ol-style-subtle-bg)',
padding: 14,
}}
>
@@ -1181,8 +1181,8 @@ function MetaItem({ label, value }: { label: string; value: string }) {
<div
style={{
borderRadius: 'var(--ol-r-lg)',
border: '0.5px solid rgba(148,163,184,0.2)',
background: 'var(--ol-glass-bg-strong)',
border: '0.5px solid var(--ol-style-subtle-border)',
background: 'var(--ol-style-card-bg)',
padding: '10px 12px',
}}
>
@@ -1218,8 +1218,8 @@ function DirectiveRow({
gap: 12,
padding: '10px 12px',
borderRadius: 'var(--ol-r-lg)',
border: '0.5px solid rgba(148,163,184,0.2)',
background: 'var(--ol-glass-bg-strong)',
border: '0.5px solid var(--ol-style-subtle-border)',
background: 'var(--ol-style-card-bg)',
}}
>
<div style={{ minWidth: 0 }}>
@@ -1239,8 +1239,9 @@ const inputStyle: CSSProperties = {
minHeight: 38,
padding: '9px 11px',
borderRadius: 'var(--ol-r-md)',
border: '0.5px solid var(--ol-line-strong)',
background: 'var(--ol-control-solid)',
border: '0.5px solid var(--ol-style-input-border)',
background: 'var(--ol-style-input-bg)',
boxShadow: 'var(--ol-style-input-shadow)',
color: 'var(--ol-ink)',
font: 'inherit',
fontSize: 12.5,
@@ -1251,8 +1252,9 @@ const textareaStyle: CSSProperties = {
boxSizing: 'border-box',
padding: '11px 12px',
borderRadius: 'var(--ol-r-lg)',
border: '0.5px solid var(--ol-line-strong)',
background: 'var(--ol-control-solid)',
border: '0.5px solid var(--ol-style-input-border)',
background: 'var(--ol-style-input-bg)',
boxShadow: 'var(--ol-style-input-shadow)',
color: 'var(--ol-ink)',
font: 'inherit',
fontSize: 12.5,
openless-all/app/src/styles/tokens.css
+4 -4
View File
@@ -373,11 +373,11 @@
--ol-style-add-tile-bg: rgba(255,255,255,0.02);
--ol-style-add-tile-icon-bg: rgba(255,255,255,0.10);
--ol-style-add-tile-border: rgba(255,255,255,0.10);
--ol-style-input-bg: rgba(255,255,255,0.04);
--ol-style-input-border: rgba(255,255,255,0.08);
--ol-style-input-bg: rgba(255,255,255,0.06);
--ol-style-input-border: rgba(255,255,255,0.10);
--ol-style-input-shadow: none;
--ol-style-subtle-bg: rgba(255,255,255,0.03);
--ol-style-subtle-border: rgba(255,255,255,0.06);
--ol-style-subtle-bg: rgba(255,255,255,0.05);
--ol-style-subtle-border: rgba(255,255,255,0.09);
--ol-style-subtle-shadow: none;
--ol-style-editor-bg: linear-gradient(180deg, rgba(27,27,30,0.96), rgba(23,23,26,0.94));
--ol-style-editor-border: rgba(255,255,255,0.07);