@basis-ng/styles 0.0.1-alpha.117 → 0.0.1-alpha.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.117",
+  "version": "0.0.1-alpha.119",
   "description": "CSS foundation for @basis-ng/primitives components",
   "main": "src/index.css",
   "exports": {
@@ -11,7 +11,6 @@
     "./button-group": "./src/components/button-group.css",
     "./button": "./src/components/button.css",
     "./checkbox": "./src/components/checkbox.css",
-    "./color-picker": "./src/components/color-picker.css",
     "./input-group": "./src/components/input-group.css",
     "./input": "./src/components/input.css",
     "./label": "./src/components/label.css",
@@ -26,7 +25,6 @@
     "./sheet": "./src/components/sheet.css",
     "./spinner": "./src/components/spinner.css",
     "./switch": "./src/components/switch.css",
-    "./table": "./src/components/table.css",
     "./tabs": "./src/components/tabs.css",
     "./textarea": "./src/components/textarea.css",
     "./tooltip": "./src/components/tooltip.css",

package/src/components/alert.css

@@ -1,43 +1,58 @@
+/* Alert styles — Base / Types / Sizes / Close */
+
+/* Use the same selector the primitive exposes: `b-alert` */
+
 b-alert {
-  @apply flex items-center gap-4 p-4 rounded-size-md relative font-sans w-full box-border max-w-full;
+  @apply flex items-start gap-4 p-4 rounded-size-md w-full box-border max-w-full font-sans;
 
   .icon {
     @apply flex-shrink-0 self-start;
   }
 
   .content {
-    @apply flex-grow flex flex-col gap-2;
+    @apply flex-1 flex flex-col gap-1;
 
     .title {
-      @apply font-bold;
+      @apply font-semibold;
     }
 
     .body {
-      @apply text-sm flex flex-col gap-1;
+      @apply text-sm;
     }
   }
 
-  &.success {
-    @apply bg-success/20 text-success-foreground;
-    @apply dark:bg-success-dark/20 dark:text-success-foreground-dark;
+  /* Default: info */
+  @apply bg-info/20 text-info-foreground dark:bg-info-dark/20 dark:text-info-foreground-dark;
+
+  /* Types (match primitive's `type` input): use `b-type-` prefix to avoid classname collisions */
+  &.b-type-success {
+    @apply bg-success/20 inset-ring-1 text-success-foreground dark:bg-success-dark/20 dark:text-success-foreground-dark inset-ring-success/90 dark:inset-ring-success-dark/30;
   }
 
-  &.error {
-    @apply bg-destructive/20 text-destructive;
-    @apply dark:bg-destructive-dark/20 dark:text-destructive-dark;
+  &.b-type-error {
+    @apply bg-destructive/20 inset-ring-1 text-destructive dark:bg-destructive-dark/20 dark:text-destructive-dark inset-ring-destructive/30 dark:inset-ring-destructive-dark/30;
   }
 
-  &.warning {
-    @apply bg-warning/20 text-warning-foreground;
-    @apply dark:bg-warning-dark/20 dark:text-warning-foreground-dark;
+  &.b-type-warning {
+    @apply bg-warning/20 inset-ring-1 text-warning-foreground dark:bg-warning-dark/20 dark:text-warning-foreground-dark inset-ring-warning/90 dark:inset-ring-warning-dark/30;
   }
 
-  &.info {
-    @apply bg-info/20 text-info-foreground;
-    @apply dark:bg-info-dark/20 dark:text-info-foreground-dark;
+  &.b-type-info {
+    @apply bg-info/20 inset-ring-1 text-info-foreground dark:bg-info-dark/20 dark:text-info-foreground-dark inset-ring-info/90 dark:inset-ring-info-dark/30;
+  }
+
+  /* Sizes */
+  &.b-size-sm {
+    @apply p-2 text-sm;
+  }
+  &.b-size-md {
+    @apply p-4 text-base;
+  }
+  &.b-size-lg {
+    @apply p-6 text-lg;
   }
 
   .close-btn {
-    @apply self-start flex-shrink-0 bg-transparent border-none cursor-pointer text-inherit flex items-start p-0;
+    @apply ml-auto bg-transparent border-0 cursor-pointer p-1 rounded;
   }
 }

package/src/components/badge.css

@@ -1,36 +1,37 @@
 span[b-badge] {
-  @apply inline-flex justify-center items-center rounded-full transition-colors duration-150 box-border;
+  /* Base */
+  @apply inline-flex items-center gap-2 px-2 py-1 font-medium text-sm rounded-size-md;
+  @apply bg-primary text-primary-foreground dark:bg-primary-dark dark:text-primary-foreground-dark;
 
   /* Variants */
-  &.b-badge-variant-primary {
-    @apply bg-primary text-primary-foreground border border-primary;
-    @apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:border-primary-dark;
+  &.b-variant-primary {
+    @apply bg-primary text-primary-foreground dark:bg-primary-dark dark:text-primary-foreground-dark;
   }
-  &.b-badge-variant-secondary {
-    @apply bg-secondary text-secondary-foreground;
-    @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
+
+  &.b-variant-secondary {
+    @apply bg-secondary text-secondary-foreground dark:bg-secondary-dark dark:text-secondary-foreground-dark;
   }
-  &.b-badge-variant-ghost {
-    @apply bg-transparent hover:bg-primary/10;
-    @apply dark:hover:bg-primary-dark/10;
+
+  &.b-variant-ghost {
+    @apply bg-transparent text-secondary-foreground dark:text-secondary-foreground-dark;
   }
-  &.b-badge-variant-outlined {
-    @apply bg-transparent inset-ring-1 inset-ring-secondary-foreground/30 hover:bg-primary/5;
-    @apply dark:inset-ring-secondary-foreground-dark/30 dark:hover:bg-primary-dark/5;
+
+  &.b-variant-outlined {
+    @apply bg-transparent inset-ring-1 inset-ring-ring text-secondary-foreground dark:inset-ring-ring-dark dark:text-secondary-foreground-dark;
   }
-  &.b-badge-variant-destructive {
-    @apply bg-destructive text-destructive-foreground inset-ring-1 inset-ring-destructive hover:bg-destructive/90 hover:inset-ring-destructive/80;
-    @apply dark:bg-destructive-dark dark:text-destructive-foreground-dark dark:inset-ring-destructive-dark dark:hover:bg-destructive-dark/90 dark:hover:inset-ring-destructive-dark/80;
+
+  &.b-variant-destructive {
+    @apply bg-destructive text-destructive-foreground dark:bg-destructive-dark dark:text-destructive-foreground-dark;
   }
 
   /* Sizes */
-  &.b-badge-size-sm {
-    @apply px-1.5 py-0.5 text-xs;
+  &.b-size-sm {
+    @apply px-1.5 py-0.5 text-xs rounded-size-sm;
   }
-  &.b-badge-size-md {
-    @apply px-2.5 py-1 text-sm;
+  &.b-size-md {
+    @apply px-2 py-1 text-sm rounded-size-md;
   }
-  &.b-badge-size-lg {
-    @apply px-3.5 py-1.5 text-base;
+  &.b-size-lg {
+    @apply px-2.5 py-1 text-base rounded-size-lg;
   }
 }

package/src/components/button.css

@@ -1,62 +1,73 @@
+/* Button styles — grouped sections: Base / Variants / Sizes / States / Squared */
 button[b-button] {
-  @apply transition-colors duration-150 flex items-center justify-center gap-x-2 disabled:opacity-50 disabled:cursor-not-allowed;
+  /* Base */
+  @apply transition-colors duration-150 flex items-center justify-center gap-x-1.5 disabled:opacity-50 disabled:cursor-not-allowed;
+
+  /* Default spacing/typography applied when no explicit size is present */
+  @apply px-3 py-0 text-sm h-8 rounded-size-md;
+
+  /* Default visual (primary) applied when no explicit variant is present */
+  @apply bg-primary text-primary-foreground hover:bg-primary/80;
+  @apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:hover:bg-primary-dark/80;
 
   /* Variants */
-  &.b-button-variant-primary {
+  &.b-variant-primary {
     @apply bg-primary text-primary-foreground hover:bg-primary/80;
     @apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:hover:bg-primary-dark/80;
   }
-  &.b-button-variant-secondary {
+  &.b-variant-secondary {
     @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
     @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark/80;
   }
-  &.b-button-variant-ghost {
-    @apply bg-transparent hover:bg-primary/10;
-    @apply dark:hover:bg-primary-dark/10;
+  &.b-variant-ghost {
+    /* Ghost is transparent with a subtle hover; text uses secondary foreground */
+    @apply bg-transparent text-secondary-foreground hover:bg-secondary;
+    @apply dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark;
   }
-  &.b-button-variant-outlined {
-    @apply bg-transparent inset-ring-1 inset-ring-secondary hover:bg-primary/5;
-    @apply dark:inset-ring-secondary-dark dark:hover:bg-primary-dark/5;
+  &.b-variant-outlined {
+    /* Outlined keeps a transparent background and an inset ring */
+    @apply bg-secondary/10 text-secondary-foreground inset-ring inset-ring-ring hover:bg-primary/5 shadow-xs;
+    @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-primary-dark/5 shadow-xs;
   }
-  &.b-button-variant-destructive {
+  &.b-variant-destructive {
     @apply bg-destructive text-destructive-foreground inset-ring-1 inset-ring-destructive hover:bg-destructive/90 hover:inset-ring-destructive/80;
     @apply dark:bg-destructive-dark dark:text-destructive-foreground-dark dark:inset-ring-destructive-dark dark:hover:bg-destructive-dark/90 dark:hover:inset-ring-destructive-dark/80;
   }
 
   /* Sizes */
-  &.b-button-size-sm {
-    @apply px-2 py-1 text-sm rounded-size-sm;
+  &.b-size-sm {
+    @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1;
   }
-  &.b-button-size-md {
-    @apply px-4 py-2 text-base rounded-size-md;
+  &.b-size-md {
+    @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5;
   }
-  &.b-button-size-lg {
-    @apply px-6 py-3 text-lg rounded-size-lg;
+  &.b-size-lg {
+    @apply px-4 py-0 text-base h-10 rounded-size-lg gap-2;
   }
 
-  /* Active state */
+  /* States */
   &.b-active,
   &:focus-visible {
     @apply outline-2 outline-offset-4 outline-primary;
     @apply dark:outline-primary-dark;
   }
-  &.b-button-variant-destructive.b-active,
-  &.b-button-variant-destructive:focus-visible {
+  &.b-variant-destructive.b-active,
+  &.b-variant-destructive:focus-visible {
     @apply outline-2 outline-offset-4 outline-destructive;
     @apply dark:outline-destructive-dark;
   }
 
-  /* Squared (square button, useful for icons) */
-  &.b-button-squared {
+  /* Squared */
+  &.b-squared {
     @apply aspect-square p-0 flex items-center justify-center;
-    &.b-button-size-sm {
-      @apply size-6;
-    }
-    &.b-button-size-md {
-      @apply size-9;
-    }
-    &.b-button-size-lg {
-      @apply size-12;
-    }
+  }
+  &.b-squared.b-size-sm {
+    @apply size-6;
+  }
+  &.b-squared.b-size-md {
+    @apply size-9;
+  }
+  &.b-squared.b-size-lg {
+    @apply size-12;
   }
 }

package/src/components/card.css

@@ -1,6 +1,6 @@
 b-card {
-  @apply flex flex-col gap-4 p-6 bg-background inset-ring-1 inset-ring-secondary rounded-size-lg;
-  @apply dark:bg-background-dark dark:inset-ring-secondary-dark;
+  @apply flex flex-col gap-4 p-6 bg-background inset-ring-1 inset-ring-ring rounded-size-lg;
+  @apply dark:bg-background-dark dark:inset-ring-ring-dark;
 
   b-card-header {
     @apply flex flex-col gap-1;

package/src/components/checkbox.css

@@ -1,20 +1,31 @@
 input[b-checkbox] {
+  /* Base styles */
+  @apply w-5 h-5 rounded-md;
+
   /* Sizes */
-  &.b-checkbox-size-sm {
+  &.b-size-sm {
     @apply w-4 h-4 rounded-sm;
   }
-  &.b-checkbox-size-md {
+  &.b-size-md {
     @apply w-5 h-5 rounded-md;
   }
-  &.b-checkbox-size-lg {
+  &.b-size-lg {
     @apply w-7 h-7 rounded-lg;
   }
 
   &:checked {
-    @apply accent-primary dark:accent-primary-dark;
+    @apply accent-primary;
+
+    @media (prefers-color-scheme: dark) {
+      @apply accent-primary-dark;
+    }
   }
 
   &:focus-visible {
-    @apply outline-2 outline-offset-4 outline-primary dark:outline-primary-dark;
+    @apply outline-2 outline-offset-4 outline-primary;
+
+    @media (prefers-color-scheme: dark) {
+      @apply outline-primary-dark;
+    }
   }
 }

package/src/components/input-group.css

@@ -1,11 +1,23 @@
 b-input-group {
-  /* Base container styles mirroring input.css approach */
-  @apply flex items-center overflow-hidden inset-ring-1 inset-ring-secondary bg-background text-font font-sans transition-colors;
-  @apply dark:inset-ring-secondary-dark dark:bg-background-dark dark:text-font-dark;
+  /* Base */
+  @apply flex overflow-hidden items-center;
+  @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
+  @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark;
+
+  /* Base md by default */
+  @apply px-2.5 py-0 text-sm h-8 rounded-size-md gap-1.5;
+
+  &:has(> button[b-button]:first-child) {
+    @apply !pl-1;
+  }
+
+  &:has(> button[b-button]:last-child) {
+    @apply !pr-1;
+  }
 
   /* Internal input adjustments when placed inside group */
   input[b-input] {
-    @apply !outline-0 p-0 inset-ring-0 !w-full !rounded-none bg-transparent;
+    @apply !outline-0 !px-0 inset-ring-0 !w-full !rounded-none bg-transparent hover:bg-transparent;
   }
 
   /* Focus state when any inner input is focused (and not readonly) */
@@ -42,55 +54,34 @@ b-input-group {
   }
 
   /* Size variants (normalized to Tailwind scale, matching input sizes) */
-  &:has(.b-input-size-sm) {
+  &:has(input[b-input].b-size-sm) {
     /* small */
-    @apply py-1 h-7 text-sm rounded-size-sm;
-
-    &:has(> :first-child:not(input[b-input])) {
-      @apply pl-2;
-    }
-
-    &:has(> :last-child:not(input[b-input])) {
-      @apply pr-2;
-    }
+    @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1;
   }
-  &:has(.b-input-size-md) {
-    /* medium */
-    @apply py-2 h-10 text-base rounded-size-md;
 
-    &:has(> :first-child:not(input[b-input])) {
-      @apply pl-3;
+  &:has(input[b-input].b-size-md) {
+    /* medium */
+    @apply px-2.5 py-0 text-sm h-8 rounded-size-md gap-1.5;
 
-      &:has(> button[b-button]:first-child) {
-        @apply !pl-1.5;
-      }
+    &:has(> button[b-button]:first-child) {
+      @apply !pl-1;
     }
 
-    &:has(> :last-child:not(input[b-input])) {
-      @apply pr-3;
-
-      &:has(> button[b-button]:last-child) {
-        @apply !pr-1.5;
-      }
+    &:has(> button[b-button]:last-child) {
+      @apply !pr-1;
     }
   }
-  &:has(.b-input-size-lg) {
-    /* large */
-    @apply py-3 h-13 text-lg rounded-size-lg;
 
-    &:has(> :first-child:not(input[b-input])) {
-      @apply pl-4;
+  &:has(input[b-input].b-size-lg) {
+    /* large */
+    @apply px-3 py-0 text-base h-10 rounded-size-lg gap-2;
 
-      &:has(> button[b-button]:first-child) {
-        @apply !pl-1.5;
-      }
+    &:has(> button[b-button]:first-child) {
+      @apply !pl-1;
     }
-    &:has(> :last-child:not(input[b-input])) {
-      @apply pr-4;
 
-      &:has(> button[b-button]:last-child) {
-        @apply !pr-1.5;
-      }
+    &:has(> button[b-button]:last-child) {
+      @apply !pr-1;
     }
   }
 }

package/src/components/input.css

@@ -1,6 +1,12 @@
+/* Input styles — Base / Sizes / States */
 input[b-input] {
-  @apply inset-ring-1 inset-ring-secondary transition-colors text-base font-sans bg-background text-font min-w-1/2;
-  @apply dark:bg-background-dark dark:text-font-dark dark:inset-ring-secondary-dark;
+  /* Base */
+  @apply px-3 py-0 text-sm h-8 rounded-size-md;
+  @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring hover:bg-primary/5 shadow-xs;
+  @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-primary-dark/5 shadow-xs;
+
+  /* Disabled */
+  @apply disabled:opacity-50 disabled:cursor-not-allowed;
 
   &:focus-visible:not(:read-only) {
     @apply outline-2 outline-offset-4 outline-primary;
@@ -30,13 +36,14 @@ input[b-input] {
     @apply opacity-60 pointer-events-none;
   }
 
-  &.b-input-size-sm {
-    @apply px-2 py-1 h-7 text-sm rounded-size-sm;
+  /* Sizes */
+  &.b-size-sm {
+    @apply px-2 py-0 text-xs h-6 rounded-size-sm;
   }
-  &.b-input-size-md {
-    @apply px-3 py-2 h-10 text-base rounded-size-md;
+  &.b-size-md {
+    @apply px-2.5 py-0 text-sm h-8 rounded-size-md;
   }
-  &.b-input-size-lg {
-    @apply px-4 py-3 h-13 text-lg rounded-size-lg;
+  &.b-size-lg {
+    @apply px-3 py-0 text-base h-10 rounded-size-lg;
   }
 }

package/src/components/menu.css

@@ -1,7 +1,33 @@
 b-menu {
   @apply flex flex-col;
 
-  &.b-menu-size-sm {
+  /* Base */
+  @apply text-base rounded-size-md;
+
+  &:not(:has(b-menu-group)) {
+    @apply p-1 gap-1;
+  }
+
+  b-menu-group {
+    @apply p-1 gap-1;
+  }
+
+  b-menu-label {
+    @apply px-3 py-0 text-sm h-8 gap-1.5 flex items-center;
+  }
+
+  button[b-menu-item],
+  button[b-menu-item-radio],
+  button[b-menu-item-checkbox] {
+    @apply px-3 py-0 text-sm h-8 rounded-size-sm gap-1.5;
+
+    &.b-squared {
+      aspect-ratio: 1 / 1;
+      @apply w-10 min-w-10 h-10 min-h-10 !p-0 flex items-center justify-center text-center;
+    }
+  }
+
+  &.b-size-sm {
     @apply text-sm rounded-size-sm box-border;
 
     &:not(:has(b-menu-group)) {
@@ -13,22 +39,22 @@ b-menu {
     }
 
     b-menu-label {
-      @apply !py-0.5 !px-2;
+      @apply px-2 py-0 text-xs h-6 gap-1 flex items-center;
     }
 
     button[b-menu-item],
     button[b-menu-item-radio],
     button[b-menu-item-checkbox] {
-      @apply !py-1 !px-2 rounded-size-xs;
+      @apply px-2 py-0 text-xs h-6 rounded-size-xs gap-1;
 
-      &.squared {
+      &.b-squared {
         aspect-ratio: 1 / 1;
         @apply w-8 min-w-8 h-8 min-h-8 !p-0 flex items-center justify-center text-center;
       }
     }
   }
 
-  &.b-menu-size-md {
+  &.b-size-md {
     @apply text-base rounded-size-md;
 
     &:not(:has(b-menu-group)) {
@@ -40,22 +66,22 @@ b-menu {
     }
 
     b-menu-label {
-      @apply !py-1 !px-3;
+      @apply px-3 py-0 text-sm h-8 gap-1.5 flex items-center;
     }
 
     button[b-menu-item],
     button[b-menu-item-radio],
     button[b-menu-item-checkbox] {
-      @apply !py-1.5 !px-3 rounded-size-sm;
+      @apply px-3 py-0 text-sm h-8 rounded-size-sm gap-1.5;
 
-      &.squared {
+      &.b-squared {
         aspect-ratio: 1 / 1;
         @apply w-10 min-w-10 h-10 min-h-10 !p-0 flex items-center justify-center text-center;
       }
     }
   }
 
-  &.b-menu-size-lg {
+  &.b-size-lg {
     @apply text-lg rounded-size-lg;
 
     &:not(:has(b-menu-group)) {
@@ -67,15 +93,15 @@ b-menu {
     }
 
     b-menu-label {
-      @apply !py-1.5 !px-4;
+      @apply px-4 py-0 text-base h-10 gap-2 flex items-center;
     }
 
     button[b-menu-item],
     button[b-menu-item-radio],
     button[b-menu-item-checkbox] {
-      @apply !py-2 !px-4 rounded-size-md;
+      @apply px-4 py-0 text-base h-10 rounded-size-md gap-2;
 
-      &.squared {
+      &.b-squared {
         aspect-ratio: 1 / 1;
         @apply w-12 min-w-12 h-12 min-h-12 !p-0 flex items-center justify-center text-center;
       }
@@ -89,7 +115,7 @@ b-menu {
     @apply hover:bg-secondary/50;
     @apply dark:hover:bg-secondary-dark/50;
 
-    &.destructive {
+    &.b-destructive {
       @apply bg-destructive/10 text-destructive;
       @apply dark:bg-destructive-dark/10 dark:text-destructive-dark;
       @apply hover:bg-destructive/20;
@@ -102,7 +128,7 @@ b-menu {
     }
 
     &[aria-selected='true'],
-    &.active {
+    &.b-active {
       @apply bg-secondary text-secondary-foreground;
       @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
     }
@@ -125,13 +151,9 @@ b-menu {
       @apply dark:border-secondary-dark;
     }
   }
-
-  b-menu-label {
-    @apply font-medium;
-  }
 }
 
 .cdk-overlay-container b-menu {
-  @apply inset-ring-1 inset-ring-secondary bg-background;
-  @apply dark:inset-ring-secondary-dark dark:bg-background-dark;
+  @apply inset-ring-1 inset-ring-ring bg-background shadow-xs;
+  @apply dark:inset-ring-ring-dark/60 dark:bg-background-dark;
 }

package/src/components/option.css

@@ -3,6 +3,9 @@ li[b-option] {
   @apply hover:bg-secondary/30;
   @apply dark:hover:bg-secondary-dark/30;
 
+  /* Default */
+  @apply px-3 py-0 text-sm h-8 rounded-size-sm gap-1.5;
+
   &.cdk-option-active {
     @apply bg-secondary/30;
     @apply dark:bg-secondary-dark/30;
@@ -23,12 +26,12 @@ li[b-option] {
   }
 }
 
-.b-select-size-sm li[b-option] {
-  @apply text-sm !py-1 !px-2 rounded-size-xs;
+.b-size-sm li[b-option] {
+  @apply px-2 py-0 text-xs h-6 rounded-size-xs gap-1;
 }
-.b-select-size-md li[b-option] {
-  @apply text-base !py-1.5 !px-3 rounded-size-sm;
+.b-size-md li[b-option] {
+  @apply px-3 py-0 text-sm h-8 rounded-size-sm gap-1.5;
 }
-.b-select-size-lg li[b-option] {
-  @apply text-lg !py-2 !px-4 rounded-size-md;
+.b-size-lg li[b-option] {
+  @apply px-4 py-0 text-base h-10 rounded-size-md gap-2;
 }

package/src/components/otp.css

@@ -2,11 +2,15 @@ b-otp {
   display: flex;
   gap: 0.5rem;
   justify-content: center;
+
+  input[b-otp-digit] {
+    @apply w-8 h-8 py-0 text-sm rounded-size-md p-0;
+  }
 }
 
 input[b-otp-digit] {
-  @apply box-border text-center font-sans text-base transition-opacity bg-background text-font inset-ring-1 inset-ring-secondary;
-  @apply dark:bg-background-dark dark:text-font-dark dark:inset-ring-secondary-dark;
+  @apply box-border text-center font-sans text-base transition-opacity bg-background text-font inset-ring-1 inset-ring-ring;
+  @apply dark:bg-background-dark dark:text-font-dark dark:inset-ring-ring-dark;
 
   &:read-only:not(:disabled) {
     @apply border-0;
@@ -37,16 +41,16 @@ input[b-otp-digit] {
   &:disabled {
     @apply opacity-60 pointer-events-none;
   }
+}
 
-  &.b-otp-size-sm {
-    @apply w-7 h-7 text-sm rounded-size-sm p-0;
-  }
-  &.b-otp-size-md {
-    @apply w-9 h-9 text-base rounded-size-md p-0;
-  }
-  &.b-otp-size-lg {
-    @apply w-11 h-11 text-lg rounded-size-lg p-0;
-  }
+b-otp.b-size-sm input[b-otp-digit] {
+  @apply w-6 h-6 text-xs rounded-size-sm p-0;
+}
+b-otp.b-size-md input[b-otp-digit] {
+  @apply w-8 h-8 py-0 text-sm rounded-size-md p-0;
+}
+b-otp.b-size-lg input[b-otp-digit] {
+  @apply w-10 h-10 text-base rounded-size-lg p-0;
 }
 
 b-otp.ng-invalid.ng-touched input[b-otp-digit],

package/src/components/range.css

@@ -3,27 +3,27 @@ input[b-range] {
 }
 
 input[b-range]::-webkit-slider-thumb {
-  @apply appearance-none rounded-full cursor-pointer transition-colors inset-ring-1 inset-ring-secondary border-0;
-  @apply bg-primary dark:bg-primary-dark dark:inset-ring-secondary-dark;
+  @apply appearance-none rounded-full cursor-pointer transition-colors inset-ring-1 inset-ring-ring border-0;
+  @apply bg-primary dark:bg-primary-dark dark:inset-ring-ring-dark;
 }
 
-input[b-range].b-range-size-sm {
-  @apply h-1;
+input[b-range] {
+  @apply h-2;
 }
-input[b-range].b-range-size-sm::-webkit-slider-thumb {
-  @apply w-3 h-3;
+input[b-range]::-webkit-slider-thumb {
+  @apply w-5 h-5;
 }
 
-input[b-range].b-range-size-md {
-  @apply h-2;
+input[b-range].b-size-sm {
+  @apply h-1;
 }
-input[b-range].b-range-size-md::-webkit-slider-thumb {
-  @apply w-5 h-5;
+input[b-range].b-size-sm::-webkit-slider-thumb {
+  @apply w-3 h-3;
 }
 
-input[b-range].b-range-size-lg {
+input[b-range].b-size-lg {
   @apply h-3;
 }
-input[b-range].b-range-size-lg::-webkit-slider-thumb {
+input[b-range].b-size-lg::-webkit-slider-thumb {
   @apply w-6 h-6;
 }

package/src/components/select-options.css

@@ -1,5 +1,5 @@
 ul[b-select-options] {
-  @apply list-none p-1 box-border m-0 relative bg-background shadow-xs rounded-lg inset-ring-1 inset-ring-secondary flex flex-col gap-1 w-full overflow-y-auto;
+  @apply list-none p-1 box-border m-0 relative bg-background shadow-xs rounded-lg inset-ring-1 inset-ring-ring flex flex-col gap-1 w-full overflow-y-auto;
 
   .no-options-message {
     @apply py-1 px-2 text-sm;

package/src/components/select.css

@@ -2,45 +2,48 @@ b-select {
   @apply flex gap-1;
 
   button[b-select-trigger] {
-    @apply transition-colors duration-150 flex items-center justify-center gap-x-2 disabled:opacity-50 disabled:cursor-not-allowed;
-    @apply bg-transparent inset-ring-1 inset-ring-secondary hover:bg-primary/5 flex-1;
-    @apply dark:inset-ring-secondary-dark dark:hover:bg-primary-dark/5;
+    /* Base */
+    @apply transition-colors duration-150 flex items-center justify-center gap-x-1.5 disabled:opacity-50 disabled:cursor-not-allowed;
 
-    b-select-value {
-      @apply flex-1 text-start whitespace-nowrap overflow-hidden text-ellipsis;
-    }
+    /* Default spacing/typography applied when no explicit size is present */
+    @apply px-3 py-0 text-sm h-8 rounded-size-md gap-2;
+
+    /* Default visual */
+    @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring hover:bg-primary/5 shadow-xs;
+    @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-primary-dark/5 shadow-xs;
 
     svg {
       @apply -mx-1;
+      @apply size-5;
     }
-  }
 
-  &.b-select-size-sm button[b-select-trigger] {
-    @apply px-2 py-1 text-sm rounded-size-sm;
+    &.b-size-sm {
+      @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1.5;
 
-    svg {
-      @apply size-4;
+      svg {
+        @apply size-4;
+      }
     }
-  }
 
-  &.b-select-size-md button[b-select-trigger] {
-    @apply px-4 py-2 text-base rounded-size-md;
-    svg {
-      @apply size-5;
+    &.b-size-md {
+      @apply px-3 py-0 text-sm h-8 rounded-size-md gap-2;
+      svg {
+        @apply size-5;
+      }
     }
-  }
 
-  &.b-select-size-lg button[b-select-trigger] {
-    @apply px-6 py-3 text-lg rounded-size-lg;
+    &.b-size-lg {
+      @apply px-4 py-0 text-base h-10 rounded-size-lg gap-2.5;
 
-    svg {
-      @apply size-6;
+      svg {
+        @apply size-6;
+      }
     }
   }
 
   &.ng-invalid.ng-touched,
   &.ng-invalid.ng-dirty {
-    button {
+    button[b-select-trigger] {
       @apply text-destructive inset-ring-destructive/20 bg-destructive/10 hover:bg-destructive/20;
       @apply dark:text-destructive-dark dark:inset-ring-destructive-dark/20 dark:bg-destructive-dark/10 dark:hover:bg-destructive-dark/20;
 
@@ -58,16 +61,32 @@ b-select {
 }
 
 ul[b-select-content] {
-  @apply list-none box-border m-0 relative bg-background shadow-xs inset-ring-1 inset-ring-secondary flex flex-col w-full overflow-y-auto;
-  @apply dark:bg-background-dark dark:shadow-xs dark:inset-ring-secondary-dark;
+  @apply list-none box-border m-0 relative flex flex-col w-full overflow-y-auto;
+  @apply bg-background text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
+  @apply dark:bg-background-dark dark:text-secondary-foreground-dark dark:inset-ring-ring-dark shadow-xs;
+
   @apply outline-none;
+  max-height: 320px;
+
+  @apply text-base rounded-size-md p-1 gap-1;
 
   .no-options-message {
     @apply py-1 px-2 text-sm;
   }
 
   input[b-input] {
-    @apply outline-none;
+    @apply outline-none sticky top-0 z-10 bg-background;
+    @apply dark:bg-background-dark;
+  }
+
+  &.b-size-sm {
+    @apply text-sm rounded-size-sm p-0.5 gap-0.5;
+  }
+  &.b-size-md {
+    @apply text-base rounded-size-md p-1 gap-1;
+  }
+  &.b-size-lg {
+    @apply text-lg rounded-size-lg p-1.5 gap-1.5;
   }
 
   &.b-select-content-entering-top {
@@ -103,16 +122,6 @@ ul[b-select-content] {
   }
 }
 
-.b-select-size-sm ul[b-select-content] {
-  @apply text-sm p-0.5 gap-0.5 rounded-size-sm;
-}
-.b-select-size-md ul[b-select-content] {
-  @apply text-base p-1 gap-1 rounded-size-md;
-}
-.b-select-size-lg ul[b-select-content] {
-  @apply text-lg p-1.5 gap-1.5 rounded-size-lg;
-}
-
 @keyframes overlay-entering-top {
   from {
     opacity: 0;

package/src/components/switch.css

@@ -9,19 +9,19 @@ input[b-switch] {
     @apply flex rounded-full shadow-md transition-transform duration-200 justify-center items-center bg-primary-foreground will-change-transform content-[''];
   }
 
-  &.b-switch-size-sm {
+  &.b-size-sm {
     @apply h-5 w-8;
     &::after {
       @apply h-3 w-3 m-1;
     }
   }
-  &.b-switch-size-md {
+  &.b-size-md {
     @apply h-6 w-10;
     &::after {
       @apply h-4 w-4 m-1;
     }
   }
-  &.b-switch-size-lg {
+  &.b-size-lg {
     @apply h-8 w-14;
     &::after {
       @apply h-6 w-6 m-1;
@@ -29,17 +29,17 @@ input[b-switch] {
   }
 
   &:checked {
-    &.b-switch-size-sm {
+    &.b-size-sm {
       &::after {
         @apply transform translate-x-[0.7rem];
       }
     }
-    &.b-switch-size-md {
+    &.b-size-md {
       &::after {
         @apply transform translate-x-[1rem];
       }
     }
-    &.b-switch-size-lg {
+    &.b-size-lg {
       &::after {
         @apply transform translate-x-[1.5rem];
       }

package/src/components/tabs.css

@@ -1,8 +1,15 @@
 b-tabs {
-  @apply flex bg-secondary outline-none inset-ring-1 inset-ring-primary/10;
-  @apply dark:bg-secondary-dark dark:inset-ring-primary-dark/10;
+  @apply flex items-center;
+  @apply bg-secondary/50 text-secondary-foreground;
+  @apply dark:bg-secondary-dark/50 dark:text-secondary-foreground-dark;
+
+  /* Base md by default */
+  @apply px-1 py-0 text-sm h-8 rounded-size-md gap-1.5;
 
   b-tab {
+    @apply flex items-center justify-center;
+    @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1;
+
     &[aria-selected='true'] {
       @apply bg-primary-foreground inset-ring-1 inset-ring-primary/10;
       @apply dark:bg-primary-foreground-dark dark:inset-ring-primary-dark/10;
@@ -19,27 +26,27 @@ b-tabs {
     @apply dark:outline-primary-dark;
   }
 
-  &.b-tabs-size-sm {
-    @apply h-7 rounded-size-sm p-0.5 gap-0.5;
+  &.b-size-sm {
+    @apply px-0.5 py-0 text-xs h-6 rounded-size-sm gap-0.5;
 
     b-tab {
-      @apply px-2 text-sm rounded-size-xs flex items-center justify-center;
+      @apply px-2 py-0 text-xs h-5 rounded-size-sm gap-1;
     }
   }
 
-  &.b-tabs-size-md {
-    @apply h-10 rounded-size-md p-1 gap-1;
+  &.b-size-md {
+    @apply px-1 py-0 text-sm h-8 rounded-size-md gap-1;
 
     b-tab {
-      @apply px-4 text-base rounded-size-sm flex items-center justify-center;
+      @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1;
     }
   }
 
-  &.b-tabs-size-lg {
-    @apply h-13 rounded-size-lg p-1.5 gap-1.5;
+  &.b-size-lg {
+    @apply px-1 py-0 text-base h-10 rounded-size-lg gap-1;
 
     b-tab {
-      @apply px-6 text-lg rounded-size-md flex items-center justify-center;
+      @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5;
     }
   }
 }

package/src/components/textarea.css

@@ -1,6 +1,7 @@
 textarea[b-textarea] {
-  @apply inset-ring-1 inset-ring-secondary transition-colors text-base font-sans bg-background text-font min-w-1/2;
-  @apply dark:bg-background-dark dark:text-font-dark dark:inset-ring-secondary-dark;
+  @apply px-2.5 py-1 text-sm rounded-size-md;
+  @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring hover:bg-primary/5 shadow-xs;
+  @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-primary-dark/5 shadow-xs;
 
   &:focus-visible:not(:read-only) {
     @apply outline-2 outline-offset-4 outline-primary dark:outline-primary-dark;
@@ -26,13 +27,13 @@ textarea[b-textarea] {
     @apply opacity-60 pointer-events-none;
   }
 
-  &.b-textarea-size-sm {
-    @apply px-2 py-1 text-sm;
+  &.b-size-sm {
+    @apply px-2 py-1 text-xs rounded-size-sm;
   }
-  &.b-textarea-size-md {
-    @apply px-3 py-2 text-base;
+  &.b-size-md {
+    @apply px-2.5 py-1 text-sm rounded-size-md;
   }
-  &.b-textarea-size-lg {
-    @apply px-4 py-3 text-lg;
+  &.b-size-lg {
+    @apply px-3 py-2 text-base rounded-size-lg;
   }
 }

package/src/components/tooltip.css

@@ -1,7 +1,40 @@
 b-tooltip-content {
-  @apply whitespace-nowrap rounded-lg shadow transition-colors bg-background  text-base font-sans;
+  @apply whitespace-nowrap rounded-lg shadow flex items-center justify-center gap-x-1.5 bg-background  text-base font-sans;
   @apply dark:bg-background-dark;
 
+  /* Variants */
+  /* Default (primary) */
+  @apply bg-primary text-primary-foreground hover:bg-primary/80;
+  @apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:hover:bg-primary-dark/80;
+
+  &.b-variant-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+    @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark/80;
+  }
+  &.b-variant-ghost {
+    @apply bg-transparent text-secondary-foreground hover:bg-secondary shadow-none;
+    @apply dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark shadow-none;
+  }
+  &.b-variant-outlined {
+    @apply bg-secondary/10 text-secondary-foreground inset-ring inset-ring-ring hover:bg-primary/5 shadow-xs;
+    @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-primary-dark/5 shadow-xs;
+  }
+  &.b-variant-destructive {
+    @apply bg-destructive text-destructive-foreground inset-ring-1 inset-ring-destructive hover:bg-destructive/90 hover:inset-ring-destructive/80;
+    @apply dark:bg-destructive-dark dark:text-destructive-foreground-dark dark:inset-ring-destructive-dark dark:hover:bg-destructive-dark/90 dark:hover:inset-ring-destructive-dark/80;
+  }
+
+  /* Sizes */
+  /* Default (md) */
+  @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5;
+
+  &.b-size-sm {
+    @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1;
+  }
+  &.b-size-lg {
+    @apply px-4 py-0 text-base h-10 rounded-size-lg gap-2;
+  }
+
   &.b-tooltip-content-entering-top {
     animation: tooltip-entering-top 0.1s ease forwards;
   }
@@ -28,39 +61,6 @@ b-tooltip-content {
   }
 }
 
-/* Variants */
-.b-tooltip-variant-primary b-tooltip-content {
-  @apply bg-primary text-primary-foreground border border-primary;
-  @apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:border-primary-dark;
-}
-.b-tooltip-variant-secondary b-tooltip-content {
-  @apply bg-secondary text-secondary-foreground;
-  @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
-}
-.b-tooltip-variant-ghost b-tooltip-content {
-  @apply bg-transparent  hover:bg-primary/10 shadow-none;
-  @apply dark:hover:bg-primary-dark/10;
-}
-.b-tooltip-variant-outlined b-tooltip-content {
-  @apply bg-transparent inset-ring-1 inset-ring-secondary-foreground/30 hover:bg-primary/5;
-  @apply dark:inset-ring-secondary-foreground-dark/30 dark:hover:bg-primary-dark/5;
-}
-.b-tooltip-variant-destructive b-tooltip-content {
-  @apply bg-destructive text-destructive-foreground inset-ring-1 inset-ring-destructive hover:bg-destructive/90 hover:inset-ring-destructive/80;
-  @apply dark:bg-destructive-dark dark:text-destructive-foreground-dark dark:inset-ring-destructive-dark dark:hover:bg-destructive-dark/90 dark:hover:inset-ring-destructive-dark/80;
-}
-
-/* Sizes */
-.b-tooltip-size-sm b-tooltip-content {
-  @apply px-2 py-1 text-sm;
-}
-.b-tooltip-size-md b-tooltip-content {
-  @apply px-3 py-2 text-base;
-}
-.b-tooltip-size-lg b-tooltip-content {
-  @apply px-4 py-3 text-lg;
-}
-
 @keyframes tooltip-entering-top {
   from {
     opacity: 0;

package/src/components/tree.css

@@ -4,9 +4,9 @@ b-tree {
   b-tree-node {
     @apply flex flex-col box-border;
 
-    &.active section {
-      @apply bg-background;
-      @apply dark:bg-background-dark;
+    &.b-active section {
+      @apply bg-secondary text-secondary-foreground;
+      @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
     }
 
     section {

package/src/index.css

@@ -26,8 +26,9 @@
   --color-font: #0a0a0a;
   --color-primary: #0a0a0a;
   --color-primary-foreground: #fff;
-  --color-secondary: color-mix(in srgb, #fff, #0a0a0a 8%);
+  --color-secondary: #f5f5f5;
   --color-secondary-foreground: #0a0a0a;
+  --color-ring: #e0e0e0;
   --color-destructive: #e53935;
   --color-destructive-foreground: #fff;
   --color-success: #b7e4c7;
@@ -43,8 +44,9 @@
   --color-bg-dark: #0a0a0a;
   --color-primary-dark: #fff;
   --color-primary-foreground-dark: #0a0a0a;
-  --color-secondary-dark: color-mix(in srgb, #0a0a0a, #fff 8%);
+  --color-secondary-dark: #262626;
   --color-secondary-foreground-dark: #fff;
+  --color-ring-dark: #ffffff26;
   --color-destructive-dark: #ff6659;
   --color-destructive-foreground-dark: #0a0a0a;
   --color-success-dark: #22543d;
@@ -62,7 +64,6 @@
 @import './components/button-group.css';
 @import './components/button.css';
 @import './components/checkbox.css';
-@import './components/color-picker.css';
 @import './components/input-group.css';
 @import './components/input.css';
 @import './components/label.css';
@@ -77,7 +78,6 @@
 @import './components/sheet.css';
 @import './components/spinner.css';
 @import './components/switch.css';
-@import './components/table.css';
 @import './components/tabs.css';
 @import './components/textarea.css';
 @import './components/tooltip.css';

package/src/components/color-picker.css

@@ -1,74 +0,0 @@
-input[b-color-picker] {
-  @apply w-full relative bg-background dark:bg-background-dark p-0 cursor-pointer transition-colors text-base font-sans;
-
-  &::-webkit-color-swatch-wrapper {
-    @apply w-full h-full p-0;
-  }
-
-  &::-webkit-color-swatch {
-    @apply rounded-lg;
-
-    &:focus-visible:not(:read-only) {
-      @apply outline-2 outline-offset-4 outline-primary;
-      @apply dark:outline-primary-dark;
-    }
-  }
-
-  &.show-color {
-    &::before {
-      @apply flex absolute text-[var(--text-color)] content-[var(--value)] top-1/2 left-1/2 text-base font-display -translate-y-1/2 -translate-x-1/2;
-    }
-  }
-
-  &.b-color-picker-size-sm {
-    @apply h-7 rounded-size-sm;
-
-    &::-webkit-color-swatch {
-      @apply rounded-size-sm inset-ring-1 inset-ring-secondary transition-colors;
-      @apply dark:inset-ring-secondary-dark;
-
-      &:focus-visible:not(:read-only) {
-        @apply outline-2 outline-offset-4 outline-primary;
-        @apply dark:outline-primary-dark;
-      }
-    }
-
-    &::before {
-      @apply text-xs;
-    }
-  }
-
-  &.b-color-picker-size-md {
-    @apply h-9 rounded-size-md;
-
-    &::-webkit-color-swatch {
-      @apply rounded-size-md inset-ring-1 inset-ring-secondary transition-colors;
-      @apply dark:inset-ring-secondary-dark;
-      &:focus-visible:not(:read-only) {
-        @apply outline-2 outline-offset-4 outline-primary;
-        @apply dark:outline-primary-dark;
-      }
-    }
-
-    &::before {
-      @apply text-base;
-    }
-  }
-
-  &.b-color-picker-size-lg {
-    @apply h-11 rounded-size-lg;
-
-    &::-webkit-color-swatch {
-      @apply rounded-size-lg inset-ring-1 inset-ring-secondary transition-colors;
-      @apply dark:inset-ring-secondary-dark;
-      &:focus-visible:not(:read-only) {
-        @apply outline-2 outline-offset-4 outline-primary;
-        @apply dark:outline-primary-dark;
-      }
-    }
-
-    &::before {
-      @apply text-lg;
-    }
-  }
-}

package/src/components/table.css

@@ -1,34 +0,0 @@
-b-table {
-  display: flex;
-  flex: 1;
-  width: 100px;
-  flex-direction: column;
-  align-items: flex-start;
-  overflow-x: auto;
-  overscroll-behavior-inline: none;
-  scrollbar-width: thin;
-  border: 1px solid var(--border-color, transparent);
-  background-color: color-mix(
-    in srgb,
-    var(--foreground, #798194) 5%,
-    var(--background, #ffffff)
-  );
-  position: relative;
-  height: 100%;
-  box-sizing: border-box;
-  border-radius: var(--radius, 0.5rem);
-
-  .scroll-section {
-    overflow-y: auto;
-    scrollbar-width: thin;
-    overscroll-behavior-block: none;
-
-    b-row {
-      &:first-child {
-        .row-container {
-          border-top: 0;
-        }
-      }
-    }
-  }
-}