@fluityy/designsystem 0.2.7 → 0.2.9
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 +3782 -881
- package/dist/index.js.map +1 -1
- package/dist/styles.css +125 -1
- package/package.json +2 -1
package/dist/styles.css
CHANGED
|
@@ -109,6 +109,47 @@
|
|
|
109
109
|
--flui-semantic-success-foreground: var(--flui-color-accent-scale-900);
|
|
110
110
|
--flui-semantic-warning-default: var(--flui-color-warning-500);
|
|
111
111
|
--flui-semantic-warning-on-warning: var(--flui-color-neutral-900);
|
|
112
|
+
--flui-radius-badge: var(--flui-radius-full);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* radius-scales.css */
|
|
116
|
+
/* Escalas de arredondamento — sobrescrevem os tokens de radius via data-radius */
|
|
117
|
+
[data-radius="sharp"] {
|
|
118
|
+
--flui-radius-sm: 2px;
|
|
119
|
+
--flui-radius-md: 4px;
|
|
120
|
+
--flui-radius-lg: 6px;
|
|
121
|
+
--flui-radius-xl: 10px;
|
|
122
|
+
--flui-radius-badge: 1px;
|
|
123
|
+
}
|
|
124
|
+
[data-radius="soft"] {
|
|
125
|
+
--flui-radius-sm: 12px;
|
|
126
|
+
--flui-radius-md: 16px;
|
|
127
|
+
--flui-radius-lg: 24px;
|
|
128
|
+
--flui-radius-xl: 32px;
|
|
129
|
+
--flui-radius-badge: 9999px;
|
|
130
|
+
}
|
|
131
|
+
[data-radius="round"] {
|
|
132
|
+
--flui-radius-sm: 9999px;
|
|
133
|
+
--flui-radius-md: 9999px;
|
|
134
|
+
--flui-radius-lg: 9999px;
|
|
135
|
+
--flui-radius-xl: 9999px;
|
|
136
|
+
--flui-radius-badge: 9999px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* syntax.css */
|
|
140
|
+
/* Cores de syntax highlighting — contraste legível em light e dark */
|
|
141
|
+
:root {
|
|
142
|
+
--syntax-string: var(--flui-color-accent-scale-800);
|
|
143
|
+
--syntax-number: var(--flui-color-accent-scale-700);
|
|
144
|
+
--syntax-keyword: var(--flui-color-brand-600);
|
|
145
|
+
--syntax-class: var(--flui-color-warning-600);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
[data-theme="dark"] {
|
|
149
|
+
--syntax-string: var(--flui-color-accent-scale-400);
|
|
150
|
+
--syntax-number: var(--flui-color-accent-scale-300);
|
|
151
|
+
--syntax-keyword: var(--flui-color-brand-400);
|
|
152
|
+
--syntax-class: var(--flui-color-warning-500);
|
|
112
153
|
}
|
|
113
154
|
|
|
114
155
|
/* tokens.dark.css */
|
|
@@ -119,13 +160,15 @@
|
|
|
119
160
|
[data-theme="dark"] {
|
|
120
161
|
--flui-semantic-bg-base: var(--flui-color-neutral-1000);
|
|
121
162
|
--flui-semantic-bg-subtle: var(--flui-color-neutral-950);
|
|
122
|
-
--flui-semantic-bg-muted: var(--flui-color-neutral-
|
|
163
|
+
--flui-semantic-bg-muted: var(--flui-color-neutral-800);
|
|
123
164
|
--flui-semantic-bg-elevated: var(--flui-color-neutral-875);
|
|
124
165
|
--flui-semantic-fg-default: var(--flui-color-neutral-50);
|
|
125
166
|
--flui-semantic-fg-muted: var(--flui-color-neutral-300);
|
|
126
167
|
--flui-semantic-border-default: var(--flui-color-neutral-850);
|
|
127
168
|
--flui-semantic-border-strong: var(--flui-color-neutral-750);
|
|
128
169
|
--flui-semantic-primary-subtle: var(--flui-color-brand-800);
|
|
170
|
+
--flui-semantic-success-subtle: var(--flui-color-accent-scale-900);
|
|
171
|
+
--flui-semantic-success-foreground: var(--flui-color-accent-scale-300);
|
|
129
172
|
--flui-semantic-warning-on-warning: var(--flui-color-neutral-950);
|
|
130
173
|
}
|
|
131
174
|
|
|
@@ -245,6 +288,13 @@
|
|
|
245
288
|
--radius-lg: var(--flui-radius-lg);
|
|
246
289
|
--radius-xl: var(--flui-radius-xl);
|
|
247
290
|
--radius-full: var(--flui-radius-full);
|
|
291
|
+
--radius-badge: var(--flui-radius-badge);
|
|
292
|
+
|
|
293
|
+
/* syntax highlighting (CodeBlock) */
|
|
294
|
+
--color-syntax-string: var(--syntax-string);
|
|
295
|
+
--color-syntax-number: var(--syntax-number);
|
|
296
|
+
--color-syntax-keyword: var(--syntax-keyword);
|
|
297
|
+
--color-syntax-class: var(--syntax-class);
|
|
248
298
|
|
|
249
299
|
/* tipografia */
|
|
250
300
|
--font-display: var(--flui-font-family-display);
|
|
@@ -280,3 +330,77 @@
|
|
|
280
330
|
from { opacity: 1; transform: translateY(0); }
|
|
281
331
|
to { opacity: 0; transform: translateY(8px); }
|
|
282
332
|
}
|
|
333
|
+
@keyframes flui-fade-out {
|
|
334
|
+
from { opacity: 1; }
|
|
335
|
+
to { opacity: 0; }
|
|
336
|
+
}
|
|
337
|
+
@keyframes flui-drawer-in-right {
|
|
338
|
+
from { transform: translateX(100%); }
|
|
339
|
+
to { transform: translateX(0); }
|
|
340
|
+
}
|
|
341
|
+
@keyframes flui-drawer-out-right {
|
|
342
|
+
from { transform: translateX(0); }
|
|
343
|
+
to { transform: translateX(100%); }
|
|
344
|
+
}
|
|
345
|
+
@keyframes flui-drawer-in-left {
|
|
346
|
+
from { transform: translateX(-100%); }
|
|
347
|
+
to { transform: translateX(0); }
|
|
348
|
+
}
|
|
349
|
+
@keyframes flui-drawer-out-left {
|
|
350
|
+
from { transform: translateX(0); }
|
|
351
|
+
to { transform: translateX(-100%); }
|
|
352
|
+
}
|
|
353
|
+
@keyframes flui-drawer-in-top {
|
|
354
|
+
from { transform: translateY(-100%); }
|
|
355
|
+
to { transform: translateY(0); }
|
|
356
|
+
}
|
|
357
|
+
@keyframes flui-drawer-out-top {
|
|
358
|
+
from { transform: translateY(0); }
|
|
359
|
+
to { transform: translateY(-100%); }
|
|
360
|
+
}
|
|
361
|
+
@keyframes flui-drawer-in-bottom {
|
|
362
|
+
from { transform: translateY(100%); }
|
|
363
|
+
to { transform: translateY(0); }
|
|
364
|
+
}
|
|
365
|
+
@keyframes flui-drawer-out-bottom {
|
|
366
|
+
from { transform: translateY(0); }
|
|
367
|
+
to { transform: translateY(100%); }
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
/* overlay-animations.css */
|
|
371
|
+
/* Utilitários de animação para Drawer e overlay — pares com @keyframes em global.css */
|
|
372
|
+
.flui-overlay-enter {
|
|
373
|
+
animation: flui-fade-in 220ms ease-out both;
|
|
374
|
+
}
|
|
375
|
+
.flui-overlay-exit {
|
|
376
|
+
animation: flui-fade-out 220ms ease-in forwards;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.flui-drawer-enter-right {
|
|
380
|
+
animation: flui-drawer-in-right 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
|
|
381
|
+
}
|
|
382
|
+
.flui-drawer-exit-right {
|
|
383
|
+
animation: flui-drawer-out-right 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.flui-drawer-enter-left {
|
|
387
|
+
animation: flui-drawer-in-left 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
|
|
388
|
+
}
|
|
389
|
+
.flui-drawer-exit-left {
|
|
390
|
+
animation: flui-drawer-out-left 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.flui-drawer-enter-top {
|
|
394
|
+
animation: flui-drawer-in-top 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
|
|
395
|
+
}
|
|
396
|
+
.flui-drawer-exit-top {
|
|
397
|
+
animation: flui-drawer-out-top 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.flui-drawer-enter-bottom {
|
|
401
|
+
animation: flui-drawer-in-bottom 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
|
|
402
|
+
}
|
|
403
|
+
.flui-drawer-exit-bottom {
|
|
404
|
+
animation: flui-drawer-out-bottom 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
|
|
405
|
+
}
|
|
406
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluityy/designsystem",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.9",
|
|
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": {
|