commit c5d75222580b3c4f59d0d2be2543e03342842d71
parent 850fd0fb025012331e0dda1c629e3bddff6daef6
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Fri, 8 Aug 2025 22:28:58 +0000
themes: refactor `themes` updating css styles for use with tailwind css v4
Diffstat:
25 files changed, 577 insertions(+), 763 deletions(-)
diff --git a/themes/.eslintrc.js b/themes/.eslintrc.js
@@ -1,5 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
- root: true,
- extends: ["@radroots/eslint/index.js"],
-};
diff --git a/themes/package.json b/themes/package.json
@@ -1,25 +1,32 @@
{
- "name": "@radroots/theme",
+ "name": "@radroots/themes",
"version": "0.0.0",
"private": true,
"license": "GPLv3",
"type": "module",
- "main": "dist/index.js",
- "module": "dist/index.js",
- "types": "dist/index.d.ts",
+ "main": "./dist/cjs/index.cjs",
+ "module": "./dist/esm/index.js",
+ "types": "./dist/types/index.d.ts",
"exports": {
".": {
- "import": "./dist/index.js",
- "require": "./dist/index.cjs"
+ "types": "./dist/types/index.d.ts",
+ "import": "./dist/esm/index.js",
+ "require": "./dist/cjs/index.js"
}
},
"scripts": {
- "build": "tsup",
- "dev": "tsup --watch",
- "watch": "tsc -w"
+ "build:esm": "tsc -p tsconfig.json",
+ "build:cjs": "tsc -p tsconfig.cjs.json",
+ "build": "npm run clean && npm run build:esm && npm run build:cjs",
+ "prebuild": "npm run clean",
+ "clean": "rimraf dist",
+ "dev": "npm run watch",
+ "watch": "tsc -w",
+ "gen": "generate-theme-css"
},
"devDependencies": {
- "tsup": "^6.2.3",
+ "@radroots/tsconfig": "*",
+ "@radroots/dev": "*",
"typescript": "5.8.3"
},
"publishConfig": {
diff --git a/themes/src/colors.ts b/themes/src/colors.ts
@@ -1,97 +0,0 @@
-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>)",
- "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-1-surface-focus": "hsl(var(--layer-1-surface-focus) / <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>)",
- "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>)",
- "layer-1-glyph-shade": "hsl(var(--layer-1-glyph-shade) / <alpha-value>)",
- "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>)",
- "layer-2-glyph-shade": "hsl(var(--layer-2-glyph-shade) / <alpha-value>)",
- "radroots-accent-focus": "hsl(var(--radroots-accent-focus) / <alpha-value>)",
-
-};
-
-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;
- label: HslTuple;
- };
-};
-
-export type ThemeLayer1 = {
- surface: {
- _: HslTuple;
- _a: HslTuple;
- edge: HslTuple;
- err: HslTuple;
- focus: HslTuple;
- };
- glyphs: {
- _: HslTuple;
- _a: HslTuple;
- _d: HslTuple;
- _pl: HslTuple;
- hl: HslTuple;
- hl_a: HslTuple;
- shade: HslTuple;
- label: HslTuple;
- };
-};
-
-export type ThemeLayer2 = {
- surface: {
- _: HslTuple;
- _a: HslTuple;
- edge: HslTuple;
- };
- glyphs: {
- _: HslTuple;
- _a: HslTuple;
- _d: HslTuple;
- _pl: HslTuple;
- hl: HslTuple;
- hl_a: HslTuple;
- shade: HslTuple;
- };
-};
diff --git a/themes/src/config.ts b/themes/src/config.ts
@@ -1,26 +0,0 @@
-export const relative_dimensions = {
- "7": "1.75rem",
- "9": "2.25rem",
- "11": "2.75rem",
- "13": "3.25rem",
- "14": "3.5rem",
- "15": "3.75rem",
- "17": "4.25rem",
- "18": "4.5rem",
- "19": "4.75rem",
- "21": "5.25rem",
- "22": "5.5rem",
- "23": "5.75rem",
- "25": "6.25rem",
- "26": "6.5rem",
- "27": "6.75rem",
- "29": "7.25rem",
- "30": "7.5rem",
- "31": "7.75rem",
- "33": "8.25rem",
- "34": "8.5rem",
- "35": "8.75rem",
- "37": "9.25rem",
- "38": "9.5rem",
- "39": "9.75rem",
-} as const;
diff --git a/themes/src/data/os.hsl.dark.json b/themes/src/data/os.hsl.dark.json
@@ -0,0 +1,55 @@
+{
+ "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": [ 240, 1, 82 ],
+ "_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": [ 240, 3, 63 ],
+ "_pl": [ 240, 2, 40 ],
+ "hl": [ 210, 100, 52 ],
+ "hl_a": [ 210, 100, 42 ],
+ "shade": [ 230, 4, 61 ]
+ }
+ }
+}
diff --git a/themes/src/data/os.hsl.light.json b/themes/src/data/os.hsl.light.json
@@ -0,0 +1,55 @@
+{
+ "layer_0": {
+ "surface": {
+ "_": [ 240, 24, 96 ],
+ "_w": [ 248, 248, 250 ],
+ "_a": [ 240, 6, 83 ],
+ "edge": [ 0, 0, 87 ],
+ "blur": [ 179, 7, 96 ]
+ },
+ "glyphs": {
+ "_": [ 240, 2, 55 ],
+ "_a": [ 240, 2, 60 ],
+ "_pl": [ 240, 2, 78 ],
+ "hl": [ 219, 92, 59 ],
+ "hl_a": [ 211, 100, 40 ],
+ "shade": [ 230, 3, 54 ],
+ "label": [ 240, 2, 53 ]
+ }
+ },
+ "layer_1": {
+ "surface": {
+ "_": [ 0, 0, 100 ],
+ "_a": [ 240, 6, 83 ],
+ "edge": [ 274, 4, 90 ],
+ "err": [ 0, 0, 0 ],
+ "focus": [ 240, 15, 94 ]
+ },
+ "glyphs": {
+ "_": [ 0, 0, 10 ],
+ "_a": [ 0, 0, 10 ],
+ "_d": [ 0, 0, 20 ],
+ "_pl": [ 240, 2, 78 ],
+ "hl": [ 211, 100, 50 ],
+ "hl_a": [ 211, 100, 40 ],
+ "shade": [ 240, 2, 55 ],
+ "label": [ 240, 2, 53 ]
+ }
+ },
+ "layer_2": {
+ "surface": {
+ "_": [ 240, 5, 90 ],
+ "_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 ]
+ }
+ }
+}
diff --git a/themes/src/data/os.rgb.dark.json b/themes/src/data/os.rgb.dark.json
@@ -0,0 +1,54 @@
+{
+ "layer_0": {
+ "surface": {
+ "_": [ 0, 0, 0 ],
+ "_a": [ 31, 31, 31 ],
+ "edge": [ 125, 125, 129 ]
+ },
+ "glyphs": {
+ "_": [ 255, 255, 255 ],
+ "_a": [ 255, 255, 255 ],
+ "_d": [ 125, 125, 129 ],
+ "_pl": [ 125, 125, 129 ],
+ "hl": [ 54, 117, 220 ],
+ "hl_a": [ 85, 151, 242 ],
+ "label": [ 125, 125, 129 ]
+ }
+ },
+ "layer_1": {
+ "surface": {
+ "_": [ 28, 28, 31 ],
+ "_a": [ 58, 58, 60 ],
+ "edge": [ 38, 38, 40 ],
+ "icon": [ 152, 152, 158 ],
+ "overlay": [ 142, 142, 147 ]
+ },
+ "glyphs": {
+ "_": [ 240, 240, 240 ],
+ "_a": [ 240, 240, 240 ],
+ "_d": [ 88, 88, 93 ],
+ "_pl": [ 128, 128, 133 ],
+ "hl": [ 59, 130, 247 ],
+ "hl_a": [ 21, 52, 98 ],
+ "label": [ 125, 125, 125 ],
+ "edge": [ 85, 85, 85 ]
+ }
+ },
+ "layer_2": {
+ "surface": {
+ "_": [ 44, 44, 46 ],
+ "_a": [ 58, 58, 60 ],
+ "edge": [ 112, 112, 115 ],
+ "icon": [ 159, 159, 164 ]
+ },
+ "glyphs": {
+ "_": [ 241, 241, 241 ],
+ "_a": [ 241, 241, 241 ],
+ "_d": [ 130, 130, 134 ],
+ "_pl": [ 128, 128, 133 ],
+ "hl": [ 59, 130, 247 ],
+ "hl_a": [ 21, 52, 98 ],
+ "label": [ 130, 130, 134 ]
+ }
+ }
+}
diff --git a/themes/src/data/os.rgb.light.json b/themes/src/data/os.rgb.light.json
@@ -0,0 +1,54 @@
+{
+ "layer_0": {
+ "surface": {
+ "_": [ 242, 242, 247 ],
+ "_a": [ 242, 242, 247 ],
+ "edge": [ 159, 159, 165 ]
+ },
+ "glyphs": {
+ "_": [ 0, 0, 0 ],
+ "_a": [ 0, 0, 0 ],
+ "_d": [ 145, 145, 149 ],
+ "_pl": [ 145, 145, 149 ],
+ "hl": [ 52, 120, 246 ],
+ "hl_a": [ 108, 165, 249 ],
+ "label": [ 177, 177, 182 ]
+ }
+ },
+ "layer_1": {
+ "surface": {
+ "_": [ 255, 255, 255 ],
+ "_a": [ 209, 209, 214 ],
+ "edge": [ 197, 197, 199 ],
+ "icon": [ 127, 127, 132 ],
+ "overlay": [ 142, 142, 147 ]
+ },
+ "glyphs": {
+ "_": [ 14, 14, 14 ],
+ "_a": [ 29, 29, 29 ],
+ "_d": [ 29, 29, 29 ],
+ "_pl": [ 29, 29, 29 ],
+ "hl": [ 52, 120, 246 ],
+ "hl_a": [ 199, 217, 246 ],
+ "label": [ 164, 164, 164 ],
+ "edge": [ 191, 191, 191 ]
+ }
+ },
+ "layer_2": {
+ "surface": {
+ "_": [ 242, 242, 247 ],
+ "_a": [ 58, 58, 60 ],
+ "edge": [ 112, 112, 115 ],
+ "icon": [ 159, 159, 164 ]
+ },
+ "glyphs": {
+ "_": [ 14, 14, 14 ],
+ "_a": [ 29, 29, 29 ],
+ "_d": [ 29, 29, 29 ],
+ "_pl": [ 29, 29, 29 ],
+ "hl": [ 52, 120, 246 ],
+ "hl_a": [ 199, 217, 246 ],
+ "label": [ 137, 137, 142 ]
+ }
+ }
+}
diff --git a/themes/src/garden/dark.ts b/themes/src/garden/dark.ts
@@ -1,97 +0,0 @@
-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
@@ -1,20 +0,0 @@
-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
@@ -1,97 +0,0 @@
-import type { ThemeRecord } from "../types";
-
-export const record_garden_light: ThemeRecord = {
- layers: {
- layer_0: {
- surface: {
- _: [86, 30, 95],
- _w: [248, 248, 250],
- _a: [240, 6, 83],
- edge: [0, 0, 87],
- blur: [0, 0, 100],
- },
- glyphs: {
- _: [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: {
- _: [87, 15, 88],
- _a: [89, 14, 68],
- edge: [274, 4, 90],
- err: [0, 0, 0],
- focus: [46, 46, 88],
- },
- glyphs: {
- _: [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: {
- _: [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": "#1c4128",
- "secondary-focus": "#132318",
- "secondary-content": "ffffff",
- "accent": "#ff2594",
- "accent-focus": [331, 68, 48],
- "accent-content": "ffffff",
- "neutral": [240, 3, 94],
- "neutral-focus": [240, 4, 95],
- "neutral-content": [219, 92, 58],
- "base-100": "#2ecc71",
- "base-200": [90, 29, 77],
- "base-300": [89, 29, 73],
- "base-content": [0, 0, 0],
- "info": [211, 100, 50],
- "info-content": [0, 0, 100],
- "success": [121, 45, 58],
- "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,6 +1 @@
-export { theme_colors } from "./colors";
-export { relative_dimensions } from "./config";
-export { themes } from "./theme";
-export type { ColorMode, Theme, ThemeKey, ThemeLayer } from "./types";
-export { parse_color_mode, parse_theme, parse_theme_key } from "./utils";
-
+export * from "./types/lib.js"
diff --git a/themes/src/os/dark.ts b/themes/src/os/dark.ts
@@ -1,97 +0,0 @@
-import type { ThemeRecord } from "../types";
-
-export const record_os_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: [240, 1, 82],
- _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: [240, 3, 63],
- _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/os/index.ts b/themes/src/os/index.ts
@@ -1,20 +0,0 @@
-import type { ColorKeyDark, ColorKeyLight } from "../types";
-import { write_daisy, write_layers } from "../utils";
-import { record_os_dark as dark } from "./dark";
-import { record_os_light as light } from "./light";
-
-type key = `os`;
-
-export const theme_os_light: Record<ColorKeyLight<key>, Record<string, string>> = {
- os_light: {
- ...write_daisy(light.daisy),
- ...write_layers(light.layers)
- }
-};
-
-export const theme_os_dark: Record<ColorKeyDark<key>, Record<string, string>> = {
- os_dark: {
- ...write_daisy(dark.daisy),
- ...write_layers(dark.layers)
- }
-};
diff --git a/themes/src/os/light.ts b/themes/src/os/light.ts
@@ -1,97 +0,0 @@
-import type { ThemeRecord } from "../types";
-
-export const record_os_light: ThemeRecord = {
- layers: {
- layer_0: {
- surface: {
- _: [240, 24, 96],
- _w: [248, 248, 250],
- _a: [240, 6, 83],
- edge: [0, 0, 87],
- blur: [179, 7, 96],
- },
- glyphs: {
- _: [240, 2, 55],
- _a: [240, 2, 60],
- _pl: [240, 2, 78],
- hl: [219, 92, 59],
- hl_a: [211, 100, 40],
- shade: [230, 3, 54],
- label: [240, 2, 53],
- }
- },
- layer_1: {
- surface: {
- _: [0, 0, 100],
- _a: [240, 6, 83],
- edge: [274, 4, 90],
- err: [0, 0, 0],
- focus: [240, 15, 94],
- },
- glyphs: {
- _: [0, 0, 10],
- _a: [0, 0, 10],
- _d: [0, 0, 20],
- _pl: [240, 2, 78],
- hl: [211, 100, 50],
- hl_a: [211, 100, 40],
- shade: [240, 2, 55],
- label: [240, 2, 53],
- }
- },
- layer_2: {
- surface: {
- _: [240, 5, 90],
- _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": [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/styles/os.css b/themes/src/styles/os.css
@@ -0,0 +1,121 @@
+@theme {
+ --color-ly0: hsl(var(--ly0) / <alpha-value>);
+ --color-ly0-w: hsl(var(--ly0-w) / <alpha-value>);
+ --color-ly0-a: hsl(var(--ly0-a) / <alpha-value>);
+ --color-ly0-edge: hsl(var(--ly0-edge) / <alpha-value>);
+ --color-ly0-blur: hsl(var(--ly0-blur) / <alpha-value>);
+ --color-ly0-gl: hsl(var(--ly0-gl) / <alpha-value>);
+ --color-ly0-gl-a: hsl(var(--ly0-gl-a) / <alpha-value>);
+ --color-ly0-gl-pl: hsl(var(--ly0-gl-pl) / <alpha-value>);
+ --color-ly0-gl-hl: hsl(var(--ly0-gl-hl) / <alpha-value>);
+ --color-ly0-gl-hl-a: hsl(var(--ly0-gl-hl-a) / <alpha-value>);
+ --color-ly0-gl-shade: hsl(var(--ly0-gl-shade) / <alpha-value>);
+ --color-ly0-gl-label: hsl(var(--ly0-gl-label) / <alpha-value>);
+ --color-ly1: hsl(var(--ly1) / <alpha-value>);
+ --color-ly1-a: hsl(var(--ly1-a) / <alpha-value>);
+ --color-ly1-edge: hsl(var(--ly1-edge) / <alpha-value>);
+ --color-ly1-err: hsl(var(--ly1-err) / <alpha-value>);
+ --color-ly1-focus: hsl(var(--ly1-focus) / <alpha-value>);
+ --color-ly1-gl: hsl(var(--ly1-gl) / <alpha-value>);
+ --color-ly1-gl-a: hsl(var(--ly1-gl-a) / <alpha-value>);
+ --color-ly1-gl-d: hsl(var(--ly1-gl-d) / <alpha-value>);
+ --color-ly1-gl-pl: hsl(var(--ly1-gl-pl) / <alpha-value>);
+ --color-ly1-gl-hl: hsl(var(--ly1-gl-hl) / <alpha-value>);
+ --color-ly1-gl-hl-a: hsl(var(--ly1-gl-hl-a) / <alpha-value>);
+ --color-ly1-gl-shade: hsl(var(--ly1-gl-shade) / <alpha-value>);
+ --color-ly1-gl-label: hsl(var(--ly1-gl-label) / <alpha-value>);
+ --color-ly2: hsl(var(--ly2) / <alpha-value>);
+ --color-ly2-a: hsl(var(--ly2-a) / <alpha-value>);
+ --color-ly2-edge: hsl(var(--ly2-edge) / <alpha-value>);
+ --color-ly2-gl: hsl(var(--ly2-gl) / <alpha-value>);
+ --color-ly2-gl-a: hsl(var(--ly2-gl-a) / <alpha-value>);
+ --color-ly2-gl-d: hsl(var(--ly2-gl-d) / <alpha-value>);
+ --color-ly2-gl-pl: hsl(var(--ly2-gl-pl) / <alpha-value>);
+ --color-ly2-gl-hl: hsl(var(--ly2-gl-hl) / <alpha-value>);
+ --color-ly2-gl-hl-a: hsl(var(--ly2-gl-hl-a) / <alpha-value>);
+ --color-ly2-gl-shade: hsl(var(--ly2-gl-shade) / <alpha-value>);
+}
+
+@plugin "daisyui/theme" {
+ name: "os_dark";
+ default: false;
+ prefersdark: true;
+ color-scheme: dark;
+ --color-ly0: hsl(0, 0%, 7%);
+ --color-ly0-w: hsl(0, 0%, 7%);
+ --color-ly0-a: hsl(240, 2%, 23%);
+ --color-ly0-edge: hsl(274, 4%, 11%);
+ --color-ly0-blur: hsl(0, 0%, 12%);
+ --color-ly0-gl: hsl(230, 3%, 56%);
+ --color-ly0-gl-a: hsl(230, 3%, 51%);
+ --color-ly0-gl-pl: hsl(30, 1%, 99%);
+ --color-ly0-gl-hl: hsl(210, 100%, 52%);
+ --color-ly0-gl-hl-a: hsl(210, 91%, 21%);
+ --color-ly0-gl-shade: hsl(240, 3%, 57%);
+ --color-ly0-gl-label: hsl(240, 3%, 55%);
+ --color-ly1: hsl(240, 4%, 11%);
+ --color-ly1-a: hsl(240, 2%, 23%);
+ --color-ly1-edge: hsl(240, 3%, 19%);
+ --color-ly1-err: hsl(0, 0%, 0%);
+ --color-ly1-focus: hsl(240, 4%, 20%);
+ --color-ly1-gl: hsl(30, 100%, 100%);
+ --color-ly1-gl-a: hsl(30, 1%, 90%);
+ --color-ly1-gl-d: hsl(240, 1%, 82%);
+ --color-ly1-gl-pl: hsl(30, 1%, 99%);
+ --color-ly1-gl-hl: hsl(210, 100%, 52%);
+ --color-ly1-gl-hl-a: hsl(210, 100%, 62%);
+ --color-ly1-gl-shade: hsl(230, 4%, 61%);
+ --color-ly1-gl-label: hsl(30, 1%, 99%);
+ --color-ly2: hsl(240, 2%, 18%);
+ --color-ly2-a: hsl(240, 3%, 15%);
+ --color-ly2-edge: hsl(240, 2%, 23%);
+ --color-ly2-gl: hsl(240, 3%, 73%);
+ --color-ly2-gl-a: hsl(230, 4%, 51%);
+ --color-ly2-gl-d: hsl(240, 3%, 63%);
+ --color-ly2-gl-pl: hsl(240, 2%, 40%);
+ --color-ly2-gl-hl: hsl(210, 100%, 52%);
+ --color-ly2-gl-hl-a: hsl(210, 100%, 42%);
+ --color-ly2-gl-shade: hsl(230, 4%, 61%);
+}
+
+@plugin "daisyui/theme" {
+ name: "os_light";
+ default: false;
+ prefersdark: false;
+ color-scheme: light;
+ --color-ly0: hsl(240, 24%, 96%);
+ --color-ly0-w: hsl(248, 248%, 250%);
+ --color-ly0-a: hsl(240, 6%, 83%);
+ --color-ly0-edge: hsl(0, 0%, 87%);
+ --color-ly0-blur: hsl(179, 7%, 96%);
+ --color-ly0-gl: hsl(240, 2%, 55%);
+ --color-ly0-gl-a: hsl(240, 2%, 60%);
+ --color-ly0-gl-pl: hsl(240, 2%, 78%);
+ --color-ly0-gl-hl: hsl(219, 92%, 59%);
+ --color-ly0-gl-hl-a: hsl(211, 100%, 40%);
+ --color-ly0-gl-shade: hsl(230, 3%, 54%);
+ --color-ly0-gl-label: hsl(240, 2%, 53%);
+ --color-ly1: hsl(0, 0%, 100%);
+ --color-ly1-a: hsl(240, 6%, 83%);
+ --color-ly1-edge: hsl(274, 4%, 90%);
+ --color-ly1-err: hsl(0, 0%, 0%);
+ --color-ly1-focus: hsl(240, 15%, 94%);
+ --color-ly1-gl: hsl(0, 0%, 10%);
+ --color-ly1-gl-a: hsl(0, 0%, 10%);
+ --color-ly1-gl-d: hsl(0, 0%, 20%);
+ --color-ly1-gl-pl: hsl(240, 2%, 78%);
+ --color-ly1-gl-hl: hsl(211, 100%, 50%);
+ --color-ly1-gl-hl-a: hsl(211, 100%, 40%);
+ --color-ly1-gl-shade: hsl(240, 2%, 55%);
+ --color-ly1-gl-label: hsl(240, 2%, 53%);
+ --color-ly2: hsl(240, 5%, 90%);
+ --color-ly2-a: hsl(240, 5%, 95%);
+ --color-ly2-edge: hsl(242, 2%, 88%);
+ --color-ly2-gl: hsl(240, 2%, 55%);
+ --color-ly2-gl-a: hsl(240, 2%, 45%);
+ --color-ly2-gl-d: hsl(240, 2%, 65%);
+ --color-ly2-gl-pl: hsl(240, 2%, 78%);
+ --color-ly2-gl-hl: hsl(211, 100%, 50%);
+ --color-ly2-gl-hl-a: hsl(211, 100%, 40%);
+ --color-ly2-gl-shade: hsl(240, 2%, 55%);
+}
+\ No newline at end of file
diff --git a/themes/src/styles/theme.css b/themes/src/styles/theme.css
@@ -0,0 +1,37 @@
+@theme {
+ --color-ly0: hsl(var(--ly0) / <alpha-value>);
+ --color-ly0-w: hsl(var(--ly0-w) / <alpha-value>);
+ --color-ly0-a: hsl(var(--ly0-a) / <alpha-value>);
+ --color-ly0-edge: hsl(var(--ly0-edge) / <alpha-value>);
+ --color-ly0-blur: hsl(var(--ly0-blur) / <alpha-value>);
+ --color-ly0-gl: hsl(var(--ly0-gl) / <alpha-value>);
+ --color-ly0-gl-a: hsl(var(--ly0-gl-a) / <alpha-value>);
+ --color-ly0-gl-pl: hsl(var(--ly0-gl-pl) / <alpha-value>);
+ --color-ly0-gl-hl: hsl(var(--ly0-gl-hl) / <alpha-value>);
+ --color-ly0-gl-hl-a: hsl(var(--ly0-gl-hl-a) / <alpha-value>);
+ --color-ly0-gl-shade: hsl(var(--ly0-gl-shade) / <alpha-value>);
+ --color-ly0-gl-label: hsl(var(--ly0-gl-label) / <alpha-value>);
+ --color-ly1: hsl(var(--ly1) / <alpha-value>);
+ --color-ly1-a: hsl(var(--ly1-a) / <alpha-value>);
+ --color-ly1-edge: hsl(var(--ly1-edge) / <alpha-value>);
+ --color-ly1-err: hsl(var(--ly1-err) / <alpha-value>);
+ --color-ly1-focus: hsl(var(--ly1-focus) / <alpha-value>);
+ --color-ly1-gl: hsl(var(--ly1-gl) / <alpha-value>);
+ --color-ly1-gl-a: hsl(var(--ly1-gl-a) / <alpha-value>);
+ --color-ly1-gl-d: hsl(var(--ly1-gl-d) / <alpha-value>);
+ --color-ly1-gl-pl: hsl(var(--ly1-gl-pl) / <alpha-value>);
+ --color-ly1-gl-hl: hsl(var(--ly1-gl-hl) / <alpha-value>);
+ --color-ly1-gl-hl-a: hsl(var(--ly1-gl-hl-a) / <alpha-value>);
+ --color-ly1-gl-shade: hsl(var(--ly1-gl-shade) / <alpha-value>);
+ --color-ly1-gl-label: hsl(var(--ly1-gl-label) / <alpha-value>);
+ --color-ly2: hsl(var(--ly2) / <alpha-value>);
+ --color-ly2-a: hsl(var(--ly2-a) / <alpha-value>);
+ --color-ly2-edge: hsl(var(--ly2-edge) / <alpha-value>);
+ --color-ly2-gl: hsl(var(--ly2-gl) / <alpha-value>);
+ --color-ly2-gl-a: hsl(var(--ly2-gl-a) / <alpha-value>);
+ --color-ly2-gl-d: hsl(var(--ly2-gl-d) / <alpha-value>);
+ --color-ly2-gl-pl: hsl(var(--ly2-gl-pl) / <alpha-value>);
+ --color-ly2-gl-hl: hsl(var(--ly2-gl-hl) / <alpha-value>);
+ --color-ly2-gl-hl-a: hsl(var(--ly2-gl-hl-a) / <alpha-value>);
+ --color-ly2-gl-shade: hsl(var(--ly2-gl-shade) / <alpha-value>);
+}
+\ No newline at end of file
diff --git a/themes/src/theme.ts b/themes/src/theme.ts
@@ -1,9 +0,0 @@
-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_garden_light,
- theme_garden_dark
-}
diff --git a/themes/src/types.ts b/themes/src/types.ts
@@ -1,57 +0,0 @@
-import type { ThemeLayer0, ThemeLayer1, ThemeLayer2 } from "./colors";
-import { themes } from "./theme";
-
-export type ColorMode = `light` | `dark`;
-export type ColorKey<T extends ThemeKey> = `${T}_${ColorMode}`;
-export type ColorKeyLight<T extends ThemeKey> = `${T}_light`;
-export type ColorKeyDark<T extends ThemeKey> = `${T}_dark`;
-
-export type HslTuple = [number, number, number];
-
-export type Theme = keyof typeof themes;
-export type ThemeKey = `os` | `garden`;
-export type ThemeLayer = 0 | 1 | 2;
-export type ThemeRecord = { layers: ThemeLayers } & { daisy: ThemeDaisy };
-export type ThemeLayers = {
- layer_0: ThemeLayer0;
- layer_1: ThemeLayer1;
- layer_2: ThemeLayer2;
-};
-export type ThemeDaisy = {
- primary: HslTuple | string;
- "primary-focus": HslTuple | string;
- "primary-content": HslTuple | string;
- secondary: HslTuple | string;
- "secondary-focus": HslTuple | string;
- "secondary-content": HslTuple | string;
- accent: HslTuple | string;
- "accent-focus": HslTuple | string;
- "accent-content": HslTuple | string;
- neutral: HslTuple | string;
- "neutral-focus": HslTuple | string;
- "neutral-content": HslTuple | string;
- "base-100": HslTuple | string;
- "base-200": HslTuple | string;
- "base-300": HslTuple | string;
- "base-content": HslTuple | string;
- info: HslTuple | string;
- "info-content": HslTuple | string;
- success: HslTuple | string;
- "success-content": HslTuple | string;
- warning: HslTuple | string;
- "warning-content": HslTuple | string;
- error: HslTuple | string;
- "error-content": HslTuple | string;
- "--rounded-box": HslTuple | string;
- "--rounded-btn": HslTuple | string;
- "--rounded-badge": HslTuple | string;
- "--animation-btn": HslTuple | string;
- "--animation-input": HslTuple | string;
- "--btn-text-case": HslTuple | string;
- "--btn-focus-scale": HslTuple | string;
- "--border-btn": HslTuple | string;
- "--tab-border": HslTuple | string;
- "--tab-radius": HslTuple | string;
- "--spinner-color-base": HslTuple | string;
- "--spinner-color-white": HslTuple | string;
-};
-\ No newline at end of file
diff --git a/themes/src/types/lib.ts b/themes/src/types/lib.ts
@@ -0,0 +1,5 @@
+export type ThemeKey = `os` | `garden`;
+export type ThemeMode = `light` | `dark`;
+export type ThemeKeys<T extends ThemeKey> = `${T}_${ThemeMode}`;
+export type ThemeKeysLight<T extends ThemeKey> = `${T}_light`;
+export type ThemeKeysDark<T extends ThemeKey> = `${T}_dark`;
diff --git a/themes/src/utils.ts b/themes/src/utils.ts
@@ -1,81 +0,0 @@
-import type { ColorMode, HslTuple, Theme, 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, typeof val === `string` ? val : hsl_css(val)])
-);
-
-export const parse_theme = (key?: string, color_mode?: string): Theme => {
- const theme = `${parse_theme_key(key)}_${parse_color_mode(color_mode)}`;
- switch (theme) {
- case `theme_os_light`:
- case `theme_os_dark`:
- case `theme_garden_light`:
- case `theme_garden_dark`:
- return theme;
- default:
- return `theme_os_light`;
- }
-};
-
-export const parse_theme_key = (key?: string): ThemeKey => {
- switch (key) {
- case "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";
- }
-};
-
-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> => ({
- "--radroots-accent-focus": hsl([331, 68, 48]),
- "--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),
- "--layer-0-glyph-label": hsl(l0_g.label),
- "--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-surface-focus": hsl(l1_s.focus),
- "--layer-1-glyph": hsl(l1_g._),
- "--layer-1-glyph_a": hsl(l1_g._a),
- "--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),
- "--layer-1-glyph-label": hsl(l1_g.label),
- "--layer-2-surface": hsl(l2_s._),
- "--layer-2-surface_a": hsl(l2_s._a),
- "--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_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),
-});
diff --git a/themes/theme.css b/themes/theme.css
@@ -0,0 +1,159 @@
+@theme {
+ --color-ly0: hsl(var(--ly0) / <alpha-value>);
+ --color-ly0-w: hsl(var(--ly0-w) / <alpha-value>);
+ --color-ly0-a: hsl(var(--ly0-a) / <alpha-value>);
+ --color-ly0-edge: hsl(var(--ly0-edge) / <alpha-value>);
+ --color-ly0-blur: hsl(var(--ly0-blur) / <alpha-value>);
+ --color-ly0-gl: hsl(var(--ly0-gl) / <alpha-value>);
+ --color-ly0-gl-a: hsl(var(--ly0-gl-a) / <alpha-value>);
+ --color-ly0-gl-pl: hsl(var(--ly0-gl-pl) / <alpha-value>);
+ --color-ly0-gl-hl: hsl(var(--ly0-gl-hl) / <alpha-value>);
+ --color-ly0-gl-hl-a: hsl(var(--ly0-gl-hl-a) / <alpha-value>);
+ --color-ly0-gl-shade: hsl(var(--ly0-gl-shade) / <alpha-value>);
+ --color-ly0-gl-label: hsl(var(--ly0-gl-label) / <alpha-value>);
+ --color-ly1: hsl(var(--ly1) / <alpha-value>);
+ --color-ly1-a: hsl(var(--ly1-a) / <alpha-value>);
+ --color-ly1-edge: hsl(var(--ly1-edge) / <alpha-value>);
+ --color-ly1-err: hsl(var(--ly1-err) / <alpha-value>);
+ --color-ly1-focus: hsl(var(--ly1-focus) / <alpha-value>);
+ --color-ly1-gl: hsl(var(--ly1-gl) / <alpha-value>);
+ --color-ly1-gl-a: hsl(var(--ly1-gl-a) / <alpha-value>);
+ --color-ly1-gl-d: hsl(var(--ly1-gl-d) / <alpha-value>);
+ --color-ly1-gl-pl: hsl(var(--ly1-gl-pl) / <alpha-value>);
+ --color-ly1-gl-hl: hsl(var(--ly1-gl-hl) / <alpha-value>);
+ --color-ly1-gl-hl-a: hsl(var(--ly1-gl-hl-a) / <alpha-value>);
+ --color-ly1-gl-shade: hsl(var(--ly1-gl-shade) / <alpha-value>);
+ --color-ly1-gl-label: hsl(var(--ly1-gl-label) / <alpha-value>);
+ --color-ly2: hsl(var(--ly2) / <alpha-value>);
+ --color-ly2-a: hsl(var(--ly2-a) / <alpha-value>);
+ --color-ly2-edge: hsl(var(--ly2-edge) / <alpha-value>);
+ --color-ly2-gl: hsl(var(--ly2-gl) / <alpha-value>);
+ --color-ly2-gl-a: hsl(var(--ly2-gl-a) / <alpha-value>);
+ --color-ly2-gl-d: hsl(var(--ly2-gl-d) / <alpha-value>);
+ --color-ly2-gl-pl: hsl(var(--ly2-gl-pl) / <alpha-value>);
+ --color-ly2-gl-hl: hsl(var(--ly2-gl-hl) / <alpha-value>);
+ --color-ly2-gl-hl-a: hsl(var(--ly2-gl-hl-a) / <alpha-value>);
+ --color-ly2-gl-shade: hsl(var(--ly2-gl-shade) / <alpha-value>);
+ --color-ly0: hsl(var(--ly0) / <alpha-value>);
+ --color-ly0-w: hsl(var(--ly0-w) / <alpha-value>);
+ --color-ly0-a: hsl(var(--ly0-a) / <alpha-value>);
+ --color-ly0-edge: hsl(var(--ly0-edge) / <alpha-value>);
+ --color-ly0-blur: hsl(var(--ly0-blur) / <alpha-value>);
+ --color-ly0-gl: hsl(var(--ly0-gl) / <alpha-value>);
+ --color-ly0-gl-a: hsl(var(--ly0-gl-a) / <alpha-value>);
+ --color-ly0-gl-pl: hsl(var(--ly0-gl-pl) / <alpha-value>);
+ --color-ly0-gl-hl: hsl(var(--ly0-gl-hl) / <alpha-value>);
+ --color-ly0-gl-hl-a: hsl(var(--ly0-gl-hl-a) / <alpha-value>);
+ --color-ly0-gl-shade: hsl(var(--ly0-gl-shade) / <alpha-value>);
+ --color-ly0-gl-label: hsl(var(--ly0-gl-label) / <alpha-value>);
+ --color-ly1: hsl(var(--ly1) / <alpha-value>);
+ --color-ly1-a: hsl(var(--ly1-a) / <alpha-value>);
+ --color-ly1-edge: hsl(var(--ly1-edge) / <alpha-value>);
+ --color-ly1-err: hsl(var(--ly1-err) / <alpha-value>);
+ --color-ly1-focus: hsl(var(--ly1-focus) / <alpha-value>);
+ --color-ly1-gl: hsl(var(--ly1-gl) / <alpha-value>);
+ --color-ly1-gl-a: hsl(var(--ly1-gl-a) / <alpha-value>);
+ --color-ly1-gl-d: hsl(var(--ly1-gl-d) / <alpha-value>);
+ --color-ly1-gl-pl: hsl(var(--ly1-gl-pl) / <alpha-value>);
+ --color-ly1-gl-hl: hsl(var(--ly1-gl-hl) / <alpha-value>);
+ --color-ly1-gl-hl-a: hsl(var(--ly1-gl-hl-a) / <alpha-value>);
+ --color-ly1-gl-shade: hsl(var(--ly1-gl-shade) / <alpha-value>);
+ --color-ly1-gl-label: hsl(var(--ly1-gl-label) / <alpha-value>);
+ --color-ly2: hsl(var(--ly2) / <alpha-value>);
+ --color-ly2-a: hsl(var(--ly2-a) / <alpha-value>);
+ --color-ly2-edge: hsl(var(--ly2-edge) / <alpha-value>);
+ --color-ly2-gl: hsl(var(--ly2-gl) / <alpha-value>);
+ --color-ly2-gl-a: hsl(var(--ly2-gl-a) / <alpha-value>);
+ --color-ly2-gl-d: hsl(var(--ly2-gl-d) / <alpha-value>);
+ --color-ly2-gl-pl: hsl(var(--ly2-gl-pl) / <alpha-value>);
+ --color-ly2-gl-hl: hsl(var(--ly2-gl-hl) / <alpha-value>);
+ --color-ly2-gl-hl-a: hsl(var(--ly2-gl-hl-a) / <alpha-value>);
+ --color-ly2-gl-shade: hsl(var(--ly2-gl-shade) / <alpha-value>);
+}
+
+@plugin "daisyui/theme" {
+ name: "os_dark";
+ default: false;
+ prefersdark: true;
+ color-scheme: dark;
+
+ --color-ly0: hsl(0, 0%, 7%);
+ --color-ly0-w: hsl(0, 0%, 7%);
+ --color-ly0-a: hsl(240, 2%, 23%);
+ --color-ly0-edge: hsl(274, 4%, 11%);
+ --color-ly0-blur: hsl(0, 0%, 12%);
+ --color-ly0-gl: hsl(230, 3%, 56%);
+ --color-ly0-gl-a: hsl(230, 3%, 51%);
+ --color-ly0-gl-pl: hsl(30, 1%, 99%);
+ --color-ly0-gl-hl: hsl(210, 100%, 52%);
+ --color-ly0-gl-hl-a: hsl(210, 91%, 21%);
+ --color-ly0-gl-shade: hsl(240, 3%, 57%);
+ --color-ly0-gl-label: hsl(240, 3%, 55%);
+ --color-ly1: hsl(240, 4%, 11%);
+ --color-ly1-a: hsl(240, 2%, 23%);
+ --color-ly1-edge: hsl(240, 3%, 19%);
+ --color-ly1-err: hsl(0, 0%, 0%);
+ --color-ly1-focus: hsl(240, 4%, 20%);
+ --color-ly1-gl: hsl(30, 100%, 100%);
+ --color-ly1-gl-a: hsl(30, 1%, 90%);
+ --color-ly1-gl-d: hsl(240, 1%, 82%);
+ --color-ly1-gl-pl: hsl(30, 1%, 99%);
+ --color-ly1-gl-hl: hsl(210, 100%, 52%);
+ --color-ly1-gl-hl-a: hsl(210, 100%, 62%);
+ --color-ly1-gl-shade: hsl(230, 4%, 61%);
+ --color-ly1-gl-label: hsl(30, 1%, 99%);
+ --color-ly2: hsl(240, 2%, 18%);
+ --color-ly2-a: hsl(240, 3%, 15%);
+ --color-ly2-edge: hsl(240, 2%, 23%);
+ --color-ly2-gl: hsl(240, 3%, 73%);
+ --color-ly2-gl-a: hsl(230, 4%, 51%);
+ --color-ly2-gl-d: hsl(240, 3%, 63%);
+ --color-ly2-gl-pl: hsl(240, 2%, 40%);
+ --color-ly2-gl-hl: hsl(210, 100%, 52%);
+ --color-ly2-gl-hl-a: hsl(210, 100%, 42%);
+ --color-ly2-gl-shade: hsl(230, 4%, 61%);
+}
+
+@plugin "daisyui/theme" {
+ name: "os_light";
+ default: false;
+ prefersdark: false;
+ color-scheme: light;
+
+ --color-ly0: hsl(240, 24%, 96%);
+ --color-ly0-w: hsl(248, 248%, 250%);
+ --color-ly0-a: hsl(240, 6%, 83%);
+ --color-ly0-edge: hsl(0, 0%, 87%);
+ --color-ly0-blur: hsl(179, 7%, 96%);
+ --color-ly0-gl: hsl(240, 2%, 55%);
+ --color-ly0-gl-a: hsl(240, 2%, 60%);
+ --color-ly0-gl-pl: hsl(240, 2%, 78%);
+ --color-ly0-gl-hl: hsl(219, 92%, 59%);
+ --color-ly0-gl-hl-a: hsl(211, 100%, 40%);
+ --color-ly0-gl-shade: hsl(230, 3%, 54%);
+ --color-ly0-gl-label: hsl(240, 2%, 53%);
+ --color-ly1: hsl(0, 0%, 100%);
+ --color-ly1-a: hsl(240, 6%, 83%);
+ --color-ly1-edge: hsl(274, 4%, 90%);
+ --color-ly1-err: hsl(0, 0%, 0%);
+ --color-ly1-focus: hsl(240, 15%, 94%);
+ --color-ly1-gl: hsl(0, 0%, 10%);
+ --color-ly1-gl-a: hsl(0, 0%, 10%);
+ --color-ly1-gl-d: hsl(0, 0%, 20%);
+ --color-ly1-gl-pl: hsl(240, 2%, 78%);
+ --color-ly1-gl-hl: hsl(211, 100%, 50%);
+ --color-ly1-gl-hl-a: hsl(211, 100%, 40%);
+ --color-ly1-gl-shade: hsl(240, 2%, 55%);
+ --color-ly1-gl-label: hsl(240, 2%, 53%);
+ --color-ly2: hsl(240, 5%, 90%);
+ --color-ly2-a: hsl(240, 5%, 95%);
+ --color-ly2-edge: hsl(242, 2%, 88%);
+ --color-ly2-gl: hsl(240, 2%, 55%);
+ --color-ly2-gl-a: hsl(240, 2%, 45%);
+ --color-ly2-gl-d: hsl(240, 2%, 65%);
+ --color-ly2-gl-pl: hsl(240, 2%, 78%);
+ --color-ly2-gl-hl: hsl(211, 100%, 50%);
+ --color-ly2-gl-hl-a: hsl(211, 100%, 40%);
+ --color-ly2-gl-shade: hsl(240, 2%, 55%);
+}
+
diff --git a/themes/tsconfig.cjs.json b/themes/tsconfig.cjs.json
@@ -0,0 +1,9 @@
+{
+ "extends": "@radroots/internal-tsconfig/tsconfig.cjs.json",
+ "compilerOptions": {
+ "rootDir": "./src",
+ "outDir": "dist/cjs"
+ },
+ "include": ["src"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/themes/tsconfig.json b/themes/tsconfig.json
@@ -1,28 +1,9 @@
{
- "compilerOptions": {
- "strict": true,
- "target": "es2021",
- "lib": [
- "es2021",
- "dom"
- ],
- "module": "ESNext",
- "moduleResolution": "node",
- "declaration": true,
- "declarationMap": true,
- "outDir": "./dist",
- "esModuleInterop": true,
- "skipLibCheck": true,
- "baseUrl": ".",
- "paths": {
- "$root": ["src/index.js"]
- }
- },
- "include": [
- "src"
- ],
- "exclude": [
- "node_modules",
- "dist"
- ],
-}
-\ No newline at end of file
+ "extends": "@radroots/internal-tsconfig/tsconfig.esm.json",
+ "compilerOptions": {
+ "rootDir": "./src",
+ "outDir": "dist/esm"
+ },
+ "include": ["src"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/themes/tsup.config.ts b/themes/tsup.config.ts
@@ -1,11 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
- entry: ['src/index.ts'],
- format: ['esm', 'cjs'],
- dts: true,
- outDir: 'dist',
- splitting: false,
- clean: true,
- sourcemap: true,
-});
