@limpiolux/ui-styles 1.0.2 → 1.0.5

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/base.css CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  @layer base {
9
9
  :root {
10
+ color-scheme: dark;
10
11
  --color-zinc-50: 250 250 250;
11
12
  --color-zinc-100: 244 244 245;
12
13
  --color-zinc-200: 228 228 231;
@@ -24,6 +25,7 @@
24
25
  }
25
26
 
26
27
  .light {
28
+ color-scheme: light;
27
29
  --color-zinc-50: 9 9 11;
28
30
  --color-zinc-100: 24 24 27;
29
31
  --color-zinc-200: 39 39 42;
@@ -44,6 +46,10 @@
44
46
  min-height: 100vh;
45
47
  -webkit-font-smoothing: antialiased;
46
48
  -moz-osx-font-smoothing: grayscale;
49
+ transition:
50
+ background-color 420ms ease,
51
+ color 420ms ease,
52
+ background-image 420ms ease;
47
53
  }
48
54
 
49
55
  ::selection {
package/components.css CHANGED
@@ -42,6 +42,142 @@
42
42
  flex items-center justify-center gap-2;
43
43
  }
44
44
 
45
+ .theme-icon-button {
46
+ @apply inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-zinc-200;
47
+ transition:
48
+ transform 220ms ease,
49
+ background-color 220ms ease,
50
+ border-color 220ms ease,
51
+ color 220ms ease,
52
+ box-shadow 220ms ease;
53
+ }
54
+
55
+ .theme-icon-button:hover {
56
+ transform: translateY(-1px);
57
+ background: rgba(255, 255, 255, 0.1);
58
+ border-color: rgba(255, 255, 255, 0.14);
59
+ }
60
+
61
+ .theme-icon-glyph {
62
+ display: inline-flex;
63
+ transition: transform 420ms ease;
64
+ }
65
+
66
+ .theme-icon-glyph-rotated {
67
+ transform: rotate(180deg);
68
+ }
69
+
70
+ .theme-transition-surface {
71
+ transition:
72
+ background-color 420ms ease,
73
+ border-color 420ms ease,
74
+ box-shadow 420ms ease,
75
+ color 420ms ease,
76
+ transform 420ms ease;
77
+ }
78
+
79
+ .collapse-panel {
80
+ display: grid;
81
+ grid-template-rows: 0fr;
82
+ opacity: 0;
83
+ transition:
84
+ grid-template-rows 280ms ease,
85
+ opacity 280ms ease,
86
+ margin-top 280ms ease;
87
+ }
88
+
89
+ .collapse-panel-open {
90
+ grid-template-rows: 1fr;
91
+ opacity: 1;
92
+ }
93
+
94
+ .collapse-panel-content {
95
+ overflow: hidden;
96
+ }
97
+
98
+ .glass-panel {
99
+ @apply rounded-[28px] border border-white/10 bg-white/[0.045] shadow-2xl shadow-black/30 backdrop-blur-xl;
100
+ transition:
101
+ background-color 420ms ease,
102
+ border-color 420ms ease,
103
+ box-shadow 420ms ease,
104
+ transform 420ms ease;
105
+ }
106
+
107
+ .auth-kicker {
108
+ @apply inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.24em] text-zinc-300;
109
+ }
110
+
111
+ .auth-logo-surface {
112
+ @apply inline-flex h-14 items-center justify-center rounded-[20px] border border-white/10 bg-white/5 px-4;
113
+ }
114
+
115
+ .auth-hero-panel {
116
+ @apply glass-panel relative overflow-hidden p-8 md:p-10;
117
+ }
118
+
119
+ .auth-hero-backdrop {
120
+ @apply absolute inset-0;
121
+ background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.09), transparent 32%);
122
+ }
123
+
124
+ .auth-hero-logo {
125
+ @apply h-20 w-auto md:h-28;
126
+ }
127
+
128
+ .auth-hero-title {
129
+ @apply mt-5 max-w-xl text-3xl font-semibold tracking-tight text-zinc-100 md:text-[2.6rem];
130
+ }
131
+
132
+ .auth-hero-body {
133
+ @apply mt-4 max-w-xl text-sm leading-6 text-zinc-400 md:text-base;
134
+ }
135
+
136
+ .auth-card {
137
+ @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-6 shadow-2xl shadow-black/30 backdrop-blur-xl md:p-8;
138
+ transition:
139
+ background-color 420ms ease,
140
+ border-color 420ms ease,
141
+ box-shadow 420ms ease;
142
+ }
143
+
144
+ .auth-title {
145
+ @apply text-lg font-semibold text-zinc-100;
146
+ }
147
+
148
+ .auth-subtitle {
149
+ @apply text-sm text-zinc-500;
150
+ }
151
+
152
+ .auth-label {
153
+ @apply mb-2 block text-xs font-medium uppercase tracking-[0.18em] text-zinc-500;
154
+ }
155
+
156
+ .auth-link {
157
+ @apply text-sm font-medium text-zinc-400;
158
+ transition: color 180ms ease;
159
+ }
160
+
161
+ .auth-link:hover {
162
+ @apply text-zinc-200;
163
+ }
164
+
165
+ .auth-support-panel {
166
+ @apply rounded-[24px] border border-white/10 bg-white/[0.03] p-4;
167
+ transition:
168
+ background-color 320ms ease,
169
+ border-color 320ms ease,
170
+ box-shadow 320ms ease,
171
+ transform 320ms ease;
172
+ box-shadow:
173
+ inset 0 1px 0 rgba(255, 255, 255, 0.03),
174
+ 0 18px 34px -30px rgba(15, 23, 42, 0.24);
175
+ }
176
+
177
+ .auth-support-icon {
178
+ @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-sky-400/15 bg-sky-400/10 text-sky-200;
179
+ }
180
+
45
181
  /* ── Accent: Amber ── */
46
182
 
47
183
  .accent-amber-text {
@@ -229,6 +365,25 @@
229
365
  box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.24);
230
366
  }
231
367
 
368
+ .sidebar-action {
369
+ @apply flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors;
370
+ color: #a1a1aa;
371
+ }
372
+
373
+ .sidebar-action:hover {
374
+ color: #e4e4e7;
375
+ background: rgba(39, 39, 42, 0.72);
376
+ }
377
+
378
+ .sidebar-action-danger {
379
+ color: rgba(239, 68, 68, 0.8);
380
+ }
381
+
382
+ .sidebar-action-danger:hover {
383
+ color: rgba(248, 113, 113, 1);
384
+ background: rgba(39, 39, 42, 0.72);
385
+ }
386
+
232
387
  /* ── Brand surfaces ── */
233
388
 
234
389
  .brand-panel {
@@ -649,6 +804,108 @@
649
804
  background: rgba(39, 39, 42, 0.72);
650
805
  }
651
806
 
807
+ /* ── Legacy bridge: dropdowns ── */
808
+
809
+ .dropdown,
810
+ .dropup,
811
+ .dropend,
812
+ .dropstart {
813
+ position: relative;
814
+ }
815
+
816
+ .dropdown-menu {
817
+ position: absolute;
818
+ top: calc(100% + 0.35rem);
819
+ left: 0;
820
+ z-index: 1200;
821
+ display: none;
822
+ min-width: 11rem;
823
+ padding: 0.35rem;
824
+ margin: 0;
825
+ list-style: none;
826
+ border-radius: 0.75rem;
827
+ border: 1px solid rgb(var(--color-zinc-800));
828
+ background: rgba(var(--color-zinc-950) / 0.96);
829
+ box-shadow:
830
+ 0 16px 38px -24px rgba(0, 0, 0, 0.62),
831
+ inset 0 1px 0 rgba(255, 255, 255, 0.05);
832
+ backdrop-filter: blur(14px) saturate(1.35);
833
+ -webkit-backdrop-filter: blur(14px) saturate(1.35);
834
+ }
835
+
836
+ .dropdown-menu.show {
837
+ display: block;
838
+ }
839
+
840
+ .dropdown-menu-end {
841
+ left: auto;
842
+ right: 0;
843
+ }
844
+
845
+ .dropup .dropdown-menu {
846
+ top: auto;
847
+ bottom: calc(100% + 0.35rem);
848
+ }
849
+
850
+ .dropdown-item {
851
+ display: flex;
852
+ width: 100%;
853
+ align-items: center;
854
+ gap: 0.45rem;
855
+ border: 0;
856
+ border-radius: 0.55rem;
857
+ background: transparent;
858
+ color: rgb(var(--color-zinc-200));
859
+ padding: 0.52rem 0.62rem;
860
+ text-align: left;
861
+ font-size: 0.82rem;
862
+ line-height: 1.2;
863
+ text-decoration: none;
864
+ white-space: nowrap;
865
+ cursor: pointer;
866
+ transition: background-color 140ms ease, color 140ms ease;
867
+ }
868
+
869
+ .dropdown-item:hover,
870
+ .dropdown-item:focus-visible {
871
+ background: rgba(var(--color-zinc-800) / 0.78);
872
+ color: rgb(var(--color-zinc-100));
873
+ outline: none;
874
+ }
875
+
876
+ .dropdown-item.active,
877
+ .dropdown-item:active {
878
+ background: rgba(var(--color-brand) / 0.2);
879
+ color: #fff;
880
+ }
881
+
882
+ .dropdown-item.disabled,
883
+ .dropdown-item:disabled {
884
+ opacity: 0.55;
885
+ pointer-events: none;
886
+ }
887
+
888
+ .dropdown-divider {
889
+ height: 1px;
890
+ margin: 0.25rem 0.15rem;
891
+ border: 0;
892
+ background: rgb(var(--color-zinc-800));
893
+ }
894
+
895
+ .dropdown-toggle::after {
896
+ display: inline-block;
897
+ margin-left: 0.38rem;
898
+ vertical-align: 0.12em;
899
+ content: '';
900
+ border-top: 0.32em solid;
901
+ border-right: 0.28em solid transparent;
902
+ border-left: 0.28em solid transparent;
903
+ }
904
+
905
+ .dropdown-toggle:empty::after {
906
+ margin-left: 0;
907
+ }
908
+
652
909
  /* ── Legacy bridge: alerts & badges ── */
653
910
 
654
911
  .alert {
@@ -791,10 +1048,22 @@
791
1048
 
792
1049
  .table-responsive {
793
1050
  overflow-x: auto;
1051
+ overflow-y: visible;
1052
+ position: relative;
1053
+ isolation: isolate;
794
1054
  border-radius: 0.75rem;
795
1055
  border: 1px solid rgb(var(--color-zinc-800));
796
1056
  }
797
1057
 
1058
+ .table-responsive .dropdown,
1059
+ .table-responsive td {
1060
+ position: relative;
1061
+ }
1062
+
1063
+ .table-responsive .dropdown-menu {
1064
+ z-index: 1250;
1065
+ }
1066
+
798
1067
  .table-hover tbody tr:hover {
799
1068
  background-color: rgb(var(--color-zinc-800) / 0.3);
800
1069
  }
package/light.css CHANGED
@@ -5,6 +5,110 @@
5
5
 
6
6
  /* ── Amber accents ── */
7
7
 
8
+ .light .theme-icon-button {
9
+ background: rgba(255, 255, 255, 0.82);
10
+ border-color: rgba(212, 212, 216, 0.92);
11
+ color: #3f3f46;
12
+ box-shadow: 0 16px 36px -28px rgba(15, 23, 42, 0.18);
13
+ }
14
+
15
+ .light .theme-icon-button:hover {
16
+ background: #ffffff;
17
+ border-color: rgba(161, 161, 170, 0.36);
18
+ }
19
+
20
+ .light .glass-panel {
21
+ border-color: rgba(212, 212, 216, 0.88);
22
+ background: rgba(255, 255, 255, 0.74);
23
+ box-shadow: 0 24px 48px -34px rgba(15, 23, 42, 0.2);
24
+ }
25
+
26
+ .light .auth-kicker {
27
+ background: rgba(255, 255, 255, 0.78);
28
+ border-color: rgba(212, 212, 216, 0.88);
29
+ color: #3f3f46;
30
+ }
31
+
32
+ .light .auth-logo-surface {
33
+ background: rgba(255, 255, 255, 0.92);
34
+ border-color: rgba(212, 212, 216, 0.9);
35
+ box-shadow: 0 20px 36px -30px rgba(15, 23, 42, 0.18);
36
+ }
37
+
38
+ .light .auth-hero-backdrop {
39
+ background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.82), transparent 36%);
40
+ }
41
+
42
+ .light .auth-hero-title {
43
+ color: #18181b;
44
+ }
45
+
46
+ .light .auth-hero-body {
47
+ color: #52525b;
48
+ }
49
+
50
+ .light .auth-card {
51
+ border-color: rgba(212, 212, 216, 0.88);
52
+ background: rgba(255, 255, 255, 0.82);
53
+ box-shadow: 0 24px 48px -34px rgba(15, 23, 42, 0.22);
54
+ }
55
+
56
+ .light .auth-title {
57
+ color: #18181b;
58
+ }
59
+
60
+ .light .auth-subtitle,
61
+ .light .auth-label {
62
+ color: #52525b;
63
+ }
64
+
65
+ .light .auth-link {
66
+ color: #3f3f46;
67
+ }
68
+
69
+ .light .auth-link:hover {
70
+ color: #18181b;
71
+ }
72
+
73
+ .light .auth-support-panel {
74
+ background: rgba(244, 244, 245, 0.9);
75
+ border-color: rgba(212, 212, 216, 0.88);
76
+ box-shadow:
77
+ inset 0 1px 0 rgba(255, 255, 255, 0.64),
78
+ 0 18px 34px -30px rgba(15, 23, 42, 0.16);
79
+ }
80
+
81
+ .light .auth-support-icon {
82
+ background: rgba(var(--color-brand) / 0.1);
83
+ border-color: rgba(var(--color-brand) / 0.18);
84
+ color: rgb(var(--color-brand-strong));
85
+ box-shadow: 0 12px 24px -20px rgba(0, 117, 169, 0.22);
86
+ }
87
+
88
+ .light .form-input {
89
+ background: rgba(255, 255, 255, 0.92);
90
+ border-color: rgba(212, 212, 216, 0.92);
91
+ color: #18181b;
92
+ box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.18);
93
+ }
94
+
95
+ .light .form-input::placeholder {
96
+ color: #71717a;
97
+ }
98
+
99
+ .light .btn-secondary {
100
+ background: rgba(255, 255, 255, 0.82);
101
+ border-color: rgba(212, 212, 216, 0.92);
102
+ color: #3f3f46;
103
+ box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.14);
104
+ }
105
+
106
+ .light .btn-secondary:hover {
107
+ background: #ffffff;
108
+ border-color: rgba(161, 161, 170, 0.42);
109
+ color: #18181b;
110
+ }
111
+
8
112
  .light .accent-amber-text {
9
113
  color: #a16207;
10
114
  }
@@ -177,6 +281,24 @@
177
281
  box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.2);
178
282
  }
179
283
 
284
+ .light .sidebar-action {
285
+ color: #52525b;
286
+ }
287
+
288
+ .light .sidebar-action:hover {
289
+ color: #18181b;
290
+ background: #f4f4f5;
291
+ }
292
+
293
+ .light .sidebar-action-danger {
294
+ color: #b91c1c;
295
+ }
296
+
297
+ .light .sidebar-action-danger:hover {
298
+ color: #991b1b;
299
+ background: #fef2f2;
300
+ }
301
+
180
302
  /* ── Brand surfaces ── */
181
303
 
182
304
  .light .brand-panel {
@@ -363,6 +485,36 @@
363
485
  background: rgba(228, 228, 231, 0.9);
364
486
  }
365
487
 
488
+ /* ── Legacy bridge: dropdowns ── */
489
+
490
+ .light .dropdown-menu {
491
+ border-color: rgba(212, 212, 216, 0.95);
492
+ background: rgba(255, 255, 255, 0.96);
493
+ box-shadow:
494
+ 0 16px 34px -24px rgba(15, 23, 42, 0.2),
495
+ inset 0 1px 0 rgba(255, 255, 255, 0.85);
496
+ }
497
+
498
+ .light .dropdown-item {
499
+ color: rgb(var(--color-zinc-200));
500
+ }
501
+
502
+ .light .dropdown-item:hover,
503
+ .light .dropdown-item:focus-visible {
504
+ background: rgba(var(--color-zinc-700) / 0.32);
505
+ color: rgb(var(--color-zinc-100));
506
+ }
507
+
508
+ .light .dropdown-item.active,
509
+ .light .dropdown-item:active {
510
+ background: rgba(var(--color-brand) / 0.16);
511
+ color: rgb(var(--color-brand-strong));
512
+ }
513
+
514
+ .light .dropdown-divider {
515
+ background: rgba(var(--color-zinc-700) / 0.6);
516
+ }
517
+
366
518
  /* ── Legacy bridge: alerts & badges ── */
367
519
 
368
520
  .light .text-bg-light,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@limpiolux/ui-styles",
3
- "version": "1.0.2",
4
- "description": "Shared design system — Preventores liquid glass theme with dark/light mode support",
3
+ "version": "1.0.5",
4
+ "description": "Shared design system — Limpiolux liquid glass theme with auth, portal and dark/light mode support",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": "./index.css",
@@ -24,7 +24,9 @@
24
24
  "tailwindcss",
25
25
  "design-system",
26
26
  "liquid-glass",
27
- "preventores"
27
+ "preventores",
28
+ "portal",
29
+ "auth"
28
30
  ],
29
31
  "license": "MIT",
30
32
  "peerDependencies": {