@fluityy/designsystem 0.2.8 → 0.2.10
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/components/CodeBlock/prismSetup.d.ts +2 -0
- package/dist/components/CodeBlock/syntaxTheme.d.ts +3 -0
- package/dist/index.js +3856 -890
- package/dist/index.js.map +1 -1
- package/dist/styles.css +149 -3
- package/package.json +2 -1
package/dist/styles.css
CHANGED
|
@@ -43,8 +43,13 @@
|
|
|
43
43
|
--flui-color-neutral-900: #13151b;
|
|
44
44
|
--flui-color-neutral-950: #0e1015;
|
|
45
45
|
--flui-color-neutral-1000: #050608;
|
|
46
|
+
--flui-color-success-50: #ecfdf3;
|
|
47
|
+
--flui-color-success-100: #d1fae5;
|
|
48
|
+
--flui-color-success-300: #6ee7a0;
|
|
46
49
|
--flui-color-success-500: #1f9d55;
|
|
47
50
|
--flui-color-success-600: #157f43;
|
|
51
|
+
--flui-color-success-800: #0d3d24;
|
|
52
|
+
--flui-color-success-900: #052e16;
|
|
48
53
|
--flui-color-warning-500: #d9920a;
|
|
49
54
|
--flui-color-warning-600: #b6790a;
|
|
50
55
|
--flui-color-danger-500: #e02424;
|
|
@@ -104,11 +109,68 @@
|
|
|
104
109
|
--flui-semantic-accent-foreground: var(--flui-color-accent-scale-900);
|
|
105
110
|
--flui-semantic-danger-default: var(--flui-color-danger-500);
|
|
106
111
|
--flui-semantic-danger-hover: var(--flui-color-danger-600);
|
|
107
|
-
--flui-semantic-success-default: var(--flui-color-
|
|
108
|
-
--flui-semantic-success-subtle: var(--flui-color-
|
|
109
|
-
--flui-semantic-success-foreground: var(--flui-color-
|
|
112
|
+
--flui-semantic-success-default: var(--flui-color-success-500);
|
|
113
|
+
--flui-semantic-success-subtle: var(--flui-color-success-100);
|
|
114
|
+
--flui-semantic-success-foreground: var(--flui-color-success-900);
|
|
110
115
|
--flui-semantic-warning-default: var(--flui-color-warning-500);
|
|
111
116
|
--flui-semantic-warning-on-warning: var(--flui-color-neutral-900);
|
|
117
|
+
--flui-radius-badge: var(--flui-radius-full);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* radius-scales.css */
|
|
121
|
+
/* Escalas de arredondamento — sobrescrevem os tokens de radius via data-radius */
|
|
122
|
+
[data-radius="sharp"] {
|
|
123
|
+
--flui-radius-sm: 2px;
|
|
124
|
+
--flui-radius-md: 4px;
|
|
125
|
+
--flui-radius-lg: 6px;
|
|
126
|
+
--flui-radius-xl: 10px;
|
|
127
|
+
--flui-radius-badge: 1px;
|
|
128
|
+
}
|
|
129
|
+
[data-radius="soft"] {
|
|
130
|
+
--flui-radius-sm: 12px;
|
|
131
|
+
--flui-radius-md: 16px;
|
|
132
|
+
--flui-radius-lg: 24px;
|
|
133
|
+
--flui-radius-xl: 32px;
|
|
134
|
+
--flui-radius-badge: 9999px;
|
|
135
|
+
}
|
|
136
|
+
[data-radius="round"] {
|
|
137
|
+
--flui-radius-sm: 9999px;
|
|
138
|
+
--flui-radius-md: 9999px;
|
|
139
|
+
--flui-radius-lg: 9999px;
|
|
140
|
+
--flui-radius-xl: 9999px;
|
|
141
|
+
--flui-radius-badge: 9999px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* syntax.css */
|
|
145
|
+
/* Cores de syntax highlighting — contraste legível em light e dark */
|
|
146
|
+
:root {
|
|
147
|
+
--syntax-string: var(--flui-color-accent-scale-800);
|
|
148
|
+
--syntax-number: var(--flui-color-accent-scale-700);
|
|
149
|
+
--syntax-keyword: var(--flui-color-brand-600);
|
|
150
|
+
--syntax-class: var(--flui-color-warning-600);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
[data-theme="dark"] {
|
|
154
|
+
--syntax-string: var(--flui-color-accent-scale-400);
|
|
155
|
+
--syntax-number: var(--flui-color-accent-scale-300);
|
|
156
|
+
--syntax-keyword: var(--flui-color-brand-400);
|
|
157
|
+
--syntax-class: var(--flui-color-warning-500);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* toast.css */
|
|
161
|
+
/* Fundos opacos dos toasts — consumidos via var(--color-toast-*-bg) no Toast */
|
|
162
|
+
:root {
|
|
163
|
+
--color-toast-info-bg: var(--flui-color-brand-100);
|
|
164
|
+
--color-toast-success-bg: var(--flui-color-success-100);
|
|
165
|
+
--color-toast-warning-bg: #fef4e0;
|
|
166
|
+
--color-toast-danger-bg: #fde8e8;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
[data-theme="dark"] {
|
|
170
|
+
--color-toast-info-bg: var(--flui-color-brand-800);
|
|
171
|
+
--color-toast-success-bg: var(--flui-color-success-900);
|
|
172
|
+
--color-toast-warning-bg: #2d1f00;
|
|
173
|
+
--color-toast-danger-bg: #2d0808;
|
|
112
174
|
}
|
|
113
175
|
|
|
114
176
|
/* tokens.dark.css */
|
|
@@ -126,6 +188,9 @@
|
|
|
126
188
|
--flui-semantic-border-default: var(--flui-color-neutral-850);
|
|
127
189
|
--flui-semantic-border-strong: var(--flui-color-neutral-750);
|
|
128
190
|
--flui-semantic-primary-subtle: var(--flui-color-brand-800);
|
|
191
|
+
--flui-semantic-success-default: var(--flui-color-success-500);
|
|
192
|
+
--flui-semantic-success-subtle: var(--flui-color-success-900);
|
|
193
|
+
--flui-semantic-success-foreground: var(--flui-color-success-300);
|
|
129
194
|
--flui-semantic-warning-on-warning: var(--flui-color-neutral-950);
|
|
130
195
|
}
|
|
131
196
|
|
|
@@ -245,6 +310,13 @@
|
|
|
245
310
|
--radius-lg: var(--flui-radius-lg);
|
|
246
311
|
--radius-xl: var(--flui-radius-xl);
|
|
247
312
|
--radius-full: var(--flui-radius-full);
|
|
313
|
+
--radius-badge: var(--flui-radius-badge);
|
|
314
|
+
|
|
315
|
+
/* syntax highlighting (CodeBlock) */
|
|
316
|
+
--color-syntax-string: var(--syntax-string);
|
|
317
|
+
--color-syntax-number: var(--syntax-number);
|
|
318
|
+
--color-syntax-keyword: var(--syntax-keyword);
|
|
319
|
+
--color-syntax-class: var(--syntax-class);
|
|
248
320
|
|
|
249
321
|
/* tipografia */
|
|
250
322
|
--font-display: var(--flui-font-family-display);
|
|
@@ -280,3 +352,77 @@
|
|
|
280
352
|
from { opacity: 1; transform: translateY(0); }
|
|
281
353
|
to { opacity: 0; transform: translateY(8px); }
|
|
282
354
|
}
|
|
355
|
+
@keyframes flui-fade-out {
|
|
356
|
+
from { opacity: 1; }
|
|
357
|
+
to { opacity: 0; }
|
|
358
|
+
}
|
|
359
|
+
@keyframes flui-drawer-in-right {
|
|
360
|
+
from { transform: translateX(100%); }
|
|
361
|
+
to { transform: translateX(0); }
|
|
362
|
+
}
|
|
363
|
+
@keyframes flui-drawer-out-right {
|
|
364
|
+
from { transform: translateX(0); }
|
|
365
|
+
to { transform: translateX(100%); }
|
|
366
|
+
}
|
|
367
|
+
@keyframes flui-drawer-in-left {
|
|
368
|
+
from { transform: translateX(-100%); }
|
|
369
|
+
to { transform: translateX(0); }
|
|
370
|
+
}
|
|
371
|
+
@keyframes flui-drawer-out-left {
|
|
372
|
+
from { transform: translateX(0); }
|
|
373
|
+
to { transform: translateX(-100%); }
|
|
374
|
+
}
|
|
375
|
+
@keyframes flui-drawer-in-top {
|
|
376
|
+
from { transform: translateY(-100%); }
|
|
377
|
+
to { transform: translateY(0); }
|
|
378
|
+
}
|
|
379
|
+
@keyframes flui-drawer-out-top {
|
|
380
|
+
from { transform: translateY(0); }
|
|
381
|
+
to { transform: translateY(-100%); }
|
|
382
|
+
}
|
|
383
|
+
@keyframes flui-drawer-in-bottom {
|
|
384
|
+
from { transform: translateY(100%); }
|
|
385
|
+
to { transform: translateY(0); }
|
|
386
|
+
}
|
|
387
|
+
@keyframes flui-drawer-out-bottom {
|
|
388
|
+
from { transform: translateY(0); }
|
|
389
|
+
to { transform: translateY(100%); }
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
/* overlay-animations.css */
|
|
393
|
+
/* Utilitários de animação para Drawer e overlay — pares com @keyframes em global.css */
|
|
394
|
+
.flui-overlay-enter {
|
|
395
|
+
animation: flui-fade-in 220ms ease-out both;
|
|
396
|
+
}
|
|
397
|
+
.flui-overlay-exit {
|
|
398
|
+
animation: flui-fade-out 220ms ease-in forwards;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.flui-drawer-enter-right {
|
|
402
|
+
animation: flui-drawer-in-right 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
|
|
403
|
+
}
|
|
404
|
+
.flui-drawer-exit-right {
|
|
405
|
+
animation: flui-drawer-out-right 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.flui-drawer-enter-left {
|
|
409
|
+
animation: flui-drawer-in-left 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
|
|
410
|
+
}
|
|
411
|
+
.flui-drawer-exit-left {
|
|
412
|
+
animation: flui-drawer-out-left 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.flui-drawer-enter-top {
|
|
416
|
+
animation: flui-drawer-in-top 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
|
|
417
|
+
}
|
|
418
|
+
.flui-drawer-exit-top {
|
|
419
|
+
animation: flui-drawer-out-top 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.flui-drawer-enter-bottom {
|
|
423
|
+
animation: flui-drawer-in-bottom 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
|
|
424
|
+
}
|
|
425
|
+
.flui-drawer-exit-bottom {
|
|
426
|
+
animation: flui-drawer-out-bottom 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
|
|
427
|
+
}
|
|
428
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluityy/designsystem",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.10",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Flui Design System — componentes React com Tailwind v4 e tokens semânticos",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"class-variance-authority": "^0.7.1",
|
|
46
46
|
"clsx": "^2.1.1",
|
|
47
|
+
"prism-react-renderer": "^2.4.1",
|
|
47
48
|
"tailwind-merge": "^3.3.0"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|