Files
yaak/src-web/lib/theme/themes/moonlight.ts
Gregory Schier c9b4e6181c Use new theme vars (#63)
This PR swaps the theme to use the new stuff from the Theme Studio
2024-08-13 07:44:28 -07:00

65 lines
1.6 KiB
TypeScript

import type { YaakTheme } from '../window';
import { YaakColor } from '../yaakColor';
export const colors = {
lightRed: '#ff98a4',
red: '#ff757f',
darkRed: '#ff5370',
lightOrange: '#f8b576',
orange: '#ff966c',
darkOrange: '#fc7b7b',
yellow: '#ffc777',
green: '#c3e88d',
lightTeal: '#7af8ca',
teal: '#3ad7c7',
lightCyan: '#b4f9f8',
cyan: '#78dbff',
sky: '#60bdff',
blue: '#7cafff',
darkBlue: '#3d6fe0',
darkestBlue: '#3b63cf',
indigo: '#af9fff',
purple: '#c4a2ff',
pink: '#fca7ea',
darkPink: '#fd8aca',
saturatedGray: '#7a88cf',
desaturatedGray: '#979bb6',
gray11: '#d5def8',
gray10: '#c8d3f5',
gray9: '#b4c2f0',
gray8: '#a9b8e8',
gray7: '#828bb8',
gray6: '#444a73',
gray5: '#2f334d',
gray4: '#222436',
gray3: '#1e2030',
gray2: '#191a2a',
gray1: '#131421',
} as const;
const moonlightDefault: YaakTheme = {
id: 'moonlight',
name: 'Moonlight',
surface: new YaakColor('#222436', 'dark'),
text: new YaakColor('#d5def8', 'dark'),
textSubtle: new YaakColor('#828bb8', 'dark'),
textSubtlest: new YaakColor('hsl(232,26%,43%)', 'dark'),
primary: new YaakColor(colors.purple, 'dark'),
secondary: new YaakColor(colors.desaturatedGray, 'dark'),
info: new YaakColor(colors.blue, 'dark'),
success: new YaakColor(colors.teal, 'dark'),
notice: new YaakColor(colors.yellow, 'dark'),
warning: new YaakColor(colors.orange, 'dark'),
danger: new YaakColor(colors.red, 'dark'),
components: {
appHeader: {
surface: new YaakColor(colors.gray3, 'dark'),
},
sidebar: {
surface: new YaakColor(colors.gray3, 'dark'),
},
},
};
export const moonlight = [moonlightDefault];