@infonomic/uikit 3.11.0 → 5.0.0
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/components/badge/badge_module.css +8 -8
- package/dist/components/button/button-group_module.css +2 -2
- package/dist/components/button/button_module.css +44 -127
- package/dist/components/button/copy-button_module.css +7 -7
- package/dist/components/card/card.js +6 -6
- package/dist/components/card/card.module.js +12 -6
- package/dist/components/card/card_module.css +10 -10
- package/dist/components/container/container_module.css +4 -4
- package/dist/components/forms/error-text_module.css +2 -6
- package/dist/components/forms/help-text_module.css +1 -1
- package/dist/components/forms/input-adornment_module.css +3 -3
- package/dist/components/forms/input.js +6 -6
- package/dist/components/forms/input.module.js +14 -7
- package/dist/components/forms/input_module.css +71 -32
- package/dist/components/forms/label_module.css +4 -12
- package/dist/components/forms/text-area.js +1 -1
- package/dist/components/forms/text-area_module.css +1 -1
- package/dist/components/section/section_module.css +2 -1
- package/dist/styles/components-vanilla.css +1 -0
- package/dist/styles/styles.css +1 -1
- package/package.json +25 -23
- package/src/components/badge/badge.module.css +16 -8
- package/src/components/button/button-group.module.css +4 -2
- package/src/components/button/button.module.css +136 -143
- package/src/components/button/copy-button.module.css +14 -7
- package/src/components/card/card-content.astro +1 -1
- package/src/components/card/card-description.astro +1 -1
- package/src/components/card/card-footer.astro +1 -1
- package/src/components/card/card-header.astro +1 -1
- package/src/components/card/card-title.astro +1 -1
- package/src/components/card/card.astro +2 -2
- package/src/components/card/card.module.css +20 -10
- package/src/components/card/card.tsx +6 -6
- package/src/components/container/container.module.css +8 -4
- package/src/components/forms/error-text.module.css +3 -13
- package/src/components/forms/help-text.module.css +2 -1
- package/src/components/forms/input-adornment.module.css +6 -3
- package/src/components/forms/input.astro +6 -6
- package/src/components/forms/input.module.css +82 -39
- package/src/components/forms/input.tsx +6 -6
- package/src/components/forms/label.module.css +6 -19
- package/src/components/forms/text-area.module.css +2 -1
- package/src/components/forms/text-area.tsx +1 -1
- package/src/components/section/section.module.css +3 -1
- package/src/styles/functional/colors.css +0 -23
- package/src/styles/functional/surfaces.css +4 -4
- package/src/styles/functional/typography.css +3 -0
- package/src/styles/typography/prose.css +1 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
|
|
2
2
|
|
|
3
3
|
@layer infonomic-components {
|
|
4
|
-
.badge-8xVidp {
|
|
4
|
+
:is(.badge-8xVidp, .badge) {
|
|
5
5
|
font-size: var(--font-size-sm);
|
|
6
6
|
text-align: center;
|
|
7
7
|
white-space: nowrap;
|
|
@@ -13,37 +13,37 @@
|
|
|
13
13
|
display: inline-block;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.primary-oZyR_M {
|
|
16
|
+
:is(.primary-oZyR_M, .badge-primary) {
|
|
17
17
|
color: var(--text-on-primary);
|
|
18
18
|
background-color: var(--fill-primary-strong);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.secondary-VsqJTm {
|
|
21
|
+
:is(.secondary-VsqJTm, .badge-secondary) {
|
|
22
22
|
color: var(--text-on-secondary);
|
|
23
23
|
background-color: var(--fill-secondary-strong);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.noeffect-R8eJtO {
|
|
26
|
+
:is(.noeffect-R8eJtO, .badge-noeffect) {
|
|
27
27
|
color: var(--text-on-noeffect);
|
|
28
28
|
background-color: var(--fill-noeffect-strong);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.success-h2otET {
|
|
31
|
+
:is(.success-h2otET, .badge-success) {
|
|
32
32
|
color: var(--text-on-success);
|
|
33
33
|
background-color: var(--fill-success-strong);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
.info-OG3F3u {
|
|
36
|
+
:is(.info-OG3F3u, .badge-info) {
|
|
37
37
|
color: var(--text-on-info);
|
|
38
38
|
background-color: var(--fill-info-strong);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.warning-zTXksZ {
|
|
41
|
+
:is(.warning-zTXksZ, .badge-warning) {
|
|
42
42
|
color: var(--text-on-warning);
|
|
43
43
|
background-color: var(--fill-warning-strong);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
.danger-hKF7l_ {
|
|
46
|
+
:is(.danger-hKF7l_, .badge-danger) {
|
|
47
47
|
color: var(--text-on-danger);
|
|
48
48
|
background-color: var(--fill-danger-strong);
|
|
49
49
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer infonomic-base, infonomic-utilities, infonomic-theme;
|
|
2
2
|
|
|
3
3
|
@layer infonomic-components {
|
|
4
|
-
.button-group-uqvOi8 {
|
|
4
|
+
:is(.button-group-uqvOi8, .button-group) {
|
|
5
5
|
place-items: center;
|
|
6
6
|
gap: var(--gap-2);
|
|
7
7
|
flex-direction: column;
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@media screen and (min-width: 40rem) {
|
|
12
|
-
.button-group-uqvOi8 {
|
|
12
|
+
:is(.button-group-uqvOi8, .button-group) {
|
|
13
13
|
flex-direction: row;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
|
|
2
2
|
|
|
3
3
|
@layer infonomic-components {
|
|
4
|
-
.button-IjDhC0 {
|
|
4
|
+
:is(.button-IjDhC0, .button) {
|
|
5
5
|
cursor: pointer;
|
|
6
6
|
text-align: center;
|
|
7
7
|
gap: var(--gap-2);
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
display: inline-flex;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.button-IjDhC0:disabled, .button-IjDhC0[disabled] {
|
|
21
|
+
:is(.button-IjDhC0:disabled, .button-IjDhC0[disabled], .button:disabled, .button[disabled]) {
|
|
22
22
|
pointer-events: none;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.button-IjDhC0:focus, .button-IjDhC0:active {
|
|
25
|
+
:is(.button-IjDhC0:focus, .button-IjDhC0:active, .button:focus, .button:active) {
|
|
26
26
|
--ring-offset-color: var(--background);
|
|
27
27
|
--ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
|
|
28
28
|
--ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
|
|
@@ -35,375 +35,292 @@
|
|
|
35
35
|
padding: 0;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
.button-square {
|
|
39
|
+
aspect-ratio: 1;
|
|
40
|
+
border-radius: var(--border-radius-sm);
|
|
41
|
+
padding: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
38
44
|
.button-IjDhC0.round-uqus3n {
|
|
39
45
|
aspect-ratio: 1;
|
|
40
46
|
border-radius: var(--border-radius-full);
|
|
41
47
|
padding: 0;
|
|
42
48
|
}
|
|
43
49
|
|
|
44
|
-
.
|
|
50
|
+
.button-round {
|
|
51
|
+
aspect-ratio: 1;
|
|
52
|
+
border-radius: var(--border-radius-full);
|
|
53
|
+
padding: 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
:is(.xs-jxTd5R, .button-xs) {
|
|
45
57
|
min-height: 26px;
|
|
46
58
|
padding: .2rem .4rem;
|
|
47
59
|
font-size: .7rem;
|
|
48
60
|
}
|
|
49
61
|
|
|
50
|
-
.sm-uD_Ugt {
|
|
62
|
+
:is(.sm-uD_Ugt, .button-sm) {
|
|
51
63
|
min-height: 32px;
|
|
52
64
|
padding: .25rem .5rem;
|
|
53
65
|
font-size: .775rem;
|
|
54
66
|
}
|
|
55
67
|
|
|
56
|
-
.md-Qp9ad6 {
|
|
68
|
+
:is(.md-Qp9ad6, .button-md) {
|
|
57
69
|
min-height: 38px;
|
|
58
70
|
padding: .625rem 1.25rem;
|
|
59
71
|
font-size: .95rem;
|
|
60
72
|
}
|
|
61
73
|
|
|
62
|
-
.lg-FAYTen {
|
|
74
|
+
:is(.lg-FAYTen, .button-lg) {
|
|
63
75
|
min-height: 46px;
|
|
64
76
|
padding: .75rem 1.5rem;
|
|
65
77
|
font-size: 1.1rem;
|
|
66
78
|
}
|
|
67
79
|
|
|
68
|
-
.xl-Gwvhl4 {
|
|
80
|
+
:is(.xl-Gwvhl4, .button-xl) {
|
|
69
81
|
min-height: 54px;
|
|
70
82
|
padding: .75rem 1.5rem;
|
|
71
83
|
font-size: 1.2rem;
|
|
72
84
|
}
|
|
73
85
|
|
|
74
|
-
.filled-CwGsrO {
|
|
86
|
+
:is(.filled-CwGsrO, .button-filled) {
|
|
75
87
|
color: var(--button-variant-filled-foreground);
|
|
76
88
|
background-color: var(--button-variant-filled);
|
|
77
89
|
}
|
|
78
90
|
|
|
79
|
-
.filled-CwGsrO:hover {
|
|
91
|
+
:is(.filled-CwGsrO:hover, .button-filled:hover) {
|
|
80
92
|
background-color: var(--button-variant-filled-hover);
|
|
81
93
|
}
|
|
82
94
|
|
|
83
|
-
.filled-CwGsrO:focus, .filled-CwGsrO:active {
|
|
95
|
+
:is(.filled-CwGsrO:focus, .filled-CwGsrO:active, .button-filled:focus, .button-filled:active) {
|
|
84
96
|
--ring-color: var(--button-ring-color);
|
|
85
97
|
}
|
|
86
98
|
|
|
87
|
-
.filled-CwGsrO:disabled, .filled-CwGsrO[disabled] {
|
|
99
|
+
:is(.filled-CwGsrO:disabled, .filled-CwGsrO[disabled], .button-filled:disabled, .button-filled[disabled]) {
|
|
88
100
|
background-color: var(--button-variant-filled-disabled, oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * .85) h));
|
|
89
101
|
color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h));
|
|
90
102
|
}
|
|
91
103
|
|
|
92
|
-
.outlined-nZGbxu {
|
|
104
|
+
:is(.outlined-nZGbxu, .button-outlined) {
|
|
93
105
|
border: 1px solid var(--button-variant-outlined-border);
|
|
94
106
|
color: var(--button-variant-outlined-foreground);
|
|
95
107
|
background-color: var(--button-variant-outlined);
|
|
96
108
|
}
|
|
97
109
|
|
|
98
|
-
.outlined-nZGbxu:disabled, .outlined-nZGbxu[disabled] {
|
|
110
|
+
:is(.outlined-nZGbxu:disabled, .outlined-nZGbxu[disabled], .button-outlined:disabled, .button-outlined[disabled]) {
|
|
99
111
|
border-color: var(--button-variant-outlined-border-disabled, oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * .8) h));
|
|
100
112
|
color: var(--button-variant-outlined-foreground-disabled, oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h));
|
|
101
113
|
}
|
|
102
114
|
|
|
103
|
-
.outlined-nZGbxu:hover {
|
|
115
|
+
:is(.outlined-nZGbxu:hover, .button-outlined:hover) {
|
|
104
116
|
background-color: var(--button-variant-outlined-hover);
|
|
105
117
|
}
|
|
106
118
|
|
|
107
|
-
.outlined-nZGbxu:focus, .outlined-nZGbxu:active {
|
|
119
|
+
:is(.outlined-nZGbxu:focus, .outlined-nZGbxu:active, .button-outlined:focus, .button-outlined:active) {
|
|
108
120
|
--ring-color: var(--button-ring-color);
|
|
109
121
|
}
|
|
110
122
|
|
|
111
|
-
.gradient-ySC3O3 {
|
|
123
|
+
:is(.gradient-ySC3O3, .button-gradient) {
|
|
112
124
|
color: var(--button-variant-gradient-foreground);
|
|
113
125
|
background: linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end));
|
|
114
126
|
}
|
|
115
127
|
|
|
116
|
-
.gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled] {
|
|
128
|
+
:is(.gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled], .button-gradient:disabled, .button-gradient[disabled]) {
|
|
117
129
|
background: unset;
|
|
118
130
|
background-color: var(--button-variant-gradient-disabled, oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * .85) h));
|
|
119
131
|
color: var(--button-variant-gradient-foreground-disabled, oklch(from var(--button-variant-gradient-foreground) calc(l * .9) calc(c * .85) h));
|
|
120
132
|
}
|
|
121
133
|
|
|
122
|
-
.gradient-ySC3O3:hover {
|
|
134
|
+
:is(.gradient-ySC3O3:hover, .button-gradient:hover) {
|
|
123
135
|
color: var(--button-variant-gradient-foreground);
|
|
124
136
|
background: linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end));
|
|
125
137
|
}
|
|
126
138
|
|
|
127
|
-
.gradient-ySC3O3:focus, .gradient-ySC3O3:active {
|
|
139
|
+
:is(.gradient-ySC3O3:focus, .gradient-ySC3O3:active, .button-gradient:focus, .button-gradient:active) {
|
|
128
140
|
--ring-color: var(--button-ring-color);
|
|
129
141
|
}
|
|
130
142
|
|
|
131
|
-
.text-GaxlcE {
|
|
143
|
+
:is(.text-GaxlcE, .button-text) {
|
|
132
144
|
background-color: var(--button-variant-text);
|
|
133
145
|
color: var(--button-variant-text-foreground);
|
|
134
146
|
}
|
|
135
147
|
|
|
136
|
-
.text-GaxlcE:disabled, .text-GaxlcE[disabled] {
|
|
148
|
+
:is(.text-GaxlcE:disabled, .text-GaxlcE[disabled], .button-text:disabled, .button-text[disabled]) {
|
|
137
149
|
color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * .5) h);
|
|
138
150
|
}
|
|
139
151
|
|
|
140
|
-
.text-GaxlcE:hover {
|
|
152
|
+
:is(.text-GaxlcE:hover, .button-text:hover) {
|
|
141
153
|
background-color: var(--button-variant-text-hover);
|
|
142
154
|
}
|
|
143
155
|
|
|
144
|
-
.text-GaxlcE:focus, .text-GaxlcE:active {
|
|
156
|
+
:is(.text-GaxlcE:focus, .text-GaxlcE:active, .button-text:focus, .button-text:active) {
|
|
145
157
|
--ring-color: var(--button-ring-color);
|
|
146
158
|
}
|
|
147
159
|
|
|
148
|
-
.primary-tUmczz {
|
|
160
|
+
:is(.primary-tUmczz, .button-primary) {
|
|
149
161
|
--button-ring-color: var(--ring-primary);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.primary-tUmczz.filled-CwGsrO {
|
|
153
162
|
--button-variant-filled: var(--fill-primary-strong);
|
|
154
163
|
--button-variant-filled-foreground: var(--text-on-primary);
|
|
155
164
|
--button-variant-filled-hover: var(--fill-primary-strong-hover);
|
|
156
165
|
--button-variant-filled-disabled: var(--fill-primary-strong-disabled);
|
|
157
166
|
--button-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.primary-tUmczz.outlined-nZGbxu {
|
|
161
167
|
--button-variant-outlined: transparent;
|
|
162
168
|
--button-variant-outlined-foreground: var(--text-primary-strong);
|
|
163
169
|
--button-variant-outlined-hover: var(--fill-primary-weak);
|
|
164
170
|
--button-variant-outlined-border: var(--stroke-primary);
|
|
165
171
|
--button-variant-outlined-border-disabled: var(--stroke-primary-disabled);
|
|
166
172
|
--button-variant-outlined-foreground-disabled: var(--text-primary-disabled);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.primary-tUmczz.text-GaxlcE {
|
|
170
173
|
--button-variant-text: transparent;
|
|
171
174
|
--button-variant-text-foreground: var(--text-primary-weak);
|
|
172
175
|
--button-variant-text-hover: var(--fill-primary-weak-hover);
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.primary-tUmczz.gradient-ySC3O3 {
|
|
176
176
|
--button-variant-gradient-start: var(--gradient-primary-start);
|
|
177
177
|
--button-variant-gradient-end: var(--gradient-primary-end);
|
|
178
178
|
--button-variant-gradient-foreground: var(--gradient-primary-foreground);
|
|
179
|
-
--button-variant-gradient-hover: var(--gray-900);
|
|
180
179
|
--button-variant-gradient-disabled: var(--gradient-primary-disabled);
|
|
181
180
|
--button-variant-gradient-foreground-disabled: var(--text-on-primary-disabled);
|
|
182
181
|
}
|
|
183
182
|
|
|
184
|
-
.secondary-UqT2AY {
|
|
183
|
+
:is(.secondary-UqT2AY, .button-secondary) {
|
|
185
184
|
--button-ring-color: var(--ring-secondary);
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.secondary-UqT2AY.filled-CwGsrO {
|
|
189
185
|
--button-variant-filled: var(--fill-secondary-strong);
|
|
190
186
|
--button-variant-filled-foreground: var(--text-on-secondary);
|
|
191
187
|
--button-variant-filled-hover: var(--fill-secondary-strong-hover);
|
|
192
188
|
--button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
|
|
193
189
|
--button-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.secondary-UqT2AY.outlined-nZGbxu {
|
|
197
190
|
--button-variant-outlined: transparent;
|
|
198
191
|
--button-variant-outlined-foreground: var(--text-secondary-strong);
|
|
199
192
|
--button-variant-outlined-hover: var(--fill-secondary-weak);
|
|
200
193
|
--button-variant-outlined-border: var(--stroke-secondary);
|
|
201
194
|
--button-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
|
|
202
195
|
--button-variant-outlined-foreground-disabled: var(--text-secondary-disabled);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.secondary-UqT2AY.text-GaxlcE {
|
|
206
196
|
--button-variant-text: transparent;
|
|
207
197
|
--button-variant-text-foreground: var(--text-secondary-weak);
|
|
208
198
|
--button-variant-text-hover: var(--fill-secondary-weak-hover);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.secondary-UqT2AY.gradient-ySC3O3 {
|
|
212
199
|
--button-variant-gradient-start: var(--gradient-secondary-start);
|
|
213
200
|
--button-variant-gradient-end: var(--gradient-secondary-end);
|
|
214
201
|
--button-variant-gradient-foreground: var(--gradient-secondary-foreground);
|
|
215
|
-
--button-variant-gradient-hover: var(--gray-900);
|
|
216
202
|
--button-variant-gradient-disabled: var(--gradient-secondary-disabled);
|
|
217
203
|
--button-variant-gradient-foreground-disabled: var(--text-on-secondary-disabled);
|
|
218
204
|
}
|
|
219
205
|
|
|
220
|
-
.noeffect-fpxSgg {
|
|
206
|
+
:is(.noeffect-fpxSgg, .button-noeffect) {
|
|
221
207
|
--button-ring-color: var(--ring-noeffect);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
.noeffect-fpxSgg.filled-CwGsrO {
|
|
225
208
|
--button-variant-filled: var(--fill-noeffect-strong);
|
|
226
209
|
--button-variant-filled-foreground: var(--text-on-noeffect);
|
|
227
210
|
--button-variant-filled-hover: var(--fill-noeffect-strong-hover);
|
|
228
211
|
--button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
|
|
229
212
|
--button-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.noeffect-fpxSgg.outlined-nZGbxu {
|
|
233
213
|
--button-variant-outlined: transparent;
|
|
234
214
|
--button-variant-outlined-foreground: var(--text-noeffect-strong);
|
|
235
215
|
--button-variant-outlined-hover: var(--fill-noeffect-weak);
|
|
236
216
|
--button-variant-outlined-border: var(--stroke-noeffect);
|
|
237
217
|
--button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
|
|
238
218
|
--button-variant-outlined-foreground-disabled: var(--text-noeffect-disabled);
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.noeffect-fpxSgg.text-GaxlcE {
|
|
242
219
|
--button-variant-text: transparent;
|
|
243
220
|
--button-variant-text-foreground: var(--text-noeffect-weak);
|
|
244
221
|
--button-variant-text-hover: var(--fill-noeffect-weak-hover);
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
.noeffect-fpxSgg.gradient-ySC3O3 {
|
|
248
222
|
--button-variant-gradient-start: var(--gradient-noeffect-start);
|
|
249
223
|
--button-variant-gradient-end: var(--gradient-noeffect-end);
|
|
250
224
|
--button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
|
|
251
|
-
--button-variant-gradient-hover: var(--gradient-noeffect-hover);
|
|
252
225
|
--button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
|
|
253
226
|
--button-variant-gradient-foreground-disabled: var(--text-on-noeffect-disabled);
|
|
254
227
|
}
|
|
255
228
|
|
|
256
|
-
.success-fTNDEn {
|
|
229
|
+
:is(.success-fTNDEn, .button-success) {
|
|
257
230
|
--button-ring-color: var(--ring-success);
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
.success-fTNDEn.filled-CwGsrO {
|
|
261
231
|
--button-variant-filled: var(--fill-success-strong);
|
|
262
232
|
--button-variant-filled-foreground: var(--text-on-success);
|
|
263
233
|
--button-variant-filled-hover: var(--fill-success-strong-hover);
|
|
264
234
|
--button-variant-filled-disabled: var(--fill-success-strong-disabled);
|
|
265
235
|
--button-variant-filled-foreground-disabled: var(--text-on-success-disabled);
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.success-fTNDEn.outlined-nZGbxu {
|
|
269
236
|
--button-variant-outlined: transparent;
|
|
270
237
|
--button-variant-outlined-foreground: var(--text-success-strong);
|
|
271
238
|
--button-variant-outlined-hover: var(--fill-success-weak);
|
|
272
239
|
--button-variant-outlined-border: var(--stroke-success);
|
|
273
240
|
--button-variant-outlined-border-disabled: var(--stroke-success-disabled);
|
|
274
241
|
--button-variant-outlined-foreground-disabled: var(--text-success-disabled);
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
.success-fTNDEn.text-GaxlcE {
|
|
278
242
|
--button-variant-text: transparent;
|
|
279
243
|
--button-variant-text-foreground: var(--text-success-weak);
|
|
280
244
|
--button-variant-text-hover: var(--fill-success-weak-hover);
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.success-fTNDEn.gradient-ySC3O3 {
|
|
284
245
|
--button-variant-gradient-start: var(--gradient-success-start);
|
|
285
246
|
--button-variant-gradient-end: var(--gradient-success-end);
|
|
286
247
|
--button-variant-gradient-foreground: var(--gradient-success-foreground);
|
|
287
|
-
--button-variant-gradient-hover: var(--gray-900);
|
|
288
248
|
--button-variant-gradient-disabled: var(--gradient-success-disabled);
|
|
289
249
|
--button-variant-gradient-foreground-disabled: var(--text-on-success-disabled);
|
|
290
250
|
}
|
|
291
251
|
|
|
292
|
-
.info-qrdXQD {
|
|
252
|
+
:is(.info-qrdXQD, .button-info) {
|
|
293
253
|
--button-ring-color: var(--ring-info);
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.info-qrdXQD.filled-CwGsrO {
|
|
297
254
|
--button-variant-filled: var(--fill-info-strong);
|
|
298
255
|
--button-variant-filled-foreground: var(--text-on-info);
|
|
299
256
|
--button-variant-filled-hover: var(--fill-info-strong-hover);
|
|
300
257
|
--button-variant-filled-disabled: var(--fill-info-strong-disabled);
|
|
301
258
|
--button-variant-filled-foreground-disabled: var(--text-on-info-disabled);
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
.info-qrdXQD.outlined-nZGbxu {
|
|
305
259
|
--button-variant-outlined: transparent;
|
|
306
260
|
--button-variant-outlined-foreground: var(--text-info-strong);
|
|
307
261
|
--button-variant-outlined-hover: var(--fill-info-weak);
|
|
308
262
|
--button-variant-outlined-border: var(--stroke-info);
|
|
309
263
|
--button-variant-outlined-border-disabled: var(--stroke-info-disabled);
|
|
310
264
|
--button-variant-outlined-foreground-disabled: var(--text-info-disabled);
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
.info-qrdXQD.text-GaxlcE {
|
|
314
265
|
--button-variant-text: transparent;
|
|
315
266
|
--button-variant-text-foreground: var(--text-info-weak);
|
|
316
267
|
--button-variant-text-hover: var(--fill-info-weak-hover);
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
.info-qrdXQD.gradient-ySC3O3 {
|
|
320
268
|
--button-variant-gradient-start: var(--gradient-info-start);
|
|
321
269
|
--button-variant-gradient-end: var(--gradient-info-end);
|
|
322
270
|
--button-variant-gradient-foreground: var(--gradient-info-foreground);
|
|
323
|
-
--button-variant-gradient-hover: var(--gray-900);
|
|
324
271
|
--button-variant-gradient-disabled: var(--gradient-info-disabled);
|
|
325
272
|
--button-variant-gradient-foreground-disabled: var(--text-on-info-disabled);
|
|
326
273
|
}
|
|
327
274
|
|
|
328
|
-
.warning-a00T3A {
|
|
275
|
+
:is(.warning-a00T3A, .button-warning) {
|
|
329
276
|
--button-ring-color: var(--ring-warning);
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
.warning-a00T3A.filled-CwGsrO {
|
|
333
277
|
--button-variant-filled: var(--fill-warning-strong);
|
|
334
278
|
--button-variant-filled-foreground: var(--text-on-warning);
|
|
335
279
|
--button-variant-filled-hover: var(--fill-warning-strong-hover);
|
|
336
280
|
--button-variant-filled-disabled: var(--fill-warning-strong-disabled);
|
|
337
281
|
--button-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
.warning-a00T3A.outlined-nZGbxu {
|
|
341
282
|
--button-variant-outlined: transparent;
|
|
342
283
|
--button-variant-outlined-foreground: var(--text-warning-strong);
|
|
343
284
|
--button-variant-outlined-hover: var(--fill-warning-weak);
|
|
344
285
|
--button-variant-outlined-border: var(--stroke-warning);
|
|
345
286
|
--button-variant-outlined-border-disabled: var(--stroke-warning-disabled);
|
|
346
287
|
--button-variant-outlined-foreground-disabled: var(--text-warning-disabled);
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
.warning-a00T3A.text-GaxlcE {
|
|
350
288
|
--button-variant-text: transparent;
|
|
351
289
|
--button-variant-text-foreground: var(--text-warning-weak);
|
|
352
290
|
--button-variant-text-hover: var(--fill-warning-weak-hover);
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
.warning-a00T3A.gradient-ySC3O3 {
|
|
356
291
|
--button-variant-gradient-start: var(--gradient-warning-start);
|
|
357
292
|
--button-variant-gradient-end: var(--gradient-warning-end);
|
|
358
293
|
--button-variant-gradient-foreground: var(--gradient-warning-foreground);
|
|
359
|
-
--button-variant-gradient-hover: var(--gray-900);
|
|
360
294
|
--button-variant-gradient-disabled: var(--gradient-warning-disabled);
|
|
361
295
|
--button-variant-gradient-foreground-disabled: var(--text-on-warning-disabled);
|
|
362
296
|
}
|
|
363
297
|
|
|
364
|
-
.danger-rwIV_i {
|
|
298
|
+
:is(.danger-rwIV_i, .button-danger) {
|
|
365
299
|
--button-ring-color: var(--ring-danger);
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
.danger-rwIV_i.filled-CwGsrO {
|
|
369
300
|
--button-variant-filled: var(--fill-danger-strong);
|
|
370
301
|
--button-variant-filled-foreground: var(--text-on-danger);
|
|
371
302
|
--button-variant-filled-hover: var(--fill-danger-strong-hover);
|
|
372
303
|
--button-variant-filled-disabled: var(--fill-danger-strong-disabled);
|
|
373
304
|
--button-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
.danger-rwIV_i.outlined-nZGbxu {
|
|
377
305
|
--button-variant-outlined: transparent;
|
|
378
306
|
--button-variant-outlined-foreground: var(--text-danger-strong);
|
|
379
307
|
--button-variant-outlined-hover: var(--fill-danger-weak);
|
|
380
308
|
--button-variant-outlined-border: var(--stroke-danger);
|
|
381
309
|
--button-variant-outlined-border-disabled: var(--stroke-danger-disabled);
|
|
382
310
|
--button-variant-outlined-foreground-disabled: var(--text-danger-disabled);
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
.danger-rwIV_i.text-GaxlcE {
|
|
386
311
|
--button-variant-text: transparent;
|
|
387
312
|
--button-variant-text-foreground: var(--text-danger-weak);
|
|
388
313
|
--button-variant-text-hover: var(--fill-danger-weak-hover);
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
.danger-rwIV_i.gradient-ySC3O3 {
|
|
392
314
|
--button-variant-gradient-start: var(--gradient-danger-start);
|
|
393
315
|
--button-variant-gradient-end: var(--gradient-danger-end);
|
|
394
316
|
--button-variant-gradient-foreground: var(--gradient-danger-foreground);
|
|
395
|
-
--button-variant-gradient-hover: var(--gray-900);
|
|
396
317
|
--button-variant-gradient-disabled: var(--gradient-danger-disabled);
|
|
397
318
|
--button-variant-gradient-foreground-disabled: var(--text-on-danger-disabled);
|
|
398
319
|
}
|
|
399
320
|
|
|
400
|
-
.fullWidth-wXvP0v {
|
|
321
|
+
:is(.fullWidth-wXvP0v, .button-full-width) {
|
|
401
322
|
width: 100%;
|
|
402
323
|
display: flex;
|
|
403
324
|
}
|
|
404
|
-
|
|
405
|
-
.dark .button-IjDhC0:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .button-IjDhC0:active:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
|
|
406
|
-
--ring-offset-color: var(--background);
|
|
407
|
-
}
|
|
408
325
|
}
|
|
409
326
|
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
|
|
2
2
|
|
|
3
3
|
@layer infonomic-components {
|
|
4
|
-
.copy-button-container-vCNz8o {
|
|
4
|
+
:is(.copy-button-container-vCNz8o, .copy-button-container) {
|
|
5
5
|
display: inline-block;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.copy-button-oa4bdj svg {
|
|
8
|
+
:is(.copy-button-oa4bdj svg, .copy-button svg) {
|
|
9
9
|
width: 90%;
|
|
10
10
|
height: 90%;
|
|
11
11
|
display: block;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.xs-lZmf78 {
|
|
14
|
+
:is(.xs-lZmf78, .copy-button-xs) {
|
|
15
15
|
width: 26px;
|
|
16
16
|
height: 26px;
|
|
17
17
|
min-height: 26px;
|
|
18
18
|
padding: .25rem;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.sm-KNN1e5 {
|
|
21
|
+
:is(.sm-KNN1e5, .copy-button-sm) {
|
|
22
22
|
width: 32px;
|
|
23
23
|
height: 32px;
|
|
24
24
|
min-height: 32px;
|
|
25
25
|
padding: .35rem;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
.md-OoH0l4 {
|
|
28
|
+
:is(.md-OoH0l4, .copy-button-md) {
|
|
29
29
|
width: 38px;
|
|
30
30
|
height: 38px;
|
|
31
31
|
min-height: 38px;
|
|
32
32
|
padding: .45rem;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.lg-uu5ujz {
|
|
35
|
+
:is(.lg-uu5ujz, .copy-button-lg) {
|
|
36
36
|
width: 46px;
|
|
37
37
|
height: 46px;
|
|
38
38
|
min-height: 46px;
|
|
39
39
|
padding: .55rem;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
.xl-pFYyrS {
|
|
42
|
+
:is(.xl-pFYyrS, .copy-button-xl) {
|
|
43
43
|
width: 54px;
|
|
44
44
|
height: 54px;
|
|
45
45
|
min-height: 54px;
|
|
@@ -4,7 +4,7 @@ import classnames from "classnames";
|
|
|
4
4
|
import card_module from "./card.module.js";
|
|
5
5
|
const Card = ({ className, hover, children, asChild, ref, ...rest })=>{
|
|
6
6
|
const Comp = true === asChild ? Slot : 'div';
|
|
7
|
-
const hoverClasses = null != hover && true === hover ? card_module
|
|
7
|
+
const hoverClasses = null != hover && true === hover ? card_module["card-hover"] : void 0;
|
|
8
8
|
const classes = classnames(card_module.card, hoverClasses, className);
|
|
9
9
|
return /*#__PURE__*/ jsx(Comp, {
|
|
10
10
|
ref: ref,
|
|
@@ -16,31 +16,31 @@ const Card = ({ className, hover, children, asChild, ref, ...rest })=>{
|
|
|
16
16
|
Card.displayName = 'Card';
|
|
17
17
|
const Header = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
18
18
|
ref: ref,
|
|
19
|
-
className: classnames(card_module
|
|
19
|
+
className: classnames(card_module["card-header"], className),
|
|
20
20
|
...props
|
|
21
21
|
});
|
|
22
22
|
Header.displayName = 'CardHeader';
|
|
23
23
|
const Title = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
24
24
|
ref: ref,
|
|
25
|
-
className: classnames(card_module
|
|
25
|
+
className: classnames(card_module["card-title"], className),
|
|
26
26
|
...props
|
|
27
27
|
});
|
|
28
28
|
Title.displayName = 'CardTitle';
|
|
29
29
|
const Description = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
30
30
|
ref: ref,
|
|
31
|
-
className: classnames(card_module
|
|
31
|
+
className: classnames(card_module["card-description"], className),
|
|
32
32
|
...props
|
|
33
33
|
});
|
|
34
34
|
Description.displayName = "CardDescription";
|
|
35
35
|
const Content = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
36
36
|
ref: ref,
|
|
37
|
-
className: classnames(card_module
|
|
37
|
+
className: classnames(card_module["card-content"], className),
|
|
38
38
|
...props
|
|
39
39
|
});
|
|
40
40
|
Content.displayName = 'CardContent';
|
|
41
41
|
const Footer = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
42
42
|
ref: ref,
|
|
43
|
-
className: classnames(card_module
|
|
43
|
+
className: classnames(card_module["card-footer"], className),
|
|
44
44
|
...props
|
|
45
45
|
});
|
|
46
46
|
Footer.displayName = 'CardFooter';
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import "./card_module.css";
|
|
2
2
|
const card_module = {
|
|
3
3
|
card: "card-mqJaiW",
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
"card-hover": "card-hover-hvT4d6",
|
|
5
|
+
cardHover: "card-hover-hvT4d6",
|
|
6
|
+
"card-header": "card-header-XnoBkP",
|
|
7
|
+
cardHeader: "card-header-XnoBkP",
|
|
8
|
+
"card-title": "card-title-JI7Lu3",
|
|
9
|
+
cardTitle: "card-title-JI7Lu3",
|
|
10
|
+
"card-description": "card-description-fwu7HE",
|
|
11
|
+
cardDescription: "card-description-fwu7HE",
|
|
12
|
+
"card-content": "card-content-uhoZYJ",
|
|
13
|
+
cardContent: "card-content-uhoZYJ",
|
|
14
|
+
"card-footer": "card-footer-BxTa4b",
|
|
15
|
+
cardFooter: "card-footer-BxTa4b"
|
|
10
16
|
};
|
|
11
17
|
export { card_module as default };
|