mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-03-17 23:14:03 +01:00
85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
import { Color } from '../color';
|
|
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'),
|
|
},
|
|
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'),
|
|
},
|
|
},
|
|
};
|
|
|
|
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'),
|
|
},
|
|
|
|
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'),
|
|
},
|
|
dialog: {
|
|
backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
|
|
},
|
|
sidebar: {
|
|
background: new Color('hsl(243,23%,16%)', 'dark'),
|
|
backgroundHighlight: new Color('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),
|
|
},
|
|
appHeader: {
|
|
background: new Color('hsl(244,23%,12%)', 'dark'),
|
|
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.1),
|
|
},
|
|
},
|
|
};
|
|
|
|
export const yaak = [yaakDark, yaakLight];
|