@dybo-ai/design 1.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dybo-ai/design",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "DYBO design system — tokens, Tailwind V4 theme, theme CSS, and React components.",
   "license": "UNLICENSED",
   "private": false,
@@ -20,6 +20,7 @@
     },
     "./tokens.json": "./tokens.json",
     "./theme.css": "./theme.css",
+    "./legacy-theme.css": "./legacy-theme.css",
     "./portal-tokens.css": "./portal-tokens.css",
     "./assets/*": "./assets/*"
   },
@@ -31,6 +32,7 @@
     "tokens.mjs",
     "tokens.cjs",
     "theme.css",
+    "legacy-theme.css",
     "portal-tokens.css",
     "dist",
     "assets",

package/portal-tokens.css

@@ -1,184 +1,8 @@
-/* ============================================================
-   DYBO CLIENT PORTAL — DESIGN TOKENS (drop-in)
-   Source: tokens.json → namespace "portal" + portal.hsl
-   Drop-in replacement for ticket-management-export/*/tokens.css
-   Do not edit manually — update tokens.json and regenerate.
-   ============================================================ */
-
-/* ---- LIGHT MODE (padrão) ---- */
-:root {
-
-  /* CORES SEMÂNTICAS */
-  --background:         216 25% 92%;   /* cinza-azulado claro — fundo da página */
-  --foreground:         218 56%  9%;   /* azul muito escuro — texto principal */
-
-  --card:               214 41% 97%;   /* quase branco levemente azul — superfície de card */
-  --card-foreground:    218 56%  9%;   /* igual ao foreground */
-
-  --popover:              0  0% 100%;  /* branco puro — modais/dropdowns */
-  --popover-foreground: 218 56%  9%;
-
-  --primary:            218 56%  9%;   /* azul muito escuro — ação principal */
-  --primary-foreground:   0  0% 100%; /* branco — texto sobre primary */
-
-  --secondary:            0  0% 100%; /* branco — ação secundária */
-  --secondary-foreground: 218 56%  9%;
-
-  --muted:              216 16% 88%;   /* cinza-azulado — fundos sutis */
-  --muted-foreground:   216 31% 50%;   /* azul médio — texto de suporte */
-
-  --accent:             219 52% 24%;   /* índigo escuro — destaque/hover */
-  --accent-foreground:  214 41% 97%;
-
-  --destructive:        355 95% 60%;   /* vermelho — erro/destruição */
-  --destructive-foreground: 0 0% 100%;
-
-  --border:               0  0% 100%; /* branco — borda em light mode (sutil) */
-  --input:              240 14% 96%;   /* quase branco — fundo de inputs */
-  --ring:               219 52% 24%;   /* índigo — foco/outline */
-
-  /* CORES DE STATUS */
-  --success:            150 68% 74%;
-  --success-foreground: 218 56%  9%;
-  --success-background: 151 45% 89%;
-
-  --warning:             30 100% 40%;
-  --warning-foreground: 218 56%  9%;
-  --warning-background:  30 100% 95%;
-
-  --error:               30 100% 40%;
-  --error-foreground:     0  0% 100%;
-  --error-background:    30 100% 95%;
-
-  --info:               216 31% 50%;
-  --info-foreground:    218 56%  9%;
-  --info-background:    216 31% 89%;
-
-  /* CORES DE MARCA */
-  --brand-dark-orb:     224 32% 12%;  /* azul-marinho muito escuro */
-  --brand-indigo:       219 52% 24%;  /* índigo — ícones inativos light */
-  --brand-blue-yonder:  216 31% 50%;  /* azul médio — ícones inativos dark */
-  --brand-gainsboro:    216 16% 88%;  /* cinza-azulado claro */
-  --brand-cultured:     214 41% 97%;  /* quase branco */
-  --brand-dandelion:     54 81% 55%;  /* amarelo — acento */
-  --brand-black:          0  0%  0%;
-  --brand-white:          0  0% 100%;
-
-  /* RAIOS DE BORDA */
-  --radius-none: 0px;
-  --radius-sm:   12px;   /* padrão para inputs, selects, cards */
-  --radius-md:   20px;   /* padrão para dropdowns, botões pill */
-  --radius-full: 999px;  /* pílulas e avatares */
-  --radius: var(--radius-md);
-
-  /* OPACIDADES SEMÂNTICAS */
-  --opacity-semi-opaque:     0.40;  /* desabilitado */
-  --opacity-intense:         0.64;  /* texto secundário/labels */
-  --opacity-medium:          0.32;
-  --opacity-light:           0.16;
-  --opacity-semi-transparent:0.08;
-
-  /* SOMBRAS */
-  --shadow-level-1: 0px 4px  8px #1419271f;  /* cards, sidebar pill */
-  --shadow-level-2: 0px 8px 28px #14192729;  /* modais */
-
-  /* SUPERFÍCIES COM OPACIDADE FIXA */
-  --card-bg-with-opacity: rgba(240, 241, 244, 0.92);  /* variante de card com alta opacidade — upload zones, painéis */
-
-  /* TIPOGRAFIA */
-  --font-display: "Urbanist", sans-serif;
-}
-
-/* ---- DARK MODE ---- */
-.dark {
-  --card-bg-with-opacity: rgba(18, 26, 45, 0.92);  /* variante dark do card com alta opacidade */
-  --background:         218 56%  9%;  /* azul escuro */
-  --foreground:         244 20% 96%;  /* quase branco */
-
-  --card:               218 35% 13%;
-  --card-foreground:    244 20% 96%;
-
-  --popover:            218 15% 12%;
-  --popover-foreground: 244 20% 96%;
-
-  --primary:            244 20% 96%;  /* invertido: claro sobre escuro */
-  --primary-foreground: 218 56%  9%;
-
-  --secondary:          218 35% 13%;
-  --secondary-foreground: 244 20% 96%;
-
-  --muted:              210 15% 30%;
-  --muted-foreground:   244 20% 80%;
-
-  --accent:             216 31% 50%;
-  --accent-foreground:  244 20% 96%;
-
-  --destructive:          0 78% 55%;
-  --destructive-foreground: 244 20% 96%;
-
-  --border:             210 15% 30%;  /* cinza escuro — borda visível em dark */
-  --input:              218 35% 13%;
-  --ring:               244 20% 96%;
-
-  --success-background: 150 68% 26%;
-  --warning-background:  30 100% 22%;
-  --error-background:    30 100% 22%;
-  --info-background:    216 31% 28%;
-}
-
-/* ============================================================
-   CLASSES UTILITÁRIAS CUSTOMIZADAS
-   (não geradas automaticamente pelo Tailwind)
-   ============================================================ */
-
-.opacity-intense         { opacity: var(--opacity-intense); }
-.opacity-medium          { opacity: var(--opacity-medium); }
-.opacity-light           { opacity: var(--opacity-light); }
-.opacity-semi-opaque     { opacity: var(--opacity-semi-opaque); }
-.opacity-semi-transparent{ opacity: var(--opacity-semi-transparent); }
-
-.shadow-level-1 { box-shadow: var(--shadow-level-1); }
-.shadow-level-2 { box-shadow: var(--shadow-level-2); }
-
-.font-display { font-family: var(--font-display); }
-.font-body    { font-family: var(--font-display); }
-
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* ============================================================
-   ESTILOS BASE
-   ============================================================ */
-
-* { border-color: hsl(var(--border)); }
-
-html { scrollbar-gutter: stable; }
-
-body {
-  font-family: var(--font-display);
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-  margin: 0;
-  line-height: 1.5;
-}
-
-/* Transição suave entre light/dark */
-body,
-[class*="bg-"],
-[class*="text-"],
-[class*="border-"] {
-  transition:
-    color .3s cubic-bezier(.4,0,.2,1),
-    background-color .3s cubic-bezier(.4,0,.2,1),
-    border-color .3s cubic-bezier(.4,0,.2,1);
-}
-
-/* Scrollbar customizada */
-::-webkit-scrollbar              { width: 8px; }
-::-webkit-scrollbar-track        { background-color: hsl(var(--secondary)); }
-::-webkit-scrollbar-thumb        { border-radius: var(--radius-full); background-color: hsl(var(--muted-foreground)); }
-::-webkit-scrollbar-thumb:hover  { background-color: hsl(var(--foreground)); }
+/* =========================================================================
+   DYBO Client Portal tokens — DEPRECATED ALIAS
+   `portal` was promoted to the package default in 2.0.0: this file is now
+   identical to `theme.css`. Import `theme.css` directly instead — this file
+   is kept only so existing `<link>`/`@import` references keep working, and
+   will be removed in 3.0.
+   ========================================================================= */
+@import "./theme.css";