styles/theme.js at master · AegisJSProject/styles · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { light, dark, gray } from './palette/bootstrap.js';
import { css } from '@aegisjsproject/parsers/css.js';

export const baseTheme = css`@layer base.aegisjsproject.theme {
	:root {
		color-scheme: light dark;
		font-family: var(--aegis-font, system-ui);
	}

	[data-theme="light"] {
		color-scheme: only light;
	}

	[data-theme="dark"] {
		color-scheme: only dark;
	}

	:root, [data-theme] {
		color: light-dark(var(--aegis-color-light, ${dark}), var(--aegis-color-dark, ${light}));
		background-color: light-dark(var(--aegis-bg-light, ${light}), var(--aegis-bg-dark, ${dark}));
	}
}`;

export const componentBase = css`@layer components.aegisjsproject.theme {
	:host {
		color: var(--aegis-color-light, ${dark});
		color: light-dark(var(--aegis-color-light, ${dark}), var(--aegis-color-dark, ${light}));
		background-color: var(--aegis-bg-light, ${light});
		background-color: light-dark(var(--aegis-bg-light, ${light}), var(--aegis-bg-dark, ${dark}));
		font-family: system-ui;
	}

	:host(:not([hidden]):not([popover])) {
		display: block;
	}

	:host([theme="light"]) {
		color-scheme: only light;
	}

	:host([theme="dark"]) {
		color-scheme: only dark;
	}
}`;

export const componentBorder = css`@layer components.aegisjsproject.theme {
	:host {
		border-width: 1px;
		border-style: solid;
		border-color: light-dark(var(--aegis-border-color-light, ${gray[2]}), var(--aegis-border-color-dark, ${gray[6]}));
		border-radius: var(--aegis-border-radius, 8px);
	}
}`;

/**
 * @deprecated
 *
 * Preserving sheets just to avoid breaking on import. Now using `color-scheme` & `light-dark()` only.
 */
export const componentDarkTheme = new CSSStyleSheet({ disabled: true });

/**
 * @deprecated
 *
 * Preserving sheets just to avoid breaking on import. Now using `color-scheme` & `light-dark()` only.
 */
export const componentLightTheme = new CSSStyleSheet({ disabled: true });

/**
 * @deprecated
 *
 * Preserving sheets just to avoid breaking on import. Now using `color-scheme` & `light-dark()` only.
 */
export const darkTheme = new CSSStyleSheet({ disabled: true });

/**
 * @deprecated
 *
 * Preserving sheets just to avoid breaking on import. Now using `color-scheme` & `light-dark()` only.
 */
export const lightTheme = new CSSStyleSheet({ disabled: true });