@tecnobank/componentes 1.0.0

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/design-tokens.css +480 -0
  2. package/fesm2022/tecnobank-componentes.mjs +15990 -0
  3. package/fesm2022/tecnobank-componentes.mjs.map +1 -0
  4. package/package.json +36 -0
  5. package/primitives.css +377 -0
  6. package/types/tecnobank-componentes.d.ts +4763 -0
package/design-tokens.css ADDED
@@ -0,0 +1,480 @@
1
+ /* Tokens oficiais da Foundation Design Tokens. Importado globalmente por src/styles.css. */
2
+
3
+ :root {
4
+ --tbk-ds-bg-color-primary: var(--tbk-primitive-color-brand-primary);
5
+ --tbk-ds-bg-color-secondary: var(--tbk-primitive-color-brand-secondary);
6
+ --tbk-ds-bg-color-tertiary: var(--tbk-primitive-color-brand-accent);
7
+ --tbk-ds-bg-color-white-bg: var(--tbk-primitive-color-white);
8
+ --tbk-ds-bg-color-blue-100: var(--tbk-primitive-color-blue-100);
9
+ --tbk-ds-bg-color-blue-200: var(--tbk-primitive-color-blue-200);
10
+ --tbk-ds-bg-color-blue-300: var(--tbk-primitive-color-blue-300);
11
+ --tbk-ds-bg-color-blue-400: var(--tbk-primitive-color-blue-400);
12
+ --tbk-ds-bg-color-blue-500: var(--tbk-primitive-color-blue-500);
13
+ --tbk-ds-bg-color-blue-600: var(--tbk-primitive-color-blue-600);
14
+ --tbk-ds-bg-color-blue-700: var(--tbk-primitive-color-blue-700);
15
+ --tbk-ds-bg-color-blue-800: var(--tbk-primitive-color-blue-800);
16
+ --tbk-ds-bg-color-blue-900: var(--tbk-primitive-color-blue-900);
17
+ --tbk-ds-bg-color-blue-1000: var(--tbk-primitive-color-blue-1000);
18
+ --tbk-ds-bg-color-gray-100: var(--tbk-primitive-color-gray-100);
19
+ --tbk-ds-bg-color-gray-200: var(--tbk-primitive-color-gray-200);
20
+ --tbk-ds-bg-color-gray-300: var(--tbk-primitive-color-gray-300);
21
+ --tbk-ds-bg-color-gray-400: var(--tbk-primitive-color-gray-400);
22
+ --tbk-ds-bg-color-gray-500: var(--tbk-primitive-color-gray-500);
23
+ --tbk-ds-bg-color-gray-600: var(--tbk-primitive-color-gray-600);
24
+ --tbk-ds-bg-color-gray-700: var(--tbk-primitive-color-gray-700);
25
+ --tbk-ds-bg-color-gray-800: var(--tbk-primitive-color-gray-800);
26
+ --tbk-ds-bg-color-gray-900: var(--tbk-primitive-color-gray-900);
27
+ --tbk-ds-bg-color-gray-1000: var(--tbk-primitive-color-gray-1000);
28
+ --tbk-ds-bg-color-gradient-bg: linear-gradient(to left, var(--tbk-primitive-color-gradient-blue), var(--tbk-primitive-color-brand-accent));
29
+ --tbk-ds-bg-color-base-bg: var(--tbk-primitive-color-surface-base);
30
+ --tbk-ds-color-text-primary: var(--tbk-primitive-color-neutral-text-primary);
31
+ --tbk-ds-color-text-secondary: var(--tbk-primitive-color-neutral-text-secondary);
32
+ --tbk-ds-color-text-tertiary: var(--tbk-primitive-color-neutral-text-tertiary);
33
+ --tbk-ds-color-text-blue: var(--tbk-primitive-color-brand-blue-mid);
34
+ --tbk-ds-color-text-disabled: var(--tbk-primitive-color-gray-600);
35
+ --tbk-ds-color-text-success: var(--tbk-primitive-color-success-text);
36
+ --tbk-ds-color-text-warning: var(--tbk-primitive-color-warning-text);
37
+ --tbk-ds-color-text-critical: var(--tbk-primitive-color-critical-text);
38
+ --tbk-ds-color-text-white: var(--tbk-primitive-color-white);
39
+ --tbk-ds-color-text-gray: var(--tbk-primitive-color-neutral-text-quaternary);
40
+ --tbk-ds-color-text-button-primary-solid: var(--tbk-primitive-color-white);
41
+ --tbk-ds-color-text-button-primary-hover-solid: var(--tbk-primitive-color-white);
42
+ --tbk-ds-color-text-button-primary-outline: var(--tbk-primitive-color-brand-blue-mid);
43
+ --tbk-ds-color-text-button-primary-outline-hover: var(--tbk-primitive-color-brand-blue-mid);
44
+ --tbk-ds-color-text-button-primary-onlytext: var(--tbk-primitive-color-brand-blue-mid);
45
+ --tbk-ds-color-text-button-primary-onlytext-hover: var(--tbk-primitive-color-brand-blue-mid);
46
+ --tbk-ds-color-text-button-gradient-solid: var(--tbk-primitive-color-white);
47
+ --tbk-ds-color-text-button-gradient-hover-solid: var(--tbk-primitive-color-white);
48
+ --tbk-ds-color-text-button-gradient-outline: linear-gradient( 90deg, color-mix(in srgb, var(--tbk-primitive-color-gradient-red) 88%, black) 0%, color-mix(in srgb, var(--tbk-primitive-color-gradient-blue-alt) 88%, black) 100% );
49
+ --tbk-ds-color-text-button-gradient-outline-hover: linear-gradient( 90deg, color-mix(in srgb, var(--tbk-primitive-color-gradient-red) 88%, black) 0%, color-mix(in srgb, var(--tbk-primitive-color-gradient-blue-alt) 88%, black) 100% );
50
+ --tbk-ds-color-text-button-gradient-onlytext: linear-gradient( 90deg, color-mix(in srgb, var(--tbk-primitive-color-gradient-red) 88%, black) 0%, color-mix(in srgb, var(--tbk-primitive-color-gradient-blue-alt) 88%, black) 100% );
51
+ --tbk-ds-color-text-button-gradient-onlytext-hover: linear-gradient( 90deg, color-mix(in srgb, var(--tbk-primitive-color-gradient-red) 88%, black) 0%, color-mix(in srgb, var(--tbk-primitive-color-gradient-blue-alt) 88%, black) 100% );
52
+ --tbk-ds-color-text-button-critical-solid: var(--tbk-primitive-color-white);
53
+ --tbk-ds-color-text-button-critical-hover-solid: var(--tbk-primitive-color-white);
54
+ --tbk-ds-color-text-button-critical-outline: var(--tbk-primitive-color-critical-text);
55
+ --tbk-ds-color-text-button-critical-outline-hover: var(--tbk-primitive-color-critical-text);
56
+ --tbk-ds-color-text-button-critical-onlytext: var(--tbk-primitive-color-critical-text);
57
+ --tbk-ds-color-text-button-critical-onlytext-hover: var(--tbk-primitive-color-critical-text);
58
+ --tbk-ds-color-text-button-warning-solid: var(--tbk-primitive-color-white);
59
+ --tbk-ds-color-text-button-warning-hover-solid: var(--tbk-primitive-color-white);
60
+ --tbk-ds-color-text-button-warning-outline: var(--tbk-primitive-color-warning-text);
61
+ --tbk-ds-color-text-button-warning-outline-hover: var(--tbk-primitive-color-warning-text);
62
+ --tbk-ds-color-text-button-warning-onlytext: var(--tbk-primitive-color-warning-text);
63
+ --tbk-ds-color-text-button-warning-onlytext-hover: var(--tbk-primitive-color-warning-text);
64
+ --tbk-ds-color-text-button-success-solid: var(--tbk-primitive-color-white);
65
+ --tbk-ds-color-text-button-success-hover-solid: var(--tbk-primitive-color-white);
66
+ --tbk-ds-color-text-button-success-outline: var(--tbk-primitive-color-success-text);
67
+ --tbk-ds-color-text-button-success-outline-hover: var(--tbk-primitive-color-success-text);
68
+ --tbk-ds-color-text-button-success-onlytext: var(--tbk-primitive-color-success-text);
69
+ --tbk-ds-color-text-button-success-onlytext-hover: var(--tbk-primitive-color-success-text);
70
+ --tbk-ds-color-text-button-lightyellow-solid: var(--tbk-primitive-color-warning-text);
71
+ --tbk-ds-color-text-button-lightyellow-hover-solid: var(--tbk-primitive-color-warning-text);
72
+ --tbk-ds-color-text-button-lightblue-solid: var(--tbk-primitive-color-brand-primary);
73
+ --tbk-ds-color-text-button-lightblue-hover-solid: var(--tbk-primitive-color-brand-primary);
74
+ --tbk-ds-color-text-button-header: var(--tbk-primitive-color-white);
75
+ --tbk-ds-color-text-button-header-hover: var(--tbk-primitive-color-white);
76
+ --tbk-ds-color-text-button-avatar: var(--tbk-primitive-color-brand-blue-mid);
77
+ --tbk-ds-color-text-button-disabled-solid: var(--tbk-primitive-color-white);
78
+ --tbk-ds-color-text-button-disabled-hover-solid: var(--tbk-primitive-color-white);
79
+ --tbk-ds-color-text-button-disabled-outline: var(--tbk-primitive-color-gray-600);
80
+ --tbk-ds-color-text-button-disabled-hover-outline: var(--tbk-primitive-color-gray-600);
81
+ --tbk-ds-color-text-button-disabled-onlytext: var(--tbk-primitive-color-gray-600);
82
+ --tbk-ds-color-text-button-disabled-hover-onlytext: var(--tbk-primitive-color-gray-600);
83
+ --tbk-ds-color-text-link: var(--tbk-primitive-color-brand-blue-mid);
84
+ --tbk-ds-color-text-link-hover: var(--tbk-primitive-color-brand-blue-lighter);
85
+ --tbk-ds-color-button-primary-solid: var(--tbk-primitive-color-brand-primary);
86
+ --tbk-ds-color-button-primary-hover-solid: var(--tbk-primitive-color-brand-blue-dark);
87
+ --tbk-ds-color-border-button-primary-outline: var(--tbk-primitive-color-brand-primary);
88
+ --tbk-ds-color-button-primary-hover-outline: color-mix(in srgb, var(--tbk-primitive-color-brand-primary) 10%, transparent);
89
+ --tbk-ds-color-button-gradient-solid: linear-gradient( 90deg, color-mix(in srgb, var(--tbk-primitive-color-gradient-red) 88%, black) 0%, color-mix(in srgb, var(--tbk-primitive-color-gradient-blue-alt) 88%, black) 100% );
90
+ --tbk-ds-color-button-gradient-hover-solid: linear-gradient( 90deg, color-mix(in srgb, var(--tbk-primitive-color-gradient-red) 88%, black) 0%, color-mix(in srgb, var(--tbk-primitive-color-gradient-blue-alt) 88%, black) 100% );
91
+ --tbk-ds-color-border-button-gradient-outline: linear-gradient( 90deg, color-mix(in srgb, var(--tbk-primitive-color-gradient-red) 88%, black) 0%, color-mix(in srgb, var(--tbk-primitive-color-gradient-blue-alt) 88%, black) 100% );
92
+ --tbk-ds-color-button-gradient-hover-outline: var(--tbk-primitive-color-brand-blue-dark);
93
+ --tbk-ds-color-button-critical-solid: var(--tbk-primitive-color-red-900);
94
+ --tbk-ds-color-button-critical-hover-solid: var(--tbk-primitive-color-red-1000);
95
+ --tbk-ds-color-border-button-critical-outline: var(--tbk-primitive-color-red-900);
96
+ --tbk-ds-color-button-critical-hover-outline: color-mix(in srgb, var(--tbk-primitive-color-red-900) 10%, transparent);
97
+ --tbk-ds-color-button-warning-solid: var(--tbk-primitive-color-warning-solid);
98
+ --tbk-ds-color-button-warning-hover-solid: var(--tbk-primitive-color-warning-solid-dark);
99
+ --tbk-ds-color-border-button-warning-outline: var(--tbk-primitive-color-warning-solid);
100
+ --tbk-ds-color-button-warning-hover-outline: color-mix(in srgb, var(--tbk-primitive-color-warning-solid) 10%, transparent);
101
+ --tbk-ds-color-button-success-solid: var(--tbk-primitive-color-success-solid);
102
+ --tbk-ds-color-button-success-hover-solid: var(--tbk-primitive-color-success-solid-dark);
103
+ --tbk-ds-color-border-button-success-outline: var(--tbk-primitive-color-success-solid);
104
+ --tbk-ds-color-button-success-hover-outline: color-mix(in srgb, var(--tbk-primitive-color-success-solid) 10%, transparent);
105
+ --tbk-ds-color-border-button-header: var(--tbk-primitive-color-brand-blue-light);
106
+ --tbk-ds-color-button-header: var(--tbk-primitive-color-brand-primary);
107
+ --tbk-ds-color-button-header-hover: var(--tbk-primitive-color-brand-primary);
108
+ --tbk-ds-color-border-button-header-hover: var(--tbk-primitive-color-brand-blue-dark);
109
+ --tbk-ds-color-button-lightyellow-solid: var(--tbk-primitive-color-warning-100);
110
+ --tbk-ds-color-button-lightyellow-hover-solid: var(--tbk-primitive-color-lightyellow-hover);
111
+ --tbk-ds-color-button-lightblue-solid: var(--tbk-primitive-color-blue-300);
112
+ --tbk-ds-color-button-lightblue-hover-solid: var(--tbk-primitive-color-lightblue-hover);
113
+
114
+ /* ── Exceção aprovada: bg animado do botão IA — deep-palette complementar à borda ─ */
115
+ --tbk-ds-color-button-ia: linear-gradient(135deg, #1666ae 0%, #0F1B5C 22%, #2D1B69 44%, #1666ae 66%, #0F1B5C 82%, #1666ae 100%);
116
+ --tbk-ds-color-button-ia-hover: linear-gradient(135deg, #0D2B5E 0%, #1B2680 22%, #3D2389 44%, #2D0E68 66%, #1B2680 82%, #0D2B5E 100%);
117
+ /* ── Exceção aprovada: cores reforçadas para destaque do botão IA ─────────── */
118
+ --tbk-ds-color-border-button-ia: var(--tbk-primitive-color-brand-blue-lightest);
119
+ --tbk-ds-color-border-button-ia-hover: linear-gradient(135deg, #00E5FF 0%, #4361EE 25%, #7C3AED 52%, #C026D3 76%, #00D4FF 100%);
120
+ --tbk-ds-color-button-disabled-solid: var(--tbk-primitive-color-surface-disabled);
121
+ --tbk-ds-color-button-disabled-hover-solid: var(--tbk-primitive-color-surface-disabled);
122
+ --tbk-ds-color-border-button-disabled-outline: var(--tbk-primitive-color-surface-disabled);
123
+ --tbk-ds-color-button-disabled-hover-outline: transparent;
124
+ --tbk-ds-color-blanked: var(--tbk-primitive-color-blanked);
125
+ --tbk-ds-opacity-disabled: var(--tbk-primitive-opacity-disabled);
126
+ --tbk-ds-color-border-default: var(--tbk-primitive-color-border-subtle);
127
+ --tbk-ds-color-border-enabled: var(--tbk-primitive-color-brand-primary);
128
+ --tbk-ds-color-border-hover: var(--tbk-primitive-color-brand-blue-mid-light);
129
+ --tbk-ds-color-border-disabled: var(--tbk-primitive-color-border-disabled);
130
+ --tbk-ds-color-border-gray: var(--tbk-primitive-color-border-gray);
131
+ --tbk-ds-color-border-gray-hover: var(--tbk-primitive-color-border-gray-dark);
132
+ --tbk-ds-color-border-critical: var(--tbk-primitive-color-red-900);
133
+ --tbk-ds-color-border-critical-hover: var(--tbk-primitive-color-critical-border-hover);
134
+ --tbk-ds-color-border-warning: var(--tbk-primitive-color-warning-solid);
135
+ --tbk-ds-color-border-warning-hover: var(--tbk-primitive-color-warning-solid-darker);
136
+ --tbk-ds-color-border-success: var(--tbk-primitive-color-success-solid);
137
+ --tbk-ds-color-border-success-hover: var(--tbk-primitive-color-success-solid-darker);
138
+ --tbk-ds-color-icon-primary: var(--tbk-primitive-color-neutral-text-primary);
139
+ --tbk-ds-color-icon-secondary: var(--tbk-primitive-color-neutral-text-secondary);
140
+ --tbk-ds-color-icon-gray: var(--tbk-primitive-color-neutral-text-quaternary);
141
+ --tbk-ds-color-icon-white: var(--tbk-primitive-color-white);
142
+ --tbk-ds-color-icon-blue: var(--tbk-primitive-color-brand-blue-mid);
143
+ --tbk-ds-color-icon-disabled: var(--tbk-primitive-color-gray-600);
144
+ --tbk-ds-color-icon-critical: var(--tbk-primitive-color-red-900);
145
+ --tbk-ds-color-icon-warning: var(--tbk-primitive-color-warning-solid);
146
+ --tbk-ds-color-icon-success: var(--tbk-primitive-color-success-solid);
147
+ --tbk-ds-color-icon-ia: linear-gradient(to left,#A37EF5,#41D0E3);
148
+ --tbk-ds-color-icon-gradient: linear-gradient(to left, var(--tbk-primitive-color-gradient-blue), var(--tbk-primitive-color-brand-accent));
149
+ --tbk-ds-color-button-critical: var(--tbk-primitive-color-red-900);
150
+ --tbk-ds-color-button-warning: var(--tbk-primitive-color-warning-solid);
151
+ --tbk-ds-color-button-success: var(--tbk-primitive-color-success-solid);
152
+ --tbk-ds-color-alert-bg-critical-100: var(--tbk-primitive-color-critical-100);
153
+ --tbk-ds-color-alert-bg-critical-200: var(--tbk-primitive-color-critical-200);
154
+ --tbk-ds-color-alert-bg-critical-300: var(--tbk-primitive-color-critical-300);
155
+ --tbk-ds-color-alert-bg-critical-400: var(--tbk-primitive-color-critical-400);
156
+ --tbk-ds-color-alert-bg-critical-500: var(--tbk-primitive-color-critical-500);
157
+ --tbk-ds-color-alert-bg-critical-600: var(--tbk-primitive-color-critical-600);
158
+ --tbk-ds-color-alert-bg-critical-700: var(--tbk-primitive-color-critical-700);
159
+ --tbk-ds-color-alert-bg-critical-800: var(--tbk-primitive-color-critical-800);
160
+ --tbk-ds-color-alert-bg-critical-900: var(--tbk-primitive-color-critical-900);
161
+ --tbk-ds-color-alert-bg-critical-1000: var(--tbk-primitive-color-critical-1000);
162
+ --tbk-ds-color-alert-bg-warning-100: var(--tbk-primitive-color-warning-100);
163
+ --tbk-ds-color-alert-bg-warning-200: var(--tbk-primitive-color-warning-200);
164
+ --tbk-ds-color-alert-bg-warning-300: var(--tbk-primitive-color-warning-300);
165
+ --tbk-ds-color-alert-bg-warning-400: var(--tbk-primitive-color-warning-400);
166
+ --tbk-ds-color-alert-bg-warning-500: var(--tbk-primitive-color-warning-500);
167
+ --tbk-ds-color-alert-bg-warning-600: var(--tbk-primitive-color-warning-600);
168
+ --tbk-ds-color-alert-bg-warning-700: var(--tbk-primitive-color-warning-700);
169
+ --tbk-ds-color-alert-bg-warning-800: var(--tbk-primitive-color-warning-800);
170
+ --tbk-ds-color-alert-bg-warning-900: var(--tbk-primitive-color-warning-900);
171
+ --tbk-ds-color-alert-bg-warning-1000: var(--tbk-primitive-color-warning-1000);
172
+ --tbk-ds-color-alert-bg-success-100: var(--tbk-primitive-color-success-100);
173
+ --tbk-ds-color-alert-bg-success-200: var(--tbk-primitive-color-success-200);
174
+ --tbk-ds-color-alert-bg-success-300: var(--tbk-primitive-color-success-300);
175
+ --tbk-ds-color-alert-bg-success-400: var(--tbk-primitive-color-success-400);
176
+ --tbk-ds-color-alert-bg-success-500: var(--tbk-primitive-color-success-500);
177
+ --tbk-ds-color-alert-bg-success-600: var(--tbk-primitive-color-success-600);
178
+ --tbk-ds-color-alert-bg-success-700: var(--tbk-primitive-color-success-700);
179
+ --tbk-ds-color-alert-bg-success-800: var(--tbk-primitive-color-success-800);
180
+ --tbk-ds-color-alert-bg-success-900: var(--tbk-primitive-color-success-900);
181
+ --tbk-ds-color-alert-bg-success-1000: var(--tbk-primitive-color-success-1000);
182
+ --tbk-ds-font-family-primary: var(--tbk-primitive-font-family-primary);
183
+ --tbk-ds-font-family-monospace: var(--tbk-primitive-font-family-mono);
184
+ --tbk-ds-font-family-secondary: var(--tbk-primitive-font-family-secondary);
185
+ --tbk-ds-color-chart-green-100: var(--tbk-primitive-color-chart-green-100);
186
+ --tbk-ds-color-chart-green-200: var(--tbk-primitive-color-chart-green-200);
187
+ --tbk-ds-color-chart-green-300: var(--tbk-primitive-color-chart-green-300);
188
+ --tbk-ds-color-chart-green-400: var(--tbk-primitive-color-chart-green-400);
189
+ --tbk-ds-color-chart-green-500: var(--tbk-primitive-color-chart-green-500);
190
+ --tbk-ds-color-chart-green-600: var(--tbk-primitive-color-chart-green-600);
191
+ --tbk-ds-color-chart-green-700: var(--tbk-primitive-color-chart-green-700);
192
+ --tbk-ds-color-chart-green-800: var(--tbk-primitive-color-chart-green-800);
193
+ --tbk-ds-color-chart-green-900: var(--tbk-primitive-color-chart-green-900);
194
+ --tbk-ds-color-chart-green-1000: var(--tbk-primitive-color-chart-green-1000);
195
+ --tbk-ds-color-chart-orange-100: var(--tbk-primitive-color-chart-orange-100);
196
+ --tbk-ds-color-chart-orange-200: var(--tbk-primitive-color-chart-orange-200);
197
+ --tbk-ds-color-chart-orange-300: var(--tbk-primitive-color-chart-orange-300);
198
+ --tbk-ds-color-chart-orange-400: var(--tbk-primitive-color-chart-orange-400);
199
+ --tbk-ds-color-chart-orange-500: var(--tbk-primitive-color-chart-orange-500);
200
+ --tbk-ds-color-chart-orange-600: var(--tbk-primitive-color-chart-orange-600);
201
+ --tbk-ds-color-chart-orange-700: var(--tbk-primitive-color-chart-orange-700);
202
+ --tbk-ds-color-chart-orange-800: var(--tbk-primitive-color-chart-orange-800);
203
+ --tbk-ds-color-chart-orange-900: var(--tbk-primitive-color-chart-orange-900);
204
+ --tbk-ds-color-chart-orange-1000: var(--tbk-primitive-color-chart-orange-1000);
205
+ --tbk-ds-color-chart-cyan-100: var(--tbk-primitive-color-chart-cyan-100);
206
+ --tbk-ds-color-chart-cyan-200: var(--tbk-primitive-color-chart-cyan-200);
207
+ --tbk-ds-color-chart-cyan-300: var(--tbk-primitive-color-chart-cyan-300);
208
+ --tbk-ds-color-chart-cyan-400: var(--tbk-primitive-color-chart-cyan-400);
209
+ --tbk-ds-color-chart-cyan-500: var(--tbk-primitive-color-chart-cyan-500);
210
+ --tbk-ds-color-chart-cyan-600: var(--tbk-primitive-color-chart-cyan-600);
211
+ --tbk-ds-color-chart-cyan-700: var(--tbk-primitive-color-chart-cyan-700);
212
+ --tbk-ds-color-chart-cyan-800: var(--tbk-primitive-color-chart-cyan-800);
213
+ --tbk-ds-color-chart-cyan-900: var(--tbk-primitive-color-chart-cyan-900);
214
+ --tbk-ds-color-chart-cyan-1000: var(--tbk-primitive-color-chart-cyan-1000);
215
+ --tbk-ds-color-chart-blue-100: var(--tbk-primitive-color-chart-blue-100);
216
+ --tbk-ds-color-chart-blue-200: var(--tbk-primitive-color-chart-blue-200);
217
+ --tbk-ds-color-chart-blue-300: var(--tbk-primitive-color-chart-blue-300);
218
+ --tbk-ds-color-chart-blue-400: var(--tbk-primitive-color-chart-blue-400);
219
+ --tbk-ds-color-chart-blue-500: var(--tbk-primitive-color-chart-blue-500);
220
+ --tbk-ds-color-chart-blue-600: var(--tbk-primitive-color-chart-blue-600);
221
+ --tbk-ds-color-chart-blue-700: var(--tbk-primitive-color-chart-blue-700);
222
+ --tbk-ds-color-chart-blue-800: var(--tbk-primitive-color-chart-blue-800);
223
+ --tbk-ds-color-chart-blue-900: var(--tbk-primitive-color-chart-blue-900);
224
+ --tbk-ds-color-chart-blue-1000: var(--tbk-primitive-color-chart-blue-1000);
225
+ --tbk-ds-color-chart-purple-100: var(--tbk-primitive-color-chart-purple-100);
226
+ --tbk-ds-color-chart-purple-200: var(--tbk-primitive-color-chart-purple-200);
227
+ --tbk-ds-color-chart-purple-300: var(--tbk-primitive-color-chart-purple-300);
228
+ --tbk-ds-color-chart-purple-400: var(--tbk-primitive-color-chart-purple-400);
229
+ --tbk-ds-color-chart-purple-500: var(--tbk-primitive-color-chart-purple-500);
230
+ --tbk-ds-color-chart-purple-600: var(--tbk-primitive-color-chart-purple-600);
231
+ --tbk-ds-color-chart-purple-700: var(--tbk-primitive-color-chart-purple-700);
232
+ --tbk-ds-color-chart-purple-800: var(--tbk-primitive-color-chart-purple-800);
233
+ --tbk-ds-color-chart-purple-900: var(--tbk-primitive-color-chart-purple-900);
234
+ --tbk-ds-color-chart-purple-1000: var(--tbk-primitive-color-chart-purple-1000);
235
+ --tbk-ds-color-chart-navy-100: var(--tbk-primitive-color-navy-100);
236
+ --tbk-ds-color-chart-navy-200: var(--tbk-primitive-color-navy-200);
237
+ --tbk-ds-color-chart-navy-300: var(--tbk-primitive-color-navy-300);
238
+ --tbk-ds-color-chart-navy-400: var(--tbk-primitive-color-navy-400);
239
+ --tbk-ds-color-chart-navy-500: var(--tbk-primitive-color-navy-500);
240
+ --tbk-ds-color-chart-navy-600: var(--tbk-primitive-color-navy-600);
241
+ --tbk-ds-color-chart-navy-700: var(--tbk-primitive-color-navy-700);
242
+ --tbk-ds-color-chart-navy-800: var(--tbk-primitive-color-navy-800);
243
+ --tbk-ds-color-chart-navy-900: var(--tbk-primitive-color-navy-900);
244
+ --tbk-ds-color-chart-navy-1000: var(--tbk-primitive-color-navy-1000);
245
+ --tbk-ds-color-chart-red-100: var(--tbk-primitive-color-red-100);
246
+ --tbk-ds-color-chart-red-200: var(--tbk-primitive-color-red-200);
247
+ --tbk-ds-color-chart-red-300: var(--tbk-primitive-color-red-300);
248
+ --tbk-ds-color-chart-red-400: var(--tbk-primitive-color-red-400);
249
+ --tbk-ds-color-chart-red-500: var(--tbk-primitive-color-red-500);
250
+ --tbk-ds-color-chart-red-600: var(--tbk-primitive-color-red-600);
251
+ --tbk-ds-color-chart-red-700: var(--tbk-primitive-color-red-700);
252
+ --tbk-ds-color-chart-red-800: var(--tbk-primitive-color-red-800);
253
+ --tbk-ds-color-chart-red-900: var(--tbk-primitive-color-red-900);
254
+ --tbk-ds-color-chart-red-1000: var(--tbk-primitive-color-red-1000);
255
+ --tbk-ds-color-chart-gray-100: var(--tbk-primitive-color-gray-100);
256
+ --tbk-ds-color-chart-gray-200: var(--tbk-primitive-color-gray-200);
257
+ --tbk-ds-color-chart-gray-300: var(--tbk-primitive-color-gray-300);
258
+ --tbk-ds-color-chart-gray-400: var(--tbk-primitive-color-gray-400);
259
+ --tbk-ds-color-chart-gray-500: var(--tbk-primitive-color-gray-500);
260
+ --tbk-ds-color-chart-gray-600: var(--tbk-primitive-color-gray-600);
261
+ --tbk-ds-color-chart-gray-700: var(--tbk-primitive-color-gray-700);
262
+ --tbk-ds-color-chart-gray-800: var(--tbk-primitive-color-gray-800);
263
+ --tbk-ds-color-chart-gray-900: var(--tbk-primitive-color-gray-900);
264
+ --tbk-ds-color-chart-gray-1000: var(--tbk-primitive-color-gray-1000);
265
+ --tbk-ds-color-chart-yellow-100: var(--tbk-primitive-color-chart-yellow-100);
266
+ --tbk-ds-color-chart-yellow-200: var(--tbk-primitive-color-chart-yellow-200);
267
+ --tbk-ds-color-chart-yellow-300: var(--tbk-primitive-color-chart-yellow-300);
268
+ --tbk-ds-color-chart-yellow-400: var(--tbk-primitive-color-chart-yellow-400);
269
+ --tbk-ds-color-chart-yellow-500: var(--tbk-primitive-color-chart-yellow-500);
270
+ --tbk-ds-color-chart-yellow-600: var(--tbk-primitive-color-chart-yellow-600);
271
+ --tbk-ds-color-chart-yellow-700: var(--tbk-primitive-color-chart-yellow-700);
272
+ --tbk-ds-color-chart-yellow-800: var(--tbk-primitive-color-chart-yellow-800);
273
+ --tbk-ds-color-chart-yellow-900: var(--tbk-primitive-color-chart-yellow-900);
274
+ --tbk-ds-color-chart-yellow-1000: var(--tbk-primitive-color-chart-yellow-1000);
275
+ --tbk-ds-color-chart-green-100-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-100) 88%, black);
276
+ --tbk-ds-color-chart-green-200-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-200) 88%, black);
277
+ --tbk-ds-color-chart-green-300-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-300) 88%, black);
278
+ --tbk-ds-color-chart-green-400-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-400) 88%, black);
279
+ --tbk-ds-color-chart-green-500-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-500) 88%, black);
280
+ --tbk-ds-color-chart-green-600-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-600) 88%, black);
281
+ --tbk-ds-color-chart-green-700-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-700) 88%, black);
282
+ --tbk-ds-color-chart-green-800-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-800) 88%, black);
283
+ --tbk-ds-color-chart-green-900-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-900) 88%, black);
284
+ --tbk-ds-color-chart-green-1000-hover: color-mix(in srgb, var(--tbk-ds-color-chart-green-1000) 88%, black);
285
+ --tbk-ds-color-chart-orange-100-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-100) 88%, black);
286
+ --tbk-ds-color-chart-orange-200-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-200) 88%, black);
287
+ --tbk-ds-color-chart-orange-300-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-300) 88%, black);
288
+ --tbk-ds-color-chart-orange-400-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-400) 88%, black);
289
+ --tbk-ds-color-chart-orange-500-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-500) 88%, black);
290
+ --tbk-ds-color-chart-orange-600-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-600) 88%, black);
291
+ --tbk-ds-color-chart-orange-700-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-700) 88%, black);
292
+ --tbk-ds-color-chart-orange-800-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-800) 88%, black);
293
+ --tbk-ds-color-chart-orange-900-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-900) 88%, black);
294
+ --tbk-ds-color-chart-orange-1000-hover: color-mix(in srgb, var(--tbk-ds-color-chart-orange-1000) 88%, black);
295
+ --tbk-ds-color-chart-cyan-100-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-100) 88%, black);
296
+ --tbk-ds-color-chart-cyan-200-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-200) 88%, black);
297
+ --tbk-ds-color-chart-cyan-300-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-300) 88%, black);
298
+ --tbk-ds-color-chart-cyan-400-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-400) 88%, black);
299
+ --tbk-ds-color-chart-cyan-500-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-500) 88%, black);
300
+ --tbk-ds-color-chart-cyan-600-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-600) 88%, black);
301
+ --tbk-ds-color-chart-cyan-700-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-700) 88%, black);
302
+ --tbk-ds-color-chart-cyan-800-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-800) 88%, black);
303
+ --tbk-ds-color-chart-cyan-900-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-900) 88%, black);
304
+ --tbk-ds-color-chart-cyan-1000-hover: color-mix(in srgb, var(--tbk-ds-color-chart-cyan-1000) 88%, black);
305
+ --tbk-ds-color-chart-blue-100-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-100) 88%, black);
306
+ --tbk-ds-color-chart-blue-200-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-200) 88%, black);
307
+ --tbk-ds-color-chart-blue-300-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-300) 88%, black);
308
+ --tbk-ds-color-chart-blue-400-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-400) 88%, black);
309
+ --tbk-ds-color-chart-blue-500-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-500) 88%, black);
310
+ --tbk-ds-color-chart-blue-600-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-600) 88%, black);
311
+ --tbk-ds-color-chart-blue-700-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-700) 88%, black);
312
+ --tbk-ds-color-chart-blue-800-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-800) 88%, black);
313
+ --tbk-ds-color-chart-blue-900-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-900) 88%, black);
314
+ --tbk-ds-color-chart-blue-1000-hover: color-mix(in srgb, var(--tbk-ds-color-chart-blue-1000) 88%, black);
315
+ --tbk-ds-color-chart-purple-100-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-100) 88%, black);
316
+ --tbk-ds-color-chart-purple-200-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-200) 88%, black);
317
+ --tbk-ds-color-chart-purple-300-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-300) 88%, black);
318
+ --tbk-ds-color-chart-purple-400-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-400) 88%, black);
319
+ --tbk-ds-color-chart-purple-500-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-500) 88%, black);
320
+ --tbk-ds-color-chart-purple-600-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-600) 88%, black);
321
+ --tbk-ds-color-chart-purple-700-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-700) 88%, black);
322
+ --tbk-ds-color-chart-purple-800-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-800) 88%, black);
323
+ --tbk-ds-color-chart-purple-900-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-900) 88%, black);
324
+ --tbk-ds-color-chart-purple-1000-hover: color-mix(in srgb, var(--tbk-ds-color-chart-purple-1000) 88%, black);
325
+ --tbk-ds-color-chart-navy-100-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-100) 88%, black);
326
+ --tbk-ds-color-chart-navy-200-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-200) 88%, black);
327
+ --tbk-ds-color-chart-navy-300-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-300) 88%, black);
328
+ --tbk-ds-color-chart-navy-400-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-400) 88%, black);
329
+ --tbk-ds-color-chart-navy-500-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-500) 88%, black);
330
+ --tbk-ds-color-chart-navy-600-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-600) 88%, black);
331
+ --tbk-ds-color-chart-navy-700-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-700) 88%, black);
332
+ --tbk-ds-color-chart-navy-800-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-800) 88%, black);
333
+ --tbk-ds-color-chart-navy-900-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-900) 88%, black);
334
+ --tbk-ds-color-chart-navy-1000-hover: color-mix(in srgb, var(--tbk-ds-color-chart-navy-1000) 88%, black);
335
+ --tbk-ds-color-chart-red-100-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-100) 88%, black);
336
+ --tbk-ds-color-chart-red-200-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-200) 88%, black);
337
+ --tbk-ds-color-chart-red-300-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-300) 88%, black);
338
+ --tbk-ds-color-chart-red-400-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-400) 88%, black);
339
+ --tbk-ds-color-chart-red-500-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-500) 88%, black);
340
+ --tbk-ds-color-chart-red-600-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-600) 88%, black);
341
+ --tbk-ds-color-chart-red-700-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-700) 88%, black);
342
+ --tbk-ds-color-chart-red-800-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-800) 88%, black);
343
+ --tbk-ds-color-chart-red-900-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-900) 88%, black);
344
+ --tbk-ds-color-chart-red-1000-hover: color-mix(in srgb, var(--tbk-ds-color-chart-red-1000) 88%, black);
345
+ --tbk-ds-color-chart-gray-100-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-100) 88%, black);
346
+ --tbk-ds-color-chart-gray-200-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-200) 88%, black);
347
+ --tbk-ds-color-chart-gray-300-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-300) 88%, black);
348
+ --tbk-ds-color-chart-gray-400-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-400) 88%, black);
349
+ --tbk-ds-color-chart-gray-500-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-500) 88%, black);
350
+ --tbk-ds-color-chart-gray-600-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-600) 88%, black);
351
+ --tbk-ds-color-chart-gray-700-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-700) 88%, black);
352
+ --tbk-ds-color-chart-gray-800-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-800) 88%, black);
353
+ --tbk-ds-color-chart-gray-900-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-900) 88%, black);
354
+ --tbk-ds-color-chart-gray-1000-hover: color-mix(in srgb, var(--tbk-ds-color-chart-gray-1000) 88%, black);
355
+ --tbk-ds-color-chart-yellow-100-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-100) 88%, black);
356
+ --tbk-ds-color-chart-yellow-200-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-200) 88%, black);
357
+ --tbk-ds-color-chart-yellow-300-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-300) 88%, black);
358
+ --tbk-ds-color-chart-yellow-400-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-400) 88%, black);
359
+ --tbk-ds-color-chart-yellow-500-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-500) 88%, black);
360
+ --tbk-ds-color-chart-yellow-600-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-600) 88%, black);
361
+ --tbk-ds-color-chart-yellow-700-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-700) 88%, black);
362
+ --tbk-ds-color-chart-yellow-800-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-800) 88%, black);
363
+ --tbk-ds-color-chart-yellow-900-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-900) 88%, black);
364
+ --tbk-ds-color-chart-yellow-1000-hover: color-mix(in srgb, var(--tbk-ds-color-chart-yellow-1000) 88%, black);
365
+ --tbk-ds-breakpoint-width-xl: 1440px;
366
+ --tbk-ds-breakpoint-width-lg: 1366px;
367
+ --tbk-ds-breakpoint-width-md: 1024px;
368
+ --tbk-ds-breakpoint-width-sm: 768px;
369
+ --tbk-ds-breakpoint-width-xs: 480px;
370
+ --tbk-ds-breakpoint-width-xxs: 320px;
371
+ --tbk-ds-size-width-inherit: 0;
372
+ --tbk-ds-size-width-10: 10%;
373
+ --tbk-ds-size-width-15: 15%;
374
+ --tbk-ds-size-width-20: 20%;
375
+ --tbk-ds-size-width-25: 25%;
376
+ --tbk-ds-size-width-30: 30%;
377
+ --tbk-ds-size-width-35: 35%;
378
+ --tbk-ds-size-width-40: 40%;
379
+ --tbk-ds-size-width-50: 50%;
380
+ --tbk-ds-size-width-60: 60%;
381
+ --tbk-ds-size-width-70: 70%;
382
+ --tbk-ds-size-width-80: 80%;
383
+ --tbk-ds-size-width-90: 90%;
384
+ --tbk-ds-size-width-100: 100%;
385
+ --tbk-ds-font-size-250: var(--tbk-primitive-font-size-250);
386
+ --tbk-ds-font-size-350: var(--tbk-primitive-font-size-350);
387
+ --tbk-ds-font-size-300: var(--tbk-primitive-font-size-300);
388
+ --tbk-ds-font-size-325: var(--tbk-primitive-font-size-325);
389
+ --tbk-ds-font-size-400: var(--tbk-primitive-font-size-400);
390
+ --tbk-ds-font-size-800: var(--tbk-primitive-font-size-800);
391
+ --tbk-ds-font-size-900: var(--tbk-primitive-font-size-900);
392
+ --tbk-ds-font-size-750: var(--tbk-primitive-font-size-750);
393
+ --tbk-ds-font-size-600: var(--tbk-primitive-font-size-600);
394
+ --tbk-ds-font-size-550: var(--tbk-primitive-font-size-550);
395
+ --tbk-ds-font-size-500: var(--tbk-primitive-font-size-500);
396
+ --tbk-ds-font-size-450: var(--tbk-primitive-font-size-450);
397
+ --tbk-ds-font-size-1000: var(--tbk-primitive-font-size-1000);
398
+ --tbk-ds-border-radius-xs-4: var(--tbk-primitive-radius-xs);
399
+ --tbk-ds-border-radius-sm-5: var(--tbk-primitive-radius-sm);
400
+ --tbk-ds-border-radius-rounded-999: var(--tbk-primitive-radius-full);
401
+ --tbk-ds-border-radius-md-10: var(--tbk-primitive-radius-md);
402
+ --tbk-ds-border-radius-lg-15: var(--tbk-primitive-radius-lg);
403
+ --tbk-ds-size-height-inherit: 0%;
404
+ --tbk-ds-size-height-10: 10%;
405
+ --tbk-ds-size-height-15: 15%;
406
+ --tbk-ds-size-height-20: 20%;
407
+ --tbk-ds-size-height-25: 25%;
408
+ --tbk-ds-size-height-30: 30%;
409
+ --tbk-ds-size-height-35: 35%;
410
+ --tbk-ds-size-height-40: 40%;
411
+ --tbk-ds-size-height-50: 50%;
412
+ --tbk-ds-size-height-60: 60%;
413
+ --tbk-ds-size-height-70: 70%;
414
+ --tbk-ds-size-height-80: 80%;
415
+ --tbk-ds-size-height-90: 90%;
416
+ --tbk-ds-size-height-100: 100%;
417
+ --tbk-ds-size-control-sm: 28px;
418
+ --tbk-ds-size-control-md: 40px;
419
+ --tbk-ds-size-card-max-height: 272px;
420
+ --tbk-ds-size-advanced-fill-search-min-height: 86px;
421
+ --tbk-ds-size-advanced-fill-search-search-min-width: 260px;
422
+ --tbk-ds-size-advanced-fill-search-filter-min-width: 180px;
423
+ --tbk-ds-size-view-switcher-button: 38px;
424
+ --tbk-ds-size-view-switcher-icon: 20px;
425
+ --tbk-ds-motion-duration-fast: var(--tbk-primitive-motion-duration-fast);
426
+ --tbk-ds-motion-duration-base: var(--tbk-primitive-motion-duration-base);
427
+ --tbk-ds-motion-duration-skeleton: var(--tbk-primitive-motion-duration-skeleton);
428
+ --tbk-ds-motion-easing-standard: var(--tbk-primitive-motion-easing-standard);
429
+ --tbk-ds-motion-easing-skeleton: var(--tbk-primitive-motion-easing-skeleton);
430
+ --tbk-ds-motion-easing-emphasized: var(--tbk-primitive-motion-easing-emphasized);
431
+ --tbk-ds-z-index-base: var(--tbk-primitive-z-index-base);
432
+ --tbk-ds-z-index-nav: var(--tbk-primitive-z-index-nav);
433
+ --tbk-ds-z-index-overlay: var(--tbk-primitive-z-index-overlay);
434
+ --tbk-ds-z-index-popover: var(--tbk-primitive-z-index-popover);
435
+ --tbk-ds-z-index-header: var(--tbk-primitive-z-index-header);
436
+ --tbk-ds-z-index-modal: var(--tbk-primitive-z-index-modal);
437
+ --tbk-ds-z-index-toast: var(--tbk-primitive-z-index-toast);
438
+ --tbk-ds-size-app-header: 70px;
439
+ --tbk-ds-size-app-titlebar: 63px;
440
+ --tbk-ds-size-app-nav-collapsed: 70px;
441
+ --tbk-ds-size-app-nav-expanded: 280px;
442
+ --tbk-ds-size-app-content-padding-inline: 40px;
443
+ --tbk-ds-size-brand-logo-width: 180px;
444
+ --tbk-ds-size-brand-divider-height: 18px;
445
+ --tbk-ds-opacity-divider: var(--tbk-primitive-opacity-divider);
446
+ --tbk-ds-font-weight-medium: var(--tbk-primitive-font-weight-medium);
447
+ --tbk-ds-font-weight-bold: var(--tbk-primitive-font-weight-bold);
448
+ --tbk-ds-font-weight-regular: var(--tbk-primitive-font-weight-regular);
449
+ --tbk-ds-border-width-0: var(--tbk-primitive-border-width-0);
450
+ --tbk-ds-border-width-xs: var(--tbk-primitive-border-width-xs);
451
+ --tbk-ds-border-width-sm: var(--tbk-primitive-border-width-sm);
452
+ --tbk-ds-border-width-md: var(--tbk-primitive-border-width-md);
453
+ --tbk-ds-border-width-lg: var(--tbk-primitive-border-width-lg);
454
+ --tbk-ds-border-width-xl: var(--tbk-primitive-border-width-xl);
455
+ --tbk-ds-gap-0: var(--tbk-primitive-space-0);
456
+ --tbk-ds-gap-4: var(--tbk-primitive-space-4);
457
+ --tbk-ds-gap-Xs: var(--tbk-primitive-space-10);
458
+ --tbk-ds-gap-sm: var(--tbk-primitive-space-20);
459
+ --tbk-ds-gap-md: var(--tbk-primitive-space-30);
460
+ --tbk-ds-gap-lg: var(--tbk-primitive-space-40);
461
+ --tbk-ds-gap-xl: var(--tbk-primitive-space-50);
462
+ --tbk-ds-gap-2: var(--tbk-primitive-space-2);
463
+ --tbk-ds-gap-4: var(--tbk-primitive-space-4);
464
+ --tbk-ds-gap-6: var(--tbk-primitive-space-6);
465
+ --tbk-ds-gap-8: var(--tbk-primitive-space-8);
466
+ --tbk-ds-padding-8: var(--tbk-primitive-space-8);
467
+ --tbk-ds-padding-Xs: var(--tbk-primitive-space-10);
468
+ --tbk-ds-padding-sm: var(--tbk-primitive-space-20);
469
+ --tbk-ds-padding-md: var(--tbk-primitive-space-30);
470
+ --tbk-ds-padding-lg: var(--tbk-primitive-space-40);
471
+ --tbk-ds-padding-xl: var(--tbk-primitive-space-50);
472
+ --tbk-ds-padding-2: var(--tbk-primitive-space-2);
473
+ --tbk-ds-padding-4: var(--tbk-primitive-space-4);
474
+ --tbk-ds-padding-6: var(--tbk-primitive-space-6);
475
+ --tbk-ds-padding-8: var(--tbk-primitive-space-8);
476
+ --tbk-ds-shadow-xs: var(--tbk-primitive-shadow-xs);
477
+ --tbk-ds-shadow-sm: var(--tbk-primitive-shadow-sm);
478
+ --tbk-ds-shadow-md: var(--tbk-primitive-shadow-md);
479
+ --tbk-ds-shadow-lg: var(--tbk-primitive-shadow-lg);
480
+ }