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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.194",
+  "version": "0.0.1-alpha.195",
   "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,5 +1,5 @@
 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;
+  @apply fixed z-999 flex box-border overflow-hidden rounded-2xl bg-surface text-font shadow-lg inset-ring-1 inset-ring-ring will-change-transform opacity-0 pointer-events-none 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;

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;