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

Use new theme vars (#63)

Browse Source 
This PR swaps the theme to use the new stuff from the Theme Studio
This commit is contained in:
Gregory Schier
2024-08-13 07:44:28 -07:00
committed by GitHub
parent a0950ce5b8
commit b5242b9a3f
79 changed files with 1113 additions and 1004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src-web/lib/theme/themes/yaak.ts
View File

@@ -1,82 +1,72 @@
import { Color } from '../color';
import { YaakColor } from '../yaakColor';
import type { YaakTheme } from '../window';
export const yaakLight: YaakTheme = {
id: 'yaak-light',
name: 'Yaak Light',
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'),
foregroundSubtle: new Color('hsl(219,23%,15%)', 'light').lower(0.3),
foregroundSubtler: new Color('hsl(219,23%,15%)', 'light').lower(0.5),
colors: {
primary: new Color('hsl(266,100%,70%)', 'light'),
secondary: new Color('hsl(220,24%,59%)', 'light'),
info: new Color('hsl(206,100%,48%)', 'light'),
success: new Color('hsl(155,95%,33%)', 'light'),
notice: new Color('hsl(45,100%,41%)', 'light'),
warning: new Color('hsl(30,100%,43%)', 'light'),
danger: new Color('hsl(335,75%,57%)', 'light'),
},
name: 'Yaak',
surface: new YaakColor('hsl(216,24%,100%)', 'light'),
border: new YaakColor('hsl(216,24%,93%)', 'light'),
surfaceHighlight: new YaakColor('hsl(216,24%,87%)', 'light'),
text: new YaakColor('hsl(219,23%,15%)', 'light'),
textSubtle: new YaakColor('hsl(219,23%,15%)', 'light').lower(0.3),
textSubtlest: new YaakColor('hsl(219,23%,15%)', 'light').lower(0.5),
primary: new YaakColor('hsl(266,100%,70%)', 'light'),
secondary: new YaakColor('hsl(220,24%,59%)', 'light'),
info: new YaakColor('hsl(206,100%,48%)', 'light'),
success: new YaakColor('hsl(155,95%,33%)', 'light'),
notice: new YaakColor('hsl(45,100%,41%)', 'light'),
warning: new YaakColor('hsl(30,100%,43%)', 'light'),
danger: new YaakColor('hsl(335,75%,57%)', 'light'),
components: {
sidebar: {
background: new Color('hsl(216,24%,97%)', 'light'),
backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'),
backgroundHighlightSecondary: new Color('hsl(216,24%,90%)', 'light'),
surface: new YaakColor('hsl(216,24%,97%)', 'light'),
border: new YaakColor('hsl(216,24%,93%)', 'light'),
surfaceHighlight: new YaakColor('hsl(216,24%,90%)', 'light'),
},
},
};
export const yaakDark: YaakTheme = {
id: 'yaak-dark',
name: 'Yaak Dark',
background: new Color('hsl(244,23%,14%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'),
backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'),
foreground: new Color('hsl(245,23%,83%)', 'dark'),
foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'),
foregroundSubtler: new Color('hsl(245,18%,51%)', 'dark'),
colors: {
primary: new Color('hsl(266,100%,79%)', 'dark'),
secondary: new Color('hsl(245,23%,60%)', 'dark'),
info: new Color('hsl(206,100%,63%)', 'dark'),
success: new Color('hsl(150,99%,44%)', 'dark'),
notice: new Color('hsl(48,80%,63%)', 'dark'),
warning: new Color('hsl(28,100%,61%)', 'dark'),
danger: new Color('hsl(342,90%,68%)', 'dark'),
},
name: 'Yaak',
surface: new YaakColor('hsl(244,23%,14%)', 'dark'),
border: new YaakColor('hsl(244,23%,25%)', 'dark'),
surfaceHighlight: new YaakColor('hsl(244,23%,20%)', 'dark'),
text: new YaakColor('hsl(245,23%,84%)', 'dark'),
textSubtle: new YaakColor('hsl(245,18%,58%)', 'dark'),
textSubtlest: new YaakColor('hsl(245,18%,45%)', 'dark'),
primary: new YaakColor('hsl(266,100%,79%)', 'dark'),
secondary: new YaakColor('hsl(245,23%,60%)', 'dark'),
info: new YaakColor('hsl(206,100%,63%)', 'dark'),
success: new YaakColor('hsl(150,99%,44%)', 'dark'),
notice: new YaakColor('hsl(48,80%,63%)', 'dark'),
warning: new YaakColor('hsl(28,100%,61%)', 'dark'),
danger: new YaakColor('hsl(342,90%,68%)', 'dark'),
components: {
button: {
colors: {
primary: new Color('hsl(266,100%,79%)', 'dark').lower(0.1),
secondary: new Color('hsl(245,23%,60%)', 'dark').lower(0.1),
info: new Color('hsl(206,100%,63%)', 'dark').lower(0.1),
success: new Color('hsl(150,99%,44%)', 'dark').lower(0.15),
notice: new Color('hsl(48,80%,63%)', 'dark').lower(0.2),
warning: new Color('hsl(28,100%,61%)', 'dark').lower(0.1),
danger: new Color('hsl(342,90%,68%)', 'dark').lower(0.1),
},
},
input: {
backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
primary: new YaakColor('hsl(266,100%,79%)', 'dark').lower(0.1),
secondary: new YaakColor('hsl(245,23%,60%)', 'dark').lower(0.1),
info: new YaakColor('hsl(206,100%,63%)', 'dark').lower(0.1),
success: new YaakColor('hsl(150,99%,44%)', 'dark').lower(0.15),
notice: new YaakColor('hsl(48,80%,63%)', 'dark').lower(0.2),
warning: new YaakColor('hsl(28,100%,61%)', 'dark').lower(0.1),
danger: new YaakColor('hsl(342,90%,68%)', 'dark').lower(0.1),
},
dialog: {
backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
border: new YaakColor('hsl(244,23%,24%)', 'dark'),
},
sidebar: {
background: new Color('hsl(243,23%,16%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,22%)', 'dark'),
surface: new YaakColor('hsl(243,23%,16%)', 'dark'),
border: new YaakColor('hsl(244,23%,22%)', 'dark'),
},
responsePane: {
background: new Color('hsl(243,23%,16%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08),
surface: new YaakColor('hsl(243,23%,16%)', 'dark'),
border: new YaakColor('hsl(244,23%,16%)', 'dark').lift(0.08),
},
appHeader: {
background: new Color('hsl(244,23%,12%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.1),
surface: new YaakColor('hsl(244,23%,12%)', 'dark'),
border: new YaakColor('hsl(244,23%,12%)', 'dark').lift(0.1),
},
},
};