@insymetri/styleguide 0.1.62 → 0.1.63

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 (6) hide show
  1. package/dist/IIButton/IIButton.svelte +18 -12
  2. package/dist/IISegmentedControl/IISegmentedControl.svelte +22 -7
  3. package/dist/style/base.css +8 -0
  4. package/package.json +1 -1
  5. package/dist/style/tailwind/animations.d.ts +0 -174
  6. package/dist/style/tailwind/preset.d.ts +0 -643
package/dist/IIButton/IIButton.svelte CHANGED
@@ -64,7 +64,7 @@
64
64
  }
65
65
 
66
66
  const baseClasses =
67
- 'inline-flex items-center justify-center whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline outline-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary disabled:cursor-not-allowed'
67
+ 'relative inline-flex items-center justify-center whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline outline-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary disabled:cursor-not-allowed'
68
68
 
69
69
  const variantClasses = {
70
70
  primary:
@@ -83,15 +83,15 @@
83
83
  } as const
84
84
 
85
85
  const densityClasses = {
86
- compact: 'h-28 py-4 px-8 gap-4 text-tiny rounded-control',
87
- default: 'h-32 py-5 px-12 gap-6 text-small rounded-control',
88
- comfortable: 'h-40 py-8 px-12 gap-6 text-small rounded-control',
89
- mobile: 'h-48 py-10 px-16 gap-8 text-default rounded-control',
86
+ compact: 'h-28 py-4 px-8 gap-4 text-tiny leading-[20px] rounded-control',
87
+ default: 'h-32 py-5 px-12 gap-6 text-default leading-[22px] rounded-control',
88
+ comfortable: 'h-40 py-8 px-12 gap-6 text-small leading-[24px] rounded-control',
89
+ mobile: 'h-48 py-10 px-16 gap-8 text-default leading-[28px] rounded-control',
90
90
  } as const
91
91
 
92
92
  const fixedSizeClasses = {
93
- sm: 'py-4 px-8 gap-4 text-tiny h-24 rounded-control',
94
- lg: 'py-10 px-16 gap-8 text-large h-40 rounded-control',
93
+ sm: 'py-4 px-8 gap-4 text-tiny leading-[16px] h-24 rounded-control',
94
+ lg: 'py-10 px-16 gap-8 text-large leading-[20px] h-40 rounded-control',
95
95
  } as const
96
96
 
97
97
  const iconSizeClasses = {
@@ -106,13 +106,19 @@
106
106
  </script>
107
107
 
108
108
  {#snippet iconContent()}
109
+ {#if iconName}
110
+ <IIIcon {iconName} class={cn(iconSizeClasses[size], isLoading && 'invisible')} />
111
+ {/if}
112
+ {#if isLoading && children}
113
+ <span class="invisible">{@render children()}</span>
114
+ {:else}
115
+ {@render children?.()}
116
+ {/if}
109
117
  {#if isLoading}
110
- <span class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}
111
- ></span>
112
- {:else if iconName}
113
- <IIIcon {iconName} class={iconSizeClasses[size]} />
118
+ <span class="absolute inset-0 flex items-center justify-center pointer-events-none">
119
+ <span class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}></span>
120
+ </span>
114
121
  {/if}
115
- {@render children?.()}
116
122
  {/snippet}
117
123
 
118
124
  {#if href}
package/dist/IISegmentedControl/IISegmentedControl.svelte CHANGED
@@ -43,10 +43,10 @@
43
43
  } as const
44
44
 
45
45
  const densityClasses = {
46
- compact: 'px-8 text-tiny',
47
- default: 'px-8 text-small',
48
- comfortable: 'px-12 text-small',
49
- mobile: 'px-8 text-small',
46
+ compact: 'px-8 text-tiny leading-[22px]',
47
+ default: 'px-8 text-small leading-[26px]',
48
+ comfortable: 'px-12 text-small leading-[32px]',
49
+ mobile: 'px-8 text-small leading-[40px]',
50
50
  } as const
51
51
 
52
52
  const thumbInset = {
@@ -68,6 +68,18 @@
68
68
  select(items[nextIndex].value)
69
69
  }
70
70
 
71
+ let typeaheadBuffer = $state('')
72
+ let typeaheadTimer: ReturnType<typeof setTimeout> | undefined
73
+
74
+ function typeahead(char: string) {
75
+ typeaheadBuffer += char.toLowerCase()
76
+ clearTimeout(typeaheadTimer)
77
+ typeaheadTimer = setTimeout(() => { typeaheadBuffer = '' }, 500)
78
+
79
+ const match = items.find(i => i.label.toLowerCase().startsWith(typeaheadBuffer))
80
+ if (match && match.value !== value) select(match.value)
81
+ }
82
+
71
83
  function handleKeydown(e: KeyboardEvent) {
72
84
  if (e.key === ' ' || e.key === 'Enter') {
73
85
  e.preventDefault()
@@ -78,6 +90,9 @@
78
90
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
79
91
  e.preventDefault()
80
92
  cycle(-1)
93
+ } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
94
+ e.preventDefault()
95
+ typeahead(e.key)
81
96
  }
82
97
  }
83
98
 
@@ -90,7 +105,7 @@
90
105
  <div
91
106
  bind:this={rootEl}
92
107
  class={cn(
93
- 'relative inline-flex bg-input-bg border border-button-secondary rounded-control outline-none cursor-default',
108
+ 'relative inline-grid bg-input-bg border border-button-secondary rounded-control outline-none cursor-default',
94
109
  forceRing
95
110
  ? 'focus:ring-3 focus:ring-primary'
96
111
  : 'focus-visible:ring-3 focus-visible:ring-primary',
@@ -101,7 +116,7 @@
101
116
  tabindex="0"
102
117
  onkeydown={handleKeydown}
103
118
  onblur={() => (forceRing = false)}
104
- style="padding: {thumbInset[density.value]}px;"
119
+ style="padding: {thumbInset[density.value]}px; grid-template-columns: repeat({items.length}, 1fr);"
105
120
  >
106
121
  <!-- Sliding thumb -->
107
122
  <div
@@ -123,7 +138,7 @@
123
138
  type="button"
124
139
  tabindex="-1"
125
140
  class={cn(
126
- 'relative z-10 flex-1 border-none font-medium cursor-default whitespace-nowrap text-center outline-none bg-transparent',
141
+ 'relative z-10 flex items-center justify-center border-none font-medium cursor-default whitespace-nowrap outline-none bg-transparent',
127
142
  densityClasses[density.value],
128
143
  isActive ? 'text-primary' : 'text-secondary hover:text-body'
129
144
  )}
package/dist/style/base.css CHANGED
@@ -4,6 +4,10 @@
4
4
  font-style: normal;
5
5
  font-display: block;
6
6
  font-weight: 100 900;
7
+ ascent-override: 90%;
8
+ descent-override: 22.5%;
9
+ line-gap-override: 0%;
10
+ size-adjust: 100%;
7
11
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
8
12
  unicode-range:
9
13
  U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
@@ -15,6 +19,10 @@
15
19
  font-style: normal;
16
20
  font-display: block;
17
21
  font-weight: 100 900;
22
+ ascent-override: 90%;
23
+ descent-override: 22.5%;
24
+ line-gap-override: 0%;
25
+ size-adjust: 100%;
18
26
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
19
27
  unicode-range:
20
28
  U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insymetri/styleguide",
3
- "version": "0.1.62",
3
+ "version": "0.1.63",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {
package/dist/style/tailwind/animations.d.ts DELETED
@@ -1,174 +0,0 @@
1
- export declare const keyframes: {
2
- loginFadeInUp: {
3
- from: {
4
- opacity: string;
5
- transform: string;
6
- };
7
- to: {
8
- opacity: string;
9
- transform: string;
10
- };
11
- };
12
- loginPulse: {
13
- '0%, 100%': {
14
- opacity: string;
15
- };
16
- '50%': {
17
- opacity: string;
18
- };
19
- };
20
- loginOrbit: {
21
- '0%': {
22
- transform: string;
23
- };
24
- '100%': {
25
- transform: string;
26
- };
27
- };
28
- modalIn: {
29
- from: {
30
- opacity: string;
31
- transform: string;
32
- };
33
- to: {
34
- opacity: string;
35
- transform: string;
36
- };
37
- };
38
- spin: {
39
- to: {
40
- transform: string;
41
- };
42
- };
43
- fadeIn: {
44
- from: {
45
- opacity: string;
46
- };
47
- to: {
48
- opacity: string;
49
- };
50
- };
51
- scaleIn: {
52
- from: {
53
- opacity: string;
54
- transform: string;
55
- };
56
- to: {
57
- opacity: string;
58
- transform: string;
59
- };
60
- };
61
- slideIn: {
62
- from: {
63
- opacity: string;
64
- transform: string;
65
- };
66
- to: {
67
- opacity: string;
68
- transform: string;
69
- };
70
- };
71
- shake: {
72
- '0%, 100%': {
73
- transform: string;
74
- };
75
- '20%, 60%': {
76
- transform: string;
77
- };
78
- '40%, 80%': {
79
- transform: string;
80
- };
81
- };
82
- shimmer: {
83
- '0%': {
84
- backgroundPosition: string;
85
- };
86
- '100%': {
87
- backgroundPosition: string;
88
- };
89
- };
90
- 'skeleton-loading': {
91
- '0%': {
92
- opacity: string;
93
- };
94
- '50%': {
95
- opacity: string;
96
- };
97
- '100%': {
98
- opacity: string;
99
- };
100
- };
101
- commandPaletteSlideIn: {
102
- from: {
103
- opacity: string;
104
- transform: string;
105
- };
106
- to: {
107
- opacity: string;
108
- transform: string;
109
- };
110
- };
111
- ring: {
112
- '0%, 100%': {
113
- transform: string;
114
- };
115
- '10%, 30%': {
116
- transform: string;
117
- };
118
- '20%': {
119
- transform: string;
120
- };
121
- '40%': {
122
- transform: string;
123
- };
124
- };
125
- rowFadeIn: {
126
- from: {
127
- opacity: string;
128
- transform: string;
129
- };
130
- to: {
131
- opacity: string;
132
- transform: string;
133
- };
134
- };
135
- modalOut: {
136
- from: {
137
- opacity: string;
138
- transform: string;
139
- };
140
- to: {
141
- opacity: string;
142
- transform: string;
143
- };
144
- };
145
- fadeOut: {
146
- from: {
147
- opacity: string;
148
- };
149
- to: {
150
- opacity: string;
151
- };
152
- };
153
- };
154
- export declare const animation: {
155
- spin: string;
156
- 'fade-in': string;
157
- 'scale-in': string;
158
- 'slide-in': string;
159
- shake: string;
160
- shimmer: string;
161
- skeleton: string;
162
- 'modal-in': string;
163
- 'modal-out': string;
164
- 'fade-out': string;
165
- 'login-fade-in-up': string;
166
- 'login-pulse': string;
167
- 'login-orbit': string;
168
- ring: string;
169
- pulse: string;
170
- 'pulse-slow': string;
171
- 'row-fade-in': string;
172
- };
173
- export declare const loadingSkeletonsPlugin: import("tailwindcss/plugin").PluginWithConfig;
174
- export declare const patternsPlugin: import("tailwindcss/plugin").PluginWithConfig;
package/dist/style/tailwind/preset.d.ts DELETED
@@ -1,643 +0,0 @@
1
- declare const _default: {
2
- plugins: import("tailwindcss/plugin").PluginWithConfig[];
3
- theme: {
4
- backgroundColor: {
5
- primary: string;
6
- 'primary-hover': string;
7
- accent: string;
8
- 'accent-hover': string;
9
- secondary: string;
10
- 'primary-2': string;
11
- 'primary-5': string;
12
- 'primary-8': string;
13
- 'primary-15': string;
14
- 'primary-20': string;
15
- surface: string;
16
- 'surface-raised': string;
17
- background: string;
18
- 'background-alt': string;
19
- 'background-l0': string;
20
- 'background-l1': string;
21
- 'background-l2': string;
22
- 'background-l3': string;
23
- 'background-l4': string;
24
- muted: string;
25
- disabled: string;
26
- dark: string;
27
- 'dark-secondary': string;
28
- success: string;
29
- 'success-bg': string;
30
- 'success-light': string;
31
- 'success-15': string;
32
- 'success-hover': string;
33
- 'success-dark': string;
34
- 'success-dark-alt': string;
35
- warning: string;
36
- 'warning-bg': string;
37
- error: string;
38
- 'error-bg': string;
39
- 'error-light': string;
40
- 'error-hover': string;
41
- 'error-dark': string;
42
- info: string;
43
- 'info-bg': string;
44
- client: string;
45
- 'client-light': string;
46
- 'client-15': string;
47
- applicant: string;
48
- 'applicant-light': string;
49
- 'badge-grey': string;
50
- 'badge-blue': string;
51
- 'badge-red': string;
52
- 'badge-purple': string;
53
- 'badge-green': string;
54
- 'badge-orange': string;
55
- 'badge-cyan': string;
56
- 'badge-pink': string;
57
- 'badge-teal': string;
58
- 'badge-amber': string;
59
- 'badge-yellow': string;
60
- 'badge-green-border': string;
61
- 'input-bg': string;
62
- 'input-bg-disabled': string;
63
- 'dropdown-bg': string;
64
- 'dropdown-item-hover': string;
65
- 'dropdown-item-selected': string;
66
- 'button-primary': string;
67
- 'button-primary-hover': string;
68
- 'button-primary-disabled': string;
69
- 'button-secondary': string;
70
- 'button-ghost-hover': string;
71
- 'button-danger': string;
72
- 'button-danger-hover': string;
73
- 'button-danger-disabled': string;
74
- 'button-success': string;
75
- 'button-success-hover': string;
76
- 'button-success-disabled': string;
77
- 'button-accent': string;
78
- 'button-accent-hover': string;
79
- 'button-accent-disabled': string;
80
- overlay: string;
81
- 'overlay-light': string;
82
- 'overlay-heavy': string;
83
- 'hover-overlay': string;
84
- 'subtle-bg': string;
85
- 'filter-bg': string;
86
- 'filter-remove': string;
87
- 'filter-remove-hover': string;
88
- 'tab-bg': string;
89
- 'tab-active': string;
90
- 'focus-primary': string;
91
- 'focus-error': string;
92
- 'focus-blue': string;
93
- 'email-bg': string;
94
- 'manual-bg': string;
95
- 'code-highlight': string;
96
- 'login-gradient-start': string;
97
- 'login-gradient-end': string;
98
- 'login-card': string;
99
- 'login-particle-link': string;
100
- 'inspector-bg': string;
101
- 'inspector-header': string;
102
- white: string;
103
- black: string;
104
- transparent: string;
105
- current: string;
106
- 'gray-50': string;
107
- 'gray-100': string;
108
- 'gray-200': string;
109
- 'gray-300': string;
110
- 'gray-400': string;
111
- 'gray-500': string;
112
- 'gray-600': string;
113
- 'gray-700': string;
114
- 'gray-800': string;
115
- 'gray-900': string;
116
- };
117
- textColor: {
118
- primary: string;
119
- 'primary-hover': string;
120
- 'input-text': string;
121
- 'input-text-disabled': string;
122
- 'input-placeholder': string;
123
- 'dropdown-item': string;
124
- 'dropdown-item-selected': string;
125
- body: string;
126
- secondary: string;
127
- tertiary: string;
128
- inverse: string;
129
- 'on-primary': string;
130
- 'on-accent': string;
131
- surface: string;
132
- muted: string;
133
- 'muted-strong': string;
134
- accent: string;
135
- 'accent-hover': string;
136
- 'button-primary': string;
137
- 'button-primary-disabled': string;
138
- 'button-secondary': string;
139
- 'button-secondary-hover': string;
140
- 'button-secondary-disabled': string;
141
- 'button-ghost': string;
142
- 'button-ghost-hover': string;
143
- 'button-ghost-disabled': string;
144
- 'button-danger': string;
145
- 'button-danger-disabled': string;
146
- 'button-success': string;
147
- 'button-success-disabled': string;
148
- 'button-accent': string;
149
- 'button-accent-disabled': string;
150
- success: string;
151
- 'success-dark': string;
152
- 'success-dark-alt': string;
153
- warning: string;
154
- error: string;
155
- 'error-dark': string;
156
- info: string;
157
- client: string;
158
- applicant: string;
159
- 'badge-grey': string;
160
- 'badge-blue': string;
161
- 'badge-red': string;
162
- 'badge-purple': string;
163
- 'badge-green': string;
164
- 'badge-orange': string;
165
- 'badge-cyan': string;
166
- 'badge-pink': string;
167
- 'badge-teal': string;
168
- 'badge-amber': string;
169
- 'badge-yellow': string;
170
- 'filter-text': string;
171
- 'filter-operator': string;
172
- 'filter-remove-icon': string;
173
- 'email-text': string;
174
- 'manual-text': string;
175
- 'login-particle': string;
176
- 'login-particle-link': string;
177
- 'inspector-text': string;
178
- 'inspector-keyword': string;
179
- white: string;
180
- black: string;
181
- transparent: string;
182
- current: string;
183
- 'gray-50': string;
184
- 'gray-100': string;
185
- 'gray-200': string;
186
- 'gray-300': string;
187
- 'gray-400': string;
188
- 'gray-500': string;
189
- 'gray-600': string;
190
- 'gray-700': string;
191
- 'gray-800': string;
192
- 'gray-900': string;
193
- };
194
- borderColor: {
195
- primary: string;
196
- strong: string;
197
- subtle: string;
198
- 'button-secondary': string;
199
- 'button-secondary-hover': string;
200
- 'input-border': string;
201
- 'input-border-hover': string;
202
- 'input-border-active': string;
203
- 'input-border-error': string;
204
- 'dropdown-border': string;
205
- accent: string;
206
- 'accent-hover': string;
207
- success: string;
208
- 'success-dark': string;
209
- warning: string;
210
- error: string;
211
- info: string;
212
- client: string;
213
- applicant: string;
214
- 'badge-grey': string;
215
- 'badge-blue': string;
216
- 'badge-red': string;
217
- 'badge-purple': string;
218
- 'badge-green': string;
219
- 'badge-orange': string;
220
- 'badge-cyan': string;
221
- 'badge-pink': string;
222
- 'badge-teal': string;
223
- 'badge-amber': string;
224
- 'badge-yellow': string;
225
- 'filter-border': string;
226
- 'focus-primary': string;
227
- 'focus-error': string;
228
- 'login-card': string;
229
- 'inspector-border': string;
230
- white: string;
231
- black: string;
232
- transparent: string;
233
- current: string;
234
- 'gray-50': string;
235
- 'gray-100': string;
236
- 'gray-200': string;
237
- 'gray-300': string;
238
- 'gray-400': string;
239
- 'gray-500': string;
240
- 'gray-600': string;
241
- 'gray-700': string;
242
- 'gray-800': string;
243
- 'gray-900': string;
244
- };
245
- outlineColor: {
246
- primary: string;
247
- error: string;
248
- blue: string;
249
- };
250
- ringColor: {
251
- primary: string;
252
- error: string;
253
- blue: string;
254
- };
255
- fontSize: {
256
- readonly h1: readonly ["2.4rem", {
257
- readonly lineHeight: "3.2rem";
258
- readonly fontWeight: "600";
259
- }];
260
- readonly h2: readonly ["2.0rem", {
261
- readonly lineHeight: "2.8rem";
262
- readonly fontWeight: "600";
263
- }];
264
- readonly h3: readonly ["1.8rem", {
265
- readonly lineHeight: "2.4rem";
266
- readonly fontWeight: "600";
267
- }];
268
- readonly h4: readonly ["1.6rem", {
269
- readonly lineHeight: "2.0rem";
270
- readonly fontWeight: "600";
271
- }];
272
- readonly h5: readonly ["1.4rem", {
273
- readonly lineHeight: "2.0rem";
274
- readonly fontWeight: "600";
275
- }];
276
- readonly h6: readonly ["1.3rem", {
277
- readonly lineHeight: "1.6rem";
278
- readonly fontWeight: "600";
279
- }];
280
- readonly m1: readonly ["2.0rem", {
281
- readonly lineHeight: "2.8rem";
282
- readonly fontWeight: "300";
283
- }];
284
- readonly m2: readonly ["1.6rem", {
285
- readonly lineHeight: "2.4rem";
286
- readonly fontWeight: "300";
287
- }];
288
- readonly 'm2-emphasis': readonly ["1.6rem", {
289
- readonly lineHeight: "2.4rem";
290
- readonly fontWeight: "500";
291
- }];
292
- readonly m3: readonly ["1.4rem", {
293
- readonly lineHeight: "2.0rem";
294
- readonly fontWeight: "300";
295
- }];
296
- readonly 'm3-emphasis': readonly ["1.3rem", {
297
- readonly lineHeight: "2.0rem";
298
- readonly fontWeight: "500";
299
- }];
300
- readonly 'm3-small': readonly ["1.3rem", {
301
- readonly lineHeight: "2.0rem";
302
- readonly fontWeight: "400";
303
- }];
304
- readonly large: readonly ["1.6rem", {
305
- readonly lineHeight: "2.0rem";
306
- readonly fontWeight: "400";
307
- }];
308
- readonly 'large-emphasis': readonly ["1.6rem", {
309
- readonly lineHeight: "2.0rem";
310
- readonly fontWeight: "500";
311
- }];
312
- readonly default: readonly ["1.3rem", {
313
- readonly lineHeight: "1.6rem";
314
- readonly fontWeight: "400";
315
- }];
316
- readonly emphasis: readonly ["1.3rem", {
317
- readonly lineHeight: "1.6rem";
318
- readonly fontWeight: "500";
319
- }];
320
- readonly strong: readonly ["1.3rem", {
321
- readonly lineHeight: "1.6rem";
322
- readonly fontWeight: "600";
323
- }];
324
- readonly small: readonly ["1.2rem", {
325
- readonly lineHeight: "1.6rem";
326
- readonly fontWeight: "400";
327
- }];
328
- readonly 'small-emphasis': readonly ["1.2rem", {
329
- readonly lineHeight: "1.6rem";
330
- readonly fontWeight: "500";
331
- }];
332
- readonly 'small-strong': readonly ["1.2rem", {
333
- readonly lineHeight: "1.6rem";
334
- readonly fontWeight: "600";
335
- }];
336
- readonly tiny: readonly ["1.1rem", {
337
- readonly lineHeight: "1.2rem";
338
- readonly fontWeight: "400";
339
- }];
340
- readonly 'tiny-emphasis': readonly ["1.1rem", {
341
- readonly lineHeight: "1.2rem";
342
- readonly fontWeight: "500";
343
- }];
344
- readonly 'tiny-strong': readonly ["1.1rem", {
345
- readonly lineHeight: "1.2rem";
346
- readonly fontWeight: "600";
347
- }];
348
- readonly numeric: readonly ["1.4rem", {
349
- readonly lineHeight: "1.6rem";
350
- readonly fontWeight: "400";
351
- }];
352
- readonly 'display-lg': readonly ["4.0rem", {
353
- readonly lineHeight: "1.1";
354
- }];
355
- readonly 'display-md': readonly ["3.0rem", {
356
- readonly lineHeight: "1.2";
357
- }];
358
- readonly 'display-sm': readonly ["2.4rem", {
359
- readonly lineHeight: "1.2";
360
- readonly fontWeight: "500";
361
- }];
362
- };
363
- spacing: Record<string, string>;
364
- boxShadow: {
365
- none: string;
366
- pill: string;
367
- subtle: string;
368
- card: string;
369
- 'card-hover': string;
370
- dropdown: string;
371
- submenu: string;
372
- modal: string;
373
- floating: string;
374
- drawer: string;
375
- toast: string;
376
- 'focus-ring': string;
377
- 'selection-ring': string;
378
- 'comm-hover': string;
379
- 'login-card': string;
380
- 'dialog-overlay': string;
381
- };
382
- borderRadius: Record<string, string>;
383
- zIndex: Record<string, string>;
384
- minWidth: ({ theme }: {
385
- theme: (key: string) => Record<string, string>;
386
- }) => {
387
- full: string;
388
- min: string;
389
- max: string;
390
- fit: string;
391
- screen: string;
392
- };
393
- minHeight: ({ theme }: {
394
- theme: (key: string) => Record<string, string>;
395
- }) => {
396
- full: string;
397
- screen: string;
398
- };
399
- maxWidth: ({ theme }: {
400
- theme: (key: string) => Record<string, string>;
401
- }) => {
402
- '1200': string;
403
- '1280': string;
404
- '1400': string;
405
- full: string;
406
- min: string;
407
- max: string;
408
- fit: string;
409
- screen: string;
410
- };
411
- maxHeight: ({ theme }: {
412
- theme: (key: string) => Record<string, string>;
413
- }) => {
414
- full: string;
415
- screen: string;
416
- };
417
- extend: {
418
- keyframes: {
419
- loginFadeInUp: {
420
- from: {
421
- opacity: string;
422
- transform: string;
423
- };
424
- to: {
425
- opacity: string;
426
- transform: string;
427
- };
428
- };
429
- loginPulse: {
430
- '0%, 100%': {
431
- opacity: string;
432
- };
433
- '50%': {
434
- opacity: string;
435
- };
436
- };
437
- loginOrbit: {
438
- '0%': {
439
- transform: string;
440
- };
441
- '100%': {
442
- transform: string;
443
- };
444
- };
445
- modalIn: {
446
- from: {
447
- opacity: string;
448
- transform: string;
449
- };
450
- to: {
451
- opacity: string;
452
- transform: string;
453
- };
454
- };
455
- spin: {
456
- to: {
457
- transform: string;
458
- };
459
- };
460
- fadeIn: {
461
- from: {
462
- opacity: string;
463
- };
464
- to: {
465
- opacity: string;
466
- };
467
- };
468
- scaleIn: {
469
- from: {
470
- opacity: string;
471
- transform: string;
472
- };
473
- to: {
474
- opacity: string;
475
- transform: string;
476
- };
477
- };
478
- slideIn: {
479
- from: {
480
- opacity: string;
481
- transform: string;
482
- };
483
- to: {
484
- opacity: string;
485
- transform: string;
486
- };
487
- };
488
- shake: {
489
- '0%, 100%': {
490
- transform: string;
491
- };
492
- '20%, 60%': {
493
- transform: string;
494
- };
495
- '40%, 80%': {
496
- transform: string;
497
- };
498
- };
499
- shimmer: {
500
- '0%': {
501
- backgroundPosition: string;
502
- };
503
- '100%': {
504
- backgroundPosition: string;
505
- };
506
- };
507
- 'skeleton-loading': {
508
- '0%': {
509
- opacity: string;
510
- };
511
- '50%': {
512
- opacity: string;
513
- };
514
- '100%': {
515
- opacity: string;
516
- };
517
- };
518
- commandPaletteSlideIn: {
519
- from: {
520
- opacity: string;
521
- transform: string;
522
- };
523
- to: {
524
- opacity: string;
525
- transform: string;
526
- };
527
- };
528
- ring: {
529
- '0%, 100%': {
530
- transform: string;
531
- };
532
- '10%, 30%': {
533
- transform: string;
534
- };
535
- '20%': {
536
- transform: string;
537
- };
538
- '40%': {
539
- transform: string;
540
- };
541
- };
542
- rowFadeIn: {
543
- from: {
544
- opacity: string;
545
- transform: string;
546
- };
547
- to: {
548
- opacity: string;
549
- transform: string;
550
- };
551
- };
552
- modalOut: {
553
- from: {
554
- opacity: string;
555
- transform: string;
556
- };
557
- to: {
558
- opacity: string;
559
- transform: string;
560
- };
561
- };
562
- fadeOut: {
563
- from: {
564
- opacity: string;
565
- };
566
- to: {
567
- opacity: string;
568
- };
569
- };
570
- };
571
- animation: {
572
- spin: string;
573
- 'fade-in': string;
574
- 'scale-in': string;
575
- 'slide-in': string;
576
- shake: string;
577
- shimmer: string;
578
- skeleton: string;
579
- 'modal-in': string;
580
- 'modal-out': string;
581
- 'fade-out': string;
582
- 'login-fade-in-up': string;
583
- 'login-pulse': string;
584
- 'login-orbit': string;
585
- ring: string;
586
- pulse: string;
587
- 'pulse-slow': string;
588
- 'row-fade-in': string;
589
- };
590
- transitionDuration: {
591
- fast: string;
592
- base: string;
593
- slow: string;
594
- };
595
- transitionTimingFunction: {
596
- DEFAULT: string;
597
- };
598
- transitionProperty: {
599
- bg: string;
600
- };
601
- backdropBlur: ({ theme }: {
602
- theme: (key: string) => Record<string, string>;
603
- }) => {
604
- [x: string]: string;
605
- };
606
- borderWidth: {
607
- '1.5': string;
608
- '3': string;
609
- };
610
- flex: {
611
- fill: string;
612
- auto: string;
613
- major: string;
614
- minor: string;
615
- };
616
- gridTemplateColumns: {
617
- 'label-value': string;
618
- 'label-detail': string;
619
- 'sidebar-content': string;
620
- 'content-sidebar': string;
621
- '6-col': string;
622
- 'auto-180': string;
623
- 'auto-200': string;
624
- 'auto-250': string;
625
- 'auto-340': string;
626
- 'auto-fit-200': string;
627
- };
628
- fontFamily: {
629
- inherit: string;
630
- };
631
- textColor: {
632
- inherit: string;
633
- };
634
- cursor: {
635
- inherit: string;
636
- };
637
- accentColor: {
638
- primary: string;
639
- };
640
- };
641
- };
642
- };
643
- export default _default;