@hyvor/design 2.1.18 → 2.1.19

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.
Files changed (24) hide show
  1. package/dist/components/Button/Button.svelte +413 -349
  2. package/dist/components/ButtonGroup/ButtonGroup.svelte +62 -63
  3. package/dist/components/Dropdown/Dropdown.svelte +9 -8
  4. package/dist/components/Dropdown/DropdownContent.svelte +14 -12
  5. package/dist/components/FileUploader/FileUploader.svelte +19 -17
  6. package/dist/components/FileUploader/Media/Media.svelte +44 -44
  7. package/dist/components/FileUploader/TabUpload/TabUpload.svelte +47 -45
  8. package/dist/components/FileUploader/Unsplash/Unsplash.svelte +38 -38
  9. package/dist/components/FormControl/Validation.svelte +30 -30
  10. package/dist/components/IconButton/IconButton.svelte +266 -204
  11. package/dist/components/Kbd/Kbd.svelte +33 -28
  12. package/dist/components/Loader/Loader.svelte +81 -78
  13. package/dist/components/Radio/Radio.svelte +71 -69
  14. package/dist/components/SplitControl/SplitControl.svelte +45 -40
  15. package/dist/components/Tag/Tag.svelte +152 -130
  16. package/dist/components/TextInput/TextInput.svelte +90 -89
  17. package/dist/components/Textarea/Textarea.svelte +1 -2
  18. package/dist/components/Usage/Usage.svelte +40 -40
  19. package/dist/index.d.ts +1 -1
  20. package/dist/index.js +1 -1
  21. package/dist/marketing/Docs/Toc.svelte +103 -91
  22. package/dist/marketing/Document/Document.svelte +77 -62
  23. package/dist/{variables.scss → variables.css} +1 -7
  24. package/package.json +19 -20
package/dist/components/IconButton/IconButton.svelte CHANGED
@@ -77,207 +77,269 @@
77
77
  {@render children?.()}
78
78
  </svelte:element>
79
79
 
80
- <style>.button {
81
- border-radius: 50%;
82
- display: inline-flex;
83
- align-items: center;
84
- justify-content: center;
85
- transition: 0.2s box-shadow;
86
- font-size: 1em;
87
- --local-hover-shadow-size: 2.5px;
88
- --local-hover-shadow-color: var(--accent-light);
89
- }
90
- .button:active {
91
- --local-hover-shadow-size: 4px;
92
- }
93
- .button:hover {
94
- box-shadow: 0 0 0 var(--local-hover-shadow-size) var(--local-hover-shadow-color);
95
- }
96
- .button:focus-visible {
97
- outline: none;
98
- box-shadow: 0 0 0 calc(var(--local-hover-shadow-size) + 1px) var(--local-hover-shadow-color);
99
- }
100
-
101
- .button.large {
102
- --local-hover-shadow-size: 3px;
103
- }
104
-
105
- .button.fill {
106
- transition: 0.2s box-shadow;
107
- }
108
- .button.fill.accent {
109
- background-color: var(--accent);
110
- color: var(--accent-text);
111
- --local-hover-shadow-color: var(--accent-light);
112
- }
113
- .button.fill.gray {
114
- background-color: var(--gray-dark);
115
- color: var(--text-white);
116
- --local-hover-shadow-color: var(--gray-light);
117
- }
118
- .button.fill.input {
119
- background-color: var(--input);
120
- color: var(--text);
121
- --local-hover-shadow-color: var(--gray-light);
122
- }
123
- .button.fill.green {
124
- background-color: var(--green-dark);
125
- color: var(--text-white);
126
- --local-hover-shadow-color: var(--green-light);
127
- }
128
- .button.fill.red {
129
- background-color: var(--red-dark);
130
- color: var(--text-white);
131
- --local-hover-shadow-color: var(--red-light);
132
- }
133
- .button.fill.blue {
134
- background-color: var(--blue-dark);
135
- color: var(--text-white);
136
- --local-hover-shadow-color: var(--blue-light);
137
- }
138
- .button.fill.orange {
139
- background-color: var(--orange-dark);
140
- color: var(--text-white);
141
- --local-hover-shadow-color: var(--orange-light);
142
- }
143
- .button.fill-light.accent {
144
- background-color: var(--accent-light);
145
- color: var(--accent);
146
- --local-hover-shadow-color: var(--accent-light);
147
- }
148
- .button.fill-light.gray {
149
- background-color: var(--gray-light);
150
- color: var(--gray-dark);
151
- --local-hover-shadow-color: color-mix(in srgb, var(--gray-light) 40%, transparent);
152
- }
153
- .button.fill-light.green {
154
- background-color: var(--green-light);
155
- color: var(--green-dark);
156
- --local-hover-shadow-color: color-mix(in srgb, var(--green-light) 40%, transparent);
157
- }
158
- .button.fill-light.red {
159
- background-color: var(--red-light);
160
- color: var(--red-dark);
161
- --local-hover-shadow-color: color-mix(in srgb, var(--red-light) 40%, transparent);
162
- }
163
- .button.fill-light.blue {
164
- background-color: var(--blue-light);
165
- color: var(--blue-dark);
166
- --local-hover-shadow-color: color-mix(in srgb, var(--blue-light) 40%, transparent);
167
- }
168
- .button.fill-light.orange {
169
- background-color: var(--orange-light);
170
- color: var(--orange-dark);
171
- --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
172
- }
173
- .button.outline {
174
- border: 1px solid;
175
- }
176
- .button.outline.accent {
177
- border-color: var(--accent);
178
- color: var(--accent);
179
- --local-hover-shadow-color: var(--accent-light);
180
- }
181
- .button.outline.gray {
182
- border-color: var(--gray-dark);
183
- color: var(--gray-dark);
184
- --local-hover-shadow-color: var(--gray-light);
185
- }
186
- .button.outline.green {
187
- border-color: var(--green-dark);
188
- color: var(--green-dark);
189
- --local-hover-shadow-color: var(--green-light);
190
- }
191
- .button.outline.red {
192
- border-color: var(--red-dark);
193
- color: var(--red-dark);
194
- --local-hover-shadow-color: var(--red-light);
195
- }
196
- .button.outline.blue {
197
- border-color: var(--blue-dark);
198
- color: var(--blue-dark);
199
- --local-hover-shadow-color: var(--blue-light);
200
- }
201
- .button.outline.orange {
202
- border-color: var(--orange-dark);
203
- color: var(--orange-dark);
204
- --local-hover-shadow-color: var(--orange-light);
205
- }
206
- .button.outline-fill {
207
- border: 1px solid;
208
- }
209
- .button.outline-fill.accent {
210
- background-color: var(--accent-light);
211
- border-color: var(--accent);
212
- color: var(--accent);
213
- --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
214
- }
215
- .button.outline-fill.gray {
216
- background-color: var(--gray-light);
217
- border-color: var(--gray-dark);
218
- color: var(--gray-dark);
219
- --local-hover-shadow-color: var(--gray-light);
220
- }
221
- .button.outline-fill.green {
222
- background-color: var(--green-light);
223
- border-color: var(--green-dark);
224
- color: var(--green-dark);
225
- --local-hover-shadow-color: var(--green-light);
226
- }
227
- .button.outline-fill.red {
228
- background-color: var(--red-light);
229
- border-color: var(--red-dark);
230
- color: var(--red-dark);
231
- --local-hover-shadow-color: var(--red-light);
232
- }
233
- .button.outline-fill.blue {
234
- background-color: var(--blue-light);
235
- border-color: var(--blue-dark);
236
- color: var(--blue-dark);
237
- --local-hover-shadow-color: var(--blue-light);
238
- }
239
- .button.outline-fill.orange {
240
- background-color: var(--orange-light);
241
- border-color: var(--orange-dark);
242
- color: var(--orange-dark);
243
- --local-hover-shadow-color: var(--orange-light);
244
- }
245
- .button.invisible {
246
- background-color: transparent;
247
- transition: 0.2s background-color;
248
- box-shadow: none !important;
249
- }
250
- .button.invisible.accent:hover {
251
- background-color: var(--accent-light);
252
- color: var(--text-light);
253
- }
254
- .button.invisible.gray:hover {
255
- background-color: var(--gray-light);
256
- color: var(--gray-dark);
257
- }
258
- .button.invisible.input:hover {
259
- background-color: var(--input);
260
- color: var(--text);
261
- }
262
- .button.invisible.green:hover {
263
- background-color: var(--green-light);
264
- color: var(--green-dark);
265
- }
266
- .button.invisible.red:hover {
267
- background-color: var(--red-light);
268
- color: var(--red-dark);
269
- }
270
- .button.invisible.blue:hover {
271
- background-color: var(--blue-light);
272
- color: var(--blue-dark);
273
- }
274
- .button.invisible.orange:hover {
275
- background-color: var(--orange-light);
276
- color: var(--orange-dark);
277
- }
278
-
279
- .button[disabled] {
280
- cursor: not-allowed;
281
- opacity: 0.2;
282
- box-shadow: none !important;
283
- }</style>
80
+ <style>
81
+ .button {
82
+ border-radius: 50%;
83
+ display: inline-flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ transition: 0.2s box-shadow;
87
+ font-size: 1em;
88
+
89
+ --local-hover-shadow-size: 2.5px;
90
+ --local-hover-shadow-color: var(--accent-light);
91
+ &:active {
92
+ --local-hover-shadow-size: 4px;
93
+ }
94
+
95
+ &:hover {
96
+ box-shadow: 0 0 0 var(--local-hover-shadow-size) var(--local-hover-shadow-color);
97
+ }
98
+
99
+ &:focus-visible {
100
+ outline: none;
101
+ box-shadow: 0 0 0 calc(var(--local-hover-shadow-size) + 1px) var(--local-hover-shadow-color);
102
+ }
103
+ }
104
+
105
+ .button.large {
106
+ --local-hover-shadow-size: 3px;
107
+ }
108
+
109
+ /* styles for variant fill with colors */
110
+ .button {
111
+ &.fill {
112
+ transition: 0.2s box-shadow;
113
+
114
+ &.accent {
115
+ background-color: var(--accent);
116
+ color: var(--accent-text);
117
+ --local-hover-shadow-color: var(--accent-light);
118
+ }
119
+
120
+ &.gray {
121
+ background-color: var(--gray-dark);
122
+ color: var(--text-white);
123
+ --local-hover-shadow-color: var(--gray-light);
124
+ }
125
+
126
+ &.input {
127
+ background-color: var(--input);
128
+ color: var(--text);
129
+ --local-hover-shadow-color: var(--gray-light);
130
+ }
131
+
132
+ &.green {
133
+ background-color: var(--green-dark);
134
+ color: var(--text-white);
135
+ --local-hover-shadow-color: var(--green-light);
136
+ }
137
+
138
+ &.red {
139
+ background-color: var(--red-dark);
140
+ color: var(--text-white);
141
+ --local-hover-shadow-color: var(--red-light);
142
+ }
143
+
144
+ &.blue {
145
+ background-color: var(--blue-dark);
146
+ color: var(--text-white);
147
+ --local-hover-shadow-color: var(--blue-light);
148
+ }
149
+
150
+ &.orange {
151
+ background-color: var(--orange-dark);
152
+ color: var(--text-white);
153
+ --local-hover-shadow-color: var(--orange-light);
154
+ }
155
+ }
156
+
157
+ &.fill-light {
158
+ &.accent {
159
+ background-color: var(--accent-light);
160
+ color: var(--accent);
161
+ --local-hover-shadow-color: var(--accent-light);
162
+ }
163
+
164
+ &.gray {
165
+ background-color: var(--gray-light);
166
+ color: var(--gray-dark);
167
+ --local-hover-shadow-color: color-mix(in srgb, var(--gray-light) 40%, transparent);
168
+ }
169
+
170
+ &.green {
171
+ background-color: var(--green-light);
172
+ color: var(--green-dark);
173
+ --local-hover-shadow-color: color-mix(in srgb, var(--green-light) 40%, transparent);
174
+ }
175
+
176
+ &.red {
177
+ background-color: var(--red-light);
178
+ color: var(--red-dark);
179
+ --local-hover-shadow-color: color-mix(in srgb, var(--red-light) 40%, transparent);
180
+ }
181
+
182
+ &.blue {
183
+ background-color: var(--blue-light);
184
+ color: var(--blue-dark);
185
+ --local-hover-shadow-color: color-mix(in srgb, var(--blue-light) 40%, transparent);
186
+ }
187
+
188
+ &.orange {
189
+ background-color: var(--orange-light);
190
+ color: var(--orange-dark);
191
+ --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
192
+ }
193
+ }
194
+
195
+ /* styles for variant outline with colors */
196
+ &.outline {
197
+ border: 1px solid;
198
+
199
+ &.accent {
200
+ border-color: var(--accent);
201
+ color: var(--accent);
202
+ --local-hover-shadow-color: var(--accent-light);
203
+ }
204
+
205
+ &.gray {
206
+ border-color: var(--gray-dark);
207
+ color: var(--gray-dark);
208
+ --local-hover-shadow-color: var(--gray-light);
209
+ }
210
+
211
+ &.green {
212
+ border-color: var(--green-dark);
213
+ color: var(--green-dark);
214
+ --local-hover-shadow-color: var(--green-light);
215
+ }
216
+
217
+ &.red {
218
+ border-color: var(--red-dark);
219
+ color: var(--red-dark);
220
+ --local-hover-shadow-color: var(--red-light);
221
+ }
222
+
223
+ &.blue {
224
+ border-color: var(--blue-dark);
225
+ color: var(--blue-dark);
226
+ --local-hover-shadow-color: var(--blue-light);
227
+ }
228
+
229
+ &.orange {
230
+ border-color: var(--orange-dark);
231
+ color: var(--orange-dark);
232
+ --local-hover-shadow-color: var(--orange-light);
233
+ }
234
+ }
235
+
236
+ /* styles for variant outline-fill with colors */
237
+ &.outline-fill {
238
+ border: 1px solid;
239
+
240
+ &.accent {
241
+ background-color: var(--accent-light);
242
+ border-color: var(--accent);
243
+ color: var(--accent);
244
+ --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
245
+ }
246
+
247
+ &.gray {
248
+ background-color: var(--gray-light);
249
+ border-color: var(--gray-dark);
250
+ color: var(--gray-dark);
251
+ --local-hover-shadow-color: var(--gray-light);
252
+ }
253
+
254
+ &.green {
255
+ background-color: var(--green-light);
256
+ border-color: var(--green-dark);
257
+ color: var(--green-dark);
258
+ --local-hover-shadow-color: var(--green-light);
259
+ }
260
+
261
+ &.red {
262
+ background-color: var(--red-light);
263
+ border-color: var(--red-dark);
264
+ color: var(--red-dark);
265
+ --local-hover-shadow-color: var(--red-light);
266
+ }
267
+
268
+ &.blue {
269
+ background-color: var(--blue-light);
270
+ border-color: var(--blue-dark);
271
+ color: var(--blue-dark);
272
+ --local-hover-shadow-color: var(--blue-light);
273
+ }
274
+
275
+ &.orange {
276
+ background-color: var(--orange-light);
277
+ border-color: var(--orange-dark);
278
+ color: var(--orange-dark);
279
+ --local-hover-shadow-color: var(--orange-light);
280
+ }
281
+ }
282
+
283
+ /* styles for variant invisible with colors */
284
+ &.invisible {
285
+ background-color: transparent;
286
+ transition: 0.2s background-color;
287
+ box-shadow: none !important;
288
+
289
+ &.accent {
290
+ &:hover {
291
+ background-color: var(--accent-light);
292
+ color: var(--text-light);
293
+ }
294
+ }
295
+
296
+ &.gray {
297
+ &:hover {
298
+ background-color: var(--gray-light);
299
+ color: var(--gray-dark);
300
+ }
301
+ }
302
+
303
+ &.input {
304
+ &:hover {
305
+ background-color: var(--input);
306
+ color: var(--text);
307
+ }
308
+ }
309
+
310
+ &.green {
311
+ &:hover {
312
+ background-color: var(--green-light);
313
+ color: var(--green-dark);
314
+ }
315
+ }
316
+
317
+ &.red {
318
+ &:hover {
319
+ background-color: var(--red-light);
320
+ color: var(--red-dark);
321
+ }
322
+ }
323
+
324
+ &.blue {
325
+ &:hover {
326
+ background-color: var(--blue-light);
327
+ color: var(--blue-dark);
328
+ }
329
+ }
330
+
331
+ &.orange {
332
+ &:hover {
333
+ background-color: var(--orange-light);
334
+ color: var(--orange-dark);
335
+ }
336
+ }
337
+ }
338
+ }
339
+
340
+ .button[disabled] {
341
+ cursor: not-allowed;
342
+ opacity: 0.2;
343
+ box-shadow: none !important;
344
+ }
345
+ </style>
package/dist/components/Kbd/Kbd.svelte CHANGED
@@ -78,31 +78,36 @@
78
78
 
79
79
  <kbd aria-label={ariaLabel} class={sizeClass} style={sizeStyle} {...rest}>{display}</kbd>
80
80
 
81
- <style>kbd {
82
- display: inline-flex;
83
- align-items: center;
84
- justify-content: center;
85
- font-family: inherit;
86
- line-height: 1;
87
- background-color: var(--hover-dark);
88
- border: 1px solid var(--border);
89
- border-bottom-width: 2px;
90
- border-radius: 4px;
91
- color: var(--text);
92
- white-space: nowrap;
93
- }
94
- kbd.size-small {
95
- font-size: 0.7em;
96
- min-width: 1.6em;
97
- padding: 2px 5px;
98
- }
99
- kbd.size-medium {
100
- font-size: 0.85em;
101
- min-width: 1.8em;
102
- padding: 3px 7px;
103
- }
104
- kbd.size-large {
105
- font-size: 1em;
106
- min-width: 2em;
107
- padding: 4px 9px;
108
- }</style>
81
+ <style>
82
+ kbd {
83
+ display: inline-flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ font-family: inherit;
87
+ line-height: 1;
88
+ background-color: var(--hover-dark);
89
+ border: 1px solid var(--border);
90
+ border-bottom-width: 2px;
91
+ border-radius: 4px;
92
+ color: var(--text);
93
+ white-space: nowrap;
94
+
95
+ &.size-small {
96
+ font-size: 0.7em;
97
+ min-width: 1.6em;
98
+ padding: 2px 5px;
99
+ }
100
+
101
+ &.size-medium {
102
+ font-size: 0.85em;
103
+ min-width: 1.8em;
104
+ padding: 3px 7px;
105
+ }
106
+
107
+ &.size-large {
108
+ font-size: 1em;
109
+ min-width: 2em;
110
+ padding: 4px 9px;
111
+ }
112
+ }
113
+ </style>