@nar-bus/lena-ui-shared 1.1.2 → 1.1.4

package/dist/theme.css

@@ -12,6 +12,8 @@
 
   /* Custom Font Sizes - Small Scale for Data-Dense UI */
   --text-2xs: 0.625rem;      /* 10px */
+  --text-3xs: 0.5rem;        /* 8px */
+  --text-sm-minus: 0.8125rem; /* 13px */
 
   /* Filter System Sizing */
   --filter-width-xs: 4.375rem;   /* 70px - boolean/short */
@@ -67,8 +69,8 @@
 
   /* Sidebar - Deep Navy Blue */
   --sidebar: oklch(0.16 0.05 245);
-  --sidebar-foreground: oklch(0.82 0.02 245);
-  --sidebar-primary: oklch(0.92 0.02 245);
+  --sidebar-foreground: oklch(0.93 0.02 245);
+  --sidebar-primary: oklch(1.00 0 0);
   --sidebar-primary-foreground: oklch(0.98 0.01 245);
   --sidebar-accent: oklch(0.22 0.06 245);
   --sidebar-accent-foreground: oklch(0.92 0.02 245);
@@ -84,6 +86,7 @@
   /* Accent Colors */
   --accent-cyan: oklch(0.25 0.25 220);
   --accent-violet: oklch(0.541 0.281 293);
+  --table-header: oklch(0.45 0.01 260);
 
   /* Semantic Status (extended) */
   --status-success: oklch(0.548 0.205 152);
@@ -120,9 +123,9 @@
   --feedback-error: oklch(0.577 0.245 27);
 
   /* Sidebar Theming */
-  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.92 0.015 250 / 0.15) 0%, transparent 100%);
-  --sidebar-indicator-gradient: linear-gradient(180deg, oklch(0.92 0.015 250) 0%, oklch(0.80 0.02 250) 100%);
-  --sidebar-indicator-glow: 0 0 8px oklch(0.92 0.015 250 / 0.5);
+  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.60 0.15 230 / 0.25) 0%, transparent 100%);
+  --sidebar-indicator-gradient: linear-gradient(180deg, oklch(0.75 0.18 220) 0%, oklch(0.60 0.15 230) 100%);
+  --sidebar-indicator-glow: 0 0 8px oklch(0.75 0.18 220 / 0.6);
   --sidebar-logo-gradient: linear-gradient(135deg, oklch(0.92 0.015 250) 0%, oklch(0.80 0.02 250) 100%);
   --sidebar-logo-shadow: 0 2px 8px oklch(0.92 0.015 250 / 0.3);
   --sidebar-overlay-gradient: linear-gradient(180deg, oklch(0.18 0.04 250) 0%, transparent 20%, transparent 80%, oklch(0.12 0.04 250) 100%);
@@ -198,6 +201,7 @@
   /* Accent Colors */
   --accent-cyan: oklch(0.750 0.000 0);
   --accent-violet: oklch(0.650 0.000 0);
+  --table-header: oklch(0.65 0.00 0);
 
   /* Semantic Status (extended) */
   --status-success: oklch(0.723 0.15 149);
@@ -259,8 +263,12 @@
    TAILWIND THEME MAPPING
    ============================================================================= */
 @theme inline {
+  --text-3xs: 0.5rem;
+  --text-3xs--line-height: 0.75rem;
   --text-2xs: 0.625rem;
   --text-2xs--line-height: 0.875rem;
+  --text-sm-minus: 0.8125rem;
+  --text-sm-minus--line-height: 1.125rem;
 
   /* Filter System Widths */
   --spacing-filter-xs: var(--filter-width-xs);
@@ -362,6 +370,7 @@
   --color-table-row-even: var(--table-row-even);
   --color-table-row-hover: var(--table-row-hover);
   --color-table-row-selected: var(--table-row-selected);
+  --color-table-header: var(--table-header);
 }
 
 /* =============================================================================
@@ -370,7 +379,7 @@
 @layer base {
   * {
     @apply border-border;
-    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
   }
 
   body {
@@ -378,6 +387,10 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 
+  code, kbd, pre, samp, .font-mono {
+    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
+  }
+
   h1, h2, h3, h4, h5, h6 {
     @apply font-semibold tracking-tight;
   }
@@ -460,5 +473,64 @@
   animation: tab-slide-in-from-left 200ms ease-out;
 }
 
+/* =============================================================================
+   DATATABLE TOOLBAR VARIANTS (CSS Custom Property Pattern)
+   ============================================================================= */
+
+/* Toolbar custom properties — defaults */
+:root {
+  --toolbar-bg: transparent;
+  --toolbar-border: var(--border);
+  --toolbar-text: var(--foreground);
+  --toolbar-input-bg: var(--input);
+  --toolbar-input-text: var(--foreground);
+  --toolbar-padding: 0.5rem 0.75rem;
+}
+
+/* Dark toolbar variant */
+.datatable-dark-toolbar {
+  margin-top: 0.5rem;
+  --toolbar-bg: oklch(0.15 0.03 260);
+  --toolbar-border: oklch(0.25 0.02 250);
+  --toolbar-text: oklch(0.85 0.01 250);
+  --toolbar-input-bg: oklch(0.20 0.02 250 / 0.5);
+  --toolbar-input-text: oklch(0.85 0.01 250);
+}
+
+/* Cherry toolbar variant */
+.datatable-cherry-toolbar {
+  --toolbar-bg: oklch(0.20 0.08 10);
+  --toolbar-border: oklch(0.30 0.06 10);
+  --toolbar-text: oklch(0.85 0.02 10);
+  --toolbar-input-bg: oklch(0.25 0.05 10 / 0.5);
+  --toolbar-input-text: oklch(0.85 0.02 10);
+}
+
+/* Apply toolbar styles via data-slot */
+.datatable-dark-toolbar [data-slot="datatable-toolbar"],
+.datatable-cherry-toolbar [data-slot="datatable-toolbar"] {
+  background: var(--toolbar-bg);
+  border-bottom-color: var(--toolbar-border);
+  color: var(--toolbar-text);
+  padding: var(--toolbar-padding);
+}
+
+.datatable-dark-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
+.datatable-cherry-toolbar [data-slot="datatable-toolbar"] [data-slot="input"] {
+  background: var(--toolbar-input-bg);
+  color: var(--toolbar-input-text);
+}
+
+.datatable-dark-toolbar [data-slot="datatable-toolbar"] select,
+.datatable-cherry-toolbar [data-slot="datatable-toolbar"] select {
+  background: var(--toolbar-input-bg);
+  color: var(--toolbar-input-text);
+}
+
+.datatable-dark-toolbar [data-slot="datatable-toolbar"] button,
+.datatable-cherry-toolbar [data-slot="datatable-toolbar"] button {
+  color: var(--toolbar-text);
+}
+
 /* Scan package dist for Tailwind class detection */
 @source "..";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nar-bus/lena-ui-shared",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",