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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import * as Theme from "../theme";
import * as Settings from "../../settings";
/**
* Generates CSS variables based on the provided theme scheme.
*
* @param {string} scheme - The theme scheme to use for generating CSS variables.
* @returns {string} The generated CSS variables as a string.
*/
const themedVariables = (scheme) => {
const settings = Settings.get();
const { themes } = settings;
const {
colorMain,
colorMainAlt,
colorMinor,
colorAccent,
colorRed,
colorGreen,
colorYellow,
colorOrange,
colorBlue,
colorMagenta,
colorCyan,
colorBlack,
colorWhite,
colorForeground,
colorBackground,
} = themes;
const { widgetMaxWidth, compactMode, font, fontSize } = settings.global;
return /* css */ `
:root {
--main: ${colorMain?.trim() || Theme.colors(themes)[scheme].main};
--main-alt: ${colorMainAlt?.trim() || Theme.colors(themes)[scheme].mainAlt};
--minor: ${colorMinor?.trim() || Theme.colors(themes)[scheme].minor};
--accent: ${colorAccent?.trim() || Theme.colors(themes)[scheme].yellow};
--red: ${colorRed?.trim() || Theme.colors(themes)[scheme].red};
--green: ${colorGreen?.trim() || Theme.colors(themes)[scheme].green};
--yellow: ${colorYellow?.trim() || Theme.colors(themes)[scheme].yellow};
--orange: ${colorOrange?.trim() || Theme.colors(themes)[scheme].orange};
--blue: ${colorBlue?.trim() || Theme.colors(themes)[scheme].blue};
--magenta: ${colorMagenta?.trim() || Theme.colors(themes)[scheme].magenta};
--cyan: ${colorCyan?.trim() || Theme.colors(themes)[scheme].cyan};
--black: ${colorBlack?.trim() || Theme.colors(themes)[scheme].black};
--white: ${colorWhite?.trim() || Theme.colors(themes)[scheme].white};
--foreground: ${
colorForeground?.trim() || Theme.colors(themes)[scheme].foreground
};
--background: ${colorBackground?.trim() || Theme.colors(themes)[scheme].main};
--transparent-dark: ${Theme.colors(themes)[scheme].transparentDark};
--font: ${font?.trim() || Theme.colors(themes)[scheme].defaultFont};
--font-size: ${fontSize.trim().length ? fontSize : "11px"};
--bar-height: ${
compactMode
? Theme.colors(themes)[scheme].compactBarHeight
: Theme.colors(themes)[scheme].barHeight
};
--bar-radius: ${Theme.colors(themes)[scheme].barRadius};
--bar-border: ${Theme.colors(themes)[scheme].barBorder};
--bar-inner-margin: ${Theme.colors(themes)[scheme].barInnerMargin};
--item-max-width: ${widgetMaxWidth.trim().length ? widgetMaxWidth : "160px"};
--item-radius: ${Theme.colors(themes)[scheme].itemRadius};
--item-inner-margin: ${Theme.colors(themes)[scheme].itemInnerMargin};
--item-outer-margin: ${Theme.colors(themes)[scheme].itemOuterMargin};
--hover-ring: ${Theme.colors(themes)[scheme].hoverRing};
--focus-ring: ${Theme.colors(themes)[scheme].focusRing};
--light-shadow: ${Theme.colors(themes)[scheme].lightShadow};
--foreground-shadow: ${
Theme.colors(themes)[scheme].foregroundShadow
? Theme.colors(themes)[scheme].foregroundShadow
: "0 0 0 1px var(--foreground)"
};
--transition-easing: ${Theme.colors(themes)[scheme].transitionEasing};
--click-effect: ${Theme.colors(themes)[scheme].clickEffect};
}
`;
};
const darkVariables = themedVariables("dark");
const lightVariables = themedVariables("light");
/**
* Builds CSS variables based on the user's theme settings.
*
* @returns {string} The CSS variables for the selected theme.
*/
const buildVariables = () => {
const settings = Settings.get();
const { theme } = settings.global;
if (theme === "auto") {
return /* css */ `
@media (prefers-color-scheme: light) {
${lightVariables}
}
@media (prefers-color-scheme: dark) {
${darkVariables}
}
`;
}
if (theme === "light") {
return lightVariables;
}
return darkVariables;
};
export const styles = buildVariables();
|
