tera-system-ui 0.1.20 → 0.1.30

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

@@ -1,405 +1,407 @@
-/* Default base style */
-@import "tailwindcss";
-@custom-variant dark (&:where(.dark, .dark *));
-
-
-* {
-    font-synthesis: none !important;
-    -webkit-font-smoothing: antialiased;
-}
-
-body:has(dialog[open]) {
-    overflow: hidden
-}
-
-.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: var(--color-neutral-token-1);
-    color: var(--color-neutral-token-13);
-}
-
-:root {
-    --font-sans: "Open Sans Variable", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: "Roboto Mono Variable", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New";
-}
-
-
-/*Scroll styling*/
-/* 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;
-}
-/*Scroll styling*/
-
-
-@layer base {
-    *,
-    ::after,
-    ::before,
-    ::backdrop,
-    ::file-selector-button {
-        border-color: var(--color-neutral-token-5, currentColor);
-    }
-}
-
-@layer components {
-    .border,
-    .border-r,
-    .border-l,
-    .border-t,
-    .border-b,
-    .border-x,
-    .border-y {
-        border-color: var(--color-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 {
-        animation: var(--animate-pulse);
-        background-color: var(--color-neutral-token-4);
-        border-radius: var(--radius-sm);
-        height: --spacing(4);
-        width: 100%;
-    }
-}
-
-
-
-
-
-
-
-:root {
-    --border-radius-base: 0.25rem;
-    --border-radius-container: 0.5rem;
-    --color-primary-50: rgb(235, 243, 254);
-    --color-primary-100: rgb(194, 216, 252);
-    --color-primary-200: rgb(165, 198, 251);
-    --color-primary-300: rgb(124, 171, 249);
-    --color-primary-400: rgb(98, 155, 248);
-    --color-primary-500: rgb(59, 130, 246);
-    --color-primary-600: rgb(54, 118, 224);
-    --color-primary-700: rgb(42, 92, 175);
-    --color-primary-800: rgb(32, 72, 135);
-    --color-primary-900: rgb(25, 55, 103);
-    --color-error-50: rgb(253, 236, 236);
-    --color-error-100: rgb(250, 197, 197);
-    --color-error-200: rgb(248, 169, 169);
-    --color-error-300: rgb(244, 130, 130);
-    --color-error-400: rgb(242, 105, 105);
-    --color-error-500: rgb(239, 68, 68);
-    --color-error-600: rgb(217, 62, 62);
-    --color-error-700: rgb(170, 48, 48);
-    --color-error-800: rgb(131, 37, 37);
-    --color-error-900: rgb(100, 29, 29);
-    --color-success-50: rgb(233, 249, 239);
-    --color-success-100: rgb(186, 237, 205);
-    --color-success-200: rgb(153, 228, 181);
-    --color-success-300: rgb(107, 216, 147);
-    --color-success-400: rgb(78, 209, 126);
-    --color-success-500: rgb(34, 197, 94);
-    --color-success-600: rgb(31, 179, 86);
-    --color-success-700: rgb(24, 140, 67);
-    --color-success-800: rgb(19, 108, 52);
-    --color-success-900: rgb(14, 83, 39);
-    --color-neutral-1: rgb(255, 255, 255);
-    --color-neutral-2: rgb(252, 252, 252);
-    --color-neutral-3: rgb(245, 245, 245);
-    --color-neutral-4: rgb(240, 240, 240);
-    --color-neutral-5: rgb(217, 217, 217);
-    --color-neutral-6: rgb(191, 191, 191);
-    --color-neutral-7: rgb(140, 140, 140);
-    --color-neutral-8: rgb(89, 89, 89);
-    --color-neutral-9: rgb(69, 69, 69);
-    --color-neutral-10: rgb(38, 38, 38);
-    --color-neutral-11: rgb(31, 31, 31);
-    --color-neutral-12: rgb(20, 20, 20);
-    --color-neutral-13: rgb(0, 0, 0);
-    --color-warning-50: rgb(254, 241, 232);
-    --color-warning-100: rgb(253, 212, 183);
-    --color-warning-200: rgb(252, 191, 148);
-    --color-warning-300: rgb(251, 161, 99);
-    --color-warning-400: rgb(250, 143, 69);
-    --color-warning-500: rgb(249, 115, 22);
-    --color-warning-600: rgb(227, 105, 20);
-    --color-warning-700: rgb(177, 82, 16);
-    --color-warning-800: rgb(137, 63, 12);
-    --color-warning-900: rgb(105, 48, 9);
-    --color-information-50: rgb(235, 243, 254);
-    --color-information-100: rgb(194, 216, 252);
-    --color-information-200: rgb(165, 198, 251);
-    --color-information-300: rgb(124, 171, 249);
-    --color-information-400: rgb(98, 155, 248);
-    --color-information-500: rgb(59, 130, 246);
-    --color-information-600: rgb(54, 118, 224);
-    --color-information-700: rgb(42, 92, 175);
-    --color-information-800: rgb(32, 72, 135);
-    --color-information-900: rgb(25, 55, 103);
-    --color-secondary-50: rgb(253, 237, 245);
-    --color-secondary-100: rgb(249, 198, 223);
-    --color-secondary-200: rgb(246, 171, 208);
-    --color-secondary-300: rgb(242, 132, 187);
-    --color-secondary-400: rgb(240, 109, 173);
-    --color-secondary-500: rgb(236, 72, 153);
-    --color-secondary-600: rgb(215, 66, 139);
-    --color-secondary-700: rgb(168, 51, 109);
-    --color-secondary-800: rgb(130, 40, 84);
-    --color-secondary-900: rgb(99, 30, 64);
-    --color-brand-500: rgb(0, 111, 238);
-    --color-brand-token-5: rgb(0, 111, 238);
-    --color-neutral-token-1: rgb(255, 255, 255);
-    --color-neutral-token-2: rgb(252, 252, 252);
-    --color-neutral-token-3: rgb(245, 245, 245);
-    --color-neutral-token-4: rgb(240, 240, 240);
-    --color-neutral-token-5: rgb(217, 217, 217);
-    --color-neutral-token-6: rgb(191, 191, 191);
-    --color-neutral-token-7: rgb(140, 140, 140);
-    --color-neutral-token-8: rgb(89, 89, 89);
-    --color-neutral-token-9: rgb(69, 69, 69);
-    --color-neutral-token-10: rgb(38, 38, 38);
-    --color-neutral-token-11: rgb(31, 31, 31);
-    --color-neutral-token-12: rgb(20, 20, 20);
-    --color-neutral-token-13: rgb(0, 0, 0);
-    --color-primary-token-1: rgb(235, 243, 254);
-    --color-primary-token-2: rgb(194, 216, 252);
-    --color-primary-token-3: rgb(165, 198, 251);
-    --color-primary-token-4: rgb(124, 171, 249);
-    --color-primary-token-5: rgb(98, 155, 248);
-    --color-primary-token-6: rgb(59, 130, 246);
-    --color-primary-token-7: rgb(54, 118, 224);
-    --color-primary-token-8: rgb(42, 92, 175);
-    --color-primary-token-9: rgb(32, 72, 135);
-    --color-primary-token-10: rgb(25, 55, 103);
-}
-
-
-
-:root.dark {
-    --color-brand-token-5: rgb(0, 111, 238);
-    --color-neutral-token-1: rgb(0, 0, 0);
-    --color-neutral-token-2: rgb(20, 20, 20);
-    --color-neutral-token-3: rgb(31, 31, 31);
-    --color-neutral-token-4: rgb(38, 38, 38);
-    --color-neutral-token-5: rgb(69, 69, 69);
-    --color-neutral-token-6: rgb(89, 89, 89);
-    --color-neutral-token-7: rgb(140, 140, 140);
-    --color-neutral-token-8: rgb(191, 191, 191);
-    --color-neutral-token-9: rgb(217, 217, 217);
-    --color-neutral-token-10: rgb(240, 240, 240);
-    --color-neutral-token-11: rgb(245, 245, 245);
-    --color-neutral-token-12: rgb(252, 252, 252);
-    --color-neutral-token-13: rgb(255, 255, 255);
-    --color-primary-token-1: rgb(25, 55, 103);
-    --color-primary-token-2: rgb(32, 72, 135);
-    --color-primary-token-3: rgb(42, 92, 175);
-    --color-primary-token-4: rgb(54, 118, 224);
-    --color-primary-token-5: rgb(59, 130, 246);
-    --color-primary-token-6: rgb(98, 155, 248);
-    --color-primary-token-7: rgb(124, 171, 249);
-    --color-primary-token-8: rgb(165, 198, 251);
-    --color-primary-token-9: rgb(194, 216, 252);
-    --color-primary-token-10: rgb(235, 243, 254);
-}
-
-
-
-/* Base responsive variable */
-:root {
-    --header-height: 3rem;
-}
-
-@media (min-width: theme(--breakpoint-md)) {
-    :root {
-        --header-height: 3.5rem;
-    }
-}
-
-@media (min-width: theme(--breakpoint-lg)) {
-    :root {
-    }
-}
-
-@theme {
-    --default-ring-width: 3px;
-    --default-ring-color: var(--color-primary-700);
-    --color-border: var(--color-neutral-token-5);
-    --color-input: var(--color-neutral-token-4);
-    --color-ring: var(--color-primary-700);
-    --color-background: var(--color-neutral-token-1);
-    --color-foreground: var(--color-neutral-token-13);
-    --spacing-icon-xs: 1.25rem;
-    --spacing-icon-sm: 1.5rem;
-    --spacing-icon-md: 1.75rem;
-    --spacing-icon-lg: 2rem;
-    --spacing-icon-xl: 2.25rem;
-    --spacing-icon-2xl: 2.5rem;
-    --spacing-header-height: var(--header-height);
-    --radius-container: var(--border-radius-container);
-    --radius: var(--border-radius-base);
-    --color-primary-50: var(--color-primary-50);
-    --color-primary-100: var(--color-primary-100);
-    --color-primary-200: var(--color-primary-200);
-    --color-primary-300: var(--color-primary-300);
-    --color-primary-400: var(--color-primary-400);
-    --color-primary-500: var(--color-primary-500);
-    --color-primary-600: var(--color-primary-600);
-    --color-primary-700: var(--color-primary-700);
-    --color-primary-800: var(--color-primary-800);
-    --color-primary-900: var(--color-primary-900);
-    --color-error-50: var(--color-error-50);
-    --color-error-100: var(--color-error-100);
-    --color-error-200: var(--color-error-200);
-    --color-error-300: var(--color-error-300);
-    --color-error-400: var(--color-error-400);
-    --color-error-500: var(--color-error-500);
-    --color-error-600: var(--color-error-600);
-    --color-error-700: var(--color-error-700);
-    --color-error-800: var(--color-error-800);
-    --color-error-900: var(--color-error-900);
-    --color-success-50: var(--color-success-50);
-    --color-success-100: var(--color-success-100);
-    --color-success-200: var(--color-success-200);
-    --color-success-300: var(--color-success-300);
-    --color-success-400: var(--color-success-400);
-    --color-success-500: var(--color-success-500);
-    --color-success-600: var(--color-success-600);
-    --color-success-700: var(--color-success-700);
-    --color-success-800: var(--color-success-800);
-    --color-success-900: var(--color-success-900);
-    --color-neutral-1: var(--color-neutral-1);
-    --color-neutral-2: var(--color-neutral-2);
-    --color-neutral-3: var(--color-neutral-3);
-    --color-neutral-4: var(--color-neutral-4);
-    --color-neutral-5: var(--color-neutral-5);
-    --color-neutral-6: var(--color-neutral-6);
-    --color-neutral-7: var(--color-neutral-7);
-    --color-neutral-8: var(--color-neutral-8);
-    --color-neutral-9: var(--color-neutral-9);
-    --color-neutral-10: var(--color-neutral-10);
-    --color-neutral-11: var(--color-neutral-11);
-    --color-neutral-12: var(--color-neutral-12);
-    --color-neutral-13: var(--color-neutral-13);
-    --color-warning-50: var(--color-warning-50);
-    --color-warning-100: var(--color-warning-100);
-    --color-warning-200: var(--color-warning-200);
-    --color-warning-300: var(--color-warning-300);
-    --color-warning-400: var(--color-warning-400);
-    --color-warning-500: var(--color-warning-500);
-    --color-warning-600: var(--color-warning-600);
-    --color-warning-700: var(--color-warning-700);
-    --color-warning-800: var(--color-warning-800);
-    --color-warning-900: var(--color-warning-900);
-    --color-information-50: var(--color-information-50);
-    --color-information-100: var(--color-information-100);
-    --color-information-200: var(--color-information-200);
-    --color-information-300: var(--color-information-300);
-    --color-information-400: var(--color-information-400);
-    --color-information-500: var(--color-information-500);
-    --color-information-600: var(--color-information-600);
-    --color-information-700: var(--color-information-700);
-    --color-information-800: var(--color-information-800);
-    --color-information-900: var(--color-information-900);
-    --color-secondary-50: var(--color-secondary-50);
-    --color-secondary-100: var(--color-secondary-100);
-    --color-secondary-200: var(--color-secondary-200);
-    --color-secondary-300: var(--color-secondary-300);
-    --color-secondary-400: var(--color-secondary-400);
-    --color-secondary-500: var(--color-secondary-500);
-    --color-secondary-600: var(--color-secondary-600);
-    --color-secondary-700: var(--color-secondary-700);
-    --color-secondary-800: var(--color-secondary-800);
-    --color-secondary-900: var(--color-secondary-900);
-    --color-brand-500: var(--color-brand-500);
-    --color-brand-token-5: var(--color-brand-token-5);
-    --color-neutral-token-1: var(--color-neutral-token-1);
-    --color-neutral-token-2: var(--color-neutral-token-2);
-    --color-neutral-token-3: var(--color-neutral-token-3);
-    --color-neutral-token-4: var(--color-neutral-token-4);
-    --color-neutral-token-5: var(--color-neutral-token-5);
-    --color-neutral-token-6: var(--color-neutral-token-6);
-    --color-neutral-token-7: var(--color-neutral-token-7);
-    --color-neutral-token-8: var(--color-neutral-token-8);
-    --color-neutral-token-9: var(--color-neutral-token-9);
-    --color-neutral-token-10: var(--color-neutral-token-10);
-    --color-neutral-token-11: var(--color-neutral-token-11);
-    --color-neutral-token-12: var(--color-neutral-token-12);
-    --color-neutral-token-13: var(--color-neutral-token-13);
-    --color-primary-token-1: var(--color-primary-token-1);
-    --color-primary-token-2: var(--color-primary-token-2);
-    --color-primary-token-3: var(--color-primary-token-3);
-    --color-primary-token-4: var(--color-primary-token-4);
-    --color-primary-token-5: var(--color-primary-token-5);
-    --color-primary-token-6: var(--color-primary-token-6);
-    --color-primary-token-7: var(--color-primary-token-7);
-    --color-primary-token-8: var(--color-primary-token-8);
-    --color-primary-token-9: var(--color-primary-token-9);
-    --color-primary-token-10: var(--color-primary-token-10);
-    --color-primary: var(--color-primary-700);
-    --color-error: var(--color-error-500);
-    --color-success: var(--color-success-500);
-    --color-neutral: var(--color-neutral-7);
-    --color-warning: var(--color-warning-500);
-    --color-information: var(--color-information-500);
-    --color-secondary: var(--color-secondary-500);
-    --color-brand: var(--color-brand-500);
+/* Default base style */
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+
+* {
+    font-synthesis: none !important;
+    -webkit-font-smoothing: antialiased;
+}
+
+body:has(dialog[open]) {
+    overflow: hidden
+}
+
+.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: var(--color-neutral-token-1);
+    color: var(--color-neutral-token-13);
+}
+
+:root {
+    --font-sans: "Open Sans Variable", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: "Roboto Mono Variable", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New";
+}
+
+
+/*Scroll styling*/
+/* 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;
+}
+/*Scroll styling*/
+
+
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-neutral-token-5, currentColor);
+    }
+}
+
+@layer components {
+    .border,
+    .border-r,
+    .border-l,
+    .border-t,
+    .border-b,
+    .border-x,
+    .border-y {
+        border-color: var(--color-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 {
+        animation: var(--animate-pulse);
+        background-color: var(--color-neutral-token-4);
+        border-radius: var(--radius-sm);
+        height: --spacing(4);
+        width: 100%;
+    }
+}
+
+
+
+
+
+
+
+:root {
+    --border-radius-base: 0.25rem;
+    --border-radius-container: 0.5rem;
+    --color-primary-50: rgb(235, 243, 254);
+    --color-primary-100: rgb(194, 216, 252);
+    --color-primary-200: rgb(165, 198, 251);
+    --color-primary-300: rgb(124, 171, 249);
+    --color-primary-400: rgb(98, 155, 248);
+    --color-primary-500: rgb(59, 130, 246);
+    --color-primary-600: rgb(54, 118, 224);
+    --color-primary-700: rgb(42, 92, 175);
+    --color-primary-800: rgb(32, 72, 135);
+    --color-primary-900: rgb(25, 55, 103);
+    --color-error-50: rgb(253, 236, 236);
+    --color-error-100: rgb(250, 197, 197);
+    --color-error-200: rgb(248, 169, 169);
+    --color-error-300: rgb(244, 130, 130);
+    --color-error-400: rgb(242, 105, 105);
+    --color-error-500: rgb(239, 68, 68);
+    --color-error-600: rgb(217, 62, 62);
+    --color-error-700: rgb(170, 48, 48);
+    --color-error-800: rgb(131, 37, 37);
+    --color-error-900: rgb(100, 29, 29);
+    --color-success-50: rgb(233, 249, 239);
+    --color-success-100: rgb(186, 237, 205);
+    --color-success-200: rgb(153, 228, 181);
+    --color-success-300: rgb(107, 216, 147);
+    --color-success-400: rgb(78, 209, 126);
+    --color-success-500: rgb(34, 197, 94);
+    --color-success-600: rgb(31, 179, 86);
+    --color-success-700: rgb(24, 140, 67);
+    --color-success-800: rgb(19, 108, 52);
+    --color-success-900: rgb(14, 83, 39);
+    --color-neutral-1: rgb(255, 255, 255);
+    --color-neutral-2: rgb(252, 252, 252);
+    --color-neutral-3: rgb(245, 245, 245);
+    --color-neutral-4: rgb(240, 240, 240);
+    --color-neutral-5: rgb(217, 217, 217);
+    --color-neutral-6: rgb(191, 191, 191);
+    --color-neutral-7: rgb(140, 140, 140);
+    --color-neutral-8: rgb(89, 89, 89);
+    --color-neutral-9: rgb(69, 69, 69);
+    --color-neutral-10: rgb(38, 38, 38);
+    --color-neutral-11: rgb(31, 31, 31);
+    --color-neutral-12: rgb(20, 20, 20);
+    --color-neutral-13: rgb(0, 0, 0);
+    --color-warning-50: rgb(254, 241, 232);
+    --color-warning-100: rgb(253, 212, 183);
+    --color-warning-200: rgb(252, 191, 148);
+    --color-warning-300: rgb(251, 161, 99);
+    --color-warning-400: rgb(250, 143, 69);
+    --color-warning-500: rgb(249, 115, 22);
+    --color-warning-600: rgb(227, 105, 20);
+    --color-warning-700: rgb(177, 82, 16);
+    --color-warning-800: rgb(137, 63, 12);
+    --color-warning-900: rgb(105, 48, 9);
+    --color-information-50: rgb(235, 243, 254);
+    --color-information-100: rgb(194, 216, 252);
+    --color-information-200: rgb(165, 198, 251);
+    --color-information-300: rgb(124, 171, 249);
+    --color-information-400: rgb(98, 155, 248);
+    --color-information-500: rgb(59, 130, 246);
+    --color-information-600: rgb(54, 118, 224);
+    --color-information-700: rgb(42, 92, 175);
+    --color-information-800: rgb(32, 72, 135);
+    --color-information-900: rgb(25, 55, 103);
+    --color-secondary-50: rgb(253, 237, 245);
+    --color-secondary-100: rgb(249, 198, 223);
+    --color-secondary-200: rgb(246, 171, 208);
+    --color-secondary-300: rgb(242, 132, 187);
+    --color-secondary-400: rgb(240, 109, 173);
+    --color-secondary-500: rgb(236, 72, 153);
+    --color-secondary-600: rgb(215, 66, 139);
+    --color-secondary-700: rgb(168, 51, 109);
+    --color-secondary-800: rgb(130, 40, 84);
+    --color-secondary-900: rgb(99, 30, 64);
+    --color-brand-500: rgb(0, 111, 238);
+    --color-brand-token-5: rgb(0, 111, 238);
+    --color-neutral-token-1: rgb(255, 255, 255);
+    --color-neutral-token-2: rgb(252, 252, 252);
+    --color-neutral-token-3: rgb(245, 245, 245);
+    --color-neutral-token-4: rgb(240, 240, 240);
+    --color-neutral-token-5: rgb(217, 217, 217);
+    --color-neutral-token-6: rgb(191, 191, 191);
+    --color-neutral-token-7: rgb(140, 140, 140);
+    --color-neutral-token-8: rgb(89, 89, 89);
+    --color-neutral-token-9: rgb(69, 69, 69);
+    --color-neutral-token-10: rgb(38, 38, 38);
+    --color-neutral-token-11: rgb(31, 31, 31);
+    --color-neutral-token-12: rgb(20, 20, 20);
+    --color-neutral-token-13: rgb(0, 0, 0);
+    --color-primary-token-1: rgb(235, 243, 254);
+    --color-primary-token-2: rgb(194, 216, 252);
+    --color-primary-token-3: rgb(165, 198, 251);
+    --color-primary-token-4: rgb(124, 171, 249);
+    --color-primary-token-5: rgb(98, 155, 248);
+    --color-primary-token-6: rgb(59, 130, 246);
+    --color-primary-token-7: rgb(54, 118, 224);
+    --color-primary-token-8: rgb(42, 92, 175);
+    --color-primary-token-9: rgb(32, 72, 135);
+    --color-primary-token-10: rgb(25, 55, 103);
+}
+
+
+
+:root.dark {
+    --color-brand-token-5: rgb(0, 111, 238);
+    --color-neutral-token-1: rgb(0, 0, 0);
+    --color-neutral-token-2: rgb(20, 20, 20);
+    --color-neutral-token-3: rgb(31, 31, 31);
+    --color-neutral-token-4: rgb(38, 38, 38);
+    --color-neutral-token-5: rgb(69, 69, 69);
+    --color-neutral-token-6: rgb(89, 89, 89);
+    --color-neutral-token-7: rgb(140, 140, 140);
+    --color-neutral-token-8: rgb(191, 191, 191);
+    --color-neutral-token-9: rgb(217, 217, 217);
+    --color-neutral-token-10: rgb(240, 240, 240);
+    --color-neutral-token-11: rgb(245, 245, 245);
+    --color-neutral-token-12: rgb(252, 252, 252);
+    --color-neutral-token-13: rgb(255, 255, 255);
+    --color-primary-token-1: rgb(25, 55, 103);
+    --color-primary-token-2: rgb(32, 72, 135);
+    --color-primary-token-3: rgb(42, 92, 175);
+    --color-primary-token-4: rgb(54, 118, 224);
+    --color-primary-token-5: rgb(59, 130, 246);
+    --color-primary-token-6: rgb(98, 155, 248);
+    --color-primary-token-7: rgb(124, 171, 249);
+    --color-primary-token-8: rgb(165, 198, 251);
+    --color-primary-token-9: rgb(194, 216, 252);
+    --color-primary-token-10: rgb(235, 243, 254);
+}
+
+
+
+/* Base responsive variable */
+:root {
+    --header-height: 3rem;
+}
+
+@media (min-width: theme(--breakpoint-md)) {
+    :root {
+        --header-height: 3.5rem;
+    }
+}
+
+@media (min-width: theme(--breakpoint-lg)) {
+    :root {
+    }
+}
+
+@theme {
+    --default-ring-width: 3px;
+    --default-ring-color: var(--color-primary-700);
+    --color-border: var(--color-neutral-token-5);
+    --color-input: var(--color-neutral-token-4);
+    --color-ring: var(--color-primary-700);
+    --color-background: var(--color-neutral-token-1);
+    --color-foreground: var(--color-neutral-token-13);
+    --spacing-icon-xs: 1.25rem;
+    --spacing-icon-sm: 1.5rem;
+    --spacing-icon-md: 1.75rem;
+    --spacing-icon-lg: 2rem;
+    --spacing-icon-xl: 2.25rem;
+    --spacing-icon-2xl: 2.5rem;
+    --spacing-header-height: var(--header-height);
+    --radius-container: var(--border-radius-container);
+    --radius: var(--border-radius-base);
+    --color-primary-50: var(--color-primary-50);
+    --color-primary-100: var(--color-primary-100);
+    --color-primary-200: var(--color-primary-200);
+    --color-primary-300: var(--color-primary-300);
+    --color-primary-400: var(--color-primary-400);
+    --color-primary-500: var(--color-primary-500);
+    --color-primary-600: var(--color-primary-600);
+    --color-primary-700: var(--color-primary-700);
+    --color-primary-800: var(--color-primary-800);
+    --color-primary-900: var(--color-primary-900);
+    --color-error-50: var(--color-error-50);
+    --color-error-100: var(--color-error-100);
+    --color-error-200: var(--color-error-200);
+    --color-error-300: var(--color-error-300);
+    --color-error-400: var(--color-error-400);
+    --color-error-500: var(--color-error-500);
+    --color-error-600: var(--color-error-600);
+    --color-error-700: var(--color-error-700);
+    --color-error-800: var(--color-error-800);
+    --color-error-900: var(--color-error-900);
+    --color-success-50: var(--color-success-50);
+    --color-success-100: var(--color-success-100);
+    --color-success-200: var(--color-success-200);
+    --color-success-300: var(--color-success-300);
+    --color-success-400: var(--color-success-400);
+    --color-success-500: var(--color-success-500);
+    --color-success-600: var(--color-success-600);
+    --color-success-700: var(--color-success-700);
+    --color-success-800: var(--color-success-800);
+    --color-success-900: var(--color-success-900);
+    --color-neutral-1: var(--color-neutral-1);
+    --color-neutral-2: var(--color-neutral-2);
+    --color-neutral-3: var(--color-neutral-3);
+    --color-neutral-4: var(--color-neutral-4);
+    --color-neutral-5: var(--color-neutral-5);
+    --color-neutral-6: var(--color-neutral-6);
+    --color-neutral-7: var(--color-neutral-7);
+    --color-neutral-8: var(--color-neutral-8);
+    --color-neutral-9: var(--color-neutral-9);
+    --color-neutral-10: var(--color-neutral-10);
+    --color-neutral-11: var(--color-neutral-11);
+    --color-neutral-12: var(--color-neutral-12);
+    --color-neutral-13: var(--color-neutral-13);
+    --color-warning-50: var(--color-warning-50);
+    --color-warning-100: var(--color-warning-100);
+    --color-warning-200: var(--color-warning-200);
+    --color-warning-300: var(--color-warning-300);
+    --color-warning-400: var(--color-warning-400);
+    --color-warning-500: var(--color-warning-500);
+    --color-warning-600: var(--color-warning-600);
+    --color-warning-700: var(--color-warning-700);
+    --color-warning-800: var(--color-warning-800);
+    --color-warning-900: var(--color-warning-900);
+    --color-information-50: var(--color-information-50);
+    --color-information-100: var(--color-information-100);
+    --color-information-200: var(--color-information-200);
+    --color-information-300: var(--color-information-300);
+    --color-information-400: var(--color-information-400);
+    --color-information-500: var(--color-information-500);
+    --color-information-600: var(--color-information-600);
+    --color-information-700: var(--color-information-700);
+    --color-information-800: var(--color-information-800);
+    --color-information-900: var(--color-information-900);
+    --color-secondary-50: var(--color-secondary-50);
+    --color-secondary-100: var(--color-secondary-100);
+    --color-secondary-200: var(--color-secondary-200);
+    --color-secondary-300: var(--color-secondary-300);
+    --color-secondary-400: var(--color-secondary-400);
+    --color-secondary-500: var(--color-secondary-500);
+    --color-secondary-600: var(--color-secondary-600);
+    --color-secondary-700: var(--color-secondary-700);
+    --color-secondary-800: var(--color-secondary-800);
+    --color-secondary-900: var(--color-secondary-900);
+    --color-brand-500: var(--color-brand-500);
+    --color-brand-token-5: var(--color-brand-token-5);
+    --color-neutral-token-1: var(--color-neutral-token-1);
+    --color-neutral-token-2: var(--color-neutral-token-2);
+    --color-neutral-token-3: var(--color-neutral-token-3);
+    --color-neutral-token-4: var(--color-neutral-token-4);
+    --color-neutral-token-5: var(--color-neutral-token-5);
+    --color-neutral-token-6: var(--color-neutral-token-6);
+    --color-neutral-token-7: var(--color-neutral-token-7);
+    --color-neutral-token-8: var(--color-neutral-token-8);
+    --color-neutral-token-9: var(--color-neutral-token-9);
+    --color-neutral-token-10: var(--color-neutral-token-10);
+    --color-neutral-token-11: var(--color-neutral-token-11);
+    --color-neutral-token-12: var(--color-neutral-token-12);
+    --color-neutral-token-13: var(--color-neutral-token-13);
+    --color-primary-token-1: var(--color-primary-token-1);
+    --color-primary-token-2: var(--color-primary-token-2);
+    --color-primary-token-3: var(--color-primary-token-3);
+    --color-primary-token-4: var(--color-primary-token-4);
+    --color-primary-token-5: var(--color-primary-token-5);
+    --color-primary-token-6: var(--color-primary-token-6);
+    --color-primary-token-7: var(--color-primary-token-7);
+    --color-primary-token-8: var(--color-primary-token-8);
+    --color-primary-token-9: var(--color-primary-token-9);
+    --color-primary-token-10: var(--color-primary-token-10);
+    --color-primary: var(--color-primary-700);
+    --color-error: var(--color-error-500);
+    --color-success: var(--color-success-500);
+    --color-neutral: var(--color-neutral-7);
+    --color-warning: var(--color-warning-500);
+    --color-information: var(--color-information-500);
+    --color-secondary: var(--color-secondary-500);
+    --color-brand: var(--color-brand-500);
 }