@insymetri/styleguide 0.1.62 → 0.1.64
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/IIButton/IIButton.svelte +18 -12
- package/dist/IISegmentedControl/IISegmentedControl.svelte +36 -19
- package/dist/IISegmentedControl/IISegmentedControlStories.svelte +62 -0
- package/dist/style/base.css +8 -0
- package/package.json +1 -1
- package/dist/style/tailwind/animations.d.ts +0 -174
- package/dist/style/tailwind/preset.d.ts +0 -643
|
@@ -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
|
|
87
|
-
default: 'h-32
|
|
88
|
-
comfortable: 'h-40
|
|
89
|
-
mobile: 'h-48
|
|
86
|
+
compact: 'h-28 px-8 gap-4 text-tiny leading-[22px] rounded-control',
|
|
87
|
+
default: 'h-32 px-12 gap-6 text-default leading-[26px] rounded-control',
|
|
88
|
+
comfortable: 'h-40 px-12 gap-6 text-small leading-[32px] rounded-control',
|
|
89
|
+
mobile: 'h-48 px-16 gap-8 text-default leading-[40px] rounded-control',
|
|
90
90
|
} as const
|
|
91
91
|
|
|
92
92
|
const fixedSizeClasses = {
|
|
93
|
-
sm: '
|
|
94
|
-
lg: '
|
|
93
|
+
sm: 'h-24 px-8 gap-4 text-tiny leading-[18px] rounded-control',
|
|
94
|
+
lg: 'h-40 px-16 gap-8 text-large leading-[32px] 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=
|
|
111
|
-
|
|
112
|
-
|
|
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}
|
|
@@ -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-
|
|
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,21 +116,23 @@
|
|
|
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
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
122
|
+
{#if activeIndex >= 0}
|
|
123
|
+
<div
|
|
124
|
+
class="absolute"
|
|
125
|
+
style:border-radius="calc(var(--ii-radius-control) - {thumbInset[density.value]}px)"
|
|
126
|
+
style="
|
|
127
|
+
top: {thumbInset[density.value]}px;
|
|
128
|
+
bottom: {thumbInset[density.value]}px;
|
|
129
|
+
left: calc({thumbInset[density.value]}px + {activeIndex} * (100% - {thumbInset[density.value] * 2}px) / {items.length});
|
|
130
|
+
width: calc((100% - {thumbInset[density.value] * 2}px) / {items.length});
|
|
131
|
+
background: {getThumbColor(items[activeIndex])};
|
|
132
|
+
transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
133
|
+
"
|
|
134
|
+
></div>
|
|
135
|
+
{/if}
|
|
119
136
|
|
|
120
137
|
{#each items as item (item.value)}
|
|
121
138
|
{@const isActive = value === item.value}
|
|
@@ -123,7 +140,7 @@
|
|
|
123
140
|
type="button"
|
|
124
141
|
tabindex="-1"
|
|
125
142
|
class={cn(
|
|
126
|
-
'relative z-10 flex-
|
|
143
|
+
'relative z-10 flex items-center justify-center border-none font-medium cursor-default whitespace-nowrap outline-none bg-transparent',
|
|
127
144
|
densityClasses[density.value],
|
|
128
145
|
isActive ? 'text-primary' : 'text-secondary hover:text-body'
|
|
129
146
|
)}
|
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
|
|
8
8
|
let validationMode = $state('allow')
|
|
9
9
|
let focusValidation: (() => void) | undefined = $state()
|
|
10
|
+
|
|
11
|
+
let fullWidthMode = $state('allow')
|
|
12
|
+
let fullWidthThree = $state('monthly')
|
|
10
13
|
</script>
|
|
11
14
|
|
|
12
15
|
<div class="flex flex-col gap-32">
|
|
@@ -89,6 +92,65 @@
|
|
|
89
92
|
</button>
|
|
90
93
|
</section>
|
|
91
94
|
|
|
95
|
+
<!-- Full width -->
|
|
96
|
+
<section>
|
|
97
|
+
<h2 class="text-default-emphasis text-primary mb-8">Full Width</h2>
|
|
98
|
+
<p class="text-small text-secondary mb-12">
|
|
99
|
+
When the control is given a width (e.g. <code>w-full</code> in a constrained container),
|
|
100
|
+
each segment and the thumb should grow proportionally while the text stays centered.
|
|
101
|
+
</p>
|
|
102
|
+
<div class="max-w-400 flex flex-col gap-12">
|
|
103
|
+
<IISegmentedControl
|
|
104
|
+
class="w-full"
|
|
105
|
+
items={[
|
|
106
|
+
{label: 'Allow list', value: 'allow'},
|
|
107
|
+
{label: 'Block list', value: 'block'},
|
|
108
|
+
]}
|
|
109
|
+
bind:value={fullWidthMode}
|
|
110
|
+
/>
|
|
111
|
+
<IISegmentedControl
|
|
112
|
+
class="w-full"
|
|
113
|
+
items={[
|
|
114
|
+
{label: 'Monthly', value: 'monthly'},
|
|
115
|
+
{label: 'Quarterly', value: 'quarterly'},
|
|
116
|
+
{label: 'Annual', value: 'annual'},
|
|
117
|
+
]}
|
|
118
|
+
bind:value={fullWidthThree}
|
|
119
|
+
/>
|
|
120
|
+
</div>
|
|
121
|
+
</section>
|
|
122
|
+
|
|
123
|
+
<!-- Undefined value -->
|
|
124
|
+
<section>
|
|
125
|
+
<h2 class="text-default-emphasis text-primary mb-8">Undefined Value</h2>
|
|
126
|
+
<p class="text-small text-secondary mb-12">
|
|
127
|
+
When <code>value</code> is <code>undefined</code>, no segment is active and the thumb is
|
|
128
|
+
hidden.
|
|
129
|
+
</p>
|
|
130
|
+
<IISegmentedControl
|
|
131
|
+
items={[
|
|
132
|
+
{label: 'Allow list', value: 'allow'},
|
|
133
|
+
{label: 'Block list', value: 'block'},
|
|
134
|
+
]}
|
|
135
|
+
value={undefined as unknown as string}
|
|
136
|
+
/>
|
|
137
|
+
</section>
|
|
138
|
+
|
|
139
|
+
<!-- Null value -->
|
|
140
|
+
<section>
|
|
141
|
+
<h2 class="text-default-emphasis text-primary mb-8">Null Value</h2>
|
|
142
|
+
<p class="text-small text-secondary mb-12">
|
|
143
|
+
When <code>value</code> is <code>null</code>, no segment is active and the thumb is hidden.
|
|
144
|
+
</p>
|
|
145
|
+
<IISegmentedControl
|
|
146
|
+
items={[
|
|
147
|
+
{label: 'Allow list', value: 'allow'},
|
|
148
|
+
{label: 'Block list', value: 'block'},
|
|
149
|
+
]}
|
|
150
|
+
value={null as unknown as string}
|
|
151
|
+
/>
|
|
152
|
+
</section>
|
|
153
|
+
|
|
92
154
|
<!-- Density-responsive -->
|
|
93
155
|
<section>
|
|
94
156
|
<h2 class="text-default-emphasis text-primary mb-8">Density Responsive</h2>
|
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: 92%;
|
|
8
|
+
descent-override: 20.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: 92%;
|
|
23
|
+
descent-override: 20.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,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;
|
|
@@ -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;
|