@nar-bus/lena-ui-shared 1.3.5 → 1.3.7

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
@@ -130,14 +130,30 @@
130
130
  --gradient-emerald: linear-gradient(to right, oklch(0.33 0.08 166), oklch(0.37 0.09 164), oklch(0.33 0.08 166));
131
131
  /* Amber: #ca8a04 → #eab308 → #ca8a04 */
132
132
  --gradient-amber: linear-gradient(to right, oklch(0.63 0.16 86), oklch(0.75 0.18 90), oklch(0.63 0.16 86));
133
+ /* Violet: #4c1d95 → #7c3aed → #5b21b6 */
134
+ --gradient-violet: linear-gradient(to right, oklch(0.22 0.12 293), oklch(0.42 0.24 293), oklch(0.29 0.15 293));
135
+ /* Rose: #831843 → #db2777 → #9d174d */
136
+ --gradient-rose: linear-gradient(to right, oklch(0.30 0.12 345), oklch(0.50 0.22 345), oklch(0.36 0.15 345));
137
+ /* Indigo: #312e81 → #4f46e5 → #3730a3 */
138
+ --gradient-indigo: linear-gradient(to right, oklch(0.23 0.10 275), oklch(0.40 0.22 275), oklch(0.28 0.12 275));
139
+ /* Orange: #7c2d12 → #ea580c → #9a3412 */
140
+ --gradient-orange: linear-gradient(to right, oklch(0.30 0.12 45), oklch(0.58 0.20 45), oklch(0.37 0.14 45));
133
141
  --gradient-navy-border: oklch(0.32 0.02 260); /* #334155 slate-700 */
134
142
  --gradient-cherry-border: oklch(0.33 0.13 358); /* #781e3c */
135
143
  --gradient-emerald-border: oklch(0.33 0.08 166); /* #064e3b emerald-900 */
136
144
  --gradient-amber-border: oklch(0.63 0.16 86); /* #ca8a04 yellow-600 */
145
+ --gradient-violet-border: oklch(0.35 0.14 293);
146
+ --gradient-rose-border: oklch(0.38 0.14 345);
147
+ --gradient-indigo-border: oklch(0.32 0.12 275);
148
+ --gradient-orange-border: oklch(0.45 0.14 45);
137
149
  --gradient-navy-shadow: 0 0 50px oklch(0.30 0.12 264 / 0.4);
138
150
  --gradient-cherry-shadow: 0 0 50px oklch(0.35 0.14 358 / 0.4);
139
151
  --gradient-emerald-shadow: 0 0 50px oklch(0.35 0.09 165 / 0.4);
140
152
  --gradient-amber-shadow: 0 0 50px oklch(0.65 0.15 88 / 0.4);
153
+ --gradient-violet-shadow: 0 0 50px oklch(0.35 0.18 293 / 0.4);
154
+ --gradient-rose-shadow: 0 0 50px oklch(0.40 0.16 345 / 0.4);
155
+ --gradient-indigo-shadow: 0 0 50px oklch(0.35 0.16 275 / 0.4);
156
+ --gradient-orange-shadow: 0 0 50px oklch(0.48 0.16 45 / 0.4);
141
157
 
142
158
  /* Gradient header text & accent colors */
143
159
  /* Navy: slate-200, slate-400, blue-900 */
@@ -156,6 +172,22 @@
156
172
  --gradient-amber-text: oklch(0.99 0.02 96);
157
173
  --gradient-amber-muted: oklch(0.89 0.14 96);
158
174
  --gradient-amber-accent: oklch(0.63 0.16 86);
175
+ /* Violet: purple-100, purple-300, purple-700 */
176
+ --gradient-violet-text: oklch(0.92 0.03 293);
177
+ --gradient-violet-muted: oklch(0.75 0.10 293);
178
+ --gradient-violet-accent: oklch(0.42 0.24 293);
179
+ /* Rose: rose-50, rose-300, rose-600 */
180
+ --gradient-rose-text: oklch(0.94 0.02 345);
181
+ --gradient-rose-muted: oklch(0.80 0.08 345);
182
+ --gradient-rose-accent: oklch(0.50 0.22 345);
183
+ /* Indigo: indigo-100, indigo-300, indigo-700 */
184
+ --gradient-indigo-text: oklch(0.93 0.02 275);
185
+ --gradient-indigo-muted: oklch(0.72 0.08 275);
186
+ --gradient-indigo-accent: oklch(0.40 0.22 275);
187
+ /* Orange: orange-50, orange-300, orange-600 */
188
+ --gradient-orange-text: oklch(0.97 0.02 45);
189
+ --gradient-orange-muted: oklch(0.85 0.10 45);
190
+ --gradient-orange-accent: oklch(0.58 0.20 45);
159
191
 
160
192
  /* Sidebar Theming */
161
193
  --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%);
@@ -308,14 +340,26 @@
308
340
  --gradient-cherry: linear-gradient(to right, oklch(0.23 0.09 12), oklch(0.32 0.14 358), oklch(0.26 0.10 0));
309
341
  --gradient-emerald: linear-gradient(to right, oklch(0.28 0.07 166), oklch(0.32 0.08 164), oklch(0.28 0.07 166));
310
342
  --gradient-amber: linear-gradient(to right, oklch(0.52 0.13 86), oklch(0.62 0.15 90), oklch(0.52 0.13 86));
343
+ --gradient-violet: linear-gradient(to right, oklch(0.18 0.10 293), oklch(0.36 0.20 293), oklch(0.24 0.12 293));
344
+ --gradient-rose: linear-gradient(to right, oklch(0.25 0.10 345), oklch(0.44 0.18 345), oklch(0.30 0.12 345));
345
+ --gradient-indigo: linear-gradient(to right, oklch(0.19 0.08 275), oklch(0.34 0.18 275), oklch(0.24 0.10 275));
346
+ --gradient-orange: linear-gradient(to right, oklch(0.25 0.10 45), oklch(0.50 0.17 45), oklch(0.32 0.12 45));
311
347
  --gradient-navy-border: oklch(0.28 0.02 260);
312
348
  --gradient-cherry-border: oklch(0.28 0.10 358);
313
349
  --gradient-emerald-border: oklch(0.28 0.07 166);
314
350
  --gradient-amber-border: oklch(0.52 0.13 86);
351
+ --gradient-violet-border: oklch(0.30 0.12 293);
352
+ --gradient-rose-border: oklch(0.33 0.12 345);
353
+ --gradient-indigo-border: oklch(0.28 0.10 275);
354
+ --gradient-orange-border: oklch(0.40 0.12 45);
315
355
  --gradient-navy-shadow: 0 0 50px oklch(0.26 0.10 264 / 0.3);
316
356
  --gradient-cherry-shadow: 0 0 50px oklch(0.30 0.12 358 / 0.3);
317
357
  --gradient-emerald-shadow: 0 0 50px oklch(0.30 0.08 165 / 0.3);
318
358
  --gradient-amber-shadow: 0 0 50px oklch(0.55 0.12 88 / 0.3);
359
+ --gradient-violet-shadow: 0 0 50px oklch(0.30 0.15 293 / 0.3);
360
+ --gradient-rose-shadow: 0 0 50px oklch(0.35 0.14 345 / 0.3);
361
+ --gradient-indigo-shadow: 0 0 50px oklch(0.30 0.13 275 / 0.3);
362
+ --gradient-orange-shadow: 0 0 50px oklch(0.42 0.14 45 / 0.3);
319
363
 
320
364
  /* Gradient header text & accent colors (dark) */
321
365
  --gradient-navy-text: oklch(0.90 0.01 260);
@@ -330,6 +374,18 @@
330
374
  --gradient-amber-text: oklch(0.96 0.02 96);
331
375
  --gradient-amber-muted: oklch(0.84 0.11 96);
332
376
  --gradient-amber-accent: oklch(0.52 0.13 86);
377
+ --gradient-violet-text: oklch(0.89 0.03 293);
378
+ --gradient-violet-muted: oklch(0.70 0.08 293);
379
+ --gradient-violet-accent: oklch(0.36 0.20 293);
380
+ --gradient-rose-text: oklch(0.91 0.02 345);
381
+ --gradient-rose-muted: oklch(0.73 0.07 345);
382
+ --gradient-rose-accent: oklch(0.44 0.18 345);
383
+ --gradient-indigo-text: oklch(0.90 0.02 275);
384
+ --gradient-indigo-muted: oklch(0.68 0.07 275);
385
+ --gradient-indigo-accent: oklch(0.34 0.18 275);
386
+ --gradient-orange-text: oklch(0.94 0.02 45);
387
+ --gradient-orange-muted: oklch(0.80 0.09 45);
388
+ --gradient-orange-accent: oklch(0.50 0.17 45);
333
389
 
334
390
  /* Sidebar Theming */
335
391
  --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%);
@@ -391,6 +447,11 @@
391
447
  .page-accent-cherry { --accent-cyan: var(--gradient-cherry-accent); }
392
448
  .page-accent-emerald { --accent-cyan: var(--gradient-emerald-accent); }
393
449
  .page-accent-amber { --accent-cyan: var(--gradient-amber-accent); }
450
+ .page-accent-teal { --accent-cyan: var(--gradient-teal-accent); }
451
+ .page-accent-violet { --accent-cyan: var(--gradient-violet-accent); }
452
+ .page-accent-rose { --accent-cyan: var(--gradient-rose-accent); }
453
+ .page-accent-indigo { --accent-cyan: var(--gradient-indigo-accent); }
454
+ .page-accent-orange { --accent-cyan: var(--gradient-orange-accent); }
394
455
 
395
456
  /* =============================================================================
396
457
  TAILWIND THEME MAPPING
@@ -509,6 +570,18 @@
509
570
  --color-gradient-amber-text: var(--gradient-amber-text);
510
571
  --color-gradient-amber-muted: var(--gradient-amber-muted);
511
572
  --color-gradient-amber-accent: var(--gradient-amber-accent);
573
+ --color-gradient-violet-text: var(--gradient-violet-text);
574
+ --color-gradient-violet-muted: var(--gradient-violet-muted);
575
+ --color-gradient-violet-accent: var(--gradient-violet-accent);
576
+ --color-gradient-rose-text: var(--gradient-rose-text);
577
+ --color-gradient-rose-muted: var(--gradient-rose-muted);
578
+ --color-gradient-rose-accent: var(--gradient-rose-accent);
579
+ --color-gradient-indigo-text: var(--gradient-indigo-text);
580
+ --color-gradient-indigo-muted: var(--gradient-indigo-muted);
581
+ --color-gradient-indigo-accent: var(--gradient-indigo-accent);
582
+ --color-gradient-orange-text: var(--gradient-orange-text);
583
+ --color-gradient-orange-muted: var(--gradient-orange-muted);
584
+ --color-gradient-orange-accent: var(--gradient-orange-accent);
512
585
  --color-gradient-teal-text: var(--gradient-teal-text);
513
586
  --color-gradient-teal-muted: var(--gradient-teal-muted);
514
587
  --color-gradient-teal-accent: var(--gradient-teal-accent);
@@ -704,12 +777,52 @@
704
777
  --toolbar-input-text: var(--gradient-teal-text);
705
778
  }
706
779
 
780
+ /* Violet toolbar */
781
+ .datatable-violet-toolbar {
782
+ --toolbar-bg: var(--gradient-violet);
783
+ --toolbar-border: var(--gradient-violet-border);
784
+ --toolbar-text: var(--gradient-violet-text);
785
+ --toolbar-input-bg: oklch(1.00 0 0 / 0.06);
786
+ --toolbar-input-text: var(--gradient-violet-text);
787
+ }
788
+
789
+ /* Rose toolbar */
790
+ .datatable-rose-toolbar {
791
+ --toolbar-bg: var(--gradient-rose);
792
+ --toolbar-border: var(--gradient-rose-border);
793
+ --toolbar-text: var(--gradient-rose-text);
794
+ --toolbar-input-bg: oklch(1.00 0 0 / 0.06);
795
+ --toolbar-input-text: var(--gradient-rose-text);
796
+ }
797
+
798
+ /* Indigo toolbar */
799
+ .datatable-indigo-toolbar {
800
+ --toolbar-bg: var(--gradient-indigo);
801
+ --toolbar-border: var(--gradient-indigo-border);
802
+ --toolbar-text: var(--gradient-indigo-text);
803
+ --toolbar-input-bg: oklch(1.00 0 0 / 0.06);
804
+ --toolbar-input-text: var(--gradient-indigo-text);
805
+ }
806
+
807
+ /* Orange toolbar */
808
+ .datatable-orange-toolbar {
809
+ --toolbar-bg: var(--gradient-orange);
810
+ --toolbar-border: var(--gradient-orange-border);
811
+ --toolbar-text: var(--gradient-orange-text);
812
+ --toolbar-input-bg: oklch(1.00 0 0 / 0.06);
813
+ --toolbar-input-text: var(--gradient-orange-text);
814
+ }
815
+
707
816
  /* Margin-top for all toolbar variants */
708
817
  .datatable-dark-toolbar,
709
818
  .datatable-cherry-toolbar,
710
819
  .datatable-emerald-toolbar,
711
820
  .datatable-amber-toolbar,
712
- .datatable-teal-toolbar {
821
+ .datatable-teal-toolbar,
822
+ .datatable-violet-toolbar,
823
+ .datatable-rose-toolbar,
824
+ .datatable-indigo-toolbar,
825
+ .datatable-orange-toolbar {
713
826
  margin-top: 0.5rem;
714
827
  }
715
828
 
@@ -718,7 +831,11 @@
718
831
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"],
719
832
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"],
720
833
  .datatable-amber-toolbar [data-slot="datatable-toolbar"],
721
- .datatable-teal-toolbar [data-slot="datatable-toolbar"] {
834
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"],
835
+ .datatable-violet-toolbar [data-slot="datatable-toolbar"],
836
+ .datatable-rose-toolbar [data-slot="datatable-toolbar"],
837
+ .datatable-indigo-toolbar [data-slot="datatable-toolbar"],
838
+ .datatable-orange-toolbar [data-slot="datatable-toolbar"] {
722
839
  background: var(--toolbar-bg);
723
840
  border-bottom-color: var(--toolbar-border);
724
841
  color: var(--toolbar-text);
@@ -730,7 +847,11 @@
730
847
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
731
848
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
732
849
  .datatable-amber-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
733
- .datatable-teal-toolbar [data-slot="datatable-toolbar"] [data-slot="input"] {
850
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
851
+ .datatable-violet-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
852
+ .datatable-rose-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
853
+ .datatable-indigo-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
854
+ .datatable-orange-toolbar [data-slot="datatable-toolbar"] [data-slot="input"] {
734
855
  background: var(--toolbar-input-bg);
735
856
  color: var(--toolbar-input-text);
736
857
  }
@@ -739,7 +860,11 @@
739
860
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] select,
740
861
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] select,
741
862
  .datatable-amber-toolbar [data-slot="datatable-toolbar"] select,
742
- .datatable-teal-toolbar [data-slot="datatable-toolbar"] select {
863
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] select,
864
+ .datatable-violet-toolbar [data-slot="datatable-toolbar"] select,
865
+ .datatable-rose-toolbar [data-slot="datatable-toolbar"] select,
866
+ .datatable-indigo-toolbar [data-slot="datatable-toolbar"] select,
867
+ .datatable-orange-toolbar [data-slot="datatable-toolbar"] select {
743
868
  background: var(--toolbar-input-bg);
744
869
  color: var(--toolbar-input-text);
745
870
  }
@@ -748,7 +873,11 @@
748
873
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] button,
749
874
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] button,
750
875
  .datatable-amber-toolbar [data-slot="datatable-toolbar"] button,
751
- .datatable-teal-toolbar [data-slot="datatable-toolbar"] button {
876
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] button,
877
+ .datatable-violet-toolbar [data-slot="datatable-toolbar"] button,
878
+ .datatable-rose-toolbar [data-slot="datatable-toolbar"] button,
879
+ .datatable-indigo-toolbar [data-slot="datatable-toolbar"] button,
880
+ .datatable-orange-toolbar [data-slot="datatable-toolbar"] button {
752
881
  color: var(--toolbar-text);
753
882
  }
754
883
 
@@ -756,7 +885,11 @@
756
885
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] button:hover,
757
886
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] button:hover,
758
887
  .datatable-amber-toolbar [data-slot="datatable-toolbar"] button:hover,
759
- .datatable-teal-toolbar [data-slot="datatable-toolbar"] button:hover {
888
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] button:hover,
889
+ .datatable-violet-toolbar [data-slot="datatable-toolbar"] button:hover,
890
+ .datatable-rose-toolbar [data-slot="datatable-toolbar"] button:hover,
891
+ .datatable-indigo-toolbar [data-slot="datatable-toolbar"] button:hover,
892
+ .datatable-orange-toolbar [data-slot="datatable-toolbar"] button:hover {
760
893
  background: var(--toolbar-hover-bg);
761
894
  color: var(--toolbar-hover-text);
762
895
  }
@@ -769,7 +902,15 @@
769
902
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] select,
770
903
  .datatable-amber-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
771
904
  .datatable-amber-toolbar [data-slot="datatable-toolbar"] select,
772
- .datatable-teal-toolbar [data-slot="datatable-toolbar"] select {
905
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] select,
906
+ .datatable-violet-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
907
+ .datatable-violet-toolbar [data-slot="datatable-toolbar"] select,
908
+ .datatable-rose-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
909
+ .datatable-rose-toolbar [data-slot="datatable-toolbar"] select,
910
+ .datatable-indigo-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
911
+ .datatable-indigo-toolbar [data-slot="datatable-toolbar"] select,
912
+ .datatable-orange-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
913
+ .datatable-orange-toolbar [data-slot="datatable-toolbar"] select {
773
914
  border-color: var(--toolbar-input-border);
774
915
  }
775
916
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nar-bus/lena-ui-shared",
3
- "version": "1.3.5",
3
+ "version": "1.3.7",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",