tera-system-ui 0.0.91 → 0.1.0

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

@@ -1,8 +1,6 @@
 /* Default base style */
-@import "scrollbar.scss"; /* Default base style */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
 
 
 * {
@@ -10,7 +8,9 @@
     -webkit-font-smoothing: antialiased;
 }
 
-body:has(dialog[open]) {overflow: hidden}
+body:has(dialog[open]) {
+    overflow: hidden
+}
 
 .ripple {
     position: absolute;
@@ -28,8 +28,8 @@ body:has(dialog[open]) {overflow: hidden}
 }
 
 body {
-    background: theme(colors.neutral.token.1);
-    color: theme(colors.neutral.token.13);
+    background: var(--color-neutral-token-1);
+    color: var(--color-neutral-token-13);
 }
 
 :root {
@@ -37,6 +37,58 @@ body {
     --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,
@@ -45,7 +97,7 @@ body {
     .border-b,
     .border-x,
     .border-y {
-        border-color: theme(colors.neutral.token.5);
+        border-color: var(--color-neutral-token-5);
     }
 }
 
@@ -55,150 +107,158 @@ body {
     .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 */
+        -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;
+        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;
-    --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;
+    --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 {
-    --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;
+    --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);
 }
 
 
@@ -208,13 +268,138 @@ body {
     --header-height: 3rem;
 }
 
-@media (min-width: theme(screens.md)) {
+@media (min-width: theme(--breakpoint-md)) {
     :root {
         --header-height: 3.5rem;
     }
 }
 
-@media (min-width: theme(screens.lg)) {
+@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);
+}

package/dist/themes/tw-preset.cjs

@@ -2,11 +2,6 @@ module.exports = {
     theme: {
         extend: {
             colors: {
-                border: 'hsl(var(--tw---token-color-neutral-token-5) / <alpha-value>)',
-                input: 'hsl(var(--tw---token-color-neutral-token-4) / <alpha-value>)',
-                ring: 'hsl(var(--tw---alias-color-primary-700) / <alpha-value>)',
-                background: 'hsl(var(--tw---token-color-neutral-token-1) / <alpha-value>)',
-                foreground: 'hsl(var(--tw---token-color-neutral-token-13) / <alpha-value>)',
                 primary: {
                     50: 'hsl(var(--tw---alias-color-primary-50) / <alpha-value>)',
                     100: 'hsl(var(--tw---alias-color-primary-100) / <alpha-value>)',
@@ -137,13 +132,7 @@ module.exports = {
                 }
             },
             spacing: {
-                "icon-xs": '1.25rem',
-                "icon-sm": '1.5rem',
-                "icon-md": '1.75rem',
-                "icon-lg": '2rem',
-                "icon-xl": '2.25rem',
-                "icon-2xl": '2.5rem',
-                "header-height": 'var(--header-height)'
+
             },
             borderWidth: {
                 base: '1px',
@@ -157,7 +146,7 @@ module.exports = {
                 container: 'var(--border-radius-container)'
             },
             borderColor: {
-                DEFAULT: 'hsl(var(--tw---token-color-neutral-token-5))'
+                DEFAULT: 'hsl(var(--color-neutral-token-5))'
             },
             transitionDuration: {
                 "element-react": '350ms'

package/dist/themes/tw-preset.d.cts

@@ -1,11 +1,6 @@
 export namespace theme {
     namespace extend {
         namespace colors {
-            let border: string;
-            let input: string;
-            let ring: string;
-            let background: string;
-            let foreground: string;
             let primary: {
                 50: string;
                 100: string;
@@ -135,15 +130,7 @@ export namespace theme {
                 DEFAULT: string;
             };
         }
-        let spacing: {
-            "icon-xs": string;
-            "icon-sm": string;
-            "icon-md": string;
-            "icon-lg": string;
-            "icon-xl": string;
-            "icon-2xl": string;
-            "header-height": string;
-        };
+        let spacing: {};
         namespace borderWidth {
             let base: string;
             let large: string;