@hyvor/design 0.0.29 → 0.0.30

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 (9) hide show
  1. package/dist/components/Button/Button.svelte +163 -2
  2. package/dist/components/Button/Button.svelte.d.ts +2 -1
  3. package/dist/components/IconButton/IconButton.svelte.d.ts +1 -1
  4. package/dist/components/Loader/Loader.svelte +1 -1
  5. package/dist/components/Loader/Loader.svelte.d.ts +1 -1
  6. package/dist/components/SplitControl/SplitControl.svelte +1 -1
  7. package/dist/components/TextInput/TextInput.svelte +4 -4
  8. package/dist/components/Tooltip/Tooltip.svelte +1 -0
  9. package/package.json +1 -1
package/dist/components/Button/Button.svelte CHANGED
@@ -2,12 +2,13 @@
2
2
  export let size = "medium";
3
3
  export let color = "accent";
4
4
  export let block = false;
5
+ export let variant = "fill";
5
6
  export let align = "center";
6
7
  </script>
7
8
 
8
9
  <svelte:element
9
10
  this={as}
10
- class="button {size} {color} {align}"
11
+ class="button {size} {color} {variant} {align}"
11
12
  class:block={block}
12
13
 
13
14
  on:keyup
@@ -146,12 +147,172 @@ export let align = "center";
146
147
  }
147
148
 
148
149
  /* styles */
149
- .button.accent {
150
+ /* .button.accent {
151
+ background-color: var(--accent);
152
+ color: var(--accent-text);
153
+ transition: .2s box-shadow;
154
+ --local-hover-shadow-color: var(--accent-light);
155
+ } */
156
+ .button.fill.accent {
150
157
  background-color: var(--accent);
151
158
  color: var(--accent-text);
152
159
  transition: 0.2s box-shadow;
153
160
  --local-hover-shadow-color: var(--accent-light);
154
161
  }
162
+ .button.fill.gray {
163
+ background-color: var(--gray-light);
164
+ color: var(--gray-dark);
165
+ transition: 0.2s box-shadow;
166
+ --local-hover-shadow-color: color-mix(in srgb, var(--gray-light) 40%, transparent);
167
+ }
168
+ .button.fill.green {
169
+ background-color: var(--green-light);
170
+ color: var(--green-dark);
171
+ transition: 0.2s box-shadow;
172
+ --local-hover-shadow-color: color-mix(in srgb, var(--green-light) 40%, transparent);
173
+ }
174
+ .button.fill.red {
175
+ background-color: var(--red-light);
176
+ color: var(--red-dark);
177
+ transition: 0.2s box-shadow;
178
+ --local-hover-shadow-color: color-mix(in srgb, var(--red-light) 40%, transparent);
179
+ }
180
+ .button.fill.blue {
181
+ background-color: var(--blue-light);
182
+ color: var(--blue-dark);
183
+ transition: 0.2s box-shadow;
184
+ --local-hover-shadow-color: color-mix(in srgb, var(--blue-light) 40%, transparent);
185
+ }
186
+ .button.fill.orange {
187
+ background-color: var(--orange-light);
188
+ color: var(--orange-dark);
189
+ transition: 0.2s box-shadow;
190
+ --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
191
+ }
192
+ .button.outline {
193
+ border: 1px solid;
194
+ }
195
+ .button.outline.accent {
196
+ background-color: transparent;
197
+ border-color: var(--accent);
198
+ color: var(--accent);
199
+ transition: 0.2s box-shadow;
200
+ --local-hover-shadow-color: var(--accent-light);
201
+ }
202
+ .button.outline.gray {
203
+ background-color: transparent;
204
+ border-color: var(--gray-dark);
205
+ color: var(--gray-dark);
206
+ transition: 0.2s box-shadow;
207
+ --local-hover-shadow-color: var(--gray-light);
208
+ }
209
+ .button.outline.green {
210
+ background-color: transparent;
211
+ border-color: var(--green-dark);
212
+ color: var(--green-dark);
213
+ transition: 0.2s box-shadow;
214
+ --local-hover-shadow-color: var(--green-light);
215
+ }
216
+ .button.outline.red {
217
+ background-color: transparent;
218
+ border-color: var(--red-dark);
219
+ color: var(--red-dark);
220
+ transition: 0.2s box-shadow;
221
+ --local-hover-shadow-color: var(--red-light);
222
+ }
223
+ .button.outline.blue {
224
+ background-color: transparent;
225
+ border-color: var(--blue-dark);
226
+ color: var(--blue-dark);
227
+ transition: 0.2s box-shadow;
228
+ --local-hover-shadow-color: var(--blue-light);
229
+ }
230
+ .button.outline.orange {
231
+ background-color: transparent;
232
+ border-color: var(--orange-dark);
233
+ color: var(--orange-dark);
234
+ transition: 0.2s box-shadow;
235
+ --local-hover-shadow-color: var(--orange-light);
236
+ }
237
+ .button.outline-fill {
238
+ border: 1px solid;
239
+ }
240
+ .button.outline-fill.accent {
241
+ background-color: var(--accent-light);
242
+ border-color: var(--accent);
243
+ color: var(--accent);
244
+ transition: 0.2s box-shadow;
245
+ --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
246
+ }
247
+ .button.outline-fill.gray {
248
+ background-color: var(--gray-light);
249
+ border-color: var(--gray-dark);
250
+ color: var(--gray-dark);
251
+ transition: 0.2s box-shadow;
252
+ --local-hover-shadow-color: var(--gray-light);
253
+ }
254
+ .button.outline-fill.green {
255
+ background-color: var(--green-light);
256
+ border-color: var(--green-dark);
257
+ color: var(--green-dark);
258
+ transition: 0.2s box-shadow;
259
+ --local-hover-shadow-color: var(--green-light);
260
+ }
261
+ .button.outline-fill.red {
262
+ background-color: var(--red-light);
263
+ border-color: var(--red-dark);
264
+ color: var(--red-dark);
265
+ transition: 0.2s box-shadow;
266
+ --local-hover-shadow-color: var(--red-light);
267
+ }
268
+ .button.outline-fill.blue {
269
+ background-color: var(--blue-light);
270
+ border-color: var(--blue-dark);
271
+ color: var(--blue-dark);
272
+ transition: 0.2s box-shadow;
273
+ --local-hover-shadow-color: var(--blue-light);
274
+ }
275
+ .button.outline-fill.orange {
276
+ background-color: var(--orange-light);
277
+ border-color: var(--orange-dark);
278
+ color: var(--orange-dark);
279
+ transition: 0.2s box-shadow;
280
+ --local-hover-shadow-color: var(--orange-light);
281
+ }
282
+ .button.invisible {
283
+ background-color: transparent;
284
+ transition: 0.2s background-color;
285
+ }
286
+ .button.invisible.accent:hover {
287
+ background-color: var(--accent-light);
288
+ box-shadow: none !important;
289
+ color: var(--text-light);
290
+ }
291
+ .button.invisible.gray:hover {
292
+ background-color: var(--gray-light);
293
+ box-shadow: none !important;
294
+ color: var(--gray-dark);
295
+ }
296
+ .button.invisible.green:hover {
297
+ background-color: var(--green-light);
298
+ box-shadow: none !important;
299
+ color: var(--green-dark);
300
+ }
301
+ .button.invisible.red:hover {
302
+ background-color: var(--red-light);
303
+ box-shadow: none !important;
304
+ color: var(--red-dark);
305
+ }
306
+ .button.invisible.blue:hover {
307
+ background-color: var(--blue-light);
308
+ box-shadow: none !important;
309
+ color: var(--blue-dark);
310
+ }
311
+ .button.invisible.orange:hover {
312
+ background-color: var(--orange-light);
313
+ box-shadow: none !important;
314
+ color: var(--orange-dark);
315
+ }
155
316
 
156
317
  .button.soft {
157
318
  background-color: var(--accent-light);
package/dist/components/Button/Button.svelte.d.ts CHANGED
@@ -4,8 +4,9 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  as?: "button" | "a" | undefined;
6
6
  size?: "small" | "medium" | "large" | "x-small" | undefined;
7
- color?: "danger" | "accent" | "soft" | "light" | "invisible" | undefined;
7
+ color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
8
8
  block?: boolean | undefined;
9
+ variant?: "fill" | "outline" | "invisible" | "outline-fill" | undefined;
9
10
  align?: "start" | "center" | undefined;
10
11
  };
11
12
  events: {
package/dist/components/IconButton/IconButton.svelte.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  size?: number | "small" | "medium" | "large" | undefined;
6
6
  color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
7
- variant?: "invisible" | "fill" | "outline" | "outline-fill" | undefined;
7
+ variant?: "fill" | "outline" | "invisible" | "outline-fill" | undefined;
8
8
  as?: "button" | "a" | undefined;
9
9
  };
10
10
  events: {
package/dist/components/Loader/Loader.svelte CHANGED
@@ -9,7 +9,7 @@ export let size = "medium";
9
9
  export let state = "loading";
10
10
  export let duration = 2e3;
11
11
  $: {
12
- if (state === "success" || state === "error") {
12
+ if (duration && (state === "success" || state === "error")) {
13
13
  setTimeout(() => {
14
14
  state = "none";
15
15
  }, duration);
package/dist/components/Loader/Loader.svelte.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const __propDef: {
7
7
  padding?: number | "none" | "small" | "medium" | "large" | undefined;
8
8
  size?: number | "small" | "medium" | "large" | undefined;
9
9
  state?: "none" | "error" | "success" | "loading" | undefined;
10
- duration?: number | undefined;
10
+ duration?: number | null | undefined;
11
11
  color?: string | undefined;
12
12
  colorTrack?: string | undefined;
13
13
  invert?: boolean | undefined;
package/dist/components/SplitControl/SplitControl.svelte CHANGED
@@ -62,12 +62,12 @@ export let caption = "";
62
62
  .left {
63
63
  padding: 15px;
64
64
  flex: 1;
65
- min-width: 200px;
66
65
  }
67
66
 
68
67
  .right {
69
68
  padding: 15px;
70
69
  flex: 3;
70
+ min-width: 0;
71
71
  }
72
72
 
73
73
  .caption-wrap {
package/dist/components/TextInput/TextInput.svelte CHANGED
@@ -65,7 +65,7 @@ let input;
65
65
  .input-wrap {
66
66
  display: inline-flex;
67
67
  align-items: center;
68
- height: 32px;
68
+ height: 30px;
69
69
  padding: 0 15px;
70
70
  border-radius: 20px;
71
71
  background: var(--input);
@@ -100,21 +100,21 @@ input:focus {
100
100
 
101
101
  .input-wrap.size-x-small {
102
102
  padding: 0 15px;
103
- height: 26px;
103
+ height: 20px;
104
104
  font-size: 12px;
105
105
  --local-shadow-size: 1px;
106
106
  }
107
107
 
108
108
  .input-wrap.size-small {
109
109
  padding: 0 15px;
110
- height: 30px;
110
+ height: 26px;
111
111
  font-size: 12px;
112
112
  --local-shadow-size: 1px;
113
113
  }
114
114
 
115
115
  .input-wrap.size-large {
116
116
  padding: 0 20px;
117
- height: 40px;
117
+ height: 36px;
118
118
  font-size: 16px;
119
119
  }
120
120
 
package/dist/components/Tooltip/Tooltip.svelte CHANGED
@@ -107,6 +107,7 @@ onMount(() => {
107
107
  padding: 8px 20px;
108
108
  border-radius: 20px;
109
109
  font-size: 14px;
110
+ z-index: 10000;
110
111
  }
111
112
 
112
113
  .tooltip:after {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyvor/design",
3
- "version": "0.0.29",
3
+ "version": "0.0.30",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "scripts": {