@nar-bus/lena-ui-shared 1.3.0 → 1.3.2

package/dist/theme.css

@@ -13,6 +13,7 @@
   /* Custom Font Sizes - Small Scale for Data-Dense UI */
   --text-2xs: 0.625rem;      /* 10px */
   --text-3xs: 0.5rem;        /* 8px */
+  --text-2xs-plus: 0.6875rem;  /* 11px - badge text */
   --text-sm-minus: 0.8125rem; /* 13px */
 
   /* Filter System Sizing */
@@ -84,7 +85,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);
+  --table-header: var(--accent-cyan);
 
   /* Semantic Status (extended) */
   --status-success: oklch(0.548 0.205 152);
@@ -157,13 +158,15 @@
   --gradient-amber-accent: oklch(0.63 0.16 86);
 
   /* Sidebar Theming */
-  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.60 0.15 230 / 0.25) 0%, transparent 100%);
+  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.55 0.18 230 / 0.35) 0%, oklch(0.55 0.18 230 / 0.12) 60%, 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-indicator-glow: 0 0 14px oklch(0.75 0.20 220 / 0.7), 0 0 6px oklch(0.75 0.20 220 / 0.4);
   --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%);
   --sidebar-inset-shadow: inset -1px 0 0 0 oklch(0.25 0.04 250 / 0.5);
+  --sidebar-section-label: oklch(0.52 0.06 230);
+  --sidebar-hover: oklch(0.25 0.06 245 / 0.60);
 
   /* Charts */
   --chart-1: oklch(0.40 0.20 245);
@@ -235,7 +238,7 @@
   /* Accent Colors */
   --accent-cyan: oklch(0.75 0.15 220);
   --accent-violet: oklch(0.70 0.20 293);
-  --table-header: oklch(0.65 0.01 260);
+  --table-header: var(--accent-cyan);
 
   /* Semantic Status (extended) */
   --status-success: oklch(0.723 0.15 149);
@@ -300,13 +303,15 @@
   --gradient-amber-accent: oklch(0.52 0.13 86);
 
   /* Sidebar Theming */
-  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.92 0.000 0 / 0.10) 0%, transparent 100%);
+  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.95 0.000 0 / 0.14) 0%, oklch(0.95 0.000 0 / 0.06) 60%, transparent 100%);
   --sidebar-indicator-gradient: linear-gradient(180deg, oklch(0.75 0.12 220) 0%, oklch(0.60 0.10 230) 100%);
-  --sidebar-indicator-glow: 0 0 8px oklch(0.75 0.12 220 / 0.4);
+  --sidebar-indicator-glow: 0 0 14px oklch(0.75 0.15 220 / 0.5), 0 0 6px oklch(0.75 0.15 220 / 0.3);
   --sidebar-logo-gradient: linear-gradient(135deg, oklch(0.75 0.04 250) 0%, oklch(0.55 0.03 250) 100%);
   --sidebar-logo-shadow: 0 2px 8px oklch(0.75 0.04 250 / 0.2);
   --sidebar-overlay-gradient: linear-gradient(180deg, oklch(0.18 0.000 0) 0%, transparent 20%, transparent 80%, oklch(0.12 0.000 0) 100%);
   --sidebar-inset-shadow: inset -1px 0 0 0 oklch(0.25 0.000 0 / 0.5);
+  --sidebar-section-label: oklch(0.50 0.000 0);
+  --sidebar-hover: oklch(0.30 0.000 0 / 0.60);
 
   /* Charts */
   --chart-1: oklch(0.55 0.18 245);
@@ -321,6 +326,15 @@
   --table-row-selected: oklch(0.270 0.000 0);
 }
 
+/* =============================================================================
+   PAGE ACCENT COLOR OVERRIDES
+   Sayfa wrapper'ına ekleyerek tüm child bileşenlerin accent rengini değiştirir.
+   ============================================================================= */
+.page-accent-navy    { --accent-cyan: var(--gradient-navy-accent); }
+.page-accent-cherry  { --accent-cyan: var(--gradient-cherry-accent); }
+.page-accent-emerald { --accent-cyan: var(--gradient-emerald-accent); }
+.page-accent-amber   { --accent-cyan: var(--gradient-amber-accent); }
+
 /* =============================================================================
    TAILWIND THEME MAPPING
    ============================================================================= */
@@ -329,6 +343,8 @@
   --text-3xs--line-height: 0.75rem;
   --text-2xs: 0.625rem;
   --text-2xs--line-height: 0.875rem;
+  --text-2xs-plus: 0.6875rem;
+  --text-2xs-plus--line-height: 1rem;
   --text-sm-minus: 0.8125rem;
   --text-sm-minus--line-height: 1.125rem;
 
@@ -384,6 +400,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-hover: var(--sidebar-hover);
 
   --color-status-online: var(--status-online);
   --color-status-offline: var(--status-offline);
@@ -509,13 +526,12 @@
 /* =============================================================================
    UTILITY CLASSES
    ============================================================================= */
-.scrollbar-none {
+@utility scrollbar-none {
   -ms-overflow-style: none;
   scrollbar-width: none;
-}
-
-.scrollbar-none::-webkit-scrollbar {
-  display: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 /* =============================================================================
@@ -559,44 +575,55 @@
   --toolbar-text: var(--foreground);
   --toolbar-input-bg: var(--input);
   --toolbar-input-text: var(--foreground);
-  --toolbar-padding: 0.5rem 0.75rem;
+  --toolbar-input-border: oklch(0.67 0.02 260 / 0.3);
+  --toolbar-hover-bg: oklch(1 0 0 / 0.1);
+  --toolbar-hover-text: oklch(1 0 0);
+  --toolbar-padding: 0.25rem 0.75rem;
+  --toolbar-min-height: 2.5rem;
 }
 
 /* Dark/Navy toolbar */
 .datatable-dark-toolbar {
-  margin-top: 0.5rem;
-  --toolbar-bg: oklch(0.23 0.10 263);
-  --toolbar-border: oklch(0.32 0.02 260);
-  --toolbar-text: oklch(0.93 0.01 260);
+  --toolbar-bg: var(--gradient-navy);
+  --toolbar-border: var(--gradient-navy-border);
+  --toolbar-text: var(--gradient-navy-text);
   --toolbar-input-bg: oklch(1.00 0 0 / 0.06);
-  --toolbar-input-text: oklch(0.93 0.01 260);
+  --toolbar-input-text: var(--gradient-navy-text);
 }
 
 /* Cherry toolbar */
 .datatable-cherry-toolbar {
-  --toolbar-bg: oklch(0.32 0.13 5);
-  --toolbar-border: oklch(0.33 0.13 358);
-  --toolbar-text: oklch(0.94 0.02 12);
+  --toolbar-bg: var(--gradient-cherry);
+  --toolbar-border: var(--gradient-cherry-border);
+  --toolbar-text: var(--gradient-cherry-text);
   --toolbar-input-bg: oklch(1.00 0 0 / 0.06);
-  --toolbar-input-text: oklch(0.94 0.02 12);
+  --toolbar-input-text: var(--gradient-cherry-text);
 }
 
 /* Emerald toolbar */
 .datatable-emerald-toolbar {
-  --toolbar-bg: oklch(0.34 0.09 165);
-  --toolbar-border: oklch(0.33 0.08 166);
-  --toolbar-text: oklch(0.95 0.04 164);
+  --toolbar-bg: var(--gradient-emerald);
+  --toolbar-border: var(--gradient-emerald-border);
+  --toolbar-text: var(--gradient-emerald-text);
   --toolbar-input-bg: oklch(1.00 0 0 / 0.06);
-  --toolbar-input-text: oklch(0.95 0.04 164);
+  --toolbar-input-text: var(--gradient-emerald-text);
 }
 
 /* Amber toolbar */
 .datatable-amber-toolbar {
-  --toolbar-bg: oklch(0.67 0.17 88);
-  --toolbar-border: oklch(0.63 0.16 86);
-  --toolbar-text: oklch(0.99 0.02 96);
+  --toolbar-bg: var(--gradient-amber);
+  --toolbar-border: var(--gradient-amber-border);
+  --toolbar-text: var(--gradient-amber-text);
   --toolbar-input-bg: oklch(1.00 0 0 / 0.06);
-  --toolbar-input-text: oklch(0.99 0.02 96);
+  --toolbar-input-text: var(--gradient-amber-text);
+}
+
+/* Margin-top for all toolbar variants */
+.datatable-dark-toolbar,
+.datatable-cherry-toolbar,
+.datatable-emerald-toolbar,
+.datatable-amber-toolbar {
+  margin-top: 0.5rem;
 }
 
 /* Apply toolbar styles via data-slot */
@@ -608,6 +635,7 @@
   border-bottom-color: var(--toolbar-border);
   color: var(--toolbar-text);
   padding: var(--toolbar-padding);
+  min-height: var(--toolbar-min-height);
 }
 
 .datatable-dark-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
@@ -633,6 +661,25 @@
   color: var(--toolbar-text);
 }
 
+.datatable-dark-toolbar [data-slot="datatable-toolbar"] button:hover,
+.datatable-cherry-toolbar [data-slot="datatable-toolbar"] button:hover,
+.datatable-emerald-toolbar [data-slot="datatable-toolbar"] button:hover,
+.datatable-amber-toolbar [data-slot="datatable-toolbar"] button:hover {
+  background: var(--toolbar-hover-bg);
+  color: var(--toolbar-hover-text);
+}
+
+.datatable-dark-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
+.datatable-dark-toolbar [data-slot="datatable-toolbar"] select,
+.datatable-cherry-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
+.datatable-cherry-toolbar [data-slot="datatable-toolbar"] select,
+.datatable-emerald-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
+.datatable-emerald-toolbar [data-slot="datatable-toolbar"] select,
+.datatable-amber-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
+.datatable-amber-toolbar [data-slot="datatable-toolbar"] select {
+  border-color: var(--toolbar-input-border);
+}
+
 /* Default table header style */
 [data-slot="table-header"] th {
   color: color-mix(in oklch, var(--table-header) 80%, transparent);
@@ -650,8 +697,8 @@
 
 .toolbar-entity-label .toolbar-separator {
   color: var(--toolbar-text);
-  opacity: 0.4;
+  opacity: 0.6;
 }
 
-/* Scan package dist for Tailwind class detection */
-@source "..";
+/* Scan package src for Tailwind class detection */
+@source "../src";

package/package.json

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