Skip to content

Commit 586fa0e

Browse files
alexdlnalexdln
committed
feat: increase text and interactive elems contrast
1 parent 3c3bfeb commit 586fa0e

7 files changed

Lines changed: 20 additions & 14 deletions

File tree

‎app/assets/main.css‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@
1515

1616
/* text colors */
1717
--fg: oklch(0.982 0 0);
18-
--fg-muted: oklch(0.749 0 0);
19-
--fg-subtle: oklch(0.673 0 0);
18+
--fg-muted: oklch(0.849 0 0);
19+
--fg-subtle: oklch(0.773 0 0);
2020

2121
/* border, separator colors */
2222
--border: oklch(0.269 0 0);
2323
--border-subtle: oklch(0.239 0 0);
2424
--border-hover: oklch(0.371 0 0);
25+
--border-elevated: oklch(0.369 0 0);
2526

2627
/* accent color, set by user from settings */
2728
--accent: var(--accent-color, oklch(0.787 0.128 230.318));
@@ -87,13 +88,14 @@
8788
--bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
8889
--bg-elevated: var(--bg-elevated-color, oklch(0.94 0.002 287.29));
8990

90-
--fg: oklch(0.146 0 0);
91-
--fg-muted: oklch(0.398 0 0);
92-
--fg-subtle: oklch(0.48 0 0);
91+
--fg: oklch(0.046 0 0);
92+
--fg-muted: oklch(0.198 0 0);
93+
--fg-subtle: oklch(0.28 0 0);
9394

9495
--border: oklch(0.8514 0 0);
9596
--border-subtle: oklch(0.922 0 0);
9697
--border-hover: oklch(0.715 0 0);
98+
--border-elevated: oklch(0.75 0 0);
9799

98100
--accent: var(--accent-color, oklch(0.53 0.16 247.27));
99101
--accent-muted: var(--accent-color, oklch(0.205 0 0));
@@ -151,25 +153,27 @@
151153
:root[data-theme='dark'] {
152154
/* text colors */
153155
--fg: oklch(1 0 0);
154-
--fg-muted: oklch(0.769 0 0);
155-
--fg-subtle: oklch(0.693 0 0);
156+
--fg-muted: oklch(0.869 0 0);
157+
--fg-subtle: oklch(0.793 0 0);
156158

157159
/* border, separator colors */
158160
--border: oklch(0.769 0 0);
159161
--border-subtle: oklch(0.739 0 0);
160162
--border-hover: oklch(0.771 0 0);
163+
--border-elevated: oklch(0.869 0 0);
161164
}
162165

163166
:root[data-theme='light'] {
164167
/* text colors */
165168
--fg: oklch(0 0 0);
166-
--fg-muted: oklch(0.329 0 0);
167-
--fg-subtle: oklch(0.4 0 0);
169+
--fg-muted: oklch(0.229 0 0);
170+
--fg-subtle: oklch(0.3 0 0);
168171

169172
/* border, separator colors */
170173
--border: oklch(0.3514 0 0);
171174
--border-subtle: oklch(0.422 0 0);
172175
--border-hover: oklch(0.315 0 0);
176+
--border-elevated: oklch(0.25 0 0);
173177
}
174178
}
175179

‎app/components/AppHeader.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ useShortcuts({
258258
<ButtonBase
259259
type="button"
260260
variant="secondary"
261-
class="hidden lg:inline-flex shrink-0 gap-2 px-2.5 me-3"
261+
class="hidden lg:inline-flex shrink-0 gap-2 px-2.5! py-1.25! me-3"
262262
:aria-label="$t('shortcuts.command_palette')"
263263
:title="$t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })"
264264
@click="openCommandPalette"

‎app/components/Button/Base.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ defineExpose({
4444
<template>
4545
<button
4646
ref="el"
47-
class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
47+
class="group gap-x-1 items-center justify-center font-mono border border-border-elevated/60 rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
4848
:class="{
4949
'inline-flex': !block,
5050
'flex': block,
5151
'text-sm px-4 py-2': size === 'md',
5252
'text-xs px-2 py-0.5': size === 'sm',
53-
'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
53+
'bg-transparent text-fg hover:enabled:(bg-bg-elevated) focus-visible:enabled:(bg-bg-elevated) aria-pressed:(bg-bg-muted border-border-hover hover:enabled:(bg-bg-muted text-fg/50))':
5454
variant === 'secondary',
5555
'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
5656
variant === 'primary',

‎app/components/Input/Base.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const inputAttrs = computed(() => ({
5656
v-bind="inputAttrs"
5757
@focus="emit('focus', $event)"
5858
@blur="emit('blur', $event)"
59-
class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
59+
class="appearance-none bg-bg-subtle border border-border-elevated font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
6060
:class="{
6161
'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'sm',
6262
'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'md',

‎app/components/Select/Base.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<SelectBaseProps>(), {
1212
<template>
1313
<select
1414
v-model="model"
15-
class="bg-bg border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
15+
class="bg-bg border border-border-elevated font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
1616
:class="[SELECT_SIZES[size]]"
1717
:disabled="
1818
/** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */

‎lunaria/styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,7 @@ export const CustomStyles = html`
318318
--border: oklch(26.9% 0 0);
319319
--border-subtle: oklch(23.9% 0 0);
320320
--border-hover: oklch(37.1% 0 0);
321+
--border-elevated: oklch(31.9% 0 0);
321322
322323
--ln-color-table-background: var(--bg-subtle);
323324
--ln-color-table-border: var(--border);

‎uno.theme.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const theme = {
2929
DEFAULT: 'var(--border)',
3030
subtle: 'var(--border-subtle)',
3131
hover: 'var(--border-hover)',
32+
elevated: 'var(--border-elevated)',
3233
},
3334
accent: {
3435
DEFAULT: 'var(--accent)',

0 commit comments

Comments
 (0)