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
|
/* eslint-disable max-len */
import { type Opt } from "lib/option"
import options from "options"
import { bash, dependencies, sh } from "lib/utils"
const deps = [
"font",
"theme",
"bar.flatButtons",
"bar.position",
"bar.battery.charging",
"bar.battery.blocks",
]
const {
dark,
light,
blur,
scheme,
padding,
spacing,
radius,
shadows,
widget,
border,
} = options.theme
const popoverPaddingMultiplier = 1.6
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const t = (dark: Opt<any> | string, light: Opt<any> | string) => scheme.value === "dark"
? `${dark}` : `${light}`
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const $ = (name: string, value: string | Opt<any>) => `$${name}: ${value};`
const variables = () => [
$("bg", blur.value ? `transparentize(${t(dark.bg, light.bg)}, ${blur.value / 100})` : t(dark.bg, light.bg)),
$("fg", t(dark.fg, light.fg)),
$("primary-bg", t(dark.primary.bg, light.primary.bg)),
$("primary-fg", t(dark.primary.fg, light.primary.fg)),
$("error-bg", t(dark.error.bg, light.error.bg)),
$("error-fg", t(dark.error.fg, light.error.fg)),
$("scheme", scheme),
$("padding", `${padding}pt`),
$("spacing", `${spacing}pt`),
$("radius", `${radius}px`),
$("transition", `${options.transition}ms`),
$("shadows", `${shadows}`),
$("widget-bg", `transparentize(${t(dark.widget, light.widget)}, ${widget.opacity.value / 100})`),
$("hover-bg", `transparentize(${t(dark.widget, light.widget)}, ${(widget.opacity.value * .9) / 100})`),
$("hover-fg", `lighten(${t(dark.fg, light.fg)}, 8%)`),
$("border-width", `${border.width}px`),
$("border-color", `transparentize(${t(dark.border, light.border)}, ${border.opacity.value / 100})`),
$("border", "$border-width solid $border-color"),
$("active-gradient", `linear-gradient(to right, ${t(dark.primary.bg, light.primary.bg)}, darken(${t(dark.primary.bg, light.primary.bg)}, 4%))`),
$("shadow-color", t("rgba(0,0,0,.6)", "rgba(0,0,0,.4)")),
$("text-shadow", t("2pt 2pt 2pt $shadow-color", "none")),
$("popover-border-color", `transparentize(${t(dark.border, light.border)}, ${Math.max(((border.opacity.value - 1) / 100), 0)})`),
$("popover-padding", `$padding * ${popoverPaddingMultiplier}`),
$("popover-radius", radius.value === 0 ? "0" : "$radius + $popover-padding"),
$("font-size", `${options.font.size}pt`),
$("font-name", options.font.name),
// etc
$("charging-bg", options.bar.battery.charging),
$("bar-battery-blocks", options.bar.battery.blocks),
$("bar-position", options.bar.position),
$("hyprland-gaps-multiplier", options.hyprland.gaps),
]
async function resetCss() {
if (!dependencies("sass", "fd"))
return
try {
const vars = `${TMP}/variables.scss`
await Utils.writeFile(variables().join("\n"), vars)
const fd = await sh(`fd ".scss" ${App.configDir}`)
const files = fd.split(/\s+/).map(f => `@import '${f}';`)
const scss = [`@import '${vars}';`, ...files].join("\n")
const css = await bash`echo "${scss}" | sass --stdin`
App.applyCss(css, true)
} catch (error) {
logError(error)
}
}
Utils.monitorFile(App.configDir, resetCss)
options.handler(deps, resetCss)
await resetCss()
|
