starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-24 09:38:29 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Tweak Yaak default themes

Browse Source
This commit is contained in:
Gregory Schier
2024-05-22 23:28:53 -07:00
parent 8e662e6feb
commit 5c8b47288a
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -86,7 +86,7 @@ export function Tabs({
'h-full flex items-center text-sm rounded', 'h-full flex items-center text-sm rounded',
'!px-2 ml-[1px]', '!px-2 ml-[1px]',
addBorders && 'border', addBorders && 'border',
isActive ? 'text-fg' : 'text-fg-subtler hover:text-fg-subtle', isActive ? 'text-fg' : 'text-fg-subtle hover:text-fg',
isActive && addBorders ? 'border-background-highlight' : 'border-transparent', isActive && addBorders ? 'border-background-highlight' : 'border-transparent',
); );

26
src-web/lib/theme/themes.ts
View File

@@ -4,8 +4,12 @@ import type { YaakTheme } from './window';
export const yaakLight: YaakTheme = { export const yaakLight: YaakTheme = {
id: 'yaak-light', id: 'yaak-light',
name: 'Yaak', name: 'Yaak',
background: new Color('#f2f4f7', 'light').lower(1), background: new Color('hsl(216,24%,100%)', 'light'),
backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'),
backgroundHighlightSecondary: new Color('hsl(216,24%,87%)', 'light'),
foreground: new Color('hsl(219,23%,15%)', 'light'), foreground: new Color('hsl(219,23%,15%)', 'light'),
foregroundSubtle: new Color('hsl(219,23%,15%)', 'light').lower(0.3),
foregroundSubtler: new Color('hsl(219,23%,15%)', 'light').lower(0.5),
colors: { colors: {
primary: new Color('hsl(266,100%,70%)', 'light'), primary: new Color('hsl(266,100%,70%)', 'light'),
secondary: new Color('hsl(220,24%,59%)', 'light'), secondary: new Color('hsl(220,24%,59%)', 'light'),
@@ -17,7 +21,9 @@ export const yaakLight: YaakTheme = {
}, },
components: { components: {
sidebar: { sidebar: {
background: new Color('#f2f4f7', 'light').lower(1), background: new Color('hsl(216,24%,97%)', 'light'),
backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'),
backgroundHighlightSecondary: new Color('hsl(216,24%,90%)', 'light'),
}, },
}, },
}; };
@@ -25,10 +31,12 @@ export const yaakLight: YaakTheme = {
export const yaakDark: YaakTheme = { export const yaakDark: YaakTheme = {
id: 'yaak-dark', id: 'yaak-dark',
name: 'Yaak', name: 'Yaak',
background: new Color('hsl(244,23%,12%)', 'dark'), background: new Color('hsl(244,23%,13%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.17), backgroundHighlight: new Color('hsl(244,23%,13%)', 'dark').lift(0.17),
backgroundHighlightSecondary: new Color('hsl(244,23%,12%)', 'dark').lift(0.1), backgroundHighlightSecondary: new Color('hsl(244,23%,13%)', 'dark').lift(0.1),
foreground: new Color('#bcbad4', 'dark'), foreground: new Color('#bcbad4', 'dark'),
foregroundSubtle: new Color('#bcbad4', 'dark').lower(0.25),
foregroundSubtler: new Color('#bcbad4', 'dark').lower(0.4),
colors: { colors: {
primary: new Color('hsl(266,100%,79%)', 'dark'), primary: new Color('hsl(266,100%,79%)', 'dark'),
@@ -59,12 +67,12 @@ export const yaakDark: YaakTheme = {
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.11), backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.11),
}, },
sidebar: { sidebar: {
background: new Color('hsl(243,23%,15%)', 'dark'), background: new Color('hsl(243,23%,16%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.09), backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08),
}, },
responsePane: { responsePane: {
background: new Color('hsl(243,23%,15%)', 'dark'), background: new Color('hsl(243,23%,16%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.09), backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08),
}, },
appHeader: { appHeader: {
background: new Color('hsl(244,23%,12%)', 'dark'), background: new Color('hsl(244,23%,12%)', 'dark'),