tera-system-ui 0.0.20 → 0.0.22

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "tailwind-variants";
+import type { UserData } from "../../types/user-data";
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
+type UserAvatarWithMenuVariants = VariantProps<typeof styles>;
+export interface UserAvatarWithMenuProps extends UserAvatarWithMenuVariants {
+    children?: any;
+    class?: string;
+    user?: UserData;
+    onLogout?: () => void;
+}
+export {};

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.js

@@ -0,0 +1,7 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import {type UserAvatarWithMenuProps} from "./UserAvatarWithMenu";
+    import {Avatar} from "../avatar";
+    import {
+        DropdownMenu,
+        DropdownMenuGroup,
+        DropdownMenuHeader,
+        DropdownMenuItem,
+        DropdownMenuSeparator
+    } from "../dropdown-menu";
+    import {IconLogout, IconSettings} from "../icons";
+    import {extractShortUsernameFromEmail} from "../../internal/service/user.service";
+
+    let {children, user, onLogout,...props}: UserAvatarWithMenuProps = $props();
+
+    let shortUserName = extractShortUsernameFromEmail(user.email)
+    let triggerRef = $state()
+    let open = $state(true)
+</script>
+
+
+{#if user}
+    <button bind:this={triggerRef}>
+        <Avatar
+            userUid={user.userUid}
+        >
+            {shortUserName}
+        </Avatar>
+    </button>
+
+    <DropdownMenu
+            bind:open
+            triggerRef={triggerRef}
+            class="!min-w-[14rem]"
+    >
+        <DropdownMenuHeader>
+            <div class="grid grid-cols-[auto,1fr] gap-2 overflow-hidden break-all items-center">
+                <Avatar border={false}
+                        size="lg"
+                        userUid={user.userUid}
+                >
+                    {shortUserName}
+                </Avatar>
+                {#if user.email}
+                    {user.email}
+                {/if}
+            </div>
+
+        </DropdownMenuHeader>
+        <DropdownMenuSeparator/>
+
+        <DropdownMenuGroup>
+            <DropdownMenuItem
+                href="/account-settings"
+            >
+                <IconSettings/>
+                Account Settings
+            </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator/>
+        <DropdownMenuGroup>
+            <DropdownMenuItem onclick={onLogout}>
+                <IconLogout/>
+                Logout
+            </DropdownMenuItem>
+        </DropdownMenuGroup>
+    </DropdownMenu>
+{/if}

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type UserAvatarWithMenuProps } from "./UserAvatarWithMenu";
+declare const UserAvatarWithMenu: import("svelte").Component<UserAvatarWithMenuProps, {}, "">;
+export default UserAvatarWithMenu;

package/dist/components/user-avatar-with-menu/index.d.ts

@@ -0,0 +1 @@
+export { default as UserAvatarWithMenu } from './UserAvatarWithMenu.svelte';

package/dist/components/user-avatar-with-menu/index.js

@@ -0,0 +1 @@
+export { default as UserAvatarWithMenu } from './UserAvatarWithMenu.svelte';

package/dist/index.d.ts

@@ -1,10 +1,12 @@
+export { Avatar } from './components/avatar';
 export { BrandLogo } from './components/brand-logo';
 export { Button } from './components/button';
 export { Combobox } from './components/combobox';
 export { Command } from './components/command';
 export { Dialog, DialogAstro } from './components/dialog';
+export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator } from './components/dropdown-menu';
 export { Header } from './components/header';
-export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconMoon, IconPointFilled, IconSearch, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
+export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconLogout, IconMoon, IconPointFilled, IconSearch, IconSettings, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
 export { Input } from './components/input';
 export { LanguagePickerButton } from './components/language-picker-button';
 export { LightDarkToggle } from './components/light-dark-toggle';
@@ -12,3 +14,4 @@ export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
 export { TeraUiContext } from './components/tera-ui-context';
+export { UserAvatarWithMenu } from './components/user-avatar-with-menu';

package/dist/index.js

@@ -1,10 +1,12 @@
+export { Avatar } from './components/avatar';
 export { BrandLogo } from './components/brand-logo';
 export { Button } from './components/button';
 export { Combobox } from './components/combobox';
 export { Command } from './components/command';
 export { Dialog, DialogAstro } from './components/dialog';
+export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator } from './components/dropdown-menu';
 export { Header } from './components/header';
-export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconMoon, IconPointFilled, IconSearch, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
+export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconLogout, IconMoon, IconPointFilled, IconSearch, IconSettings, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
 export { Input } from './components/input';
 export { LanguagePickerButton } from './components/language-picker-button';
 export { LightDarkToggle } from './components/light-dark-toggle';
@@ -12,3 +14,4 @@ export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
 export { TeraUiContext } from './components/tera-ui-context';
+export { UserAvatarWithMenu } from './components/user-avatar-with-menu';

package/dist/internal/service/user.service.d.ts

@@ -0,0 +1,2 @@
+export declare function extractShortUsernameFromEmail(email: string): string;
+export declare function getUserAvatarUrl(userUid: string): string;

package/dist/internal/service/user.service.js

@@ -0,0 +1,20 @@
+import { getGlobalContext } from "../../components/tera-ui-context/global-context";
+export function extractShortUsernameFromEmail(email) {
+    if (!email || typeof email !== 'string') {
+        return '?';
+    }
+    // Extract the part before the '@' symbol
+    const usernamePart = email.split('@')[0];
+    // Replace any non-alphanumeric characters with a space and trim extra spaces
+    const cleanUsername = usernamePart.replace(/[^a-zA-Z0-9]/g, ' ').trim();
+    // Split the username into words and create an initialism
+    const words = cleanUsername.split(' ');
+    let shortForm = words.map(word => word[0]).join('');
+    // Ensure the result is between 1 to 4 characters
+    shortForm = shortForm.slice(0, 4).toUpperCase();
+    return shortForm || '?';
+}
+export function getUserAvatarUrl(userUid) {
+    let baseUrl = `${getGlobalContext().apiUrl || 'https://hoidap.xyz/api/v1'}/users`;
+    return `${baseUrl}/avatar/${encodeURI(userUid)}`;
+}

package/dist/themes/scrollbar.scss

@@ -1,37 +1,37 @@
-/* Light mode scrollbar styles */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent; /* Transparent track */
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2); /* Light mode: dark thumb */
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.4); /* Darker thumb on hover */
-}
-
-/* Dark mode scrollbar styles */
-.dark ::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.2); /* Dark mode: light thumb */
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.4); /* Lighter thumb on hover */
-}
-
-/* Firefox scrollbar styling */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-html.dark, .dark * {
-  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
-}
+/* Light mode scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent; /* Transparent track */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2); /* Light mode: dark thumb */
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.4); /* Darker thumb on hover */
+}
+
+/* Dark mode scrollbar styles */
+.dark ::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2); /* Dark mode: light thumb */
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.4); /* Lighter thumb on hover */
+}
+
+/* Firefox scrollbar styling */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+html.dark, .dark * {
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}

package/dist/themes/tera-ui-base.css

@@ -1,210 +1,210 @@
-/* Default base style */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import "scrollbar.scss";
-
-.ripple {
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    animation: ripple-animation 1s ease-out;
-    pointer-events: none;
-}
-
-@keyframes ripple-animation {
-    to {
-        transform: scale(4);
-        opacity: 0;
-    }
-}
-
-body {
-    background: theme(colors.neutral.token.1);
-    color: theme(colors.neutral.token.13);
-}
-
-
-
-@layer components {
-    .border,
-    .border-r,
-    .border-l,
-    .border-t,
-    .border-b,
-    .border-x,
-    .border-y {
-        border-color: theme(colors.neutral.token.5);
-    }
-}
-
-
-@layer utilities {
-    /* Hide scrollbar for Chrome, Safari and Opera */
-    .hide-scrollbar::-webkit-scrollbar {
-        display: none !important;
-    }
-    /* Hide scrollbar for IE, Edge and Firefox */
-    .hide-scrollbar {
-        -ms-overflow-style: none !important;  /* IE and Edge */
-        scrollbar-width: none !important;  /* Firefox */
-    }
-    
-    .skeleton {
-        @apply animate-pulse bg-neutral-token-4 rounded h-4 w-full;
-    }
-}
-
-
-
-
-:root {
-    --border-radius-base: 0.25rem;
-    --border-radius-container: 0.5rem;
-    --tw---alias-color-primary-50: 215 90 96;
-    --tw---alias-color-primary-100: 217 91 87;
-    --tw---alias-color-primary-200: 217 91 82;
-    --tw---alias-color-primary-300: 217 91 73;
-    --tw---alias-color-primary-400: 217 91 68;
-    --tw---alias-color-primary-500: 217 91 60;
-    --tw---alias-color-primary-600: 217 73 55;
-    --tw---alias-color-primary-700: 217 61 43;
-    --tw---alias-color-primary-800: 217 62 33;
-    --tw---alias-color-primary-900: 217 61 25;
-    --tw---alias-color-error-50: 0 81 96;
-    --tw---alias-color-error-100: 0 84 88;
-    --tw---alias-color-error-200: 0 85 82;
-    --tw---alias-color-error-300: 0 84 73;
-    --tw---alias-color-error-400: 0 84 68;
-    --tw---alias-color-error-500: 0 84 60;
-    --tw---alias-color-error-600: 0 67 55;
-    --tw---alias-color-error-700: 0 56 43;
-    --tw---alias-color-error-800: 0 56 33;
-    --tw---alias-color-error-900: 0 55 25;
-    --tw---alias-color-success-50: 143 57 95;
-    --tw---alias-color-success-100: 142 59 83;
-    --tw---alias-color-success-200: 142 58 75;
-    --tw---alias-color-success-300: 142 58 63;
-    --tw---alias-color-success-400: 142 59 56;
-    --tw---alias-color-success-500: 142 71 45;
-    --tw---alias-color-success-600: 142 70 41;
-    --tw---alias-color-success-700: 142 71 32;
-    --tw---alias-color-success-800: 142 70 25;
-    --tw---alias-color-success-900: 142 71 19;
-    --tw---alias-color-neutral-1: 0 0 100;
-    --tw---alias-color-neutral-2: 0 0 99;
-    --tw---alias-color-neutral-3: 0 0 96;
-    --tw---alias-color-neutral-4: 0 0 94;
-    --tw---alias-color-neutral-5: 0 0 85;
-    --tw---alias-color-neutral-6: 0 0 75;
-    --tw---alias-color-neutral-7: 0 0 55;
-    --tw---alias-color-neutral-8: 0 0 35;
-    --tw---alias-color-neutral-9: 0 0 27;
-    --tw---alias-color-neutral-10: 0 0 15;
-    --tw---alias-color-neutral-11: 0 0 12;
-    --tw---alias-color-neutral-12: 0 0 8;
-    --tw---alias-color-neutral-13: 0 0 0;
-    --tw---alias-color-warning-50: 25 92 95;
-    --tw---alias-color-warning-100: 25 95 85;
-    --tw---alias-color-warning-200: 25 95 78;
-    --tw---alias-color-warning-300: 24 95 69;
-    --tw---alias-color-warning-400: 25 95 63;
-    --tw---alias-color-warning-500: 25 95 53;
-    --tw---alias-color-warning-600: 25 84 48;
-    --tw---alias-color-warning-700: 25 83 38;
-    --tw---alias-color-warning-800: 24 84 29;
-    --tw---alias-color-warning-900: 24 84 22;
-    --tw---alias-color-information-50: 215 90 96;
-    --tw---alias-color-information-100: 217 91 87;
-    --tw---alias-color-information-200: 217 91 82;
-    --tw---alias-color-information-300: 217 91 73;
-    --tw---alias-color-information-400: 217 91 68;
-    --tw---alias-color-information-500: 217 91 60;
-    --tw---alias-color-information-600: 217 73 55;
-    --tw---alias-color-information-700: 217 61 43;
-    --tw---alias-color-information-800: 217 62 33;
-    --tw---alias-color-information-900: 217 61 25;
-    --tw---alias-color-secondary-50: 330 80 96;
-    --tw---alias-color-secondary-100: 331 81 88;
-    --tw---alias-color-secondary-200: 330 81 82;
-    --tw---alias-color-secondary-300: 330 81 73;
-    --tw---alias-color-secondary-400: 331 81 68;
-    --tw---alias-color-secondary-500: 330 81 60;
-    --tw---alias-color-secondary-600: 331 65 55;
-    --tw---alias-color-secondary-700: 330 53 43;
-    --tw---alias-color-secondary-800: 331 53 33;
-    --tw---alias-color-secondary-900: 330 53 25;
-    --tw---alias-color-brand-500: 212 100 47;
-    --tw---token-color-brand-token-5: 212 100 47;
-    --tw---token-color-neutral-token-1: 0 0 100;
-    --tw---token-color-neutral-token-2: 0 0 99;
-    --tw---token-color-neutral-token-3: 0 0 96;
-    --tw---token-color-neutral-token-4: 0 0 94;
-    --tw---token-color-neutral-token-5: 0 0 85;
-    --tw---token-color-neutral-token-6: 0 0 75;
-    --tw---token-color-neutral-token-7: 0 0 55;
-    --tw---token-color-neutral-token-8: 0 0 35;
-    --tw---token-color-neutral-token-9: 0 0 27;
-    --tw---token-color-neutral-token-10: 0 0 15;
-    --tw---token-color-neutral-token-11: 0 0 12;
-    --tw---token-color-neutral-token-12: 0 0 8;
-    --tw---token-color-neutral-token-13: 0 0 0;
-    --tw---token-color-primary-token-1: 215 90 96;
-    --tw---token-color-primary-token-2: 217 91 87;
-    --tw---token-color-primary-token-3: 217 91 82;
-    --tw---token-color-primary-token-4: 217 91 73;
-    --tw---token-color-primary-token-5: 217 91 68;
-    --tw---token-color-primary-token-6: 217 91 60;
-    --tw---token-color-primary-token-7: 217 73 55;
-    --tw---token-color-primary-token-8: 217 61 43;
-    --tw---token-color-primary-token-9: 217 62 33;
-    --tw---token-color-primary-token-10: 217 61 25;
-}
-
-
-
-:root.dark {
-    --tw---token-color-brand-token-5: 212 100 47;
-    --tw---token-color-neutral-token-1: 0 0 0;
-    --tw---token-color-neutral-token-2: 0 0 8;
-    --tw---token-color-neutral-token-3: 0 0 12;
-    --tw---token-color-neutral-token-4: 0 0 15;
-    --tw---token-color-neutral-token-5: 0 0 27;
-    --tw---token-color-neutral-token-6: 0 0 35;
-    --tw---token-color-neutral-token-7: 0 0 55;
-    --tw---token-color-neutral-token-8: 0 0 75;
-    --tw---token-color-neutral-token-9: 0 0 85;
-    --tw---token-color-neutral-token-10: 0 0 94;
-    --tw---token-color-neutral-token-11: 0 0 96;
-    --tw---token-color-neutral-token-12: 0 0 99;
-    --tw---token-color-neutral-token-13: 0 0 100;
-    --tw---token-color-primary-token-1: 217 61 25;
-    --tw---token-color-primary-token-2: 217 62 33;
-    --tw---token-color-primary-token-3: 217 61 43;
-    --tw---token-color-primary-token-4: 217 73 55;
-    --tw---token-color-primary-token-5: 217 91 60;
-    --tw---token-color-primary-token-6: 217 91 68;
-    --tw---token-color-primary-token-7: 217 91 73;
-    --tw---token-color-primary-token-8: 217 91 82;
-    --tw---token-color-primary-token-9: 217 91 87;
-    --tw---token-color-primary-token-10: 215 90 96;
-}
-
-
-
-/* Base responsive variable */
-:root {
-    --header-height: 3rem;
-}
-
-@media (min-width: theme(screens.md)) {
-    :root {
-        --header-height: 3.5rem;
-    }
-}
-
-@media (min-width: theme(screens.lg)) {
-    :root {
-    }
-}
+/* Default base style */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "scrollbar.scss";
+
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple-animation 1s ease-out;
+    pointer-events: none;
+}
+
+@keyframes ripple-animation {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
+body {
+    background: theme(colors.neutral.token.1);
+    color: theme(colors.neutral.token.13);
+}
+
+
+
+@layer components {
+    .border,
+    .border-r,
+    .border-l,
+    .border-t,
+    .border-b,
+    .border-x,
+    .border-y {
+        border-color: theme(colors.neutral.token.5);
+    }
+}
+
+
+@layer utilities {
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .hide-scrollbar::-webkit-scrollbar {
+        display: none !important;
+    }
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .hide-scrollbar {
+        -ms-overflow-style: none !important;  /* IE and Edge */
+        scrollbar-width: none !important;  /* Firefox */
+    }
+    
+    .skeleton {
+        @apply animate-pulse bg-neutral-token-4 rounded h-4 w-full;
+    }
+}
+
+
+
+
+:root {
+    --border-radius-base: 0.25rem;
+    --border-radius-container: 0.5rem;
+    --tw---alias-color-primary-50: 215 90 96;
+    --tw---alias-color-primary-100: 217 91 87;
+    --tw---alias-color-primary-200: 217 91 82;
+    --tw---alias-color-primary-300: 217 91 73;
+    --tw---alias-color-primary-400: 217 91 68;
+    --tw---alias-color-primary-500: 217 91 60;
+    --tw---alias-color-primary-600: 217 73 55;
+    --tw---alias-color-primary-700: 217 61 43;
+    --tw---alias-color-primary-800: 217 62 33;
+    --tw---alias-color-primary-900: 217 61 25;
+    --tw---alias-color-error-50: 0 81 96;
+    --tw---alias-color-error-100: 0 84 88;
+    --tw---alias-color-error-200: 0 85 82;
+    --tw---alias-color-error-300: 0 84 73;
+    --tw---alias-color-error-400: 0 84 68;
+    --tw---alias-color-error-500: 0 84 60;
+    --tw---alias-color-error-600: 0 67 55;
+    --tw---alias-color-error-700: 0 56 43;
+    --tw---alias-color-error-800: 0 56 33;
+    --tw---alias-color-error-900: 0 55 25;
+    --tw---alias-color-success-50: 143 57 95;
+    --tw---alias-color-success-100: 142 59 83;
+    --tw---alias-color-success-200: 142 58 75;
+    --tw---alias-color-success-300: 142 58 63;
+    --tw---alias-color-success-400: 142 59 56;
+    --tw---alias-color-success-500: 142 71 45;
+    --tw---alias-color-success-600: 142 70 41;
+    --tw---alias-color-success-700: 142 71 32;
+    --tw---alias-color-success-800: 142 70 25;
+    --tw---alias-color-success-900: 142 71 19;
+    --tw---alias-color-neutral-1: 0 0 100;
+    --tw---alias-color-neutral-2: 0 0 99;
+    --tw---alias-color-neutral-3: 0 0 96;
+    --tw---alias-color-neutral-4: 0 0 94;
+    --tw---alias-color-neutral-5: 0 0 85;
+    --tw---alias-color-neutral-6: 0 0 75;
+    --tw---alias-color-neutral-7: 0 0 55;
+    --tw---alias-color-neutral-8: 0 0 35;
+    --tw---alias-color-neutral-9: 0 0 27;
+    --tw---alias-color-neutral-10: 0 0 15;
+    --tw---alias-color-neutral-11: 0 0 12;
+    --tw---alias-color-neutral-12: 0 0 8;
+    --tw---alias-color-neutral-13: 0 0 0;
+    --tw---alias-color-warning-50: 25 92 95;
+    --tw---alias-color-warning-100: 25 95 85;
+    --tw---alias-color-warning-200: 25 95 78;
+    --tw---alias-color-warning-300: 24 95 69;
+    --tw---alias-color-warning-400: 25 95 63;
+    --tw---alias-color-warning-500: 25 95 53;
+    --tw---alias-color-warning-600: 25 84 48;
+    --tw---alias-color-warning-700: 25 83 38;
+    --tw---alias-color-warning-800: 24 84 29;
+    --tw---alias-color-warning-900: 24 84 22;
+    --tw---alias-color-information-50: 215 90 96;
+    --tw---alias-color-information-100: 217 91 87;
+    --tw---alias-color-information-200: 217 91 82;
+    --tw---alias-color-information-300: 217 91 73;
+    --tw---alias-color-information-400: 217 91 68;
+    --tw---alias-color-information-500: 217 91 60;
+    --tw---alias-color-information-600: 217 73 55;
+    --tw---alias-color-information-700: 217 61 43;
+    --tw---alias-color-information-800: 217 62 33;
+    --tw---alias-color-information-900: 217 61 25;
+    --tw---alias-color-secondary-50: 330 80 96;
+    --tw---alias-color-secondary-100: 331 81 88;
+    --tw---alias-color-secondary-200: 330 81 82;
+    --tw---alias-color-secondary-300: 330 81 73;
+    --tw---alias-color-secondary-400: 331 81 68;
+    --tw---alias-color-secondary-500: 330 81 60;
+    --tw---alias-color-secondary-600: 331 65 55;
+    --tw---alias-color-secondary-700: 330 53 43;
+    --tw---alias-color-secondary-800: 331 53 33;
+    --tw---alias-color-secondary-900: 330 53 25;
+    --tw---alias-color-brand-500: 212 100 47;
+    --tw---token-color-brand-token-5: 212 100 47;
+    --tw---token-color-neutral-token-1: 0 0 100;
+    --tw---token-color-neutral-token-2: 0 0 99;
+    --tw---token-color-neutral-token-3: 0 0 96;
+    --tw---token-color-neutral-token-4: 0 0 94;
+    --tw---token-color-neutral-token-5: 0 0 85;
+    --tw---token-color-neutral-token-6: 0 0 75;
+    --tw---token-color-neutral-token-7: 0 0 55;
+    --tw---token-color-neutral-token-8: 0 0 35;
+    --tw---token-color-neutral-token-9: 0 0 27;
+    --tw---token-color-neutral-token-10: 0 0 15;
+    --tw---token-color-neutral-token-11: 0 0 12;
+    --tw---token-color-neutral-token-12: 0 0 8;
+    --tw---token-color-neutral-token-13: 0 0 0;
+    --tw---token-color-primary-token-1: 215 90 96;
+    --tw---token-color-primary-token-2: 217 91 87;
+    --tw---token-color-primary-token-3: 217 91 82;
+    --tw---token-color-primary-token-4: 217 91 73;
+    --tw---token-color-primary-token-5: 217 91 68;
+    --tw---token-color-primary-token-6: 217 91 60;
+    --tw---token-color-primary-token-7: 217 73 55;
+    --tw---token-color-primary-token-8: 217 61 43;
+    --tw---token-color-primary-token-9: 217 62 33;
+    --tw---token-color-primary-token-10: 217 61 25;
+}
+
+
+
+:root.dark {
+    --tw---token-color-brand-token-5: 212 100 47;
+    --tw---token-color-neutral-token-1: 0 0 0;
+    --tw---token-color-neutral-token-2: 0 0 8;
+    --tw---token-color-neutral-token-3: 0 0 12;
+    --tw---token-color-neutral-token-4: 0 0 15;
+    --tw---token-color-neutral-token-5: 0 0 27;
+    --tw---token-color-neutral-token-6: 0 0 35;
+    --tw---token-color-neutral-token-7: 0 0 55;
+    --tw---token-color-neutral-token-8: 0 0 75;
+    --tw---token-color-neutral-token-9: 0 0 85;
+    --tw---token-color-neutral-token-10: 0 0 94;
+    --tw---token-color-neutral-token-11: 0 0 96;
+    --tw---token-color-neutral-token-12: 0 0 99;
+    --tw---token-color-neutral-token-13: 0 0 100;
+    --tw---token-color-primary-token-1: 217 61 25;
+    --tw---token-color-primary-token-2: 217 62 33;
+    --tw---token-color-primary-token-3: 217 61 43;
+    --tw---token-color-primary-token-4: 217 73 55;
+    --tw---token-color-primary-token-5: 217 91 60;
+    --tw---token-color-primary-token-6: 217 91 68;
+    --tw---token-color-primary-token-7: 217 91 73;
+    --tw---token-color-primary-token-8: 217 91 82;
+    --tw---token-color-primary-token-9: 217 91 87;
+    --tw---token-color-primary-token-10: 215 90 96;
+}
+
+
+
+/* Base responsive variable */
+:root {
+    --header-height: 3rem;
+}
+
+@media (min-width: theme(screens.md)) {
+    :root {
+        --header-height: 3.5rem;
+    }
+}
+
+@media (min-width: theme(screens.lg)) {
+    :root {
+    }
+}