@valerius_petrini/corekit-ui 0.1.81 → 0.1.83

package/README.md

@@ -1,65 +1,3 @@
-# Svelte library
+# Corekit UI
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-To recreate this project with the same configuration:
-
-```sh
-# recreate this project
-npx sv@0.12.5 create --template library --types ts --add tailwindcss="plugins:typography,forms" --install npm ./
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```sh
-npm pack
-```
-
-To create a production version of your showcase app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
-```
+Corekit UI is a component library written in Svelte 5

package/dist/components/display/Card/index.stories.svelte

@@ -12,7 +12,7 @@
 		argTypes: {
 			variant: {
 				control: "select",
-				options: ["bordered", "elevated"],
+				options: ["bordered", "elevated", "ghost", "flat"],
 			},
 			size: {
 				control: "select",
@@ -28,8 +28,16 @@
 	});
 </script>
 
-<Story name="Default" args={{ variant: "bordered", size: "md" }}>
+{#snippet header()}
+	<img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg" alt="Card">
+{/snippet}
+
+{#snippet footer()}
+	<Button href="https://example.com" external class="ml-auto mr-4" color="sub">Learn More</Button>
+	<Button href="https://example.com" external>Get Started</Button>
+{/snippet}
+
+<Story name="Default" args={{ variant: "bordered", size: "md", footer, header }}>
     <Text tag="h2" class="text-2xl font-bold mb-4">Customizable Card</Text>
     <Text class="mb-4">This is a customizable card component. You can add any content here and style it as needed.</Text>
-    <Button href="https://example.com" target="_blank">Learn More</Button>
 </Story>

package/dist/components/display/Card/index.svelte

@@ -14,14 +14,14 @@
         variant = "bordered",
         size = "md",
         radius = "md",
+        footer = undefined,
+        header = undefined,
         ...restProps
     }: CardProps = $props();
 
-    let defaultClass = "text-main-text rounded-lg transition-colors ease-in-out bg-sub-background p-4 w-full";
-    let linkClass = "block hover:bg-sub-background-hover cursor-pointer";
     let combinedClass = $derived(twMerge(
-        defaultClass, 
-        href && linkClass,
+        "text-main-text rounded-lg transition-colors transition-all ease-in-out bg-gradient-to-br from-sub-background to-sub-background-accent p-4 w-full flex flex-col", 
+        href && "block hover:from-sub-background-hover hover:to-sub-background-hover cursor-pointer hover:border-sub-background-border-hover hover:-translate-y-0.5",
         cardVariantStyles[variant],
         getSizeStyleClass(size, "card"),
         getSizeStyleClass(radius, "radius"),
@@ -45,5 +45,17 @@
     {...restProps}
     bind:this={element}
 >
+    {#if header}
+        <div class="-mx-4 -mt-4 mb-4 overflow-hidden">
+            {@render header()}
+        </div>
+    {/if}
+    
     {@render children?.()}
+
+    {#if footer}
+        <div class="flex items-center justify-between border-t border-sub-background-border mt-4 -mx-4 -mb-4 px-4 py-3 text-sm text-sub-text">
+            {@render footer()}
+        </div>
+    {/if}
 </svelte:element>

package/dist/components/display/Card/types.d.ts

@@ -1,10 +1,19 @@
+import type { Snippet } from "svelte";
 import type { SizeStyle } from "../../../styles/size";
 import type { BaseComponentProps } from "../../../types/BaseComponent";
-export type CardVariant = "bordered" | "elevated";
+export type CardVariant = "bordered" | "elevated" | "ghost" | "flat";
+/**
+ * <Corekit UI> A Card component
+ *
+ * @prop `href` Defines the website the card will link to
+ * @prop `external` Opens the website in a new tab. Only works if `href` is defined.
+ */
 export interface CardProps extends BaseComponentProps {
     href?: string;
     external?: boolean;
     variant?: CardVariant;
     size?: SizeStyle;
     radius?: SizeStyle;
+    footer?: Snippet;
+    header?: Snippet;
 }

package/dist/components/display/Card/variant.js

@@ -1,4 +1,6 @@
 export const cardVariantStyles = {
-    bordered: "border-[1px] border-sub-background-hover",
-    elevated: "shadow-md",
+    bordered: "border-[1px] border-sub-background-border",
+    elevated: "shadow-[0_4px_12px_rgba(0,0,0,0.35)]",
+    ghost: "bg-transparent border-transparent",
+    flat: "border border-transparent shadow-none",
 };

package/dist/components/display/KBD/index.svelte

@@ -10,6 +10,7 @@
     }: any = $props();
 
     const defaultClass = "inline-flex flex-col items-center justify-center rounded bg-sub-background px-1.5 py-0.5 text-xs font-mono text-main-text border-sub-background-hover border-1";
+    const subtextClass = "text-sub-text text-[10px] mt-0.5";
 
     const combinedClass = $derived(twMerge(defaultClass, className));
 </script>
@@ -17,7 +18,7 @@
 <kbd class={combinedClass} {...restProps} bind:this={element}>
     {@render children?.()}
     {#if subtext}        
-        <span class="text-sub-text text-[10px] mt-0.5">
+        <span class={subtextClass}>
             {@render subtext?.()}
         </span>
     {/if}

package/dist/components/display/Skeleton/index.svelte

@@ -16,9 +16,8 @@
     const defaultWidths = [21, 19, 24, 15, 10, 30, 22, 17, 26, 20, 28, 10, 22, 45, 16, 23, 37, 25, 25];
     const widths = $derived(Array.from({ length: count }, (_, i) => defaultWidths[i % defaultWidths.length]));
 
-    const defaultContainerClass = "animate-pulse duration-100 w-lg flex flex-col gap-2";
     const combinedContainerClass = $derived(twMerge(
-        defaultContainerClass,
+        "animate-pulse duration-100 w-lg flex flex-col gap-2",
         getSizeStyleClass(size, "card"),
         className
     ));

package/dist/components/feedback/Loader/index.svelte

@@ -12,10 +12,8 @@
         ...restProps
     }: LoaderProps = $props();
 
-    const defaultClass = "loader rounded-full border-main-text border-4";
-
     let sizeClass = $derived(twMerge(
-        defaultClass, 
+        "loader rounded-full border-main-text border-4", 
         getSizeStyleClass(size, "loader"), 
         className,
         generateColorStyle(color, "loader"),

package/dist/components/navigation/Navbar/NavbarDropdown.svelte

@@ -22,6 +22,7 @@
         wrapperClass = "",
         label = "",
         navelement = undefined,
+        showArrow = true,
         ...restProps
     }: NavbarDropdownProps = $props();
 
@@ -90,10 +91,12 @@
     {#if navelement}
         {@render navelement()}
     {/if}
-    <span class="sr-only">{open ? 'Close' : 'Open'} dropdown</span>
-    <ChevronDown
-        class="mt-0.5 transition-transform ease-out duration-150 {open ? 'rotate-180' : 'rotate-0'}"
-        size="16"/>
+    {#if showArrow}
+        <span class="sr-only">{open ? 'Close' : 'Open'} dropdown</span>
+        <ChevronDown
+            class="mt-0.5 transition-transform ease-out duration-150 {open ? 'rotate-180' : 'rotate-0'}"
+            size="16"/>
+    {/if}
 </NavbarElement>
 
 {#if open}

package/dist/components/navigation/Navbar/NavbarElement.svelte

@@ -18,19 +18,14 @@
 
     let defaultClass = "navbar-element w-fit h-fit mx-2 px-2.5 py-1.5 rounded text-main-text";
 
-    let scrollY = $state(0);
-    let isAtTop = $derived(scrollY <= threshold);
-
     const combinedClass = $derived(twMerge(
         defaultClass,
+        (color === "sub") && "bg-transparent",
         className,
         active ? activeClass : "",
-        isAtTop ? classTop : "",
     ));
 </script>
 
-<svelte:window bind:scrollY={scrollY}/>
-
 <Button bind:element radius="none" {href} {color} class={combinedClass} {...restProps} aria-current={active ? 'page' : undefined}>
     {@render children?.()}
 </Button>

package/dist/components/navigation/Navbar/NavbarStoryWrapper.svelte

@@ -0,0 +1,10 @@
+<script>
+    import { fbmBackground } from "../../../actions/fbm";
+    import Text from "../../typography/Text/index.svelte";
+</script>
+
+<div class="h-screen w-full">
+    <slot />
+    <canvas class="w-full h-screen" use:fbmBackground></canvas>
+    <Text class="p-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
+</div>

package/dist/components/navigation/Navbar/NavbarStoryWrapper.svelte.d.ts

@@ -0,0 +1,26 @@
+export default NavbarStoryWrapper;
+type NavbarStoryWrapper = SvelteComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const NavbarStoryWrapper: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/navigation/Navbar/index.stories.svelte

@@ -2,8 +2,11 @@
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Navbar from "./index.svelte";
     import NavbarElement from "./NavbarElement.svelte";
-  import NavbarSeparator from "./NavbarSeparator.svelte";
-  import NavbarDropdown from "./NavbarDropdown.svelte";
+    import NavbarSeparator from "./NavbarSeparator.svelte";
+    import NavbarDropdown from "./NavbarDropdown.svelte";
+    import NavbarStoryWrapper from "./NavbarStoryWrapper.svelte";
+    import type { Component } from "svelte";
+    import type { NavbarProps } from "./types";
 
 	const { Story } = defineMeta({
 		title: "Components/Navigation/Navbar",
@@ -11,6 +14,12 @@
 		argTypes: {
 
 		},
+        parameters: {
+            layout: "fullscreen",
+        },
+        decorators: [
+            () => ({ Component: NavbarStoryWrapper as unknown as Component<NavbarProps, {}, "element"> })
+        ]
 	});
 </script>
 

package/dist/components/navigation/Navbar/index.svelte

@@ -5,21 +5,22 @@
     let { 
         children = undefined, 
         class: className = "", 
-        classTop = "",
-        threshold = 10,
+        scrollThreshold = 10,
         element = $bindable(),
+        variant = "default",
         ...restProps
     }: NavbarProps = $props();
 
-    let defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-[100] flex items-center bg-sub-background/99 border-b border-box border-b-sub-background-hover px-4 md:px-6 lg:px-8";
+    let defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-[100] flex items-center bg-sub-background border-b border-box border-b-sub-background-hover px-4 md:px-6 lg:px-8 backdrop-blur-sm";
+    let topClass = "bg-transparent border-b-transparent [&>_.navbar-element]:bg-transparent!";
 
-    let scrollY = $state(0);
-    let isAtTop = $derived(scrollY <= threshold);
+    let scrollY = $state(typeof window !== "undefined" ? window.scrollY : 0);
+    let isAtTop = $derived(scrollY <= scrollThreshold);
 
     const combinedClass = $derived(twMerge(
         defaultClass,
         className,
-        isAtTop ? classTop : ""
+        (isAtTop && variant === "hero") && topClass
     ));
 </script>
 
@@ -27,4 +28,4 @@
 
 <nav class={combinedClass} {...restProps} bind:this={element}>
     {@render children?.()}
-</nav>
+</nav>

package/dist/components/navigation/Navbar/types.d.ts

@@ -3,14 +3,14 @@ import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
 import type { ColorStyle } from "../../../styles/color.ts";
 export interface NavbarProps extends BaseComponentProps {
     classTop?: string;
-    threshold?: number;
+    scrollThreshold?: number;
+    variant?: "default" | "hero";
 }
 export interface NavbarElementProps extends BaseComponentProps {
     classTop?: string;
     activeClass?: string;
     active?: boolean;
     href?: string;
-    threshold?: number;
     color?: ColorStyle;
 }
 export type NavbarSeparatorVariant = "vertical" | "horizontal" | "dynamic";
@@ -25,4 +25,5 @@ export interface NavbarDropdownProps extends BaseComponentProps {
     wrapperClass?: string;
     activeClass?: string;
     threshold?: number;
+    showArrow?: boolean;
 }

package/dist/components/navigation/SideNavbar/SideNavbarStoryWrapper.svelte

@@ -0,0 +1,3 @@
+<div class="h-screen w-full">
+    <slot />
+</div>

package/dist/components/navigation/SideNavbar/SideNavbarStoryWrapper.svelte.d.ts

@@ -0,0 +1,26 @@
+export default SideNavbarStoryWrapper;
+type SideNavbarStoryWrapper = SvelteComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const SideNavbarStoryWrapper: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/navigation/SideNavbar/index.stories.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SideNavbar from "./index.svelte";
+
+    import Home from "@lucide/svelte/icons/home";
+    import Book from "@lucide/svelte/icons/book";
+    import Database from "@lucide/svelte/icons/database";
+
+	const { Story } = defineMeta({
+		title: "Components/Navigation/SideNavbar",
+		component: SideNavbar,
+        parameters: {
+            layout: "fullscreen",
+        },
+	});
+</script>
+
+<Story name="Default"  args={{ items: [
+    { label: "Home", href: "/", icon: Home },
+    { label: "Library", href: "/library", icon: Book },
+    { label: "Data", href: "/data", icon: Database },
+], offset: "0" }}></Story>

package/dist/components/navigation/SideNavbar/index.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Index: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Index = InstanceType<typeof Index>;
+export default Index;

package/dist/components/navigation/SideNavbar/index.svelte

@@ -3,19 +3,20 @@
     import { twMerge } from "tailwind-merge";
     import Button from "../../inputs/Button/index.svelte";
     import Text from "../../typography/Text/index.svelte";
-    import { page } from '$app/state';
 
     let { 
         children = undefined, 
         class: className = "", 
         element = $bindable(),
         items = [],
+        currentPath = "",
+        offset = "3.5rem",
         ...restProps
     }: SideNavbarProps = $props();
 
     let expanded = $state(false);
 
-    const defaultClass = "transition-[width] duration-300 overflow-hidden fixed left-0 h-full mt-14 z-[100] py-2 flex flex-col items-center gap-1 bg-sub-background/99 border-r border-box border-r-sub-background-hover";
+    const defaultClass = "transition-[width] duration-300 overflow-hidden fixed left-0 h-full z-[100] py-2 flex flex-col items-center gap-1 bg-sub-background border-r border-box border-r-sub-background-hover";
     const expandedClass = $derived(expanded ? "w-48" : "w-12");
 
     const combinedClass = $derived(twMerge(
@@ -25,9 +26,9 @@
     ));
 </script>
 
-<nav class={combinedClass} {...restProps} onmouseenter={() => expanded = true} onmouseleave={() => expanded = false} bind:this={element}>
+<nav style="margin-top: {offset}" class={combinedClass} {...restProps} onmouseenter={() => expanded = true} onmouseleave={() => expanded = false} bind:this={element}>
     {#each items as item}
-        {@const isActive = page.url.pathname === item.href}
+        {@const isActive = currentPath === item.href}
         <Button size="xs" color="none" class="{isActive ? 'bg-form-background text-main-text' : 'text-sub-text'} hover:text-main-text py-1 text-nowrap flex justify-start gap-2 overflow-hidden mx-1 w-[calc(100%-16px)] hover:bg-form-background px-1.5" href={item.href}>
             <item.icon class="w-5 h-5 shrink-0"/>
             <Text tag="span" class="transition-opacity duration-200 text-sm text-inherit {expanded ? 'w-auto opacity-100 pr-3' : 'w-0 opacity-0'}">

package/dist/components/navigation/SideNavbar/types.d.ts

@@ -2,6 +2,8 @@ import type { BaseComponentProps } from "../../../types/BaseComponent";
 import type { Component } from "svelte";
 export interface SideNavbarProps extends BaseComponentProps {
     items?: SideNavbarItem[];
+    currentPath?: string;
+    offset?: string;
 }
 export interface SideNavbarItem {
     href: string;

package/dist/components/typography/Text/index.svelte

@@ -29,12 +29,12 @@
         "code": { class: "font-mono bg-sub-background px-1 rounded inline-block", size: "text-base" },
         "a": { class: "text-blue-400 decoration-blue-400/0 underline underline-offset-2 transition-all cursor-pointer duration-150 hover:decoration-blue-400 ", size: "text-base" },
         "li": { class: "text-base list-disc list-inside", size: "text-base" },
-        "h1": { class: "font-bold", size: "text-4xl" },
-        "h2": { class: "font-bold", size: "text-3xl" },
-        "h3": { class: "font-semibold", size: "text-2xl" },
-        "h4": { class: "font-semibold", size: "text-xl" },
-        "h5": { class: "font-medium", size: "text-lg" },
-        "h6": { class: "font-normal", size: "text-base" }
+        "h1": { class: "font-bold font-display", size: "text-4xl" },
+        "h2": { class: "font-bold font-display", size: "text-3xl" },
+        "h3": { class: "font-semibold font-display", size: "text-2xl" },
+        "h4": { class: "font-semibold font-display", size: "text-xl" },
+        "h5": { class: "font-medium font-display", size: "text-lg" },
+        "h6": { class: "font-normal font-display", size: "text-base" }
     };
 
     function getTextSizeInRem(): string {
@@ -51,7 +51,7 @@
         : ""
     );
 
-    let defaultClass = "text-main-text";    
+    let defaultClass = "text-main-text font-body";    
     let combinedClass = $derived(twMerge(
         defaultClass, 
         tagStyles[tag]?.class || "", 

package/dist/styles/layout.css

@@ -10,12 +10,15 @@
     --color-main-background: var(--vpcui-main-background);
     --color-sub-background: var(--vpcui-sub-background);
     --color-sub-background-hover: var(--vpcui-sub-background-hover);
+    --color-sub-background-border: var(--vpcui-sub-background-border);
+    --color-sub-background-accent: var(--vpcui-sub-background-accent);
     --color-main-text: var(--vpcui-main-text);
     --color-sub-text: var(--vpcui-sub-text);
     --color-contrast-text: var(--vpcui-contrast-text);
     --color-form-background: var(--vpcui-form-background);
     --color-form-hover: var(--vpcui-form-hover);
     --color-form-border: var(--vpcui-form-border);
+    --color-sub-background-border-hover: var(--vpcui-sub-background-border-hover);
 
     --color-primary: var(--vpcui-primary);
     --color-secondary: var(--vpcui-secondary);
@@ -58,6 +61,10 @@
     --color-accent-800: #164e63;
     --color-accent-900: #0c2f3d;
     --color-accent-950: #061e28;
+
+    --font-display: var(--vpcui-font-display);
+    --font-body: var(--vpcui-font-body);
+    --font-mono: var(--vpcui-font-mono);
 }
 
 :root {
@@ -73,6 +80,9 @@
     --vpcui-main-background: var(--vpcui-light-50);
     --vpcui-sub-background: var(--vpcui-light-100);
     --vpcui-sub-background-hover: var(--vpcui-light-150);
+    --vpcui-sub-background-border: var(--vpcui-light-200);
+    --vpcui-sub-background-accent: var(--vpcui-light-50);
+    --vpcui-sub-background-border-hover: var(--vpcui-light-250);
     --vpcui-main-text: var(--vpcui-light-950);
     --vpcui-sub-text: var(--vpcui-light-300);
     --vpcui-contrast-text: var(--vpcui-light-950);
@@ -81,11 +91,16 @@
     --vpcui-form-border: var(--vpcui-light-250);
 
     --vpcui-loader-btn-color: rgba(255, 255, 255, 0.25);
+
+    --vpcui-font-display: ui-serif, Georgia, serif;
+    --vpcui-font-body: ui-sans-serif, system-ui sans-serif;
+    --vpcui-font-mono: ui-monospace, monospace;
 }
 
 html.dark {
     --vpcui-dark-50: #121212;
     --vpcui-dark-100: #1E1E1E;
+    --vpcui-dark-125: #212121;
     --vpcui-dark-150: #2A2A2A;
     --vpcui-dark-200: #3A3A3A;
     --vpcui-dark-250: #4A4A4A;
@@ -96,6 +111,9 @@ html.dark {
     --vpcui-main-background: var(--vpcui-dark-50);
     --vpcui-sub-background: var(--vpcui-dark-100);
     --vpcui-sub-background-hover: var(--vpcui-dark-150);
+    --vpcui-sub-background-border: var(--vpcui-dark-200);
+    --vpcui-sub-background-accent: var(--vpcui-dark-150);
+    --vpcui-sub-background-border-hover: var(--vpcui-dark-250);
     --vpcui-main-text: var(--vpcui-dark-950);
     --vpcui-sub-text: var(--vpcui-dark-300);
     --vpcui-contrast-text: var(--vpcui-dark-50);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.81",
+	"version": "0.1.83",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",