react-restyle-components 0.3.84 → 0.3.86

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 (24) hide show
  1. package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionSection.d.ts +4 -0
  2. package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionSection.d.ts.map +1 -1
  3. package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionSection.js +3 -3
  4. package/lib/src/core-components/src/components/Accordion/AccordionSection/Header.js +2 -2
  5. package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.d.ts +4 -1
  6. package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.d.ts.map +1 -1
  7. package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.js +31 -20
  8. package/lib/src/core-components/src/core-components/StateLayer.d.ts.map +1 -1
  9. package/lib/src/core-components/src/core-components/StateLayer.js +3 -2
  10. package/lib/src/core-components/src/index.css +0 -1
  11. package/lib/src/core-components/src/index.d.ts +0 -1
  12. package/lib/src/core-components/src/index.d.ts.map +1 -1
  13. package/lib/src/core-components/src/index.js +0 -1
  14. package/lib/src/core-components/src/tc.global.css +23 -2
  15. package/lib/src/core-components/src/tc.module.css +1 -2
  16. package/lib/src/core-components/src/utils/designTokens.d.ts +36 -0
  17. package/lib/src/core-components/src/utils/designTokens.d.ts.map +1 -0
  18. package/lib/src/core-components/src/utils/designTokens.js +42 -0
  19. package/lib/src/core-components/src/utils/index.d.ts +1 -0
  20. package/lib/src/core-components/src/utils/index.d.ts.map +1 -1
  21. package/lib/src/core-components/src/utils/index.js +1 -0
  22. package/lib/src/core-components/tailwind.config.js +331 -0
  23. package/package.json +1 -1
  24. package/lib/src/core-components/src/assets/css/tokens.css +0 -416
@@ -1,416 +0,0 @@
1
- :root {
2
- --border-radius-100: 0.5rem;
3
- --border-radius-200: 1rem;
4
- --border-radius-300: 1.5rem;
5
- --border-radius-400: 2rem;
6
- --border-radius-none: 0rem;
7
- --border-radius-round: 10000rem;
8
- --border-radius-025: 0.125rem;
9
- --border-radius-050: 0.25rem;
10
- --breakpoints-xs: 20rem;
11
- --breakpoints-sm: 23.4375rem;
12
- --breakpoints-md: 48rem;
13
- --breakpoints-lg: 64rem;
14
- --breakpoints-xl: 80rem;
15
- --breakpoints-xxl: 90rem;
16
- --opacity-10: 10%;
17
- --opacity-12: 12%;
18
- --opacity-20: 20%;
19
- --opacity-30: 30%;
20
- --opacity-40: 40%;
21
- --opacity-50: 50%;
22
- --opacity-60: 60%;
23
- --opacity-70: 70%;
24
- --opacity-75: 75%;
25
- --opacity-80: 80%;
26
- --opacity-90: 90%;
27
- --opacity-100: 100%;
28
- --opacity-none: 0%;
29
- --opacity-04: 4%;
30
- --opacity-08: 8%;
31
- --spacing-100: 0.5rem;
32
- --spacing-150: 0.75rem;
33
- --spacing-200: 1rem;
34
- --spacing-300: 1.5rem;
35
- --spacing-400: 2rem;
36
- --spacing-500: 2.5rem;
37
- --spacing-600: 3rem;
38
- --spacing-800: 4rem;
39
- --spacing-1000: 5rem;
40
- --spacing-1200: 6rem;
41
- --spacing-000: 0rem;
42
- --spacing-025: 0.125rem;
43
- --spacing-050: 0.25rem;
44
- --spacing-075: 0.375rem;
45
- --state-layer-none: 0%;
46
- --state-layer-hover: 8%;
47
- --state-layer-press: 12%;
48
- --state-layer-disabled: 12%;
49
- --state-layer-on-disabled: 30%;
50
- --state-layer-read-only: 8%;
51
- --state-layer-on-read-only: 70%;
52
- --state-layer-press-card: 4%;
53
- --stroke-card: 0.0625rem;
54
- --stroke-selected-card-hover: 0.125rem;
55
- --stroke-divider: 0.0625rem;
56
- }
57
-
58
- .theme-dark {
59
- --brand-white: #ffffff;
60
- --brand-black: #0c0e11;
61
- --brand-theme-purple: #8223d2;
62
- --brand-theme-yellow: #d2fa46;
63
- --brand-theme-blue: #4a68f9;
64
- --brand-theme-green: #6efac3;
65
- --sub-surface: #040308;
66
- --surface: #130f17;
67
- --surface-variant: #1e1a22;
68
- --on-surface: #f8eef9;
69
- --on-surface-soft: #cdc4ce;
70
- --outline: #7c757e;
71
- --outline-soft: #4a454e;
72
- --scrim-overlay: #0c0e1180;
73
- --elevated-level-01: #221e26;
74
- --elevated-level-02: #29242c;
75
- --elevated-level-03: #2d2830;
76
- --elevated-dynamic-card: #edddf60a;
77
- --primary: #ddb7ff;
78
- --on-primary: #1c0334;
79
- --primary-soft: #410071;
80
- --on-primary-soft: #ddb7ff;
81
- --secondary: #4e4356;
82
- --on-secondary: #edddf6;
83
- --neutral: #f8eef9;
84
- --on-neutral: #130f17;
85
- --neutral-soft: #4a454e;
86
- --on-neutral-soft: #e9dfeb;
87
- --inverse-surface: #e9dfeb;
88
- --inverse-on-surface: #130f17;
89
- --inverse-primary: #8223d2;
90
- --status-success-soft: #0b4521;
91
- --status-on-success-soft: #c5ffc8;
92
- --status-success: #47e26f;
93
- --status-on-success: #0a2415;
94
- --status-error-soft: #7d000f;
95
- --status-on-error-soft: #ffeae9;
96
- --status-error: #ffb3ad;
97
- --status-on-error: #470306;
98
- --status-warning-soft: #e7c500;
99
- --status-on-warning-soft: #3a3000;
100
- --status-warning: #ffe264;
101
- --status-on-warning: #221b00;
102
- --accent-red: #ffb2b9;
103
- --accent-on-red: #40000f;
104
- --accent-red-soft: #7c0026;
105
- --accent-on-red-soft: #ffeced;
106
- --accent-orange: #ffb690;
107
- --accent-on-orange: #341100;
108
- --accent-orange-soft: #632700;
109
- --accent-on-orange-soft: #ffede6;
110
- --accent-tennis: #dcff66;
111
- --accent-on-tennis: #171e00;
112
- --accent-tennis-soft: #334000;
113
- --accent-on-tennis-soft: #dcff66;
114
- --accent-green: #65f2bc;
115
- --accent-on-green: #002115;
116
- --accent-green-soft: #004530;
117
- --accent-on-green-soft: #bdffdf;
118
- --accent-teal: #2fd9f4;
119
- --accent-on-teal: #001f25;
120
- --accent-teal-soft: #00424c;
121
- --accent-on-teal-soft: #d4f7ff;
122
- --accent-blue: #bac3ff;
123
- --accent-on-blue: #001159;
124
- --accent-blue-soft: #061e77;
125
- --accent-on-blue-soft: #f0efff;
126
- --accent-purple: #ddb7ff;
127
- --accent-on-purple: #1c0334;
128
- --accent-purple-soft: #410071;
129
- --accent-on-purple-soft: #ddb7ff;
130
- --fills-surface-contrast: #f8eef90a;
131
- --fills-surface-contrast-inverse: #130f1714;
132
- --fills-drop-shadow: #160d1e26;
133
- --fills-actions-pressed-shadow: #ffffff14;
134
- --fills-cards-pressed-shadow: #0c0e110a;
135
- --fills-sticker-opacity: 100%;
136
- --gradient-dark-stop-1: #ca93ff;
137
- --gradient-dark-stop-2: #f2aeff;
138
- --gradient-light-stop-1: #370f5b;
139
- --gradient-light-stop-2: #001a42;
140
- }
141
-
142
- :root,
143
- .theme-light {
144
- --brand-white: #ffffff;
145
- --brand-black: #0c0e11;
146
- --brand-theme-purple: #8223d2;
147
- --brand-theme-yellow: #d2fa46;
148
- --brand-theme-blue: #4a68f9;
149
- --brand-theme-green: #6efac3;
150
- --sub-surface: #f1f0f4;
151
- --surface: #ffffff;
152
- --surface-variant: #faf9fc;
153
- --on-surface: #1a1c1e;
154
- --on-surface-soft: #5d5e61;
155
- --outline: #c6c6ca;
156
- --outline-soft: #eeedf1;
157
- --scrim-overlay: #0c0e1180;
158
- --elevated-level-01: #ffffff;
159
- --elevated-level-02: #ffffff;
160
- --elevated-level-03: #ffffff;
161
- --elevated-dynamic-card: #ffffff;
162
- --primary: #8223d2;
163
- --on-primary: #ffffff;
164
- --primary-soft: #faecff;
165
- --on-primary-soft: #590099;
166
- --secondary: #edddf6;
167
- --on-secondary: #211829;
168
- --neutral: #1a1c1e;
169
- --on-neutral: #ffffff;
170
- --neutral-soft: #f1f0f4;
171
- --on-neutral-soft: #2f3033;
172
- --inverse-surface: #252629;
173
- --inverse-on-surface: #ffffff;
174
- --inverse-primary: #ca93ff;
175
- --status-success-soft: #c5ffc8;
176
- --status-on-success-soft: #062011;
177
- --status-success: #136d31;
178
- --status-on-success: #c5ffc8;
179
- --status-error-soft: #ffdad7;
180
- --status-on-error-soft: #410004;
181
- --status-error: #b91a24;
182
- --status-on-error: #ffeae9;
183
- --status-warning-soft: #fff0c0;
184
- --status-on-warning-soft: #3a3000;
185
- --status-warning: #e7c500;
186
- --status-on-warning: #524609;
187
- --accent-red: #b91641;
188
- --accent-on-red: #fff8f7;
189
- --accent-red-soft: #ffe1e2;
190
- --accent-on-red-soft: #67001e;
191
- --accent-orange: #ec6a06;
192
- --accent-on-orange: #fff8f6;
193
- --accent-orange-soft: #ffe2d5;
194
- --accent-on-orange-soft: #552100;
195
- --accent-tennis: #d2fa46;
196
- --accent-on-tennis: #171e00;
197
- --accent-tennis-soft: #e5ff8d;
198
- --accent-on-tennis-soft: #293500;
199
- --accent-green: #6efac3;
200
- --accent-on-green: #002115;
201
- --accent-green-soft: #ccffe5;
202
- --accent-on-green-soft: #003826;
203
- --accent-teal: #2fd9f4;
204
- --accent-on-teal: #001f25;
205
- --accent-teal-soft: #ddf9ff;
206
- --accent-on-teal-soft: #00363e;
207
- --accent-blue: #4a68f9;
208
- --accent-on-blue: #fbf8ff;
209
- --accent-blue-soft: #f4f2ff;
210
- --accent-on-blue-soft: #00208d;
211
- --accent-purple: #8223d2;
212
- --accent-on-purple: #ffffff;
213
- --accent-purple-soft: #faecff;
214
- --accent-on-purple-soft: #590099;
215
- --fills-surface-contrast: #0c0e110a;
216
- --fills-surface-contrast-inverse: #ffffff14;
217
- --fills-drop-shadow: #0c0e110a;
218
- --fills-actions-pressed-shadow: #0c0e1114;
219
- --fills-cards-pressed-shadow: #0c0e110a;
220
- --fills-sticker-opacity: 0%;
221
- --gradient-dark-stop-1: #6900b3;
222
- --gradient-dark-stop-2: #991bbd;
223
- --gradient-light-stop-1: #faecff;
224
- --gradient-light-stop-2: #effcff;
225
- }
226
-
227
- .partner-dark {
228
- --brand-white: #ffffff;
229
- --brand-black: #0c0e11;
230
- --brand-theme-purple: #8223d2;
231
- --brand-theme-yellow: #d2fa46;
232
- --brand-theme-blue: #4a68f9;
233
- --brand-theme-green: #6efac3;
234
- --sub-surface: #030405;
235
- --surface: #0f1114;
236
- --surface-variant: #1a1c1e;
237
- --on-surface: #f1f0f4;
238
- --on-surface-soft: #c6c6ca;
239
- --outline: #76777a;
240
- --outline-soft: #46474a;
241
- --scrim-overlay: #0c0e1180;
242
- --elevated-level-01: #1e2022;
243
- --elevated-level-02: #252629;
244
- --elevated-level-03: #292a2d;
245
- --elevated-dynamic-card: #e3e2e60a;
246
- --primary: #ffffff;
247
- --on-primary: #0f1114;
248
- --primary-soft: #292a2d;
249
- --on-primary-soft: #ffffff;
250
- --secondary: #46474a;
251
- --on-secondary: #e3e2e6;
252
- --neutral: #f1f0f4;
253
- --on-neutral: #0f1114;
254
- --neutral-soft: #46474a;
255
- --on-neutral-soft: #e3e2e6;
256
- --inverse-surface: #e3e2e6;
257
- --inverse-on-surface: #0f1114;
258
- --inverse-primary: #46474a;
259
- --status-success-soft: #0b4521;
260
- --status-on-success-soft: #c5ffc8;
261
- --status-success: #47e26f;
262
- --status-on-success: #0a2415;
263
- --status-error-soft: #7d000f;
264
- --status-on-error-soft: #ffeae9;
265
- --status-error: #ffb3ad;
266
- --status-on-error: #470306;
267
- --status-warning-soft: #e7c500;
268
- --status-on-warning-soft: #3a3000;
269
- --status-warning: #ffe264;
270
- --status-on-warning: #221b00;
271
- --accent-red: #ffb2b9;
272
- --accent-on-red: #40000f;
273
- --accent-red-soft: #7c0026;
274
- --accent-on-red-soft: #ffeced;
275
- --accent-orange: #ffb690;
276
- --accent-on-orange: #341100;
277
- --accent-orange-soft: #632700;
278
- --accent-on-orange-soft: #ffede6;
279
- --accent-tennis: #d2fa46;
280
- --accent-on-tennis: #171e00;
281
- --accent-tennis-soft: #334000;
282
- --accent-on-tennis-soft: #dcff66;
283
- --accent-green: #65f2bc;
284
- --accent-on-green: #002115;
285
- --accent-green-soft: #004530;
286
- --accent-on-green-soft: #bdffdf;
287
- --accent-teal: #2fd9f4;
288
- --accent-on-teal: #001f25;
289
- --accent-teal-soft: #00424c;
290
- --accent-on-teal-soft: #d4f7ff;
291
- --accent-blue: #bac3ff;
292
- --accent-on-blue: #001159;
293
- --accent-blue-soft: #061e77;
294
- --accent-on-blue-soft: #f0efff;
295
- --accent-purple: #ddb7ff;
296
- --accent-on-purple: #1c0334;
297
- --accent-purple-soft: #410071;
298
- --accent-on-purple-soft: #ddb7ff;
299
- --fills-surface-contrast: #ffffff0a;
300
- --fills-surface-contrast-inverse: #0c0e1114;
301
- --fills-drop-shadow: #0c0e1126;
302
- --fills-actions-pressed-shadow: #ffffff14;
303
- --fills-cards-pressed-shadow: #0c0e110a;
304
- --fills-sticker-opacity: 100%;
305
- --gradient-dark-stop-1: #ca93ff;
306
- --gradient-dark-stop-2: #f2aeff;
307
- --gradient-light-stop-1: #370f5b;
308
- --gradient-light-stop-2: #001a42;
309
- }
310
-
311
- .partner-light {
312
- --brand-white: #ffffff;
313
- --brand-black: #0c0e11;
314
- --brand-theme-purple: #8223d2;
315
- --brand-theme-yellow: #d2fa46;
316
- --brand-theme-blue: #4a68f9;
317
- --brand-theme-green: #6efac3;
318
- --sub-surface: #f1f0f4;
319
- --surface: #ffffff;
320
- --surface-variant: #faf9fc;
321
- --on-surface: #1a1c1e;
322
- --on-surface-soft: #5d5e61;
323
- --outline: #c6c6ca;
324
- --outline-soft: #eeedf1;
325
- --scrim-overlay: #0c0e1180;
326
- --elevated-level-01: #ffffff;
327
- --elevated-level-02: #ffffff;
328
- --elevated-level-03: #ffffff;
329
- --elevated-dynamic-card: #ffffff;
330
- --primary: #0c0e11;
331
- --on-primary: #ffffff;
332
- --primary-soft: #f1f0f4;
333
- --on-primary-soft: #3a3b3e;
334
- --secondary: #e3e2e6;
335
- --on-secondary: #1a1c1e;
336
- --neutral: #1a1c1e;
337
- --on-neutral: #ffffff;
338
- --neutral-soft: #f1f0f4;
339
- --on-neutral-soft: #2f3033;
340
- --inverse-surface: #252629;
341
- --inverse-on-surface: #ffffff;
342
- --inverse-primary: #e3e2e6;
343
- --status-success-soft: #c5ffc8;
344
- --status-on-success-soft: #062011;
345
- --status-success: #136d31;
346
- --status-on-success: #c5ffc8;
347
- --status-error-soft: #ffdad7;
348
- --status-on-error-soft: #410004;
349
- --status-error: #b91a24;
350
- --status-on-error: #ffeae9;
351
- --status-warning-soft: #fff0c0;
352
- --status-on-warning-soft: #3a3000;
353
- --status-warning: #e7c500;
354
- --status-on-warning: #524609;
355
- --accent-red: #b91641;
356
- --accent-on-red: #fff8f7;
357
- --accent-red-soft: #fff0f1;
358
- --accent-on-red-soft: #67001e;
359
- --accent-orange: #ec6a06;
360
- --accent-on-orange: #fff8f6;
361
- --accent-orange-soft: #fff1eb;
362
- --accent-on-orange-soft: #552100;
363
- --accent-tennis: #d2fa46;
364
- --accent-on-tennis: #171e00;
365
- --accent-tennis-soft: #e5ff8d;
366
- --accent-on-tennis-soft: #293500;
367
- --accent-green: #6efac3;
368
- --accent-on-green: #002115;
369
- --accent-green-soft: #ccffe5;
370
- --accent-on-green-soft: #003826;
371
- --accent-teal: #2fd9f4;
372
- --accent-on-teal: #001f25;
373
- --accent-teal-soft: #ddf9ff;
374
- --accent-on-teal-soft: #00363e;
375
- --accent-blue: #4a68f9;
376
- --accent-on-blue: #fbf8ff;
377
- --accent-blue-soft: #f4f2ff;
378
- --accent-on-blue-soft: #00208d;
379
- --accent-purple: #8223d2;
380
- --accent-on-purple: #ffffff;
381
- --accent-purple-soft: #faecff;
382
- --accent-on-purple-soft: #590099;
383
- --fills-surface-contrast: #0c0e110a;
384
- --fills-surface-contrast-inverse: #ffffff14;
385
- --fills-drop-shadow: #0c0e110a;
386
- --fills-actions-pressed-shadow: #0c0e1114;
387
- --fills-cards-pressed-shadow: #0c0e110a;
388
- --fills-sticker-opacity: 0%;
389
- --gradient-dark-stop-1: #6900b3;
390
- --gradient-dark-stop-2: #991bbd;
391
- --gradient-light-stop-1: #faecff;
392
- --gradient-light-stop-2: #f0efff;
393
- }
394
-
395
- /* Component-specific tokens */
396
- :root,
397
- .theme-dark,
398
- .theme-light,
399
- .partner-dark,
400
- .partner-light {
401
- --action-outline-fill: var(--fills-surface-contrast-inverse);
402
- --action-border-radius: var(--border-radius-round);
403
- --tag-on-theme-alt: var(--on-secondary);
404
- --tag-theme-alt: var(--secondary);
405
- --action-inactive-toggle-stroke: var(--outline-soft);
406
- --action-inactive-toggle-surface: var(--surface-variant);
407
- --action-on-surface: var(--on-surface);
408
- --action-outline-action: var(--on-surface);
409
- --action-on-tonal-action: var(--on-secondary);
410
- --action-tonal-action: var(--secondary);
411
- --tag-on-theme: var(--on-primary);
412
- --action-on-filled-action: var(--on-primary);
413
- --tag-theme: var(--primary);
414
- --action-subtle-engaged: var(--primary);
415
- --action-filled-action: var(--primary);
416
- }