commit dfe89b2642d093b2da246eb95ff04ef20f7805dc
parent 43e8eeba9d8073600704efe585c7b6e3a73b8297
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sun, 15 Sep 2024 13:47:39 +0000
themes: add `earth` theme
Diffstat:
9 files changed, 221 insertions(+), 5 deletions(-)
diff --git a/themes/src/colors.ts b/themes/src/colors.ts
@@ -8,6 +8,7 @@ export const theme_colors = {
"layer-1-surface": "hsl(var(--layer-1-surface) / <alpha-value>)",
"layer-1-surface_a": "hsl(var(--layer-1-surface_a) / <alpha-value>)",
"layer-1-surface-edge": "hsl(var(--layer-1-surface-edge) / <alpha-value>)",
+ "layer-1-surface-err": "hsl(var(--layer-1-surface-err) / <alpha-value>)",
"layer-2-surface": "hsl(var(--layer-2-surface) / <alpha-value>)",
"layer-2-surface_a": "hsl(var(--layer-2-surface_a) / <alpha-value>)",
"layer-2-surface-edge": "hsl(var(--layer-2-surface-edge) / <alpha-value>)",
@@ -54,6 +55,7 @@ export type ThemeLayer1 = {
_: HslTuple;
_a: HslTuple;
edge: HslTuple;
+ err: HslTuple;
};
glyphs: {
_: HslTuple;
diff --git a/themes/src/earth/dark.ts b/themes/src/earth/dark.ts
@@ -0,0 +1,92 @@
+import type { ThemeRecord } from "../types";
+
+export const record_earth_dark: ThemeRecord = {
+ layers: {
+ layer_0: {
+ surface: {
+ _: [0, 0, 7],
+ _a: [240, 2, 23],
+ edge: [274, 4, 11],
+ blur: [0, 0, 12],
+ },
+ glyphs: {
+ _: [230, 3, 56],
+ _a: [230, 3, 51],
+ hl: [210, 100, 52],
+ hl_a: [210, 91, 21],
+ shade: [240, 3, 57],
+ label: [240, 3, 55],
+ }
+ },
+ layer_1: {
+ surface: {
+ _: [240, 4, 11],
+ _a: [240, 2, 23],
+ edge: [240, 3, 19],
+ err: [0, 0, 0],
+ },
+ glyphs: {
+ _: [30, 100, 100],
+ _a: [30, 1, 90],
+ _pl: [30, 1, 99],
+ hl: [210, 100, 52],
+ hl_a: [210, 100, 62],
+ shade: [230, 4, 61],
+ label: [30, 1, 99],
+ }
+ },
+ layer_2: {
+ surface: {
+ _: [240, 2, 18],
+ _a: [240, 3, 15],
+ edge: [240, 2, 23],
+ },
+ glyphs: {
+ _: [240, 3, 73],
+ _a: [230, 4, 51],
+ _pl: [240, 2, 40],
+ hl: [210, 100, 52],
+ hl_a: [210, 100, 42],
+ shade: [230, 4, 61],
+ }
+ }
+ },
+ daisy: {
+ "primary": [135, 58, 49],
+ "primary-focus": [0, 0, 0],
+ "primary-content": [0, 0, 0],
+ "secondary": [0, 0, 0],
+ "secondary-focus": [0, 0, 0],
+ "secondary-content": [0, 0, 0],
+ "accent": [0, 0, 0],
+ "accent-focus": [0, 0, 0],
+ "accent-content": [0, 0, 0],
+ "neutral": [0, 0, 0],
+ "neutral-focus": [0, 0, 0],
+ "neutral-content": [240, 2, 55],
+ "base-100": [0, 0, 100],
+ "base-200": [0, 0, 0],
+ "base-300": [0, 0, 0],
+ "base-content": [0, 0, 0],
+ "info": [211, 100, 50],
+ "info-content": [0, 0, 100],
+ "success": [135, 58, 49],
+ "success-content": [132, 65, 95],
+ "warning": [56, 89, 74],
+ "warning-content": [56, 59, 34],
+ "error": [348, 68, 55],
+ "error-content": [348, 83, 76],
+ "--rounded-box": [0, 0, 0],
+ "--rounded-btn": [0, 0, 0],
+ "--rounded-badge": [0, 0, 0],
+ "--animation-btn": [0, 0, 0],
+ "--animation-input": [0, 0, 0],
+ "--btn-text-case": [0, 0, 0],
+ "--btn-focus-scale": [0, 0, 0],
+ "--border-btn": [0, 0, 0],
+ "--tab-border": [0, 0, 0],
+ "--tab-radius": [0, 0, 0],
+ "--spinner-color-base": [0, 0, 10],
+ "--spinner-color-white": [0, 0, 100],
+ },
+};
+\ No newline at end of file
diff --git a/themes/src/earth/index.ts b/themes/src/earth/index.ts
@@ -0,0 +1,20 @@
+import type { ColorKeyDark, ColorKeyLight } from "../types";
+import { write_daisy, write_layers } from "../utils";
+import { record_earth_dark as dark } from "./dark";
+import { record_earth_light as light } from "./light";
+
+type key = `earth`;
+
+export const theme_earth_light: Record<ColorKeyLight<key>, Record<string, string>> = {
+ earth_light: {
+ ...write_daisy(light.daisy),
+ ...write_layers(light.layers)
+ }
+};
+
+export const theme_earth_dark: Record<ColorKeyDark<key>, Record<string, string>> = {
+ earth_dark: {
+ ...write_daisy(dark.daisy),
+ ...write_layers(dark.layers)
+ }
+};
diff --git a/themes/src/earth/light.ts b/themes/src/earth/light.ts
@@ -0,0 +1,93 @@
+import type { ThemeRecord } from "../types";
+
+export const record_earth_light: ThemeRecord = {
+ layers: {
+ layer_0: {
+ surface: {
+ _: [47, 32, 92],
+ _a: [240, 6, 83],
+ edge: [0, 0, 87],
+ blur: [179, 7, 96],
+ },
+ glyphs: {
+ _: [180, 2, 12],
+ _a: [240, 2, 60],
+ hl: [211, 100, 50],
+ hl_a: [211, 100, 40],
+ shade: [230, 3, 54],
+ label: [240, 2, 53],
+ }
+ },
+ layer_1: {
+ surface: {
+ _: [46, 23, 86],
+ _a: [46, 23, 86],
+ edge: [240, 2, 55],
+ err: [51, 11, 77],
+ },
+ glyphs: {
+ _: [240, 1, 38],
+ _a: [0, 0, 10],
+ _pl: [0, 0, 0],
+ hl: [211, 100, 50],
+ hl_a: [211, 100, 40],
+ shade: [240, 2, 55],
+ label: [240, 2, 53],
+ }
+ },
+ layer_2: {
+ surface: {
+ _: [47, 43, 92],
+ _a: [240, 5, 95],
+ edge: [242, 2, 88],
+ },
+ glyphs: {
+ _: [240, 2, 55],
+ _a: [240, 2, 45],
+ _pl: [240, 2, 78],
+ hl: [211, 100, 50],
+ hl_a: [211, 100, 40],
+ shade: [240, 2, 55],
+ }
+ }
+ },
+ daisy: {
+ "primary": [0, 0, 0],
+ "primary-focus": [0, 0, 0],
+ "primary-content": [0, 0, 0],
+ "secondary": [0, 0, 0],
+ "secondary-focus": [0, 0, 0],
+ "secondary-content": [0, 0, 0],
+ "accent": [0, 0, 0],
+ "accent-focus": [0, 0, 0],
+ "accent-content": [0, 0, 0],
+ "neutral": [0, 0, 0],
+ "neutral-focus": [0, 0, 0],
+ "neutral-content": [240, 2, 55],
+ "base-100": [0, 0, 100],
+ "base-200": [0, 0, 0],
+ "base-300": [0, 0, 0],
+ "base-content": [0, 0, 0],
+ "info": [211, 100, 50],
+ "info-content": [0, 0, 100],
+ "success": [135, 58, 49],
+ "success-content": [132, 65, 95],
+ "warning": [56, 89, 74],
+ "warning-content": [56, 59, 34],
+ "error": [3, 58, 36],
+ //[348, 68, 55],
+ "error-content": [348, 83, 76],
+ "--rounded-box": [0, 0, 0],
+ "--rounded-btn": [0, 0, 0],
+ "--rounded-badge": [0, 0, 0],
+ "--animation-btn": [0, 0, 0],
+ "--animation-input": [0, 0, 0],
+ "--btn-text-case": [0, 0, 0],
+ "--btn-focus-scale": [0, 0, 0],
+ "--border-btn": [0, 0, 0],
+ "--tab-border": [0, 0, 0],
+ "--tab-radius": [0, 0, 0],
+ "--spinner-color-base": [0, 0, 10],
+ "--spinner-color-white": [0, 0, 100],
+ },
+};
+\ No newline at end of file
diff --git a/themes/src/os/dark.ts b/themes/src/os/dark.ts
@@ -22,7 +22,8 @@ export const record_os_dark: ThemeRecord = {
surface: {
_: [240, 4, 11],
_a: [240, 2, 23],
- edge: [240, 3, 19]
+ edge: [240, 3, 19],
+ err: [0, 0, 0],
},
glyphs: {
_: [30, 100, 100],
diff --git a/themes/src/os/light.ts b/themes/src/os/light.ts
@@ -22,7 +22,8 @@ export const record_os_light: ThemeRecord = {
surface: {
_: [30, 100, 100],
_a: [240, 6, 83],
- edge: [274, 4, 90]
+ edge: [274, 4, 90],
+ err: [0, 0, 0],
},
glyphs: {
_: [0, 0, 0],
diff --git a/themes/src/theme.ts b/themes/src/theme.ts
@@ -1,6 +1,9 @@
+import { theme_earth_dark, theme_earth_light } from "./earth";
import { theme_os_dark, theme_os_light } from "./os";
export const themes = {
theme_os_light,
- theme_os_dark
+ theme_os_dark,
+ theme_earth_light,
+ theme_earth_dark,
}
diff --git a/themes/src/types.ts b/themes/src/types.ts
@@ -9,7 +9,7 @@ export type ColorKeyDark<T extends ThemeKey> = `${T}_dark`;
export type HslTuple = [number, number, number];
export type Theme = keyof typeof themes;
-export type ThemeKey = `os`;
+export type ThemeKey = `os` | `earth`;
export type ThemeLayer = 0 | 1 | 2;
export type ThemeRecord = { layers: ThemeLayers } & { daisy: ThemeDaisy };
export type ThemeLayers = {
diff --git a/themes/src/utils.ts b/themes/src/utils.ts
@@ -15,6 +15,7 @@ export const write_daisy = (obj_c: ThemeDaisy): Record<string, string> => Object
export const parse_theme_key = (key?: string): ThemeKey => {
switch (key) {
case "os":
+ case "earth":
return key;
default:
return "os";
@@ -31,7 +32,7 @@ export const parse_color_mode = (color_mode?: string): ColorMode => {
};
};
-export const write_layers = ({ layer_0: { surface: l0_s, glyphs: l0_g }, layer_1: { surface: l1_s, glyphs: l1_g }, layer_2: { surface: l2_s, glyphs: l2_g }}: ThemeLayers): Record<string, string> => ({
+export const write_layers = ({ layer_0: { surface: l0_s, glyphs: l0_g }, layer_1: { surface: l1_s, glyphs: l1_g }, layer_2: { surface: l2_s, glyphs: l2_g } }: ThemeLayers): Record<string, string> => ({
"--layer-0-surface": hsl(l0_s._),
"--layer-0-surface_a": hsl(l0_s._a),
"--layer-0-surface-edge": hsl(l0_s.edge),
@@ -45,6 +46,7 @@ export const write_layers = ({ layer_0: { surface: l0_s, glyphs: l0_g }, layer_1
"--layer-1-surface": hsl(l1_s._),
"--layer-1-surface_a": hsl(l1_s._a),
"--layer-1-surface-edge": hsl(l1_s.edge),
+ "--layer-1-surface-err": hsl(l1_s.err),
"--layer-1-glyph": hsl(l1_g._),
"--layer-1-glyph_a": hsl(l1_g._a),
"--layer-1-glyph-_pl": hsl(l1_g._pl),
