@nar-bus/lena-ui-shared 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/theme.css CHANGED
@@ -122,6 +122,34 @@
122
122
  --feedback-warning: oklch(0.769 0.188 70);
123
123
  --feedback-error: oklch(0.577 0.245 27);
124
124
 
125
+ /* Entity Gradients (FormSheet, TopBar, Create Sheets) */
126
+ --gradient-navy: linear-gradient(to right, oklch(0.16 0.03 250), oklch(0.18 0.06 255), oklch(0.15 0.03 245));
127
+ --gradient-cherry: linear-gradient(to right, oklch(0.22 0.08 10), oklch(0.28 0.12 355), oklch(0.24 0.09 5));
128
+ --gradient-emerald: linear-gradient(to right, oklch(0.25 0.08 160), oklch(0.28 0.09 158), oklch(0.25 0.08 160));
129
+ --gradient-amber: linear-gradient(to right, oklch(0.55 0.16 85), oklch(0.65 0.19 90), oklch(0.55 0.16 85));
130
+ --gradient-navy-border: oklch(0.25 0.04 250);
131
+ --gradient-cherry-border: oklch(0.30 0.06 10);
132
+ --gradient-emerald-border: oklch(0.30 0.06 160);
133
+ --gradient-amber-border: oklch(0.50 0.12 85);
134
+ --gradient-navy-shadow: 0 0 50px oklch(0.30 0.10 255 / 0.4);
135
+ --gradient-cherry-shadow: 0 0 50px oklch(0.30 0.10 10 / 0.4);
136
+ --gradient-emerald-shadow: 0 0 50px oklch(0.30 0.10 160 / 0.4);
137
+ --gradient-amber-shadow: 0 0 50px oklch(0.55 0.12 85 / 0.4);
138
+
139
+ /* Gradient header text & accent colors */
140
+ --gradient-navy-text: oklch(0.90 0.01 250);
141
+ --gradient-navy-muted: oklch(0.70 0.02 250);
142
+ --gradient-navy-accent: oklch(0.25 0.08 250);
143
+ --gradient-cherry-text: oklch(0.90 0.02 10);
144
+ --gradient-cherry-muted: oklch(0.70 0.03 10);
145
+ --gradient-cherry-accent: oklch(0.30 0.10 10);
146
+ --gradient-emerald-text: oklch(0.90 0.02 160);
147
+ --gradient-emerald-muted: oklch(0.70 0.03 160);
148
+ --gradient-emerald-accent: oklch(0.30 0.08 160);
149
+ --gradient-amber-text: oklch(0.95 0.02 85);
150
+ --gradient-amber-muted: oklch(0.75 0.04 85);
151
+ --gradient-amber-accent: oklch(0.55 0.14 85);
152
+
125
153
  /* Sidebar Theming */
126
154
  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.60 0.15 230 / 0.25) 0%, transparent 100%);
127
155
  --sidebar-indicator-gradient: linear-gradient(180deg, oklch(0.75 0.18 220) 0%, oklch(0.60 0.15 230) 100%);
@@ -237,6 +265,34 @@
237
265
  --feedback-warning: oklch(0.828 0.15 84);
238
266
  --feedback-error: oklch(0.637 0.20 25);
239
267
 
268
+ /* Entity Gradients (dark mode) */
269
+ --gradient-navy: linear-gradient(to right, oklch(0.14 0.02 250), oklch(0.16 0.04 255), oklch(0.13 0.02 245));
270
+ --gradient-cherry: linear-gradient(to right, oklch(0.18 0.06 10), oklch(0.22 0.09 355), oklch(0.20 0.07 5));
271
+ --gradient-emerald: linear-gradient(to right, oklch(0.20 0.06 160), oklch(0.22 0.07 158), oklch(0.20 0.06 160));
272
+ --gradient-amber: linear-gradient(to right, oklch(0.40 0.12 85), oklch(0.48 0.15 90), oklch(0.40 0.12 85));
273
+ --gradient-navy-border: oklch(0.22 0.03 250);
274
+ --gradient-cherry-border: oklch(0.25 0.04 10);
275
+ --gradient-emerald-border: oklch(0.25 0.04 160);
276
+ --gradient-amber-border: oklch(0.40 0.09 85);
277
+ --gradient-navy-shadow: 0 0 50px oklch(0.25 0.08 255 / 0.3);
278
+ --gradient-cherry-shadow: 0 0 50px oklch(0.25 0.08 10 / 0.3);
279
+ --gradient-emerald-shadow: 0 0 50px oklch(0.25 0.08 160 / 0.3);
280
+ --gradient-amber-shadow: 0 0 50px oklch(0.45 0.10 85 / 0.3);
281
+
282
+ /* Gradient header text & accent colors (dark) */
283
+ --gradient-navy-text: oklch(0.88 0.01 250);
284
+ --gradient-navy-muted: oklch(0.65 0.02 250);
285
+ --gradient-navy-accent: oklch(0.22 0.06 250);
286
+ --gradient-cherry-text: oklch(0.88 0.02 10);
287
+ --gradient-cherry-muted: oklch(0.65 0.03 10);
288
+ --gradient-cherry-accent: oklch(0.25 0.08 10);
289
+ --gradient-emerald-text: oklch(0.88 0.02 160);
290
+ --gradient-emerald-muted: oklch(0.65 0.03 160);
291
+ --gradient-emerald-accent: oklch(0.25 0.06 160);
292
+ --gradient-amber-text: oklch(0.92 0.02 85);
293
+ --gradient-amber-muted: oklch(0.70 0.04 85);
294
+ --gradient-amber-accent: oklch(0.42 0.10 85);
295
+
240
296
  /* Sidebar Theming */
241
297
  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.92 0.000 0 / 0.10) 0%, transparent 100%);
242
298
  --sidebar-indicator-gradient: linear-gradient(180deg, oklch(0.75 0.000 0) 0%, oklch(0.60 0.000 0) 100%);
@@ -361,6 +417,19 @@
361
417
  --color-feedback-warning: var(--feedback-warning);
362
418
  --color-feedback-error: var(--feedback-error);
363
419
 
420
+ --color-gradient-navy-text: var(--gradient-navy-text);
421
+ --color-gradient-navy-muted: var(--gradient-navy-muted);
422
+ --color-gradient-navy-accent: var(--gradient-navy-accent);
423
+ --color-gradient-cherry-text: var(--gradient-cherry-text);
424
+ --color-gradient-cherry-muted: var(--gradient-cherry-muted);
425
+ --color-gradient-cherry-accent: var(--gradient-cherry-accent);
426
+ --color-gradient-emerald-text: var(--gradient-emerald-text);
427
+ --color-gradient-emerald-muted: var(--gradient-emerald-muted);
428
+ --color-gradient-emerald-accent: var(--gradient-emerald-accent);
429
+ --color-gradient-amber-text: var(--gradient-amber-text);
430
+ --color-gradient-amber-muted: var(--gradient-amber-muted);
431
+ --color-gradient-amber-accent: var(--gradient-amber-accent);
432
+
364
433
  --color-chart-1: var(--chart-1);
365
434
  --color-chart-2: var(--chart-2);
366
435
  --color-chart-3: var(--chart-3);
@@ -506,9 +575,29 @@
506
575
  --toolbar-input-text: oklch(0.85 0.02 10);
507
576
  }
508
577
 
578
+ /* Emerald toolbar variant */
579
+ .datatable-emerald-toolbar {
580
+ --toolbar-bg: oklch(0.20 0.06 160);
581
+ --toolbar-border: oklch(0.30 0.05 160);
582
+ --toolbar-text: oklch(0.85 0.02 160);
583
+ --toolbar-input-bg: oklch(0.25 0.04 160 / 0.5);
584
+ --toolbar-input-text: oklch(0.85 0.02 160);
585
+ }
586
+
587
+ /* Amber toolbar variant */
588
+ .datatable-amber-toolbar {
589
+ --toolbar-bg: oklch(0.35 0.10 85);
590
+ --toolbar-border: oklch(0.45 0.08 85);
591
+ --toolbar-text: oklch(0.95 0.02 85);
592
+ --toolbar-input-bg: oklch(0.40 0.07 85 / 0.5);
593
+ --toolbar-input-text: oklch(0.95 0.02 85);
594
+ }
595
+
509
596
  /* Apply toolbar styles via data-slot */
510
597
  .datatable-dark-toolbar [data-slot="datatable-toolbar"],
511
- .datatable-cherry-toolbar [data-slot="datatable-toolbar"] {
598
+ .datatable-cherry-toolbar [data-slot="datatable-toolbar"],
599
+ .datatable-emerald-toolbar [data-slot="datatable-toolbar"],
600
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"] {
512
601
  background: var(--toolbar-bg);
513
602
  border-bottom-color: var(--toolbar-border);
514
603
  color: var(--toolbar-text);
@@ -516,19 +605,25 @@
516
605
  }
517
606
 
518
607
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
519
- .datatable-cherry-toolbar [data-slot="datatable-toolbar"] [data-slot="input"] {
608
+ .datatable-cherry-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
609
+ .datatable-emerald-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
610
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"] [data-slot="input"] {
520
611
  background: var(--toolbar-input-bg);
521
612
  color: var(--toolbar-input-text);
522
613
  }
523
614
 
524
615
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] select,
525
- .datatable-cherry-toolbar [data-slot="datatable-toolbar"] select {
616
+ .datatable-cherry-toolbar [data-slot="datatable-toolbar"] select,
617
+ .datatable-emerald-toolbar [data-slot="datatable-toolbar"] select,
618
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"] select {
526
619
  background: var(--toolbar-input-bg);
527
620
  color: var(--toolbar-input-text);
528
621
  }
529
622
 
530
623
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] button,
531
- .datatable-cherry-toolbar [data-slot="datatable-toolbar"] button {
624
+ .datatable-cherry-toolbar [data-slot="datatable-toolbar"] button,
625
+ .datatable-emerald-toolbar [data-slot="datatable-toolbar"] button,
626
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"] button {
532
627
  color: var(--toolbar-text);
533
628
  }
534
629
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nar-bus/lena-ui-shared",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",