@iclips/ui 1.4.13 → 2.0.1

package/dist/tokens.css

@@ -0,0 +1,471 @@
+/* ============================================================================
+   Tokens do @iclips/ui — primitivos, semanticos e o mapeamento @theme.
+
+   Importavel isolado por quem so quer o tema, sem os estilos de componente:
+       @import "@iclips/ui/tokens.css";
+
+   Consumidores sem Tailwind v4 ignoram o bloco @theme (at-rule desconhecida)
+   e ainda recebem todas as custom properties de :root / .dark.
+   ============================================================================ */
+
+:root {
+  --font-size: 16px;
+  
+  /* Custom Color Palette - Base Colors */
+  /* Grays */
+  --gray-50: #F2F6FA;
+  --gray-100: #E9EEF5;
+  --gray-200: #DAE1EB;
+  --gray-300: #C5CDD9;
+  --gray-400: #9BA5B3;
+  --gray-500: #697280;
+  --gray-600: #464E59;
+  --gray-700: #2F3640;
+  --gray-800: #1A1F26;
+  --gray-900: #000000;
+  --white: #FFFFFF;
+  
+  /* Purple (Primary Brand Color) */
+  --purple-50: #F6E9FF;
+  --purple-100: #DAA6FF;
+  --purple-200: #BB6DF2;
+  --purple-500: #7F26BF;
+  --purple-600: #5B158C;
+  --purple-700: #420F66;
+  
+  /* Blue */
+  --blue-50: #E2E9FF;
+  --blue-100: #AABCF2;
+  --blue-200: #667FCC;
+  --blue-500: #1C2F8C;
+  --blue-600: #0F1E66;
+  --blue-700: #061040;
+  
+  /* Cyan */
+  --cyan-50: #D8EFFF;
+  --cyan-100: #8CCFFF;
+  --cyan-200: #3DA7F2;
+  --cyan-500: #0086E6;
+  --cyan-600: #0053A6;
+  --cyan-700: #003066;
+  
+  /* Teal */
+  --teal-50: #D4F5F5;
+  --teal-100: #9DF2F2;
+  --teal-200: #5CE6E6;
+  --teal-500: #14CCCC;
+  --teal-600: #00A7A7;
+  --teal-700: #045659;
+  
+  /* Green */
+  --green-50: #D3FBDD;
+  --green-100: #91F2AA;
+  --green-200: #57D977;
+  --green-500: #24B347;
+  --green-600: #007F2A;
+  --green-700: #004D19;
+  
+  /* Yellow */
+  --yellow-50: #FFF7CC;
+  --yellow-100: #FFDD99;
+  --yellow-200: #FFC859;
+  --yellow-500: #FAB325;
+  --yellow-600: #E6960B;
+  --yellow-700: #CC7C04;
+  
+  /* Orange */
+  --orange-50: #FFECE1;
+  --orange-100: #FFB68C;
+  --orange-200: #FF8E4C;
+  --orange-500: #F26924;
+  --orange-600: #E64D0B;
+  --orange-700: #BF3000;
+  
+  /* Red */
+  --red-50: #FFE9EC;
+  --red-100: #FFB2B9;
+  --red-200: #FF5967;
+  --red-500: #F22435;
+  --red-600: #CC0A1A;
+  --red-700: #99000D;
+  
+  /* Pink */
+  --pink-50: #FFECF9;
+  --pink-100: #FFB2E8;
+  --pink-200: #FF66CC;
+  --pink-500: #E62EA8;
+  --pink-600: #BF0A89;
+  --pink-700: #99086D;
+  
+  /* Semantic Colors - Light Mode */
+  --background: var(--white);
+  --foreground: var(--gray-800);
+  --card: var(--white);
+  --card-foreground: var(--gray-800);
+  --popover: var(--white);
+  --popover-foreground: var(--gray-800);
+  --primary: var(--purple-500);
+  --primary-foreground: var(--white);
+  --secondary: var(--purple-50);
+  --secondary-foreground: var(--purple-700);
+  --muted: var(--gray-100);
+  /* gray-600 (não gray-500): passa AA também sobre `bg-muted`/`bg-accent`
+     (gray-500 dava ~4:1 sobre gray-100). No dark segue gray-300. */
+  --muted-foreground: var(--gray-600);
+  --accent: var(--purple-50);
+  --accent-foreground: var(--purple-600);
+  --destructive: var(--red-600);
+  --destructive-foreground: var(--white);
+  --success: var(--green-600);
+  --success-foreground: var(--white);
+  --warning: var(--yellow-500);
+  --warning-foreground: var(--gray-800);
+  --info: var(--cyan-600);
+  --info-foreground: var(--white);
+
+  /* Status "emphasis" — cor de TEXTO/ícone para conteúdo sobre um fundo
+     tônico suave (`bg-<token>/10`). O token cru (`--success` = green-600 etc.)
+     não passa AA sobre esse tint; a mistura com `--foreground` escurece o
+     suficiente e adapta sozinha no dark (mesma receita de alert-theme.css).
+     Use: `bg-success/10 text-success-emphasis border-success/20`. */
+  --success-emphasis:     color-mix(in oklab, var(--success) 80%, var(--foreground));
+  --info-emphasis:        color-mix(in oklab, var(--info) 80%, var(--foreground));
+  --destructive-emphasis: color-mix(in oklab, var(--destructive) 80%, var(--foreground));
+  --warning-emphasis:     color-mix(in oklab, var(--warning) 32%, var(--foreground));
+
+  --border: var(--gray-200);
+  --input: var(--gray-200);
+  --input-background: var(--white);
+  --switch-background: var(--gray-300);
+  --ring: var(--purple-500);
+  
+  /* Font Weights - Inter UI */
+  /* Família tipográfica. A Inter NÃO é empacotada pela lib — o app consumidor
+     que quiser o visual exato instala a fonte (ex.: @fontsource/inter) e ela
+     entra aqui automaticamente; sem ela, cai no stack de sistema. */
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+  
+  /* Charts - Acessibilidade melhorada com Balanceamento Óptico */
+  --chart-1: var(--purple-500); /* Brand Color (Vibrante) */
+  --chart-2: var(--cyan-600);   /* Darkened for contrast */
+  --chart-3: var(--green-600);  /* Darkened for contrast */
+  --chart-4: var(--orange-600); /* Darkened for contrast */
+  --chart-5: var(--pink-600);   /* Darkened for contrast */
+  --chart-6: var(--blue-600);   /* Darkened for contrast */
+  --chart-7: var(--teal-600);   /* Darkened for contrast */
+  --chart-8: var(--yellow-600); /* Darkened for contrast */
+
+  /* Border Radius */
+  --radius: 0.625rem;
+  
+  /* Sidebar */
+  --sidebar: var(--white);
+  --sidebar-foreground: var(--gray-800);
+  --sidebar-primary: var(--purple-500);
+  --sidebar-primary-foreground: var(--white);
+  --sidebar-accent: var(--purple-50);
+  --sidebar-accent-foreground: var(--purple-700);
+  --sidebar-border: var(--gray-200);
+  --sidebar-ring: var(--purple-500);
+
+  /* ============================================
+     Spacing Tokens — Sistema de 4px (Base Scale)
+     ============================================ */
+  --space-0:  0px;
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+
+  /* Semântico — Componentes
+     Use para: padding interno, gap entre ícone e label,
+     espaçamento dentro de badges, botões e campos. */
+  --space-component-2xs: var(--space-1);   /* 4px  — gap ícone/label, badge padding  */
+  --space-component-xs:  var(--space-2);   /* 8px  — gap interno entre elementos      */
+  --space-component-sm:  var(--space-3);   /* 12px — padding interno pequeno          */
+  --space-component-md:  var(--space-4);   /* 16px — padding padrão de componente     */
+  --space-component-lg:  var(--space-6);   /* 24px — padding de card, modal, painel   */
+
+  /* Semântico — Layout
+     Use para: distâncias entre seções, grupos e blocos de página. */
+  --space-layout-xs:  var(--space-4);    /* 16px — entre elementos relacionados      */
+  --space-layout-sm:  var(--space-6);    /* 24px — entre grupos de elementos         */
+  --space-layout-md:  var(--space-8);    /* 32px — entre seções                      */
+  --space-layout-lg:  var(--space-12);   /* 48px — entre blocos de página            */
+  --space-layout-xl:  var(--space-16);   /* 64px — margens de página                 */
+  --space-layout-2xl: var(--space-20);   /* 80px — espaçamento hero/destaque         */
+
+  /* Semântico — Inline
+     Use para: gap em linhas com texto + ícone, chips, breadcrumbs. */
+  --space-inline-2xs: var(--space-1);   /* 4px  — espaço mínimo entre ícone e texto */
+  --space-inline-xs:  var(--space-2);   /* 8px  — gap padrão em linha               */
+  --space-inline-sm:  var(--space-3);   /* 12px — gap confortável em linha          */
+  --space-inline-md:  var(--space-4);   /* 16px — separação entre grupos inline     */
+  --space-inline-lg:  var(--space-6);   /* 24px — separação ampla entre grupos      */
+}
+
+.dark {
+  /* Semantic Colors - Dark Mode */
+  --background: var(--gray-800);
+  --foreground: var(--gray-50);
+  --card: var(--gray-700);
+  --card-foreground: var(--gray-50);
+  --popover: var(--gray-700);
+  --popover-foreground: var(--gray-50);
+  --primary: var(--purple-200);
+  --primary-foreground: var(--gray-900);
+  --secondary: var(--gray-700);
+  --secondary-foreground: var(--gray-50);
+  --muted: var(--gray-600);
+  --muted-foreground: var(--gray-300);
+  --accent: var(--purple-700);
+  --accent-foreground: var(--purple-100);
+  --destructive: var(--red-600);
+  --destructive-foreground: var(--white);
+  --success: var(--green-600);
+  --success-foreground: var(--white);
+  --warning: var(--yellow-600);
+  --warning-foreground: var(--gray-800);
+  --info: var(--cyan-600);
+  --info-foreground: var(--white);
+  --border: var(--gray-600);
+  --input: var(--gray-600);
+  --input-background: var(--gray-700);
+  --switch-background: var(--gray-600);
+  --ring: var(--purple-200);
+  
+  /* Charts - Dark Mode */
+  --chart-1: var(--purple-200);
+  --chart-2: var(--cyan-200);
+  --chart-3: var(--green-200);
+  --chart-4: var(--orange-200);
+  --chart-5: var(--pink-200);
+  --chart-6: var(--blue-200);
+  --chart-7: var(--teal-200);
+  --chart-8: var(--yellow-200);
+
+  /* Sidebar - Dark Mode */
+  --sidebar: var(--gray-800);
+  --sidebar-foreground: var(--gray-50);
+  --sidebar-primary: var(--purple-200);
+  --sidebar-primary-foreground: var(--gray-900);
+  --sidebar-accent: var(--gray-700);
+  --sidebar-accent-foreground: var(--purple-100);
+  --sidebar-border: var(--gray-600);
+  --sidebar-ring: var(--purple-200);
+}
+
+/* ============================================
+   Micro-Animations (Premium)
+   ============================================ */
+
+/* Keyframes */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Skeleton Shimmer Effect */
+.skeleton-shimmer {
+  background: linear-gradient(90deg,
+      var(--accent) 0%,
+      var(--muted) 20%,
+      var(--accent) 40%,
+      var(--accent) 100%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@theme inline {
+  /* Typography */
+  --font-sans: var(--font-sans);
+
+  /* Semantic Colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-emphasis: var(--destructive-emphasis);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-emphasis: var(--success-emphasis);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-emphasis: var(--warning-emphasis);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-emphasis: var(--info-emphasis);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+  
+  /* Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+
+  /* Border Radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  
+  /* Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* ============================================
+     Spacing Tokens — Tailwind Utilities
+     Geram classes: p-component-md, gap-layout-sm,
+     m-inline-xs, etc. via Tailwind v4 @theme.
+     ============================================ */
+
+  /* Escala base — Alias dos valores em px */
+  --spacing-0:  var(--space-0);
+  --spacing-1:  var(--space-1);
+  --spacing-2:  var(--space-2);
+  --spacing-3:  var(--space-3);
+  --spacing-4:  var(--space-4);
+  --spacing-5:  var(--space-5);
+  --spacing-6:  var(--space-6);
+  --spacing-8:  var(--space-8);
+  --spacing-10: var(--space-10);
+  --spacing-12: var(--space-12);
+  --spacing-16: var(--space-16);
+  --spacing-20: var(--space-20);
+  --spacing-24: var(--space-24);
+
+  /* Semântico — Componentes */
+  --spacing-component-2xs: var(--space-component-2xs);
+  --spacing-component-xs:  var(--space-component-xs);
+  --spacing-component-sm:  var(--space-component-sm);
+  --spacing-component-md:  var(--space-component-md);
+  --spacing-component-lg:  var(--space-component-lg);
+
+  /* Semântico — Layout */
+  --spacing-layout-xs:  var(--space-layout-xs);
+  --spacing-layout-sm:  var(--space-layout-sm);
+  --spacing-layout-md:  var(--space-layout-md);
+  --spacing-layout-lg:  var(--space-layout-lg);
+  --spacing-layout-xl:  var(--space-layout-xl);
+  --spacing-layout-2xl: var(--space-layout-2xl);
+
+  /* Semântico — Inline */
+  --spacing-inline-2xs: var(--space-inline-2xs);
+  --spacing-inline-xs:  var(--space-inline-xs);
+  --spacing-inline-sm:  var(--space-inline-sm);
+  --spacing-inline-md:  var(--space-inline-md);
+  --spacing-inline-lg:  var(--space-inline-lg);
+
+  /* Raw Color Palette */
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-400: var(--gray-400);
+  --color-gray-500: var(--gray-500);
+  --color-gray-600: var(--gray-600);
+  --color-gray-700: var(--gray-700);
+  --color-gray-800: var(--gray-800);
+  --color-purple-50: var(--purple-50);
+  --color-purple-100: var(--purple-100);
+  --color-purple-200: var(--purple-200);
+  --color-purple-500: var(--purple-500);
+  --color-purple-600: var(--purple-600);
+  --color-purple-700: var(--purple-700);
+  --color-blue-50: var(--blue-50);
+  --color-blue-100: var(--blue-100);
+  --color-blue-200: var(--blue-200);
+  --color-blue-500: var(--blue-500);
+  --color-blue-600: var(--blue-600);
+  --color-blue-700: var(--blue-700);
+  --color-cyan-50: var(--cyan-50);
+  --color-cyan-100: var(--cyan-100);
+  --color-cyan-200: var(--cyan-200);
+  --color-cyan-500: var(--cyan-500);
+  --color-cyan-600: var(--cyan-600);
+  --color-cyan-700: var(--cyan-700);
+  --color-teal-50: var(--teal-50);
+  --color-teal-100: var(--teal-100);
+  --color-teal-200: var(--teal-200);
+  --color-teal-500: var(--teal-500);
+  --color-teal-600: var(--teal-600);
+  --color-teal-700: var(--teal-700);
+  --color-green-50: var(--green-50);
+  --color-green-100: var(--green-100);
+  --color-green-200: var(--green-200);
+  --color-green-500: var(--green-500);
+  --color-green-600: var(--green-600);
+  --color-green-700: var(--green-700);
+  --color-yellow-50: var(--yellow-50);
+  --color-yellow-100: var(--yellow-100);
+  --color-yellow-200: var(--yellow-200);
+  --color-yellow-500: var(--yellow-500);
+  --color-yellow-600: var(--yellow-600);
+  --color-yellow-700: var(--yellow-700);
+  --color-orange-50: var(--orange-50);
+  --color-orange-100: var(--orange-100);
+  --color-orange-200: var(--orange-200);
+  --color-orange-500: var(--orange-500);
+  --color-orange-600: var(--orange-600);
+  --color-orange-700: var(--orange-700);
+  --color-red-50: var(--red-50);
+  --color-red-100: var(--red-100);
+  --color-red-200: var(--red-200);
+  --color-red-500: var(--red-500);
+  --color-red-600: var(--red-600);
+  --color-red-700: var(--red-700);
+  --color-pink-50: var(--pink-50);
+  --color-pink-100: var(--pink-100);
+  --color-pink-200: var(--pink-200);
+  --color-pink-500: var(--pink-500);
+  --color-pink-600: var(--pink-600);
+  --color-pink-700: var(--pink-700);
+}