Skip to content

feat: increase text and interactive elems contrast #2621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
alexdln wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat: increase text and interactive elems contrast #2621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions app/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,14 @@

/* text colors */
--fg: oklch(0.982 0 0);
--fg-muted: oklch(0.749 0 0);
--fg-subtle: oklch(0.673 0 0);
--fg-muted: oklch(0.849 0 0);
--fg-subtle: oklch(0.773 0 0);

/* border, separator colors */
--border: oklch(0.269 0 0);
--border-subtle: oklch(0.239 0 0);
--border-hover: oklch(0.371 0 0);
--border-elevated: oklch(0.369 0 0);

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

--fg: oklch(0.146 0 0);
--fg-muted: oklch(0.398 0 0);
--fg-subtle: oklch(0.48 0 0);
--fg: oklch(0.046 0 0);
--fg-muted: oklch(0.198 0 0);
--fg-subtle: oklch(0.28 0 0);

--border: oklch(0.8514 0 0);
--border-subtle: oklch(0.922 0 0);
--border-hover: oklch(0.715 0 0);
--border-elevated: oklch(0.75 0 0);

--accent: var(--accent-color, oklch(0.53 0.16 247.27));
--accent-muted: var(--accent-color, oklch(0.205 0 0));
Expand Down Expand Up @@ -151,25 +153,27 @@
:root[data-theme='dark'] {
/* text colors */
--fg: oklch(1 0 0);
--fg-muted: oklch(0.769 0 0);
--fg-subtle: oklch(0.693 0 0);
--fg-muted: oklch(0.869 0 0);
--fg-subtle: oklch(0.793 0 0);

/* border, separator colors */
--border: oklch(0.769 0 0);
--border-subtle: oklch(0.739 0 0);
--border-hover: oklch(0.771 0 0);
--border-elevated: oklch(0.869 0 0);
}

:root[data-theme='light'] {
/* text colors */
--fg: oklch(0 0 0);
--fg-muted: oklch(0.329 0 0);
--fg-subtle: oklch(0.4 0 0);
--fg-muted: oklch(0.229 0 0);
--fg-subtle: oklch(0.3 0 0);

/* border, separator colors */
--border: oklch(0.3514 0 0);
--border-subtle: oklch(0.422 0 0);
--border-hover: oklch(0.315 0 0);
--border-elevated: oklch(0.25 0 0);
}
}

Expand Down
2 changes: 1 addition & 1 deletion app/components/AppHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ useShortcuts({
<ButtonBase
type="button"
variant="secondary"
class="hidden lg:inline-flex shrink-0 gap-2 px-2.5 me-3"
class="hidden lg:inline-flex shrink-0 gap-2 px-2.5! py-1.25! me-3"
:aria-label="$t('shortcuts.command_palette')"
:title="$t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })"
@click="openCommandPalette"
Expand Down
4 changes: 2 additions & 2 deletions app/components/Button/Base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ defineExpose({
<template>
<button
ref="el"
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)"
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)"
:class="{
'inline-flex': !block,
'flex': block,
'text-sm px-4 py-2': size === 'md',
'text-xs px-2 py-0.5': size === 'sm',
'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))':
'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))':
variant === 'secondary',
'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))':
variant === 'primary',
Expand Down
2 changes: 1 addition & 1 deletion app/components/Input/Base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const inputAttrs = computed(() => ({
v-bind="inputAttrs"
@focus="emit('focus', $event)"
@blur="emit('blur', $event)"
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)"
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)"
:class="{
'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'sm',
'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'md',
Expand Down
2 changes: 1 addition & 1 deletion app/components/Select/Base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const props = withDefaults(defineProps<SelectBaseProps>(), {
<template>
<select
v-model="model"
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)"
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)"
:class="[SELECT_SIZES[size]]"
:disabled="
/** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */
Expand Down
1 change: 1 addition & 0 deletions lunaria/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,7 @@ export const CustomStyles = html`
--border: oklch(26.9% 0 0);
--border-subtle: oklch(23.9% 0 0);
--border-hover: oklch(37.1% 0 0);
--border-elevated: oklch(31.9% 0 0);

--ln-color-table-background: var(--bg-subtle);
--ln-color-table-border: var(--border);
Expand Down
1 change: 1 addition & 0 deletions uno.theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const theme = {
DEFAULT: 'var(--border)',
subtle: 'var(--border-subtle)',
hover: 'var(--border-hover)',
elevated: 'var(--border-elevated)',
},
accent: {
DEFAULT: 'var(--accent)',
Expand Down
Loading