@basis-ng/styles 0.0.1-alpha.194 → 0.0.1-alpha.196

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.194",
+  "version": "0.0.1-alpha.196",
   "description": "CSS foundation for @basis-ng/primitives components",
   "main": "src/index.css",
   "exports": {

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-ring rounded-size-lg;
-  @apply dark:bg-background-dark dark:inset-ring-ring-dark;
+  @apply flex flex-col gap-4 p-6 bg-surface inset-ring-1 inset-ring-ring rounded-size-lg;
+  @apply dark:bg-surface-dark dark:inset-ring-ring-dark;
 
   b-card-header {
     @apply flex flex-col gap-1;

package/src/components/drawer.css

@@ -1,46 +1,28 @@
 b-drawer {
-  @apply fixed z-999 flex box-border overflow-hidden rounded-2xl bg-background text-font shadow-lg inset-ring-1 inset-ring-ring will-change-transform opacity-0 pointer-events-none dark:bg-background-dark dark:text-font-dark dark:inset-ring-ring-dark;
-  transition:
-    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
-    opacity 0.2s ease;
+  @apply fixed inset-0 z-999 pointer-events-none;
 
   &.open,
   &.dragging {
-    @apply opacity-100 pointer-events-auto;
+    @apply pointer-events-auto;
   }
 
-  &.bottom,
-  &.top {
-    @apply left-2 right-2 mx-auto max-h-[calc(100dvh-1rem)] min-h-0 h-1/2;
-  }
-
-  &.bottom {
-    @apply bottom-2;
-    transform: translateY(100%);
-  }
-
-  &.top {
-    @apply top-2;
-    transform: translateY(-100%);
+  .drawer-backdrop {
+    @apply absolute inset-0 bg-black;
+    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
   }
 
-  &.left,
-  &.right {
-    @apply top-2 bottom-2 max-w-[calc(100vw-1rem)] w-[320px];
-  }
-
-  &.left {
-    @apply left-2;
-    transform: translateX(-100%);
-  }
-
-  &.right {
-    @apply right-2;
-    transform: translateX(100%);
+  .drawer-panel {
+    @apply absolute flex box-border overflow-hidden rounded-2xl bg-surface text-font shadow-lg inset-ring-1 inset-ring-ring will-change-transform opacity-0 dark:bg-surface-dark dark:text-font-dark dark:inset-ring-ring-dark;
+    transition:
+      transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
+      opacity 0.2s ease;
   }
 
+  &.open,
   &.dragging {
-    transition: none;
+    .drawer-panel {
+      @apply opacity-100;
+    }
   }
 
   .drag-section {
@@ -56,6 +38,10 @@ b-drawer {
   }
 
   &.bottom {
+    .drawer-panel {
+      @apply left-2 right-2 bottom-2 mx-auto max-h-[calc(100dvh-1rem)] min-h-0 h-1/2;
+    }
+
     .drag-section {
       @apply top-0 left-0 right-0 h-10 cursor-ns-resize;
     }
@@ -70,6 +56,10 @@ b-drawer {
   }
 
   &.top {
+    .drawer-panel {
+      @apply left-2 right-2 top-2 mx-auto max-h-[calc(100dvh-1rem)] min-h-0 h-1/2;
+    }
+
     .drag-section {
       @apply bottom-0 left-0 right-0 h-10 cursor-ns-resize;
     }
@@ -84,6 +74,10 @@ b-drawer {
   }
 
   &.left {
+    .drawer-panel {
+      @apply top-2 bottom-2 left-2 max-w-[calc(100vw-1rem)] w-[320px];
+    }
+
     .drag-section {
       @apply top-0 right-0 bottom-0 w-5 cursor-ew-resize;
     }
@@ -98,6 +92,10 @@ b-drawer {
   }
 
   &.right {
+    .drawer-panel {
+      @apply top-2 bottom-2 right-2 max-w-[calc(100vw-1rem)] w-[320px];
+    }
+
     .drag-section {
       @apply top-0 bottom-0 left-0 w-5 cursor-ew-resize;
     }
@@ -110,8 +108,16 @@ b-drawer {
       @apply pl-5;
     }
   }
+
+  &.dragging {
+    .drawer-backdrop,
+    .drawer-panel {
+      transition: none;
+    }
+  }
 }
 
-html:has(b-drawer.open) {
+html:has(b-drawer.open),
+html:has(b-drawer.dragging) {
   overflow: hidden;
 }

package/src/components/menu.css

@@ -149,6 +149,6 @@ b-menu {
 
 /* Overlay Styles (Popups) */
 .cdk-overlay-container b-menu {
-  @apply inset-ring-1 inset-ring-ring bg-background shadow-xs;
-  @apply dark:inset-ring-ring-dark/60 dark:bg-background-dark;
+  @apply inset-ring-1 inset-ring-ring bg-surface shadow-xs;
+  @apply dark:inset-ring-ring-dark/60 dark:bg-surface-dark;
 }

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-ring flex flex-col gap-1 w-full overflow-y-auto;
+  @apply list-none p-1 box-border m-0 relative bg-surface shadow-xs rounded-lg inset-ring-1 inset-ring-ring flex flex-col gap-1 w-full overflow-y-auto dark:bg-surface-dark dark:inset-ring-ring-dark;
 
   .no-options-message {
     @apply py-1 px-2 text-sm;

package/src/components/select.css

@@ -81,8 +81,8 @@ b-select {
 
 ul[b-select-content] {
   @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 bg-surface text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
+  @apply dark:bg-surface-dark dark:text-secondary-foreground-dark dark:inset-ring-ring-dark shadow-xs;
 
   @apply outline-none;
   max-height: 320px;
@@ -94,8 +94,8 @@ ul[b-select-content] {
   }
 
   input[b-input] {
-    @apply outline-none sticky top-0 z-10 bg-background min-h-8;
-    @apply dark:bg-background-dark;
+    @apply outline-none sticky top-0 z-10 bg-surface min-h-8;
+    @apply dark:bg-surface-dark;
   }
 
   &.b-size-sm {

package/src/index.css

@@ -14,6 +14,7 @@
 
   /* Light theme colors */
   --color-background: #fff;
+  --color-surface: #fff;
   --color-font: #0a0a0a;
   --color-primary: #0a0a0a;
   --color-primary-foreground: #fff;
@@ -31,6 +32,7 @@
 
   /* Dark theme colors */
   --color-background-dark: #0a0a0a;
+  --color-surface-dark: #171717;
   --color-font-dark: #fff;
   --color-bg-dark: #0a0a0a;
   --color-primary-dark: #fff;