@yakad/ui 2.0.0 → 2.0.2

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/Label/Label.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+declare const labelVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export { Label, labelVariants };

package/dist/{Spacer/Spacer.js → Label/Label.js}

@@ -10,10 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import styles from "./Spacer.module.css";
-export function Spacer(_a) {
+import React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef((_a, ref) => {
     var { className } = _a, restProps = __rest(_a, ["className"]);
-    const joinedClassNames = classNames(styles.spacer, className);
-    return _jsx("div", Object.assign({}, restProps, { className: joinedClassNames }));
-}
+    return (_jsx(LabelPrimitive.Root, Object.assign({ ref: ref, className: labelVariants({ className }) }, restProps)));
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label, labelVariants };

package/dist/Separator/Separator.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { type VariantProps } from "class-variance-authority";
+declare const separatorVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, VariantProps<typeof separatorVariants> {
+    ref?: React.Ref<React.ElementRef<typeof SeparatorPrimitive.Root>>;
+}
+export declare function Separator({ orientation, decorative, className, ref, ...restProps }: SeparatorProps): React.JSX.Element;
+export {};

package/dist/Separator/Separator.js

@@ -0,0 +1,24 @@
+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 * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cva } from "class-variance-authority";
+const separatorVariants = cva("shrink-0 bg-border");
+export function Separator(_a) {
+    var { orientation = "horizontal", decorative = true, className, ref } = _a, restProps = __rest(_a, ["orientation", "decorative", "className", "ref"]);
+    return (_jsx(SeparatorPrimitive.Root, Object.assign({ ref: ref, orientation: orientation, decorative: decorative, className: separatorVariants({
+            className: [
+                orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+                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,8 +9,7 @@ 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 "./Separator/Separator";
 export * from "./Hr/Hr";
 export * from "./List/List";
 export * from "./ListItem/ListItem";
@@ -18,18 +17,15 @@ export * from "./Table/Table";
 export * from "./Button/Button";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
+export * from "./Label/Label";
 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";
 export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
-export * from "./WithOverlay/WithOverlay";
 export * from "./RenderByScroll/RenderByScroll";
 export * from "./ActiveOnVisible/ActiveOnVisible";
-export * from "./Dropdown/Dropdown";
-export * from "./Popup/Popup";
 export * from "./Avatar/Avatar";

package/dist/index.js

@@ -11,8 +11,7 @@ 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 "./Separator/Separator";
 export * from "./Hr/Hr";
 // UI Components
 export * from "./List/List";
@@ -21,10 +20,10 @@ export * from "./Table/Table";
 export * from "./Button/Button";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
+export * from "./Label/Label";
 // 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";
@@ -32,10 +31,7 @@ export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 // Utilities
 export * from "./Display/Display"; // Stack Based
-export * from "./WithOverlay/WithOverlay";
 export * from "./RenderByScroll/RenderByScroll"; // Stack Based
 export * from "./ActiveOnVisible/ActiveOnVisible"; // Stack Based
 // Overlays
-export * from "./Dropdown/Dropdown"; // Card Based
-export * from "./Popup/Popup"; // Card Based
 export * from "./Avatar/Avatar";

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;
+}