ui: fixed secondary button contrast

This commit is contained in:
Eugene Pankov 2023-04-16 17:47:47 +02:00
parent 84b0e13dc8
commit 65756a62bc
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
2 changed files with 10 additions and 6 deletions

View File

@ -106,13 +106,13 @@ export class ThemesService {
const themeColors = { const themeColors = {
primary: theme.colors[accentIndex], primary: theme.colors[accentIndex],
secondary: theme.colors[8], secondary: less(theme.background, 0.5).string(),
tertiary: theme.colors[8], tertiary: theme.colors[8],
warning: theme.colors[3], warning: theme.colors[3],
danger: theme.colors[1], danger: theme.colors[1],
success: theme.colors[2], success: theme.colors[2],
info: theme.colors[4], info: theme.colors[4],
dark: more(theme.background, 0.5).string(), dark: more(theme.background, 0.75).string(),
light: more(theme.foreground, 0.5).string(), light: more(theme.foreground, 0.5).string(),
link: theme.colors[8], // for .btn-link link: theme.colors[8], // for .btn-link
} }
@ -129,7 +129,11 @@ export class ThemesService {
vars[`--theme-${key}-less-2`] = less(color, 0.75).string() vars[`--theme-${key}-less-2`] = less(color, 0.75).string()
vars[`--theme-${key}-fg`] = more(color, 3).string() vars[`--theme-${key}-fg`] = more(color, 3).string()
vars[`--theme-${key}-active-bg`] = less(color, 1).string()
vars[`--theme-${key}-active-fg`] = more(color, 1).string()
contrastPairs.push([`--theme-${key}`, `--theme-${key}-fg`]) contrastPairs.push([`--theme-${key}`, `--theme-${key}-fg`])
contrastPairs.push([`--theme-${key}-active-bg`, `--theme-${key}-active-fg`])
} }
const switchBackground = less(theme.colors[accentIndex], 0.25).string() const switchBackground = less(theme.colors[accentIndex], 0.25).string()

View File

@ -108,8 +108,8 @@ body {
} }
.nav { .nav {
--bs-nav-link-color: var(--bs-body-color); --bs-nav-link-color: var(--theme-fg);
--bs-nav-link-hover-color: var(--theme-fg-less-2); --bs-nav-link-hover-color: var(--theme-fg-less);
--bs-nav-link-disabled-color: var(--bs-gray); --bs-nav-link-disabled-color: var(--bs-gray);
} }
@ -194,14 +194,14 @@ tab-body {
--bs-btn-hover-bg: var(--theme-#{$color}-less); --bs-btn-hover-bg: var(--theme-#{$color}-less);
--bs-btn-active-border-color: var(--theme-#{$color}); --bs-btn-active-border-color: var(--theme-#{$color});
--bs-btn-active-bg: var(--theme-#{$color}-more); --bs-btn-active-bg: var(--theme-#{$color}-active-bg);
--bs-btn-focus-shadow-rgb: 130, 138, 145; --bs-btn-focus-shadow-rgb: 130, 138, 145;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-color: var(--theme-#{$color}-fg); --bs-btn-color: var(--theme-#{$color}-fg);
--bs-btn-hover-color: var(--theme-#{$color}-fg); --bs-btn-hover-color: var(--theme-#{$color}-fg);
--bs-btn-active-color: var(--theme-#{$color}-fg); --bs-btn-active-color: var(--theme-#{$color}-active-fg);
--bs-btn-disabled-color: var(--theme-#{$color}-fg); --bs-btn-disabled-color: var(--theme-#{$color}-fg);
} }