diff options
author | crupest <crupest@outlook.com> | 2023-07-14 23:21:54 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2023-07-14 23:21:54 +0800 |
commit | c456e1769d2f06860f3d08272dc72407f96a42b8 (patch) | |
tree | 7e6d069af071641527fdd3fb8edc1c2d41c404e0 /FrontEnd/tools | |
parent | d808b68d959aa59347e1c4ce7084a7afcfa80522 (diff) | |
download | timeline-c456e1769d2f06860f3d08272dc72407f96a42b8.tar.gz timeline-c456e1769d2f06860f3d08272dc72407f96a42b8.tar.bz2 timeline-c456e1769d2f06860f3d08272dc72407f96a42b8.zip |
...
Diffstat (limited to 'FrontEnd/tools')
-rw-r--r-- | FrontEnd/tools/theme-generator.ts | 24 |
1 files changed, 20 insertions, 4 deletions
diff --git a/FrontEnd/tools/theme-generator.ts b/FrontEnd/tools/theme-generator.ts index 27dd5d1d..704a1052 100644 --- a/FrontEnd/tools/theme-generator.ts +++ b/FrontEnd/tools/theme-generator.ts @@ -30,11 +30,11 @@ class HslColor implements Color { ) {} lighter(level: number): HslColor { - return new HslColor(this.h, this.s, this.l + level * 10); + return new HslColor(this.h, this.s, this.l + level * 5); } darker(level: number): HslColor { - return new HslColor(this.h, this.s, this.l - level * 10); + return new HslColor(this.h, this.s, this.l - level * 5); } toCssString(): string { @@ -317,6 +317,16 @@ class Theme { mode === "light" ? GrayscaleColorGroup.white(this.prefix, "bg", this.levels) : GrayscaleColorGroup.black(this.prefix, "bg", this.levels); + const lightGroup = GrayscaleColorGroup.white( + this.prefix, + "light", + this.levels, + ); + const darkGroup = GrayscaleColorGroup.black( + this.prefix, + "dark", + this.levels, + ); const disabledGroup = mode == "light" ? new GrayscaleColorGroup( @@ -333,7 +343,13 @@ class Theme { "lighter", this.levels, ); - return new CompositeColorGroup([textGroup, bgGroup, disabledGroup]); + return new CompositeColorGroup([ + textGroup, + bgGroup, + lightGroup, + darkGroup, + disabledGroup, + ]); } generateCss(print: (text: string, indent: number) => void): void { @@ -370,7 +386,7 @@ class Theme { { name: "secondary", color: new HslColor(40, 100, 50) }, { name: "tertiary", color: new HslColor(160, 100, 50) }, { name: "danger", color: new HslColor(0, 100, 50) }, - { name: "success", color: new HslColor(120, 100, 50) }, + { name: "success", color: new HslColor(120, 60, 50) }, ]; const theme = new Theme(prefix, themeColors); |