@hyvor/design 0.0.42 → 0.0.44

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 (5) hide show
  1. package/dist/components/Base/Base.svelte +4 -5
  2. package/dist/components/IconButton/IconButton.svelte +15 -19
  3. package/dist/components/IconButton/IconButton.svelte.d.ts +1 -1
  4. package/dist/components/IconMessage/IconMessage.svelte +3 -6
  5. package/package.json +1 -1
package/dist/components/Base/Base.svelte CHANGED
@@ -4,11 +4,10 @@ import "../../index.js";
4
4
  import ToastProvider from "../Toast/ToastProvider.svelte";
5
5
  </script>
6
6
 
7
- <DarkProvider />
8
- <ToastProvider />
9
-
10
- <ConfirmModalProvider />
11
-
12
7
  <div id="base">
13
8
  <slot />
14
9
  </div>
10
+
11
+ <DarkProvider />
12
+ <ToastProvider />
13
+ <ConfirmModalProvider />
package/dist/components/IconButton/IconButton.svelte CHANGED
@@ -61,45 +61,47 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
61
61
  --local-hover-shadow-size: 3px;
62
62
  }
63
63
 
64
+ .button.fill {
65
+ transition: 0.2s box-shadow;
66
+ }
64
67
  .button.fill.accent {
65
68
  background-color: var(--accent);
66
69
  color: var(--accent-text);
67
- transition: 0.2s box-shadow;
68
70
  --local-hover-shadow-color: var(--accent-light);
69
71
  }
70
72
  .button.fill.gray {
71
73
  background-color: var(--gray-dark);
72
74
  color: var(--text-white);
73
- transition: 0.2s box-shadow;
75
+ --local-hover-shadow-color: var(--gray-light);
76
+ }
77
+ .button.fill.input {
78
+ background-color: var(--input);
79
+ color: var(--text);
74
80
  --local-hover-shadow-color: var(--gray-light);
75
81
  }
76
82
  .button.fill.green {
77
83
  background-color: var(--green-dark);
78
84
  color: var(--text-white);
79
- transition: 0.2s box-shadow;
80
85
  --local-hover-shadow-color: var(--green-light);
81
86
  }
82
87
  .button.fill.red {
83
88
  background-color: var(--red-dark);
84
89
  color: var(--text-white);
85
- transition: 0.2s box-shadow;
86
90
  --local-hover-shadow-color: var(--red-light);
87
91
  }
88
92
  .button.fill.blue {
89
93
  background-color: var(--blue-dark);
90
94
  color: var(--text-white);
91
- transition: 0.2s box-shadow;
92
95
  --local-hover-shadow-color: var(--blue-light);
93
96
  }
94
97
  .button.fill.orange {
95
98
  background-color: var(--orange-dark);
96
99
  color: var(--text-white);
97
- transition: 0.2s box-shadow;
98
100
  --local-hover-shadow-color: var(--orange-light);
99
101
  }
100
102
  .button.fill-light.accent {
101
- background-color: var(--accent);
102
- color: var(--accent-text);
103
+ background-color: var(--accent-light);
104
+ color: var(--accent);
103
105
  --local-hover-shadow-color: var(--accent-light);
104
106
  }
105
107
  .button.fill-light.gray {
@@ -136,31 +138,26 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
136
138
  --local-hover-shadow-color: var(--accent-light);
137
139
  }
138
140
  .button.outline.gray {
139
- background-color: none;
140
141
  border-color: var(--gray-dark);
141
142
  color: var(--gray-dark);
142
143
  --local-hover-shadow-color: var(--gray-light);
143
144
  }
144
145
  .button.outline.green {
145
- background-color: none;
146
146
  border-color: var(--green-dark);
147
147
  color: var(--green-dark);
148
148
  --local-hover-shadow-color: var(--green-light);
149
149
  }
150
150
  .button.outline.red {
151
- background-color: none;
152
151
  border-color: var(--red-dark);
153
152
  color: var(--red-dark);
154
153
  --local-hover-shadow-color: var(--red-light);
155
154
  }
156
155
  .button.outline.blue {
157
- background-color: none;
158
156
  border-color: var(--blue-dark);
159
157
  color: var(--blue-dark);
160
158
  --local-hover-shadow-color: var(--blue-light);
161
159
  }
162
160
  .button.outline.orange {
163
- background-color: none;
164
161
  border-color: var(--orange-dark);
165
162
  color: var(--orange-dark);
166
163
  --local-hover-shadow-color: var(--orange-light);
@@ -207,35 +204,34 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
207
204
  .button.invisible {
208
205
  background-color: transparent;
209
206
  transition: 0.2s background-color;
207
+ box-shadow: none !important;
210
208
  }
211
209
  .button.invisible.accent:hover {
212
210
  background-color: var(--accent-light);
213
- box-shadow: none !important;
214
211
  color: var(--text-light);
215
212
  }
216
213
  .button.invisible.gray:hover {
217
214
  background-color: var(--gray-light);
218
- box-shadow: none !important;
219
215
  color: var(--gray-dark);
220
216
  }
217
+ .button.invisible.input:hover {
218
+ background-color: var(--input);
219
+ color: var(--text);
220
+ }
221
221
  .button.invisible.green:hover {
222
222
  background-color: var(--green-light);
223
- box-shadow: none !important;
224
223
  color: var(--green-dark);
225
224
  }
226
225
  .button.invisible.red:hover {
227
226
  background-color: var(--red-light);
228
- box-shadow: none !important;
229
227
  color: var(--red-dark);
230
228
  }
231
229
  .button.invisible.blue:hover {
232
230
  background-color: var(--blue-light);
233
- box-shadow: none !important;
234
231
  color: var(--blue-dark);
235
232
  }
236
233
  .button.invisible.orange:hover {
237
234
  background-color: var(--orange-light);
238
- box-shadow: none !important;
239
235
  color: var(--orange-dark);
240
236
  }
241
237
 
package/dist/components/IconButton/IconButton.svelte.d.ts CHANGED
@@ -3,7 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  size?: number | "small" | "medium" | "large" | undefined;
6
- color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
6
+ color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
7
7
  variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
8
8
  as?: "button" | "a" | undefined;
9
9
  };
package/dist/components/IconMessage/IconMessage.svelte CHANGED
@@ -26,7 +26,6 @@ iconColor = iconColor || "var(--gray-dark)";
26
26
  <div
27
27
  class="icon"
28
28
  style:color={iconColor}
29
- style:font-size={iconSize + 'px'}
30
29
  {...$$restProps}
31
30
  >
32
31
  {#if $$slots.icon}
@@ -36,13 +35,13 @@ iconColor = iconColor || "var(--gray-dark)";
36
35
  {/if}
37
36
  </div>
38
37
 
39
- <p class="message">
38
+ <div class="message">
40
39
  {#if $$slots.message}
41
40
  <slot name="message" />
42
41
  {:else if message}
43
42
  {message}
44
43
  {/if}
45
- </p>
44
+ </div>
46
45
 
47
46
  </div>
48
47
 
@@ -63,12 +62,10 @@ iconColor = iconColor || "var(--gray-dark)";
63
62
  .message {
64
63
  /* Add message styles here */
65
64
  color: var(--text-light);
66
- margin-top: -10px;
65
+ margin-top: 15px;
67
66
  }
68
67
 
69
68
  .icon {
70
- font-size: 100px;/* Add icon styles here */
71
-
72
69
  }
73
70
 
74
71
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyvor/design",
3
- "version": "0.0.42",
3
+ "version": "0.0.44",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "scripts": {