@fluityy/designsystem 0.2.8 → 0.2.9

package/dist/styles.css

@@ -109,6 +109,47 @@
   --flui-semantic-success-foreground: var(--flui-color-accent-scale-900);
   --flui-semantic-warning-default: var(--flui-color-warning-500);
   --flui-semantic-warning-on-warning: var(--flui-color-neutral-900);
+  --flui-radius-badge: var(--flui-radius-full);
+}
+
+/* radius-scales.css */
+/* Escalas de arredondamento — sobrescrevem os tokens de radius via data-radius */
+[data-radius="sharp"] {
+  --flui-radius-sm: 2px;
+  --flui-radius-md: 4px;
+  --flui-radius-lg: 6px;
+  --flui-radius-xl: 10px;
+  --flui-radius-badge: 1px;
+}
+[data-radius="soft"] {
+  --flui-radius-sm: 12px;
+  --flui-radius-md: 16px;
+  --flui-radius-lg: 24px;
+  --flui-radius-xl: 32px;
+  --flui-radius-badge: 9999px;
+}
+[data-radius="round"] {
+  --flui-radius-sm: 9999px;
+  --flui-radius-md: 9999px;
+  --flui-radius-lg: 9999px;
+  --flui-radius-xl: 9999px;
+  --flui-radius-badge: 9999px;
+}
+
+/* syntax.css */
+/* Cores de syntax highlighting — contraste legível em light e dark */
+:root {
+  --syntax-string: var(--flui-color-accent-scale-800);
+  --syntax-number: var(--flui-color-accent-scale-700);
+  --syntax-keyword: var(--flui-color-brand-600);
+  --syntax-class: var(--flui-color-warning-600);
+}
+
+[data-theme="dark"] {
+  --syntax-string: var(--flui-color-accent-scale-400);
+  --syntax-number: var(--flui-color-accent-scale-300);
+  --syntax-keyword: var(--flui-color-brand-400);
+  --syntax-class: var(--flui-color-warning-500);
 }
 
 /* tokens.dark.css */
@@ -126,6 +167,8 @@
   --flui-semantic-border-default: var(--flui-color-neutral-850);
   --flui-semantic-border-strong: var(--flui-color-neutral-750);
   --flui-semantic-primary-subtle: var(--flui-color-brand-800);
+  --flui-semantic-success-subtle: var(--flui-color-accent-scale-900);
+  --flui-semantic-success-foreground: var(--flui-color-accent-scale-300);
   --flui-semantic-warning-on-warning: var(--flui-color-neutral-950);
 }
 
@@ -245,6 +288,13 @@
   --radius-lg: var(--flui-radius-lg);
   --radius-xl: var(--flui-radius-xl);
   --radius-full: var(--flui-radius-full);
+  --radius-badge: var(--flui-radius-badge);
+
+  /* syntax highlighting (CodeBlock) */
+  --color-syntax-string: var(--syntax-string);
+  --color-syntax-number: var(--syntax-number);
+  --color-syntax-keyword: var(--syntax-keyword);
+  --color-syntax-class: var(--syntax-class);
 
   /* tipografia */
   --font-display: var(--flui-font-family-display);
@@ -280,3 +330,77 @@
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(8px); }
 }
+@keyframes flui-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes flui-drawer-in-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+@keyframes flui-drawer-out-right {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+@keyframes flui-drawer-in-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+@keyframes flui-drawer-out-left {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+@keyframes flui-drawer-in-top {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+@keyframes flui-drawer-out-top {
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+}
+@keyframes flui-drawer-in-bottom {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+@keyframes flui-drawer-out-bottom {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+
+/* overlay-animations.css */
+/* Utilitários de animação para Drawer e overlay — pares com @keyframes em global.css */
+.flui-overlay-enter {
+  animation: flui-fade-in 220ms ease-out both;
+}
+.flui-overlay-exit {
+  animation: flui-fade-out 220ms ease-in forwards;
+}
+
+.flui-drawer-enter-right {
+  animation: flui-drawer-in-right 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+.flui-drawer-exit-right {
+  animation: flui-drawer-out-right 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
+}
+
+.flui-drawer-enter-left {
+  animation: flui-drawer-in-left 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+.flui-drawer-exit-left {
+  animation: flui-drawer-out-left 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
+}
+
+.flui-drawer-enter-top {
+  animation: flui-drawer-in-top 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+.flui-drawer-exit-top {
+  animation: flui-drawer-out-top 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
+}
+
+.flui-drawer-enter-bottom {
+  animation: flui-drawer-in-bottom 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+.flui-drawer-exit-bottom {
+  animation: flui-drawer-out-bottom 220ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluityy/designsystem",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "private": false,
   "type": "module",
   "description": "Flui Design System — componentes React com Tailwind v4 e tokens semânticos",
@@ -44,6 +44,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "prism-react-renderer": "^2.4.1",
     "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {