web_lib

Common web application libraries
git clone https://radroots.dev/git/web_lib.git
Log | Files | Refs | LICENSE

commit 3e48e7191ca4db148fcb9605df4ca93b785d50c5
parent d84b3d5a3f8c363d074747e0b434d725a794b277
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Fri,  6 Dec 2024 05:43:47 +0000

themes: add `garden` theme

Diffstat:
Mthemes/src/colors.ts | 10++++++++--
Dthemes/src/earth/dark.ts | 94-------------------------------------------------------------------------------
Dthemes/src/earth/index.ts | 20--------------------
Dthemes/src/earth/light.ts | 95-------------------------------------------------------------------------------
Athemes/src/garden/dark.ts | 98+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Athemes/src/garden/index.ts | 20++++++++++++++++++++
Athemes/src/garden/light.ts | 117+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mthemes/src/index.ts | 3++-
Mthemes/src/os/dark.ts | 4++++
Mthemes/src/os/light.ts | 18+++++++++++-------
Mthemes/src/theme.ts | 6+++---
Mthemes/src/types.ts | 2+-
Mthemes/src/utils.ts | 40++++++++++++++++++++--------------------
13 files changed, 284 insertions(+), 243 deletions(-)

diff --git a/themes/src/colors.ts b/themes/src/colors.ts @@ -3,6 +3,7 @@ import type { HslTuple } from "./types"; export const theme_colors = { "layer-0-surface": "hsl(var(--layer-0-surface) / <alpha-value>)", "layer-0-surface_a": "hsl(var(--layer-0-surface_a) / <alpha-value>)", + "layer-0-surface_w": "hsl(var(--layer-0-surface_w) / <alpha-value>)", "layer-0-surface-edge": "hsl(var(--layer-0-surface-edge) / <alpha-value>)", "layer-0-surface-blur": "hsl(var(--layer-0-surface-blur) / <alpha-value>)", "layer-1-surface": "hsl(var(--layer-1-surface) / <alpha-value>)", @@ -15,12 +16,14 @@ export const theme_colors = { "layer-2-surface-edge": "hsl(var(--layer-2-surface-edge) / <alpha-value>)", "layer-0-glyph": "hsl(var(--layer-0-glyph) / <alpha-value>)", "layer-0-glyph_a": "hsl(var(--layer-0-glyph_a) / <alpha-value>)", + "layer-0-glyph_pl": "hsl(var(--layer-0-glyph_pl) / <alpha-value>)", "layer-0-glyph-hl": "hsl(var(--layer-0-glyph-hl) / <alpha-value>)", "layer-0-glyph-hl_a": "hsl(var(--layer-0-glyph-hl_a) / <alpha-value>)", "layer-0-glyph-shade": "hsl(var(--layer-0-glyph-shade) / <alpha-value>)", "layer-0-glyph-label": "hsl(var(--layer-0-glyph-label) / <alpha-value>)", "layer-1-glyph": "hsl(var(--layer-1-glyph) / <alpha-value>)", "layer-1-glyph_a": "hsl(var(--layer-1-glyph_a) / <alpha-value>)", + "layer-1-glyph_d": "hsl(var(--layer-1-glyph_d) / <alpha-value>)", "layer-1-glyph_pl": "hsl(var(--layer-1-glyph_pl) / <alpha-value>)", "layer-1-glyph-hl": "hsl(var(--layer-1-glyph-hl) / <alpha-value>)", "layer-1-glyph-hl_a": "hsl(var(--layer-1-glyph-hl_a) / <alpha-value>)", @@ -28,6 +31,7 @@ export const theme_colors = { "layer-1-glyph-label": "hsl(var(--layer-1-glyph-label) / <alpha-value>)", "layer-2-glyph": "hsl(var(--layer-2-glyph) / <alpha-value>)", "layer-2-glyph_a": "hsl(var(--layer-2-glyph_a) / <alpha-value>)", + "layer-2-glyph_d": "hsl(var(--layer-2-glyph_d) / <alpha-value>)", "layer-2-glyph_pl": "hsl(var(--layer-2-glyph_pl) / <alpha-value>)", "layer-2-glyph-hl": "hsl(var(--layer-2-glyph-hl) / <alpha-value>)", "layer-2-glyph-hl_a": "hsl(var(--layer-2-glyph-hl_a) / <alpha-value>)", @@ -38,12 +42,14 @@ export type ThemeLayer0 = { surface: { _: HslTuple; _a: HslTuple; + _w: HslTuple; edge: HslTuple; blur: HslTuple; }; glyphs: { _: HslTuple; _a: HslTuple; + _pl: HslTuple; hl: HslTuple; hl_a: HslTuple; shade: HslTuple; @@ -62,6 +68,7 @@ export type ThemeLayer1 = { glyphs: { _: HslTuple; _a: HslTuple; + _d: HslTuple; _pl: HslTuple; hl: HslTuple; hl_a: HslTuple; @@ -79,11 +86,10 @@ export type ThemeLayer2 = { glyphs: { _: HslTuple; _a: HslTuple; + _d: HslTuple; _pl: HslTuple; hl: HslTuple; hl_a: HslTuple; shade: HslTuple; }; }; - - diff --git a/themes/src/earth/dark.ts b/themes/src/earth/dark.ts @@ -1,93 +0,0 @@ -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], - focus: [240, 4, 20], - }, - 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 @@ -1,20 +0,0 @@ -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 @@ -1,94 +0,0 @@ -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], - focus: [240, 5, 92], - }, - 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/garden/dark.ts b/themes/src/garden/dark.ts @@ -0,0 +1,97 @@ +import type { ThemeRecord } from "../types"; + +export const record_garden_dark: ThemeRecord = { + layers: { + layer_0: { + surface: { + _: [0, 0, 7], + _w: [0, 0, 7], + _a: [240, 2, 23], + edge: [274, 4, 11], + blur: [0, 0, 12], + }, + glyphs: { + _: [230, 3, 56], + _a: [230, 3, 51], + _pl: [30, 1, 99], + 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], + focus: [240, 4, 20], + }, + glyphs: { + _: [30, 100, 100], + _a: [30, 1, 90], + _d: [30, 1, 80], + _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], + _d: [230, 4, 61], + _pl: [240, 2, 40], + hl: [210, 100, 52], + hl_a: [210, 100, 42], + shade: [230, 4, 61], + } + } + }, + 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": [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/garden/index.ts b/themes/src/garden/index.ts @@ -0,0 +1,20 @@ +import type { ColorKeyDark, ColorKeyLight } from "../types"; +import { write_daisy, write_layers } from "../utils"; +import { record_garden_dark as dark } from "./dark"; +import { record_garden_light as light } from "./light"; + +type key = `garden`; + +export const theme_garden_light: Record<ColorKeyLight<key>, Record<string, string>> = { + garden_light: { + ...write_daisy(light.daisy), + ...write_layers(light.layers) + } +}; + +export const theme_garden_dark: Record<ColorKeyDark<key>, Record<string, string>> = { + garden_dark: { + ...write_daisy(dark.daisy), + ...write_layers(dark.layers) + } +}; diff --git a/themes/src/garden/light.ts b/themes/src/garden/light.ts @@ -0,0 +1,116 @@ +import type { ThemeRecord } from "../types"; + +export const record_garden_light: ThemeRecord = { + layers: { + layer_0: { + surface: { + //rgb(135, 163, 126) + // _: [86, 38, 87], + //_: [86, 39, 83], + // _: [112, 41, 85], + _: [86, 30, 95], + //[95, 27, 82], + // hsl(86, 30%, 95%) + _w: [248, 248, 250], + _a: [240, 6, 83], + edge: [0, 0, 87], + blur: [0, 0, 100], + //[179, 7, 96], + }, + glyphs: { + // _: [101, 56, 22], + // _: [180, 4, 26], + _: [180, 2, 32], + _a: [240, 2, 60], + _pl: [240, 2, 78], + hl: [211, 100, 50], + hl_a: [211, 100, 40], + shade: [230, 3, 54], + label: [240, 2, 53], + } + }, + layer_1: { + surface: { + //_: [92, 42, 74], + // _: [112, 32, 78], + //_: [95, 26, 77], + _: [87, 15, 88], + _a: [89, 14, 68], + edge: [274, 4, 90], + err: [0, 0, 0], + focus: [46, 46, 88], + }, + glyphs: { + // _: [112, 15, 22], + _: [180, 2, 40], + _a: [0, 0, 10], + _d: [0, 0, 20], + _pl: [0, 0, 0], + hl: [211, 100, 50], + hl_a: [211, 100, 40], + shade: [240, 2, 55], + label: [240, 2, 53], + } + }, + layer_2: { + surface: { + //_: [96, 21, 65], + _: [193, 204, 182], + _a: [240, 5, 95], + edge: [242, 2, 88], + }, + glyphs: { + _: [240, 2, 55], + _a: [240, 2, 45], + _d: [240, 2, 65], + _pl: [240, 2, 78], + hl: [211, 100, 50], + hl_a: [211, 100, 40], + shade: [240, 2, 55], + } + } + }, + daisy: { + "primary": [219, 92, 58], + "primary-focus": [216, 92, 66], + "primary-content": [0, 0, 100], + "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": [240, 3, 94], + "neutral-focus": [240, 4, 95], + "neutral-content": [219, 92, 58], + "base-100": [89, 29, 82], + //[84, 26, 96], + //[87, 43, 96],//[84, 17, 96], + //hsl(90, 29%, 77%) + "base-200": [90, 29, 77], + //[87, 13, 86], hsl(89, 29%, 73%) + "base-300": [89, 29, 73], + "base-content": [0, 0, 0], + "info": [211, 100, 50], + "info-content": [0, 0, 100], + "success": [121, 45, 58], + //[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/index.ts b/themes/src/index.ts @@ -1,4 +1,5 @@ export { theme_colors } from "./colors"; export { themes } from "./theme"; export type { ColorMode, Theme, ThemeKey, ThemeLayer } from "./types"; -export { parse_theme_key, parse_color_mode } from "./utils" +export { parse_color_mode, parse_theme_key } from "./utils"; + diff --git a/themes/src/os/dark.ts b/themes/src/os/dark.ts @@ -5,6 +5,7 @@ export const record_os_dark: ThemeRecord = { layer_0: { surface: { _: [0, 0, 7], + _w: [0, 0, 7], _a: [240, 2, 23], edge: [274, 4, 11], blur: [0, 0, 12], @@ -12,6 +13,7 @@ export const record_os_dark: ThemeRecord = { glyphs: { _: [230, 3, 56], _a: [230, 3, 51], + _pl: [30, 1, 99], hl: [210, 100, 52], hl_a: [210, 91, 21], shade: [240, 3, 57], @@ -29,6 +31,7 @@ export const record_os_dark: ThemeRecord = { glyphs: { _: [30, 100, 100], _a: [30, 1, 90], + _d: [240, 1, 82], _pl: [30, 1, 99], hl: [210, 100, 52], hl_a: [210, 100, 62], @@ -45,6 +48,7 @@ export const record_os_dark: ThemeRecord = { glyphs: { _: [240, 3, 73], _a: [230, 4, 51], + _d: [240, 3, 63], _pl: [240, 2, 40], hl: [210, 100, 52], hl_a: [210, 100, 42], diff --git a/themes/src/os/light.ts b/themes/src/os/light.ts @@ -4,15 +4,17 @@ export const record_os_light: ThemeRecord = { layers: { layer_0: { surface: { - _: [240, 20, 96], + _: [240, 24, 96], + _w: [248, 248, 250], _a: [240, 6, 83], edge: [0, 0, 87], blur: [179, 7, 96], }, glyphs: { - _: [0, 0, 0], + _: [240, 2, 55], _a: [240, 2, 60], - hl: [211, 100, 50], + _pl: [240, 2, 78], + hl: [219, 92, 59], hl_a: [211, 100, 40], shade: [230, 3, 54], label: [240, 2, 53], @@ -20,16 +22,17 @@ export const record_os_light: ThemeRecord = { }, layer_1: { surface: { - _: [30, 100, 100], + _: [0, 0, 100], _a: [240, 6, 83], edge: [274, 4, 90], err: [0, 0, 0], - focus: [240, 5, 92], + focus: [240, 15, 94],//[240, 5, 92], }, glyphs: { - _: [0, 0, 0], + _: [0, 0, 10], _a: [0, 0, 10], - _pl: [0, 0, 0], + _d: [0, 0, 20], + _pl: [240, 2, 78], hl: [211, 100, 50], hl_a: [211, 100, 40], shade: [240, 2, 55], @@ -45,6 +48,7 @@ export const record_os_light: ThemeRecord = { glyphs: { _: [240, 2, 55], _a: [240, 2, 45], + _d: [240, 2, 65], _pl: [240, 2, 78], hl: [211, 100, 50], hl_a: [211, 100, 40], diff --git a/themes/src/theme.ts b/themes/src/theme.ts @@ -1,9 +1,9 @@ -import { theme_earth_dark, theme_earth_light } from "./earth"; +import { theme_garden_dark, theme_garden_light } from "./garden"; import { theme_os_dark, theme_os_light } from "./os"; export const themes = { theme_os_light, theme_os_dark, - theme_earth_light, - theme_earth_dark, + theme_garden_light, + theme_garden_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` | `earth`; +export type ThemeKey = `os` | `garden`; 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 @@ -1,44 +1,42 @@ import type { ColorMode, HslTuple, ThemeDaisy, ThemeKey, ThemeLayers } from "./types"; export const hsl = (c: HslTuple): string => `${c[0]}deg ${c[1]}% ${c[2]}%`; - export const hsl_lighten = (c: HslTuple, amt: number = 25): string => hsl([c[0], c[1], c[2] + amt]); - export const hsl_darken = (c: HslTuple, amt: number = 25): string => hsl([c[0], c[1], c[2] - amt]); - export const hsl_css = (c: HslTuple): string => `hsl(${hsl(c)})`; - export const write_daisy = (obj_c: ThemeDaisy): Record<string, string> => Object.fromEntries( - Object.entries(obj_c).map(([key, val]) => [key, hsl_css(val)]) + Object.entries(obj_c).map(([key, val]) => [key, hsl_css(val)]) ); export const parse_theme_key = (key?: string): ThemeKey => { - switch (key) { + switch (key) { case "os": - case "earth": - return key; - default: - return "os"; - }; + case "garden": + return key; + default: + return "os"; + } }; export const parse_color_mode = (color_mode?: string): ColorMode => { - switch (color_mode) { - case "light": - case "dark": - return color_mode; - default: - return "light"; - }; + switch (color_mode) { + case "light": + case "dark": + return color_mode; + default: + return "light"; + } }; 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_w": hsl(l0_s._w), "--layer-0-surface-edge": hsl(l0_s.edge), "--layer-0-surface-blur": hsl(l0_s.blur), "--layer-0-glyph": hsl(l0_g._), "--layer-0-glyph_a": hsl(l0_g._a), + "--layer-0-glyph_pl": hsl(l0_g._pl), "--layer-0-glyph-hl": hsl(l0_g.hl), "--layer-0-glyph-hl_a": hsl(l0_g.hl_a), "--layer-0-glyph-shade": hsl(l0_g.shade), @@ -50,7 +48,8 @@ export const write_layers = ({ layer_0: { surface: l0_s, glyphs: l0_g }, layer_1 "--layer-1-surface-focus": hsl(l1_s.focus), "--layer-1-glyph": hsl(l1_g._), "--layer-1-glyph_a": hsl(l1_g._a), - "--layer-1-glyph-_pl": hsl(l1_g._pl), + "--layer-1-glyph_d": hsl(l1_g._d), + "--layer-1-glyph_pl": hsl(l1_g._pl), "--layer-1-glyph-hl": hsl(l1_g.hl), "--layer-1-glyph-hl_a": hsl(l1_g.hl_a), "--layer-1-glyph-shade": hsl(l1_g.shade), @@ -60,7 +59,8 @@ export const write_layers = ({ layer_0: { surface: l0_s, glyphs: l0_g }, layer_1 "--layer-2-surface-edge": hsl(l2_s.edge), "--layer-2-glyph": hsl(l2_g._), "--layer-2-glyph_a": hsl(l2_g._a), - "--layer-2-glyph-_pl": hsl(l2_g._pl), + "--layer-2-glyph_d": hsl(l2_g._d), + "--layer-2-glyph_pl": hsl(l2_g._pl), "--layer-2-glyph-hl": hsl(l2_g.hl), "--layer-2-glyph-hl_a": hsl(l2_g.hl_a), "--layer-2-glyph-shade": hsl(l2_g.shade),