@yakad/ui 2.0.0 → 2.0.1

package/dist/Input/Input.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const inputVariants: (props?: ({
+    variant?: "filled" | "outlined" | null | undefined;
+    boxSize?: "small" | "normal" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+    ref?: React.Ref<HTMLInputElement>;
+}
+export declare function Input({ variant, boxSize, className, ref, ...restProps }: InputProps): React.JSX.Element;
+export {};

package/dist/Input/Input.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+const inputVariants = cva("flex w-full rounded-md border bg-transparent px-3 text-sm shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        variant: {
+            outlined: "border-input focus-visible:border-ring focus-visible:ring-ring",
+            filled: "border-transparent bg-muted focus-visible:ring-ring",
+        },
+        boxSize: {
+            small: "h-8",
+            normal: "h-10",
+        },
+    },
+    defaultVariants: {
+        variant: "outlined",
+        boxSize: "normal",
+    },
+});
+export function Input(_a) {
+    var { variant, boxSize, className, ref } = _a, restProps = __rest(_a, ["variant", "boxSize", "className", "ref"]);
+    return (_jsx("input", Object.assign({ ref: ref, className: inputVariants({
+            variant,
+            boxSize,
+            className,
+        }) }, restProps)));
+}

package/dist/Theme/color/generator.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Theme/color/generator.js

@@ -0,0 +1,22 @@
+import { writeFileSync, mkdirSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { createColorTokens } from "./tokens";
+import { darkColorRoles, lightColorRoles } from "./roles";
+function createCssVariables(tokens) {
+    return Object.entries(tokens)
+        .map(([name, value]) => `    --md-sys-color-${name}: ${value};`)
+        .join("\n");
+}
+const lightTokens = createColorTokens(lightColorRoles);
+const darkTokens = createColorTokens(darkColorRoles);
+const css = `:root {
+${createCssVariables(lightTokens)}
+}
+
+.dark {
+${createCssVariables(darkTokens)}
+}
+`;
+const output = resolve(process.cwd(), "dist/theme/color/colors.css");
+mkdirSync(dirname(output), { recursive: true });
+writeFileSync(output, css);

package/dist/Theme/color/hct.d.ts

@@ -0,0 +1,5 @@
+import { Hct } from "@material/material-color-utilities";
+export declare const sourceHct: Hct;
+export declare const hue: number;
+export declare const chroma: number;
+export declare const tone: number;

package/dist/Theme/color/hct.js

@@ -0,0 +1,6 @@
+import { argbFromHex, Hct } from "@material/material-color-utilities";
+import { sourceColor } from "./source";
+export const sourceHct = Hct.fromInt(argbFromHex(sourceColor));
+export const hue = sourceHct.hue;
+export const chroma = sourceHct.chroma;
+export const tone = sourceHct.tone;

package/dist/Theme/color/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/Theme/color/palettes.js

@@ -0,0 +1 @@
+"use strict";

package/dist/Theme/color/roles.d.ts

@@ -0,0 +1,53 @@
+export interface ColorRoles {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    primaryFixed: string;
+    primaryFixedDim: string;
+    onPrimaryFixed: string;
+    onPrimaryFixedVariant: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    secondaryFixed: string;
+    secondaryFixedDim: string;
+    onSecondaryFixed: string;
+    onSecondaryFixedVariant: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    tertiaryFixed: string;
+    tertiaryFixedDim: string;
+    onTertiaryFixed: string;
+    onTertiaryFixedVariant: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    background: string;
+    onBackground: string;
+    surface: string;
+    onSurface: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    surfaceDim: string;
+    surfaceBright: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+    outline: string;
+    outlineVariant: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    surfaceTint: string;
+    shadow: string;
+    scrim: string;
+}
+export declare const lightColorRoles: ColorRoles;
+export declare const darkColorRoles: ColorRoles;

package/dist/Theme/color/roles.js

@@ -0,0 +1,57 @@
+import { hexFromArgb } from "@material/material-color-utilities";
+import { darkScheme, lightScheme } from "./scheme";
+function getColorRoles(scheme) {
+    return {
+        primary: hexFromArgb(scheme.primary),
+        onPrimary: hexFromArgb(scheme.onPrimary),
+        primaryContainer: hexFromArgb(scheme.primaryContainer),
+        onPrimaryContainer: hexFromArgb(scheme.onPrimaryContainer),
+        primaryFixed: hexFromArgb(scheme.primaryFixed),
+        primaryFixedDim: hexFromArgb(scheme.primaryFixedDim),
+        onPrimaryFixed: hexFromArgb(scheme.onPrimaryFixed),
+        onPrimaryFixedVariant: hexFromArgb(scheme.onPrimaryFixedVariant),
+        secondary: hexFromArgb(scheme.secondary),
+        onSecondary: hexFromArgb(scheme.onSecondary),
+        secondaryContainer: hexFromArgb(scheme.secondaryContainer),
+        onSecondaryContainer: hexFromArgb(scheme.onSecondaryContainer),
+        secondaryFixed: hexFromArgb(scheme.secondaryFixed),
+        secondaryFixedDim: hexFromArgb(scheme.secondaryFixedDim),
+        onSecondaryFixed: hexFromArgb(scheme.onSecondaryFixed),
+        onSecondaryFixedVariant: hexFromArgb(scheme.onSecondaryFixedVariant),
+        tertiary: hexFromArgb(scheme.tertiary),
+        onTertiary: hexFromArgb(scheme.onTertiary),
+        tertiaryContainer: hexFromArgb(scheme.tertiaryContainer),
+        onTertiaryContainer: hexFromArgb(scheme.onTertiaryContainer),
+        tertiaryFixed: hexFromArgb(scheme.tertiaryFixed),
+        tertiaryFixedDim: hexFromArgb(scheme.tertiaryFixedDim),
+        onTertiaryFixed: hexFromArgb(scheme.onTertiaryFixed),
+        onTertiaryFixedVariant: hexFromArgb(scheme.onTertiaryFixedVariant),
+        error: hexFromArgb(scheme.error),
+        onError: hexFromArgb(scheme.onError),
+        errorContainer: hexFromArgb(scheme.errorContainer),
+        onErrorContainer: hexFromArgb(scheme.onErrorContainer),
+        background: hexFromArgb(scheme.background),
+        onBackground: hexFromArgb(scheme.onBackground),
+        surface: hexFromArgb(scheme.surface),
+        onSurface: hexFromArgb(scheme.onSurface),
+        surfaceVariant: hexFromArgb(scheme.surfaceVariant),
+        onSurfaceVariant: hexFromArgb(scheme.onSurfaceVariant),
+        surfaceDim: hexFromArgb(scheme.surfaceDim),
+        surfaceBright: hexFromArgb(scheme.surfaceBright),
+        surfaceContainerLowest: hexFromArgb(scheme.surfaceContainerLowest),
+        surfaceContainerLow: hexFromArgb(scheme.surfaceContainerLow),
+        surfaceContainer: hexFromArgb(scheme.surfaceContainer),
+        surfaceContainerHigh: hexFromArgb(scheme.surfaceContainerHigh),
+        surfaceContainerHighest: hexFromArgb(scheme.surfaceContainerHighest),
+        outline: hexFromArgb(scheme.outline),
+        outlineVariant: hexFromArgb(scheme.outlineVariant),
+        inverseSurface: hexFromArgb(scheme.inverseSurface),
+        inverseOnSurface: hexFromArgb(scheme.inverseOnSurface),
+        inversePrimary: hexFromArgb(scheme.inversePrimary),
+        surfaceTint: hexFromArgb(scheme.surfaceTint),
+        shadow: hexFromArgb(scheme.shadow),
+        scrim: hexFromArgb(scheme.scrim),
+    };
+}
+export const lightColorRoles = getColorRoles(lightScheme);
+export const darkColorRoles = getColorRoles(darkScheme);

package/dist/Theme/color/scheme.d.ts

@@ -0,0 +1,3 @@
+import { SchemeExpressive } from "@material/material-color-utilities";
+export declare const lightScheme: SchemeExpressive;
+export declare const darkScheme: SchemeExpressive;

package/dist/Theme/color/scheme.js

@@ -0,0 +1,4 @@
+import { SchemeExpressive } from "@material/material-color-utilities";
+import { sourceHct } from "./hct";
+export const lightScheme = new SchemeExpressive(sourceHct, false, 0);
+export const darkScheme = new SchemeExpressive(sourceHct, true, 0);

package/dist/Theme/color/source.d.ts

@@ -0,0 +1 @@
+export declare const sourceColor = "#6750A4";

package/dist/Theme/color/source.js

@@ -0,0 +1 @@
+export const sourceColor = "#6750A4";

package/dist/Theme/color/test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Theme/color/test.js

@@ -0,0 +1,14 @@
+import { hexFromArgb } from "@material/material-color-utilities";
+import { lightScheme, darkScheme } from "./scheme";
+console.log("Light");
+console.log("Primary:", hexFromArgb(lightScheme.primary));
+console.log("Secondary:", hexFromArgb(lightScheme.secondary));
+console.log("Tertiary:", hexFromArgb(lightScheme.tertiary));
+console.log("Background:", hexFromArgb(lightScheme.background));
+console.log("Surface:", hexFromArgb(lightScheme.surface));
+console.log("Dark");
+console.log("Primary:", hexFromArgb(darkScheme.primary));
+console.log("Secondary:", hexFromArgb(darkScheme.secondary));
+console.log("Tertiary:", hexFromArgb(darkScheme.tertiary));
+console.log("Background:", hexFromArgb(darkScheme.background));
+console.log("Surface:", hexFromArgb(darkScheme.surface));

package/dist/Theme/color/tokens.d.ts

@@ -0,0 +1,52 @@
+import type { ColorRoles } from "./roles";
+export declare function createColorTokens(roles: ColorRoles): {
+    primary: string;
+    "on-primary": string;
+    "primary-container": string;
+    "on-primary-container": string;
+    "primary-fixed": string;
+    "primary-fixed-dim": string;
+    "on-primary-fixed": string;
+    "on-primary-fixed-variant": string;
+    secondary: string;
+    "on-secondary": string;
+    "secondary-container": string;
+    "on-secondary-container": string;
+    "secondary-fixed": string;
+    "secondary-fixed-dim": string;
+    "on-secondary-fixed": string;
+    "on-secondary-fixed-variant": string;
+    tertiary: string;
+    "on-tertiary": string;
+    "tertiary-container": string;
+    "on-tertiary-container": string;
+    "tertiary-fixed": string;
+    "tertiary-fixed-dim": string;
+    "on-tertiary-fixed": string;
+    "on-tertiary-fixed-variant": string;
+    error: string;
+    "on-error": string;
+    "error-container": string;
+    "on-error-container": string;
+    background: string;
+    "on-background": string;
+    surface: string;
+    "on-surface": string;
+    "surface-variant": string;
+    "on-surface-variant": string;
+    "surface-dim": string;
+    "surface-bright": string;
+    "surface-container-lowest": string;
+    "surface-container-low": string;
+    "surface-container": string;
+    "surface-container-high": string;
+    "surface-container-highest": string;
+    outline: string;
+    "outline-variant": string;
+    "inverse-surface": string;
+    "inverse-on-surface": string;
+    "inverse-primary": string;
+    "surface-tint": string;
+    shadow: string;
+    scrim: string;
+};

package/dist/Theme/color/tokens.js

@@ -0,0 +1,53 @@
+export function createColorTokens(roles) {
+    return {
+        "primary": roles.primary,
+        "on-primary": roles.onPrimary,
+        "primary-container": roles.primaryContainer,
+        "on-primary-container": roles.onPrimaryContainer,
+        "primary-fixed": roles.primaryFixed,
+        "primary-fixed-dim": roles.primaryFixedDim,
+        "on-primary-fixed": roles.onPrimaryFixed,
+        "on-primary-fixed-variant": roles.onPrimaryFixedVariant,
+        "secondary": roles.secondary,
+        "on-secondary": roles.onSecondary,
+        "secondary-container": roles.secondaryContainer,
+        "on-secondary-container": roles.onSecondaryContainer,
+        "secondary-fixed": roles.secondaryFixed,
+        "secondary-fixed-dim": roles.secondaryFixedDim,
+        "on-secondary-fixed": roles.onSecondaryFixed,
+        "on-secondary-fixed-variant": roles.onSecondaryFixedVariant,
+        "tertiary": roles.tertiary,
+        "on-tertiary": roles.onTertiary,
+        "tertiary-container": roles.tertiaryContainer,
+        "on-tertiary-container": roles.onTertiaryContainer,
+        "tertiary-fixed": roles.tertiaryFixed,
+        "tertiary-fixed-dim": roles.tertiaryFixedDim,
+        "on-tertiary-fixed": roles.onTertiaryFixed,
+        "on-tertiary-fixed-variant": roles.onTertiaryFixedVariant,
+        "error": roles.error,
+        "on-error": roles.onError,
+        "error-container": roles.errorContainer,
+        "on-error-container": roles.onErrorContainer,
+        "background": roles.background,
+        "on-background": roles.onBackground,
+        "surface": roles.surface,
+        "on-surface": roles.onSurface,
+        "surface-variant": roles.surfaceVariant,
+        "on-surface-variant": roles.onSurfaceVariant,
+        "surface-dim": roles.surfaceDim,
+        "surface-bright": roles.surfaceBright,
+        "surface-container-lowest": roles.surfaceContainerLowest,
+        "surface-container-low": roles.surfaceContainerLow,
+        "surface-container": roles.surfaceContainer,
+        "surface-container-high": roles.surfaceContainerHigh,
+        "surface-container-highest": roles.surfaceContainerHighest,
+        "outline": roles.outline,
+        "outline-variant": roles.outlineVariant,
+        "inverse-surface": roles.inverseSurface,
+        "inverse-on-surface": roles.inverseOnSurface,
+        "inverse-primary": roles.inversePrimary,
+        "surface-tint": roles.surfaceTint,
+        "shadow": roles.shadow,
+        "scrim": roles.scrim,
+    };
+}

package/dist/Theme/color/utils.d.ts

@@ -0,0 +1 @@
+export declare function hexToArgb(hex: string): number;

package/dist/Theme/color/utils.js

@@ -0,0 +1,7 @@
+export function hexToArgb(hex) {
+    const normalized = hex.replace("#", "");
+    if (normalized.length !== 6) {
+        throw new Error("Invalid hex color");
+    }
+    return parseInt(`ff${normalized}`, 16);
+}

package/dist/Theme/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/Theme/theme.js

@@ -0,0 +1 @@
+"use strict";

package/dist/index.d.ts

@@ -9,7 +9,6 @@ export * from "./Stack/Stack";
 export * from "./GridContainer/GridContainer";
 export * from "./GridItem/GridItem";
 export * from "./Card/Card";
-export * from "./Theme/Theme";
 export * from "./Spacer/Spacer";
 export * from "./Hr/Hr";
 export * from "./List/List";
@@ -19,8 +18,7 @@ export * from "./Button/Button";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
 export * from "./Form/Form";
-export * from "./InputField/InputField";
-export * from "./Select/Select";
+export * from "./Input/Input";
 export * from "./CheckBox/CheckBox";
 export * from "./CodeField/CodeField";
 export * from "./RadioGroup/RadioGroup";

package/dist/index.js

@@ -11,7 +11,6 @@ export * from "./GridContainer/GridContainer";
 export * from "./GridItem/GridItem";
 export * from "./Card/Card"; // Stack Based
 // Theme & Styling
-export * from "./Theme/Theme"; // Stack Based
 export * from "./Spacer/Spacer";
 export * from "./Hr/Hr";
 // UI Components
@@ -23,8 +22,7 @@ export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
 // Form Components
 export * from "./Form/Form";
-export * from "./InputField/InputField";
-export * from "./Select/Select";
+export * from "./Input/Input";
 export * from "./CheckBox/CheckBox";
 export * from "./CodeField/CodeField";
 export * from "./RadioGroup/RadioGroup";

package/dist/theme/color/colors.css

@@ -0,0 +1,103 @@
+:root {
+    --md-sys-color-primary: #006b5a;
+    --md-sys-color-on-primary: #ffffff;
+    --md-sys-color-primary-container: #95f4dc;
+    --md-sys-color-on-primary-container: #005143;
+    --md-sys-color-primary-fixed: #95f4dc;
+    --md-sys-color-primary-fixed-dim: #79d7c0;
+    --md-sys-color-on-primary-fixed: #00201a;
+    --md-sys-color-on-primary-fixed-variant: #005143;
+    --md-sys-color-secondary: #79536a;
+    --md-sys-color-on-secondary: #ffffff;
+    --md-sys-color-secondary-container: #ffd8ed;
+    --md-sys-color-on-secondary-container: #5f3c52;
+    --md-sys-color-secondary-fixed: #ffd8ed;
+    --md-sys-color-secondary-fixed-dim: #e8b9d4;
+    --md-sys-color-on-secondary-fixed: #2e1125;
+    --md-sys-color-on-secondary-fixed-variant: #5f3c52;
+    --md-sys-color-tertiary: #735280;
+    --md-sys-color-on-tertiary: #ffffff;
+    --md-sys-color-tertiary-container: #f7d8ff;
+    --md-sys-color-on-tertiary-container: #593b67;
+    --md-sys-color-tertiary-fixed: #f7d8ff;
+    --md-sys-color-tertiary-fixed-dim: #e0b9ee;
+    --md-sys-color-on-tertiary-fixed: #2b0e39;
+    --md-sys-color-on-tertiary-fixed-variant: #593b67;
+    --md-sys-color-error: #ba1a1a;
+    --md-sys-color-on-error: #ffffff;
+    --md-sys-color-error-container: #ffdad6;
+    --md-sys-color-on-error-container: #93000a;
+    --md-sys-color-background: #fff7fd;
+    --md-sys-color-on-background: #1f1a21;
+    --md-sys-color-surface: #fff7fd;
+    --md-sys-color-on-surface: #1f1a21;
+    --md-sys-color-surface-variant: #ecdef0;
+    --md-sys-color-on-surface-variant: #4d4351;
+    --md-sys-color-surface-dim: #e1d7e2;
+    --md-sys-color-surface-bright: #fff7fd;
+    --md-sys-color-surface-container-lowest: #ffffff;
+    --md-sys-color-surface-container-low: #fbf0fb;
+    --md-sys-color-surface-container: #f5ebf6;
+    --md-sys-color-surface-container-high: #efe5f0;
+    --md-sys-color-surface-container-highest: #eadfea;
+    --md-sys-color-outline: #7e7383;
+    --md-sys-color-outline-variant: #cfc2d3;
+    --md-sys-color-inverse-surface: #342e37;
+    --md-sys-color-inverse-on-surface: #f8edf9;
+    --md-sys-color-inverse-primary: #79d7c0;
+    --md-sys-color-surface-tint: #006b5a;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+}
+
+.dark {
+    --md-sys-color-primary: #79d7c0;
+    --md-sys-color-on-primary: #00382e;
+    --md-sys-color-primary-container: #005143;
+    --md-sys-color-on-primary-container: #95f4dc;
+    --md-sys-color-primary-fixed: #95f4dc;
+    --md-sys-color-primary-fixed-dim: #79d7c0;
+    --md-sys-color-on-primary-fixed: #00201a;
+    --md-sys-color-on-primary-fixed-variant: #005143;
+    --md-sys-color-secondary: #e8b9d4;
+    --md-sys-color-on-secondary: #46263b;
+    --md-sys-color-secondary-container: #5f3c52;
+    --md-sys-color-on-secondary-container: #ffd8ed;
+    --md-sys-color-secondary-fixed: #ffd8ed;
+    --md-sys-color-secondary-fixed-dim: #e8b9d4;
+    --md-sys-color-on-secondary-fixed: #2e1125;
+    --md-sys-color-on-secondary-fixed-variant: #5f3c52;
+    --md-sys-color-tertiary: #e0b9ee;
+    --md-sys-color-on-tertiary: #41244f;
+    --md-sys-color-tertiary-container: #593b67;
+    --md-sys-color-on-tertiary-container: #f7d8ff;
+    --md-sys-color-tertiary-fixed: #f7d8ff;
+    --md-sys-color-tertiary-fixed-dim: #e0b9ee;
+    --md-sys-color-on-tertiary-fixed: #2b0e39;
+    --md-sys-color-on-tertiary-fixed-variant: #593b67;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+    --md-sys-color-background: #161219;
+    --md-sys-color-on-background: #eadfea;
+    --md-sys-color-surface: #161219;
+    --md-sys-color-on-surface: #eadfea;
+    --md-sys-color-surface-variant: #4d4351;
+    --md-sys-color-on-surface-variant: #cfc2d3;
+    --md-sys-color-surface-dim: #161219;
+    --md-sys-color-surface-bright: #3d373f;
+    --md-sys-color-surface-container-lowest: #110d14;
+    --md-sys-color-surface-container-low: #1f1a21;
+    --md-sys-color-surface-container: #231e25;
+    --md-sys-color-surface-container-high: #2d2830;
+    --md-sys-color-surface-container-highest: #38333b;
+    --md-sys-color-outline: #988d9d;
+    --md-sys-color-outline-variant: #4d4351;
+    --md-sys-color-inverse-surface: #eadfea;
+    --md-sys-color-inverse-on-surface: #342e37;
+    --md-sys-color-inverse-primary: #006b5a;
+    --md-sys-color-surface-tint: #79d7c0;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -23,15 +23,17 @@
     "homepage": "https://yakad.natiq.net",
     "scripts": {
         "clean": "rimraf dist/",
+        "generate:color": "tsx src/Theme/color/generator.ts",
         "copy-files:css": "copyfiles -u 1 src/*.css src/**/*.css dist/",
         "copy-files:svg": "copyfiles -u 1 src/*.svg src/**/*.svg dist/",
-        "build": "npm run clean && tsc && npm run copy-files:css && npm run copy-files:svg",
+        "build": "npm run clean && tsc && npm run generate:color && npm run copy-files:css && npm run copy-files:svg",
         "typecheck": "tsc --noEmit",
         "lint": "eslint src/**/*.{ts,tsx}",
         "test": "echo \"No tests specified\" && exit 0",
         "prepublishOnly": "npm run lint && npm run test && npm run build && npm run typecheck"
     },
     "dependencies": {
+        "@material/material-color-utilities": "^0.4.0",
         "@yakad/lib": "1.0.23",
         "@yakad/symbols": "1.0.42",
         "@yakad/use-interactions": "1.0.0",
@@ -49,6 +51,7 @@
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "tsx": "^4.23.13"
     }
 }

package/dist/InputField/InputField.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-import { Input } from "./input";
-declare const inputFieldVariants: (props?: ({
-    variant?: "filled" | "outlined" | null | undefined;
-    boxSize?: "small" | "normal" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface InputFieldProps extends Omit<React.ComponentProps<typeof Input>, "size">, VariantProps<typeof inputFieldVariants> {
-    ref?: React.Ref<HTMLInputElement>;
-}
-export declare function InputField({ variant, boxSize, placeholder, className, id, ref, ...restProps }: InputFieldProps): React.JSX.Element;
-export declare namespace InputField {
-    var displayName: string;
-}
-export { inputFieldVariants };

package/dist/InputField/InputField.js

@@ -1,82 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cva } from "class-variance-authority";
-import { cn } from "./cn";
-import { Input } from "./input";
-const inputFieldVariants = cva([
-    "peer",
-    "w-full",
-    "transition-colors",
-    "placeholder:text-transparent",
-    "focus-visible:ring-offset-0",
-], {
-    variants: {
-        variant: {
-            outlined: [
-                "border",
-                "border-input",
-                "bg-transparent",
-                "focus-visible:ring-1",
-                "focus-visible:ring-ring",
-            ],
-            filled: [
-                "rounded-b-none",
-                "border-0",
-                "border-b-2",
-                "border-input",
-                "bg-muted",
-                "focus-visible:ring-0",
-                "focus-visible:border-primary",
-            ],
-        },
-        boxSize: {
-            small: "h-8 px-2 text-sm",
-            normal: "h-10 px-3 text-base",
-        },
-    },
-    defaultVariants: {
-        variant: "outlined",
-        boxSize: "normal",
-    },
-});
-const labelVariants = cva([
-    "pointer-events-none",
-    "absolute",
-    "left-3",
-    "top-1/2",
-    "-translate-y-1/2",
-    "text-muted-foreground",
-    "transition-all",
-], {
-    variants: {
-        boxSize: {
-            small: "text-sm",
-            normal: "text-base",
-        },
-    },
-    defaultVariants: {
-        boxSize: "normal",
-    },
-});
-export function InputField(_a) {
-    var { variant = "outlined", boxSize = "normal", placeholder, className, id, ref } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className", "id", "ref"]);
-    const generatedId = React.useId();
-    const inputId = id !== null && id !== void 0 ? id : generatedId;
-    return (_jsxs("div", { className: "relative w-full", children: [_jsx(Input, Object.assign({ id: inputId, ref: ref, placeholder: " ", className: cn(inputFieldVariants({
-                    variant,
-                    boxSize,
-                }), className) }, restProps)), placeholder && (_jsx("label", { htmlFor: inputId, className: cn(labelVariants({ boxSize }), "peer-focus:top-0", "peer-focus:-translate-y-1/2", "peer-focus:bg-background", "peer-focus:px-1", "peer-focus:text-xs", "peer-focus:text-primary", "peer-[:not(:placeholder-shown)]:top-0", "peer-[:not(:placeholder-shown)]:-translate-y-1/2", "peer-[:not(:placeholder-shown)]:bg-background", "peer-[:not(:placeholder-shown)]:px-1", "peer-[:not(:placeholder-shown)]:text-xs"), children: placeholder }))] }));
-}
-InputField.displayName = "InputField";
-export { inputFieldVariants };

package/dist/InputField/cn.d.ts

@@ -1,2 +0,0 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;

package/dist/InputField/cn.js

@@ -1,5 +0,0 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-export function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}

package/dist/InputField/input.d.ts

@@ -1,7 +0,0 @@
-import * as React from "react";
-export interface InputProps extends React.ComponentProps<"input"> {
-}
-export declare function Input({ className, type, ...props }: InputProps): React.JSX.Element;
-export declare namespace Input {
-    var displayName: string;
-}

package/dist/InputField/input.js

@@ -1,18 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "./cn";
-export function Input(_a) {
-    var { className, type } = _a, props = __rest(_a, ["className", "type"]);
-    return (_jsx("input", Object.assign({ type: type, "data-slot": "input", className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
-}
-Input.displayName = "Input";

package/dist/Select/Select.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-    variant?: "outlined" | "filled";
-    boxsize?: "small" | "normal";
-    placeholder?: string;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLSelectElement>;
-}
-export declare function Select({ variant, boxsize, placeholder, className, children, ...restProps }: SelectProps): React.JSX.Element;
-export declare namespace Select {
-    var displayName: string;
-}

package/dist/Select/Select.js

@@ -1,23 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../InputField/cn";
-export function Select(_a) {
-    var { variant = "outlined", boxsize = "normal", placeholder, className, children } = _a, restProps = __rest(_a, ["variant", "boxsize", "placeholder", "className", "children"]);
-    return (_jsxs("div", { className: "relative w-full", children: [_jsx("select", Object.assign({}, restProps, { className: cn("peer w-full transition-colors", "border-input bg-background", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", {
-                    "h-8 px-2 text-sm": boxsize === "small",
-                    "h-10 px-3 text-base": boxsize === "normal",
-                    "rounded-md border bg-transparent": variant === "outlined",
-                    "rounded-b-none border-0 border-b-2 bg-muted": variant === "filled",
-                }, className), children: children })), placeholder && (_jsx("label", { className: cn("pointer-events-none absolute left-3 top-1/2", "-translate-y-1/2 text-muted-foreground", "transition-all", "peer-focus:top-0 peer-focus:-translate-y-1/2", "peer-focus:bg-background peer-focus:px-1", "peer-focus:text-xs peer-focus:text-primary"), children: placeholder }))] }));
-}
-Select.displayName = "Select";

package/dist/Select/Select.module.css

@@ -1,3 +0,0 @@
-.select * {
-    color: initial;
-}

package/dist/Theme/Theme.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export type DarkStyle = "light" | "dark" | "system";
-export type ThemeColor = "green" | "red" | "yellow" | "blue" | "purple";
-export interface ThemeProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "space" | "center" | "end";
-    darkStyle?: DarkStyle;
-    color?: ThemeColor;
-    zoom?: number;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Theme({ align, darkStyle, color, zoom, className, children, ...restProps }: ThemeProps): import("react").JSX.Element;

package/dist/Theme/Theme.js

@@ -1,26 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import classNames from "classnames";
-import styles from "./Theme.module.css";
-import boxingStyles from "../boxing.module.css";
-export function Theme(_a) {
-    var { align, darkStyle = "system", color = "blue", zoom = 100, className, children } = _a, restProps = __rest(_a, ["align", "darkStyle", "color", "zoom", "className", "children"]);
-    const zoomPercentage = zoom ? (zoom / 100) * 62.5 : 62.5;
-    useEffect(() => {
-        document.documentElement.style.setProperty("font-size", zoomPercentage + "%");
-    }, [zoomPercentage]);
-    const joinedClassNames = classNames({ portalRoot: true }, boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.theme, styles[darkStyle], styles[color], className);
-    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}

package/dist/Theme/Theme.module.css

@@ -1,398 +0,0 @@
-.blue {
-    --LightPrimaryColor: 11 87 208;
-    --LightPrimaryContainerColor: 211 227 253;
-    --LightSecondaryColor: 98 91 113;
-    --LightSecondaryContainerColor: 232 222 248;
-    --LightTertiaryColor: 196 238 208;
-    --LightSurfaceColor: 34 34 34;
-    --LightErrorColor: 179 38 30;
-    --LightErrorContainerColor: 249 222 220;
-    --LightOnPrimaryColor: 255 255 255;
-    --LightOnPrimaryContainerColor: 4 30 73;
-    --LightOnSecondaryColor: 255 255 255;
-    --LightOnSecondaryContainerColor: 30 25 43;
-    --LightOnTertiaryColor: 7 39 17;
-    --LightOnErrorColor: 255 255 255;
-    --LightOnErrorContainerColor: 65 14 11;
-    /* neutral colors */
-    --LightSurfaceColor: 254 247 255;
-    --LightSurfaceVariantColor: 231 224 236;
-    --LightSurfaceDimColor: 222 216 225;
-    --LightSurfaceBrightColor: 254 247 255;
-    --LightSurfaceContainerLowestColor: 255 255 255;
-    --LightSurfaceContainerLowColor: 247 242 250;
-    --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHighColor: 236 230 240;
-    --LightSurfaceContainerHighestColor: 230 224 233;
-    --LightOnSurfaceColor: 28 27 31;
-    --LightOnSurfaceVariantColor: 73 69 78;
-    --LightOutlineColor: 121 116 126;
-    --LightOutlineVariantColor: 196 199 197;
-
-    --DarkPrimaryColor: 168 199 250;
-    --DarkPrimaryContainerColor: 8 66 160;
-    --DarkSecondaryColor: 204 194 220;
-    --DarkSecondaryContainerColor: 232 222 248;
-    --DarkTertiaryColor: 7 39 17;
-    --DarkErrorColor: 242 184 181;
-    --DarkErrorContainerColor: 140 29 24;
-    --DarkOnPrimaryColor: 6 46 111;
-    --DarkOnPrimaryContainerColor: 211 227 253;
-    --DarkOnSecondaryColor: 51 45 65;
-    --DarkOnSecondaryContainerColor: 232 222 248;
-    --DarkOnTertiaryColor: 196 238 208;
-    --DarkOnErrorColor: 96 20 16;
-    --DarkOnErrorContainerColor: 249 222 220;
-    /* neutral colors */
-    --DarkSurfaceColor: 20 18 24;
-    --DarkSurfaceVariantColor: 73 69 79;
-    --DarkSurfaceDimColor: 20 18 24;
-    --DarkSurfaceBrightColor: 59 56 62;
-    --DarkSurfaceContainerLowestColor: 15 13 19;
-    --DarkSurfaceContainerLowColor: 29 27 32;
-    --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHighColor: 43 41 48;
-    --DarkSurfaceContainerHighestColor: 54 52 59;
-    --DarkOnSurfaceColor: 230 225 229;
-    --DarkOnSurfaceVariantColor: 202 196 208;
-    --DarkOutlineColor: 147 143 153;
-    --DarkOutlineVariantColor: 68 71 70;
-}
-
-.green {
-    --LightPrimaryColor: 56 106 32;
-    --LightPrimaryContainerColor: 184 243 151;
-    --LightSecondaryColor: 98 91 113;
-    --LightSecondaryContainerColor: 232 222 248;
-    --LightTertiaryColor: 187 235 235;
-    --LightErrorColor: 179 38 30;
-    --LightErrorContainerColor: 249 222 220;
-    --LightOnPrimaryColor: 255 255 255;
-    --LightOnPrimaryContainerColor: 4 33 0;
-    --LightOnSecondaryColor: 255 255 255;
-    --LightOnSecondaryContainerColor: 30 25 43;
-    --LightOnTertiaryColor: 0 32 33;
-    --LightOnErrorColor: 255 255 255;
-    --LightOnErrorContainerColor: 65 14 11;
-    /* neutral colors */
-    --LightSurfaceColor: 254 247 255;
-    --LightSurfaceVariantColor: 231 224 236;
-    --LightSurfaceDimColor: 222 216 225;
-    --LightSurfaceBrightColor: 254 247 255;
-    --LightSurfaceContainerLowestColor: 255 255 255;
-    --LightSurfaceContainerLowColor: 247 242 250;
-    --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHighColor: 236 230 240;
-    --LightSurfaceContainerHighestColor: 230 224 233;
-    --LightOnSurfaceColor: 28 27 31;
-    --LightOnSurfaceVariantColor: 73 69 78;
-    --LightOutlineColor: 121 116 126;
-    --LightOutlineVariantColor: 196 199 197;
-
-    --DarkPrimaryColor: 156 214 125;
-    --DarkPrimaryContainerColor: 32 81 7;
-    --DarkSecondaryColor: 204 194 220;
-    --DarkSecondaryContainerColor: 232 222 248;
-    --DarkTertiaryColor: 0 32 33;
-    --DarkErrorColor: 242 184 181;
-    --DarkErrorContainerColor: 140 29 24;
-    --DarkOnPrimaryColor: 12 57 0;
-    --DarkOnPrimaryContainerColor: 184 243 151;
-    --DarkOnSecondaryColor: 51 45 65;
-    --DarkOnSecondaryContainerColor: 232 222 248;
-    --DarkOnTertiaryColor: 187 235 235;
-    --DarkOnErrorColor: 96 20 16;
-    --DarkOnErrorContainerColor: 249 222 220;
-    /* neutral colors */
-    --DarkSurfaceColor: 20 18 24;
-    --DarkSurfaceVariantColor: 73 69 79;
-    --DarkSurfaceDimColor: 20 18 24;
-    --DarkSurfaceBrightColor: 59 56 62;
-    --DarkSurfaceContainerLowestColor: 15 13 19;
-    --DarkSurfaceContainerLowColor: 29 27 32;
-    --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHighColor: 43 41 48;
-    --DarkSurfaceContainerHighestColor: 54 52 59;
-    --DarkOnSurfaceColor: 230 225 229;
-    --DarkOnSurfaceVariantColor: 202 196 208;
-    --DarkOutlineColor: 147 143 153;
-    --DarkOutlineVariantColor: 68 71 70;
-}
-
-.red {
-    --LightPrimaryColor: 156 65 70;
-    --LightPrimaryContainerColor: 255 218 219;
-    --LightSecondaryColor: 98 91 113;
-    --LightSecondaryContainerColor: 232 222 248;
-    --LightTertiaryColor: 255 221 170;
-    --LightErrorColor: 179 38 30;
-    --LightErrorContainerColor: 249 222 220;
-    --LightOnPrimaryColor: 255 255 255;
-    --LightOnPrimaryContainerColor: 64 0 8;
-    --LightOnSecondaryColor: 255 255 255;
-    --LightOnSecondaryContainerColor: 30 25 43;
-    --LightOnTertiaryColor: 40 24 0;
-    --LightOnErrorColor: 255 255 255;
-    --LightOnErrorContainerColor: 65 14 11;
-    /* neutral colors */
-    --LightSurfaceColor: 254 247 255;
-    --LightSurfaceVariantColor: 231 224 236;
-    --LightSurfaceDimColor: 222 216 225;
-    --LightSurfaceBrightColor: 254 247 255;
-    --LightSurfaceContainerLowestColor: 255 255 255;
-    --LightSurfaceContainerLowColor: 247 242 250;
-    --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHighColor: 236 230 240;
-    --LightSurfaceContainerHighestColor: 230 224 233;
-    --LightOnSurfaceColor: 28 27 31;
-    --LightOnSurfaceVariantColor: 73 69 78;
-    --LightOutlineColor: 121 116 126;
-    --LightOutlineVariantColor: 196 199 197;
-
-    --DarkPrimaryColor: 255 179 181;
-    --DarkPrimaryContainerColor: 125 42 48;
-    --DarkSecondaryColor: 204 194 220;
-    --DarkSecondaryContainerColor: 232 222 248;
-    --DarkTertiaryColor: 40 24 0;
-    --DarkErrorColor: 242 184 181;
-    --DarkErrorContainerColor: 140 29 24;
-    --DarkOnPrimaryColor: 95 18 27;
-    --DarkOnPrimaryContainerColor: 255 218 219;
-    --DarkOnSecondaryColor: 51 45 65;
-    --DarkOnSecondaryContainerColor: 232 222 248;
-    --DarkOnTertiaryColor: 255 221 170;
-    --DarkOnErrorColor: 96 20 16;
-    --DarkOnErrorContainerColor: 249 222 220;
-    /* neutral colors */
-    --DarkSurfaceColor: 20 18 24;
-    --DarkSurfaceVariantColor: 73 69 79;
-    --DarkSurfaceDimColor: 20 18 24;
-    --DarkSurfaceBrightColor: 59 56 62;
-    --DarkSurfaceContainerLowestColor: 15 13 19;
-    --DarkSurfaceContainerLowColor: 29 27 32;
-    --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHighColor: 43 41 48;
-    --DarkSurfaceContainerHighestColor: 54 52 59;
-    --DarkOnSurfaceColor: 230 225 229;
-    --DarkOnSurfaceVariantColor: 202 196 208;
-    --DarkOutlineColor: 147 143 153;
-    --DarkOutlineVariantColor: 68 71 70;
-}
-
-.yellow {
-    --LightPrimaryColor: 97 98 0;
-    --LightPrimaryContainerColor: 232 233 113;
-    --LightSecondaryColor: 98 91 113;
-    --LightSecondaryContainerColor: 232 222 248;
-    --LightTertiaryColor: 191 237 217;
-    --LightErrorColor: 179 38 30;
-    --LightErrorContainerColor: 249 222 220;
-    --LightOnPrimaryColor: 255 255 255;
-    --LightOnPrimaryContainerColor: 29 29 0;
-    --LightOnSecondaryColor: 255 255 255;
-    --LightOnSecondaryContainerColor: 30 25 43;
-    --LightOnTertiaryColor: 0 33 23;
-    --LightOnErrorColor: 255 255 255;
-    --LightOnErrorContainerColor: 65 14 11;
-    /* neutral colors */
-    --LightSurfaceColor: 254 247 255;
-    --LightSurfaceVariantColor: 231 224 236;
-    --LightSurfaceDimColor: 222 216 225;
-    --LightSurfaceBrightColor: 254 247 255;
-    --LightSurfaceContainerLowestColor: 255 255 255;
-    --LightSurfaceContainerLowColor: 247 242 250;
-    --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHighColor: 236 230 240;
-    --LightSurfaceContainerHighestColor: 230 224 233;
-    --LightOnSurfaceColor: 28 27 31;
-    --LightOnSurfaceVariantColor: 73 69 78;
-    --LightOutlineColor: 121 116 126;
-    --LightOutlineVariantColor: 196 199 197;
-
-    --DarkPrimaryColor: 203 204 88;
-    --DarkPrimaryContainerColor: 73 74 0;
-    --DarkSecondaryColor: 204 194 220;
-    --DarkSecondaryContainerColor: 232 222 248;
-    --DarkTertiaryColor: 0 33 23;
-    --DarkErrorColor: 242 184 181;
-    --DarkErrorContainerColor: 140 29 24;
-    --DarkOnPrimaryColor: 50 50 0;
-    --DarkOnPrimaryContainerColor: 232 233 113;
-    --DarkOnSecondaryColor: 51 45 65;
-    --DarkOnSecondaryContainerColor: 232 222 248;
-    --DarkOnTertiaryColor: 191 237 217;
-    --DarkOnErrorColor: 96 20 16;
-    --DarkOnErrorContainerColor: 249 222 220;
-    /* neutral colors */
-    --DarkSurfaceColor: 20 18 24;
-    --DarkSurfaceVariantColor: 73 69 79;
-    --DarkSurfaceDimColor: 20 18 24;
-    --DarkSurfaceBrightColor: 59 56 62;
-    --DarkSurfaceContainerLowestColor: 15 13 19;
-    --DarkSurfaceContainerLowColor: 29 27 32;
-    --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHighColor: 43 41 48;
-    --DarkSurfaceContainerHighestColor: 54 52 59;
-    --DarkOnSurfaceColor: 230 225 229;
-    --DarkOnSurfaceVariantColor: 202 196 208;
-    --DarkOutlineColor: 147 143 153;
-    --DarkOutlineVariantColor: 68 71 70;
-}
-
-.purple {
-    --LightPrimaryColor: 103 80 164;
-    --LightPrimaryContainerColor: 234 221 255;
-    --LightSecondaryColor: 98 91 113;
-    --LightSecondaryContainerColor: 232 222 248;
-    --LightTertiaryColor: 125 82 96;
-    --LightTertiaryContainerColor: 255 216 228;
-    --LightSurfaceColor: 34 34 34;
-    --LightErrorColor: 179 38 30;
-    --LightErrorContainerColor: 249 222 220;
-    --LightOnPrimaryColor: 255 255 255;
-    --LightOnPrimaryContainerColor: 33 0 94;
-    --LightOnSecondaryColor: 255 255 255;
-    --LightOnSecondaryContainerColor: 30 25 43;
-    --LightOnTertiaryColor: 255 255 255;
-    --LightOnTertiaryContainerColor: 55 11 30;
-    --LightOnErrorColor: 255 255 255;
-    --LightOnErrorContainerColor: 65 14 11;
-    /* neutral colors */
-    --LightSurfaceColor: 254 247 255;
-    --LightSurfaceVariantColor: 231 224 236;
-    --LightSurfaceDimColor: 222 216 225;
-    --LightSurfaceBrightColor: 254 247 255;
-    --LightSurfaceContainerLowestColor: 255 255 255;
-    --LightSurfaceContainerLowColor: 247 242 250;
-    --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHighColor: 236 230 240;
-    --LightSurfaceContainerHighestColor: 230 224 233;
-    --LightOnSurfaceColor: 28 27 31;
-    --LightOnSurfaceVariantColor: 73 69 78;
-    --LightOutlineColor: 121 116 126;
-    --LightOutlineVariantColor: 196 199 197;
-
-    --DarkPrimaryColor: 208 188 255;
-    --DarkPrimaryContainerColor: 79 55 139;
-    --DarkSecondaryColor: 204 194 220;
-    --DarkSecondaryContainerColor: 232 222 248;
-    --DarkTertiaryColor: 239 184 200;
-    --DarkTertiaryContainerColor: 99 59 72;
-    --DarkErrorColor: 242 184 181;
-    --DarkErrorContainerColor: 140 29 24;
-    --DarkOnPrimaryColor: 55 30 115;
-    --DarkOnPrimaryContainerColor: 234 221 255;
-    --DarkOnSecondaryColor: 51 45 65;
-    --DarkOnSecondaryContainerColor: 232 222 248;
-    --DarkOnTertiaryColor: 73 37 50;
-    --DarkOnTertiaryContainerColor: 255 216 228;
-    --DarkOnErrorColor: 96 20 16;
-    --DarkOnErrorContainerColor: 249 222 220;
-    /* neutral colors */
-    --DarkSurfaceColor: 20 18 24;
-    --DarkSurfaceVariantColor: 73 69 79;
-    --DarkSurfaceDimColor: 20 18 24;
-    --DarkSurfaceBrightColor: 59 56 62;
-    --DarkSurfaceContainerLowestColor: 15 13 19;
-    --DarkSurfaceContainerLowColor: 29 27 32;
-    --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHighColor: 43 41 48;
-    --DarkSurfaceContainerHighestColor: 54 52 59;
-    --DarkOnSurfaceColor: 230 225 229;
-    --DarkOnSurfaceVariantColor: 202 196 208;
-    --DarkOutlineColor: 147 143 153;
-    --DarkOutlineVariantColor: 68 71 70;
-}
-
-.system,
-.light {
-    --primaryColor: var(--LightPrimaryColor);
-    --primaryContainerColor: var(--LightPrimaryContainerColor);
-    --secondaryColor: var(--LightSecondaryColor);
-    --secondaryContainerColor: var(--LightSecondaryContainerColor);
-    --tertiaryColor: var(--LightTertiaryColor);
-    --errorColor: var(--LightErrorColor);
-    --errorContainerColor: var(--LightErrorContainerColor);
-    --onPrimaryColor: var(--LightOnPrimaryColor);
-    --onPrimaryContainerColor: var(--LightOnPrimaryContainerColor);
-    --onSecondaryColor: var(--LightOnSecondaryColor);
-    --onSecondaryContainerColor: var(--LightOnSecondaryContainerColor);
-    --onTertiaryColor: var(--LightOnTertiaryColor);
-    --onErrorColor: var(--LightOnErrorColor);
-    --onErrorContainerColor: var(--LightOnErrorContainerColor);
-    --surfaceColor: var(--LightSurfaceColor);
-    --surfaceVariantColor: var(--LightSurfaceVariantColor);
-    --surfaceDimColor: var(--LightSurfaceDimColor);
-    --surfaceBrightColor: var(--LightSurfaceBrightColor);
-    --surfaceContainerLowestColor: var(--LightSurfaceContainerLowestColor);
-    --surfaceContainerLowColor: var(--LightSurfaceContainerLowColor);
-    --surfaceContainerColor: var(--LightSurfaceContainerColor);
-    --surfaceContainerHighColor: var(--LightSurfaceContainerHighColor);
-    --surfaceContainerHighestColor: var(--LightSurfaceContainerHighestColor);
-    --onSurfaceColor: var(--LightOnSurfaceColor);
-    --onSurfaceVariantColor: var(--LightOnSurfaceVariantColor);
-    --outlineColor: var(--LightOutlineColor);
-    --outlineVariantColor: var(--LightOutlineVariantColor);
-}
-
-.dark {
-    --primaryColor: var(--DarkPrimaryColor);
-    --primaryContainerColor: var(--DarkPrimaryContainerColor);
-    --secondaryColor: var(--DarkSecondaryColor);
-    --secondaryContainerColor: var(--DarkSecondaryContainerColor);
-    --tertiaryColor: var(--DarkTertiaryColor);
-    --errorColor: var(--DarkErrorColor);
-    --errorContainerColor: var(--DarkErrorContainerColor);
-    --onPrimaryColor: var(--DarkOnPrimaryColor);
-    --onPrimaryContainerColor: var(--DarkOnPrimaryContainerColor);
-    --onSecondaryColor: var(--DarkOnSecondaryColor);
-    --onSecondaryContainerColor: var(--DarkOnSecondaryContainerColor);
-    --onTertiaryColor: var(--DarkOnTertiaryColor);
-    --onErrorColor: var(--DarkOnErrorColor);
-    --onErrorContainerColor: var(--DarkOnErrorContainerColor);
-    --surfaceColor: var(--DarkSurfaceColor);
-    --surfaceVariantColor: var(--DarkSurfaceVariantColor);
-    --surfaceDimColor: var(--DarkSurfaceDimColor);
-    --surfaceBrightColor: var(--DarkSurfaceBrightColor);
-    --surfaceContainerLowestColor: var(--DarkSurfaceContainerLowestColor);
-    --surfaceContainerLowColor: var(--DarkSurfaceContainerLowColor);
-    --surfaceContainerColor: var(--DarkSurfaceContainerColor);
-    --surfaceContainerHighColor: var(--DarkSurfaceContainerHighColor);
-    --surfaceContainerHighestColor: var(--DarkSurfaceContainerHighestColor);
-    --onSurfaceColor: var(--DarkOnSurfaceColor);
-    --onSurfaceVariantColor: var(--DarkOnSurfaceVariantColor);
-    --outlineColor: var(--DarkOutlineColor);
-    --outlineVariantColor: var(--DarkOutlineVariantColor);
-}
-
-@media (prefers-color-scheme: dark) {
-    .system {
-        --primaryColor: var(--DarkPrimaryColor);
-        --primaryContainerColor: var(--DarkPrimaryContainerColor);
-        --secondaryColor: var(--DarkSecondaryColor);
-        --secondaryContainerColor: var(--DarkSecondaryContainerColor);
-        --tertiaryColor: var(--DarkTertiaryColor);
-        --errorColor: var(--DarkErrorColor);
-        --errorContainerColor: var(--DarkErrorContainerColor);
-        --onPrimaryColor: var(--DarkOnPrimaryColor);
-        --onPrimaryContainerColor: var(--DarkOnPrimaryContainerColor);
-        --onSecondaryColor: var(--DarkOnSecondaryColor);
-        --onSecondaryContainerColor: var(--DarkOnSecondaryContainerColor);
-        --onTertiaryColor: var(--DarkOnTertiaryColor);
-        --onErrorColor: var(--DarkOnErrorColor);
-        --onErrorContainerColor: var(--DarkOnErrorContainerColor);
-        --surfaceColor: var(--DarkSurfaceColor);
-        --surfaceVariantColor: var(--DarkSurfaceVariantColor);
-        --surfaceDimColor: var(--DarkSurfaceDimColor);
-        --surfaceBrightColor: var(--DarkSurfaceBrightColor);
-        --surfaceContainerLowestColor: var(--DarkSurfaceContainerLowestColor);
-        --surfaceContainerLowColor: var(--DarkSurfaceContainerLowColor);
-        --surfaceContainerColor: var(--DarkSurfaceContainerColor);
-        --surfaceContainerHighColor: var(--DarkSurfaceContainerHighColor);
-        --surfaceContainerHighestColor: var(--DarkSurfaceContainerHighestColor);
-        --onSurfaceColor: var(--DarkOnSurfaceColor);
-        --onSurfaceVariantColor: var(--DarkOnSurfaceVariantColor);
-        --outlineColor: var(--DarkOutlineColor);
-        --outlineVariantColor: var(--DarkOutlineVariantColor);
-    }
-}

package/dist/Theme/globals.css

@@ -1,12 +0,0 @@
-:root {
-    font-size: 62.5%;
-}
-
-body {
-    margin: 0;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}