@limpiolux/ui-styles 1.0.1 → 1.0.4
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 +6 -0
- package/components.css +349 -0
- package/light.css +152 -0
- package/package.json +5 -3
- package/utilities.css +24 -0
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 {
|
|
@@ -649,6 +785,108 @@
|
|
|
649
785
|
background: rgba(39, 39, 42, 0.72);
|
|
650
786
|
}
|
|
651
787
|
|
|
788
|
+
/* ── Legacy bridge: dropdowns ── */
|
|
789
|
+
|
|
790
|
+
.dropdown,
|
|
791
|
+
.dropup,
|
|
792
|
+
.dropend,
|
|
793
|
+
.dropstart {
|
|
794
|
+
position: relative;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.dropdown-menu {
|
|
798
|
+
position: absolute;
|
|
799
|
+
top: calc(100% + 0.35rem);
|
|
800
|
+
left: 0;
|
|
801
|
+
z-index: 1200;
|
|
802
|
+
display: none;
|
|
803
|
+
min-width: 11rem;
|
|
804
|
+
padding: 0.35rem;
|
|
805
|
+
margin: 0;
|
|
806
|
+
list-style: none;
|
|
807
|
+
border-radius: 0.75rem;
|
|
808
|
+
border: 1px solid rgb(var(--color-zinc-800));
|
|
809
|
+
background: rgba(var(--color-zinc-950) / 0.96);
|
|
810
|
+
box-shadow:
|
|
811
|
+
0 16px 38px -24px rgba(0, 0, 0, 0.62),
|
|
812
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
813
|
+
backdrop-filter: blur(14px) saturate(1.35);
|
|
814
|
+
-webkit-backdrop-filter: blur(14px) saturate(1.35);
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.dropdown-menu.show {
|
|
818
|
+
display: block;
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
.dropdown-menu-end {
|
|
822
|
+
left: auto;
|
|
823
|
+
right: 0;
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
.dropup .dropdown-menu {
|
|
827
|
+
top: auto;
|
|
828
|
+
bottom: calc(100% + 0.35rem);
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
.dropdown-item {
|
|
832
|
+
display: flex;
|
|
833
|
+
width: 100%;
|
|
834
|
+
align-items: center;
|
|
835
|
+
gap: 0.45rem;
|
|
836
|
+
border: 0;
|
|
837
|
+
border-radius: 0.55rem;
|
|
838
|
+
background: transparent;
|
|
839
|
+
color: rgb(var(--color-zinc-200));
|
|
840
|
+
padding: 0.52rem 0.62rem;
|
|
841
|
+
text-align: left;
|
|
842
|
+
font-size: 0.82rem;
|
|
843
|
+
line-height: 1.2;
|
|
844
|
+
text-decoration: none;
|
|
845
|
+
white-space: nowrap;
|
|
846
|
+
cursor: pointer;
|
|
847
|
+
transition: background-color 140ms ease, color 140ms ease;
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
.dropdown-item:hover,
|
|
851
|
+
.dropdown-item:focus-visible {
|
|
852
|
+
background: rgba(var(--color-zinc-800) / 0.78);
|
|
853
|
+
color: rgb(var(--color-zinc-100));
|
|
854
|
+
outline: none;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
.dropdown-item.active,
|
|
858
|
+
.dropdown-item:active {
|
|
859
|
+
background: rgba(var(--color-brand) / 0.2);
|
|
860
|
+
color: #fff;
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
.dropdown-item.disabled,
|
|
864
|
+
.dropdown-item:disabled {
|
|
865
|
+
opacity: 0.55;
|
|
866
|
+
pointer-events: none;
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
.dropdown-divider {
|
|
870
|
+
height: 1px;
|
|
871
|
+
margin: 0.25rem 0.15rem;
|
|
872
|
+
border: 0;
|
|
873
|
+
background: rgb(var(--color-zinc-800));
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
.dropdown-toggle::after {
|
|
877
|
+
display: inline-block;
|
|
878
|
+
margin-left: 0.38rem;
|
|
879
|
+
vertical-align: 0.12em;
|
|
880
|
+
content: '';
|
|
881
|
+
border-top: 0.32em solid;
|
|
882
|
+
border-right: 0.28em solid transparent;
|
|
883
|
+
border-left: 0.28em solid transparent;
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
.dropdown-toggle:empty::after {
|
|
887
|
+
margin-left: 0;
|
|
888
|
+
}
|
|
889
|
+
|
|
652
890
|
/* ── Legacy bridge: alerts & badges ── */
|
|
653
891
|
|
|
654
892
|
.alert {
|
|
@@ -791,10 +1029,22 @@
|
|
|
791
1029
|
|
|
792
1030
|
.table-responsive {
|
|
793
1031
|
overflow-x: auto;
|
|
1032
|
+
overflow-y: visible;
|
|
1033
|
+
position: relative;
|
|
1034
|
+
isolation: isolate;
|
|
794
1035
|
border-radius: 0.75rem;
|
|
795
1036
|
border: 1px solid rgb(var(--color-zinc-800));
|
|
796
1037
|
}
|
|
797
1038
|
|
|
1039
|
+
.table-responsive .dropdown,
|
|
1040
|
+
.table-responsive td {
|
|
1041
|
+
position: relative;
|
|
1042
|
+
}
|
|
1043
|
+
|
|
1044
|
+
.table-responsive .dropdown-menu {
|
|
1045
|
+
z-index: 1250;
|
|
1046
|
+
}
|
|
1047
|
+
|
|
798
1048
|
.table-hover tbody tr:hover {
|
|
799
1049
|
background-color: rgb(var(--color-zinc-800) / 0.3);
|
|
800
1050
|
}
|
|
@@ -996,6 +1246,105 @@
|
|
|
996
1246
|
text-align: left !important;
|
|
997
1247
|
}
|
|
998
1248
|
|
|
1249
|
+
.text-center {
|
|
1250
|
+
text-align: center !important;
|
|
1251
|
+
}
|
|
1252
|
+
|
|
1253
|
+
.text-left {
|
|
1254
|
+
text-align: left !important;
|
|
1255
|
+
}
|
|
1256
|
+
|
|
1257
|
+
.text-right,
|
|
1258
|
+
.text-end {
|
|
1259
|
+
text-align: right !important;
|
|
1260
|
+
}
|
|
1261
|
+
|
|
1262
|
+
.align-items-center {
|
|
1263
|
+
align-items: center !important;
|
|
1264
|
+
}
|
|
1265
|
+
|
|
1266
|
+
.align-items-end {
|
|
1267
|
+
align-items: flex-end !important;
|
|
1268
|
+
}
|
|
1269
|
+
|
|
1270
|
+
.align-items-stretch {
|
|
1271
|
+
align-items: stretch !important;
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
.justify-content-center {
|
|
1275
|
+
justify-content: center !important;
|
|
1276
|
+
}
|
|
1277
|
+
|
|
1278
|
+
.justify-content-between {
|
|
1279
|
+
justify-content: space-between !important;
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
.justify-content-end {
|
|
1283
|
+
justify-content: flex-end !important;
|
|
1284
|
+
}
|
|
1285
|
+
|
|
1286
|
+
.justify-content-stretch {
|
|
1287
|
+
justify-content: stretch !important;
|
|
1288
|
+
}
|
|
1289
|
+
|
|
1290
|
+
.form-group {
|
|
1291
|
+
margin-bottom: 0.75rem;
|
|
1292
|
+
}
|
|
1293
|
+
|
|
1294
|
+
.form-label {
|
|
1295
|
+
display: block;
|
|
1296
|
+
font-size: 0.875rem;
|
|
1297
|
+
font-weight: 500;
|
|
1298
|
+
color: rgb(var(--color-zinc-300));
|
|
1299
|
+
margin-bottom: 0.35rem;
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
.form-select-sm {
|
|
1303
|
+
padding: 0.35rem 0.55rem;
|
|
1304
|
+
font-size: 0.78rem;
|
|
1305
|
+
border-radius: 0.45rem;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
.rounded {
|
|
1309
|
+
border-radius: 0.5rem !important;
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
.rounded-circle {
|
|
1313
|
+
border-radius: 999px !important;
|
|
1314
|
+
}
|
|
1315
|
+
|
|
1316
|
+
.bg-primary {
|
|
1317
|
+
background: rgba(var(--color-brand) / 0.18) !important;
|
|
1318
|
+
color: #d7f1fb !important;
|
|
1319
|
+
}
|
|
1320
|
+
|
|
1321
|
+
.bg-secondary {
|
|
1322
|
+
background: rgba(var(--color-zinc-700) / 0.35) !important;
|
|
1323
|
+
color: rgb(var(--color-zinc-200)) !important;
|
|
1324
|
+
}
|
|
1325
|
+
|
|
1326
|
+
.border-brand {
|
|
1327
|
+
border-color: rgba(var(--color-brand) / 0.45) !important;
|
|
1328
|
+
}
|
|
1329
|
+
|
|
1330
|
+
.border-warning {
|
|
1331
|
+
border-color: rgba(245, 158, 11, 0.42) !important;
|
|
1332
|
+
}
|
|
1333
|
+
|
|
1334
|
+
.border-muted {
|
|
1335
|
+
border-color: rgba(var(--color-zinc-600) / 0.5) !important;
|
|
1336
|
+
}
|
|
1337
|
+
|
|
1338
|
+
.text-orange {
|
|
1339
|
+
color: #fb923c !important;
|
|
1340
|
+
}
|
|
1341
|
+
|
|
1342
|
+
.alert-heading {
|
|
1343
|
+
font-size: 0.9rem;
|
|
1344
|
+
font-weight: 600;
|
|
1345
|
+
margin: 0 0 0.25rem;
|
|
1346
|
+
}
|
|
1347
|
+
|
|
999
1348
|
.fade {
|
|
1000
1349
|
opacity: 0;
|
|
1001
1350
|
transition: opacity 160ms ease;
|
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
|
}
|
|
@@ -363,6 +467,36 @@
|
|
|
363
467
|
background: rgba(228, 228, 231, 0.9);
|
|
364
468
|
}
|
|
365
469
|
|
|
470
|
+
/* ── Legacy bridge: dropdowns ── */
|
|
471
|
+
|
|
472
|
+
.light .dropdown-menu {
|
|
473
|
+
border-color: rgba(212, 212, 216, 0.95);
|
|
474
|
+
background: rgba(255, 255, 255, 0.96);
|
|
475
|
+
box-shadow:
|
|
476
|
+
0 16px 34px -24px rgba(15, 23, 42, 0.2),
|
|
477
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.85);
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.light .dropdown-item {
|
|
481
|
+
color: rgb(var(--color-zinc-200));
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.light .dropdown-item:hover,
|
|
485
|
+
.light .dropdown-item:focus-visible {
|
|
486
|
+
background: rgba(var(--color-zinc-700) / 0.32);
|
|
487
|
+
color: rgb(var(--color-zinc-100));
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
.light .dropdown-item.active,
|
|
491
|
+
.light .dropdown-item:active {
|
|
492
|
+
background: rgba(var(--color-brand) / 0.16);
|
|
493
|
+
color: rgb(var(--color-brand-strong));
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.light .dropdown-divider {
|
|
497
|
+
background: rgba(var(--color-zinc-700) / 0.6);
|
|
498
|
+
}
|
|
499
|
+
|
|
366
500
|
/* ── Legacy bridge: alerts & badges ── */
|
|
367
501
|
|
|
368
502
|
.light .text-bg-light,
|
|
@@ -477,3 +611,21 @@
|
|
|
477
611
|
.light .text-danger-emphasis {
|
|
478
612
|
color: #991b1b !important;
|
|
479
613
|
}
|
|
614
|
+
|
|
615
|
+
.light .form-label {
|
|
616
|
+
color: rgb(var(--color-zinc-300));
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.light .bg-primary {
|
|
620
|
+
background: rgba(var(--color-brand) / 0.12) !important;
|
|
621
|
+
color: rgb(var(--color-brand-strong)) !important;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
.light .bg-secondary {
|
|
625
|
+
background: rgba(var(--color-zinc-700) / 0.24) !important;
|
|
626
|
+
color: rgb(var(--color-zinc-300)) !important;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.light .text-orange {
|
|
630
|
+
color: #c2410c !important;
|
|
631
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@limpiolux/ui-styles",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Shared design system —
|
|
3
|
+
"version": "1.0.4",
|
|
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": {
|
package/utilities.css
CHANGED
|
@@ -188,9 +188,33 @@
|
|
|
188
188
|
.mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
|
|
189
189
|
.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
|
|
190
190
|
|
|
191
|
+
.mt-0 { margin-top: 0 !important; }
|
|
192
|
+
.mt-1 { margin-top: 0.25rem !important; }
|
|
193
|
+
.mt-2 { margin-top: 0.5rem !important; }
|
|
194
|
+
.mt-3 { margin-top: 0.75rem !important; }
|
|
195
|
+
|
|
191
196
|
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
|
|
192
197
|
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
|
|
193
198
|
|
|
199
|
+
.mb-0 { margin-bottom: 0 !important; }
|
|
200
|
+
.mb-1 { margin-bottom: 0.25rem !important; }
|
|
201
|
+
.mb-2 { margin-bottom: 0.5rem !important; }
|
|
202
|
+
.mb-3 { margin-bottom: 0.75rem !important; }
|
|
203
|
+
|
|
204
|
+
.pt-2 { padding-top: 0.5rem !important; }
|
|
205
|
+
|
|
206
|
+
.h-2 { height: 0.5rem !important; }
|
|
207
|
+
.h-3 { height: 0.75rem !important; }
|
|
208
|
+
.h-4 { height: 1rem !important; }
|
|
209
|
+
.h-7 { height: 1.75rem !important; }
|
|
210
|
+
.h-8 { height: 2rem !important; }
|
|
211
|
+
.h-10 { height: 2.5rem !important; }
|
|
212
|
+
.h-14 { height: 3.5rem !important; }
|
|
213
|
+
.h-16 { height: 4rem !important; }
|
|
214
|
+
.h-full { height: 100% !important; }
|
|
215
|
+
|
|
216
|
+
.w-auto { width: auto !important; }
|
|
217
|
+
|
|
194
218
|
.pl-2 { padding-left: 0.5rem !important; }
|
|
195
219
|
.pl-3 { padding-left: 0.75rem !important; }
|
|
196
220
|
.pl-4 { padding-left: 1rem !important; }
|