@fluencypassdevs/cycle 1.33.1 → 1.35.0

package/bin/components.generated.mjs

@@ -2365,7 +2365,7 @@ export const COMPONENTS = [
         "name": "theme (BreadcrumbDot)",
         "type": "string",
         "default": "-",
-        "note": "classe de tema que colore o dot (ex: theme-class, theme-group)"
+        "note": "classe de tema que colore o dot (ex: theme-class, theme-progress)"
       },
       {
         "name": "aria-label (BreadcrumbSwitcherTrigger)",

package/bin/mcp.mjs

@@ -21,9 +21,9 @@ import { COMPONENTS } from "./components.generated.mjs"
 
 const TOKENS = {
   colors: {
-    backgrounds: ["bg-background", "bg-card", "bg-popover", "bg-primary", "bg-secondary", "bg-muted", "bg-accent", "bg-destructive"],
-    foregrounds: ["text-foreground", "text-card-foreground", "text-popover-foreground", "text-primary-foreground", "text-secondary-foreground", "text-muted-foreground", "text-accent-foreground", "text-destructive-foreground"],
-    borders: ["border-border", "border-input"],
+    backgrounds: ["bg-background", "bg-card", "bg-popover", "bg-primary", "bg-secondary", "bg-muted", "bg-accent", "bg-destructive", "bg-surface-raised (elemento DENTRO de um card: chip, card interno — branco no light, mais claro que o card no dark)"],
+    foregrounds: ["text-foreground", "text-card-foreground", "text-popover-foreground", "text-primary-foreground", "text-secondary-foreground", "text-muted-foreground", "text-accent-foreground", "text-destructive-foreground", "text-surface-raised-foreground"],
+    borders: ["border-border (decorativa)", "border-input", "border-border-strong (borda de campo/horario selecionavel — 3:1 contra fundo, card e surface-raised)"],
     semantic: ["bg-positive", "bg-warning", "bg-critical", "bg-info"],
   },
   radius: ["rounded-sm", "rounded-md", "rounded-lg", "rounded-xl"],
@@ -31,7 +31,27 @@ const TOKENS = {
     body: ["body-xs (11px)", "body-sm (12px)", "body-md (14px)", "body-lg (16px)"],
     heading: ["heading-xs (14px/600)", "heading-sm (16px/600)", "heading-md (18px/600)", "heading-lg (20px/600)", "heading-xl (24px/600)", "heading-2xl (30px/700)", "heading-3xl (36px/700)", "heading-4xl (48px/700)"],
   },
-  themes: [".theme-brand", ".theme-class", ".theme-private-talk", ".theme-group-talk"],
+  themes: [
+    ".theme-brand — coral da marca Fluencypass",
+    ".theme-class — azul (Class / aulas); tambem faz o papel de info",
+    ".theme-impulse — roxo (Impulse)",
+    ".theme-progress — verde vivo de AVANCO/ACERTO: barra de progresso, etapa concluida, resposta certa, 7/7",
+    ".theme-streak — laranja da SEQUENCIA (streak): chama, dias seguidos",
+    ".theme-positive — esmeralda de STATUS de sucesso/confirmacao (toast, alert, badge success)",
+    ".theme-warning — ambar de alerta",
+    ".theme-critical — vermelho de erro",
+    ".theme-group — Group Talk. DEPRECIADO na 1.x (ainda verde, alias de theme-progress); vira AMARELO (Sol) na 2.0. Use so para o PRODUTO Group Talk",
+    ".theme-private — Private Talk. DEPRECIADO na 1.x (ainda laranja, alias de theme-streak); vira AMARELO (Limao) na 2.0. Use so para o PRODUTO Private Talk",
+    ".theme-group-talk-next / .theme-private-talk-next — opt-in dos amarelos de produto na 1.x (saem na 2.0)",
+  ],
+  gradients: [
+    "Cada .theme-* define --gradient-from e --gradient-to (ambos passam 4,5:1 contra --primary-foreground)",
+    "Presets (use COM um tema no elemento ou ancestral): .gradient-linear-{b,t,r,l,br,tr,bl,tl}, .gradient-glow-{tr,br,tl,bl,c}, .gradient-spotlight, .gradient-mesh, .gradient-band",
+    "Pontes de familia (somar ao preset): .gradient-practice (Group Talk → Private Talk), .gradient-learning (Impulse → Class)",
+    "Exemplo: <div className=\"theme-class gradient-linear-br text-primary-foreground\">",
+    "Onde usar: cards de produto preenchidos, bloco do icone e selos de produto. NUNCA em botoes, texto, inputs ou barras de progresso",
+    "NUNCA escrever linear-gradient/bg-linear-* com cores proprias — sempre os presets .gradient-*",
+  ],
 }
 
 // ─── Tool Definitions ──────────────────────────────────────────────────────────
@@ -89,7 +109,7 @@ const TOOLS = [
       properties: {
         category: {
           type: "string",
-          enum: ["colors", "typography", "radius", "themes", "all"],
+          enum: ["colors", "typography", "radius", "themes", "gradients", "all"],
           description: "Token category to retrieve",
         },
       },
@@ -252,10 +272,10 @@ Se componentes aparecem sem estilo, verifique:
     case "cycle_get_tokens": {
       const cat = args.category || "all"
       if (cat === "all") {
-        return `# Design Tokens do Cycle\n\n## Colors\nBackgrounds: ${TOKENS.colors.backgrounds.join(", ")}\nForegrounds: ${TOKENS.colors.foregrounds.join(", ")}\nBorders: ${TOKENS.colors.borders.join(", ")}\n\n## Typography\nBody: ${TOKENS.typography.body.join(", ")}\nHeading: ${TOKENS.typography.heading.join(", ")}\n\n## Radius\n${TOKENS.radius.join(", ")}\n\n## Themes\n${TOKENS.themes.join(", ")}\n\n**NUNCA usar cores hardcoded** (bg-blue-500, #hex). Sempre usar semantic tokens.`
+        return `# Design Tokens do Cycle\n\n## Colors\nBackgrounds: ${TOKENS.colors.backgrounds.join(", ")}\nForegrounds: ${TOKENS.colors.foregrounds.join(", ")}\nBorders: ${TOKENS.colors.borders.join(", ")}\n\n## Typography\nBody: ${TOKENS.typography.body.join(", ")}\nHeading: ${TOKENS.typography.heading.join(", ")}\n\n## Radius\n${TOKENS.radius.join(", ")}\n\n## Themes\n- ${TOKENS.themes.join("\n- ")}\n\n## Gradients\n- ${TOKENS.gradients.join("\n- ")}\n\n**NUNCA usar cores hardcoded** (bg-blue-500, #hex). Sempre usar semantic tokens.`
       }
       const data = TOKENS[cat]
-      if (!data) return `Unknown category "${cat}". Available: colors, typography, radius, themes, all.`
+      if (!data) return `Unknown category "${cat}". Available: colors, typography, radius, themes, gradients, all.`
       return `# ${cat} tokens\n\n${JSON.stringify(data, null, 2)}\n\n**NUNCA usar valores hardcoded.** Sempre usar estes semantic tokens.`
     }
 
@@ -330,6 +350,7 @@ Sempre importar de \`@fluencypassdevs/cycle\`.
 10. Usar \`cn()\` de \`@fluencypassdevs/cycle/lib/utils\` para merge de classes
 11. Dark mode via classe \`.dark\` — tokens light/dark ja estao definidos
 12. Usar variaveis de radius (rounded-sm, rounded-md, rounded-lg, rounded-xl)
+12b. Tema pelo SENTIDO, nao pela cor: progresso/acerto/etapa concluida → \`theme-progress\`; sequencia/streak → \`theme-streak\`; sucesso de status → \`theme-positive\`; produto Group Talk → \`theme-group\`; produto Private Talk → \`theme-private\`. NUNCA usar \`theme-group\`/\`theme-private\` so por querer verde/laranja — eles viram amarelo na 2.0
 
 ## Regras de Codigo
 13. TypeScript strict — tipar todas as props, nunca usar \`any\`

package/dist/{chunk-E7MMJTJY.js → chunk-SQRNXYYD.js}

@@ -72,5 +72,5 @@ function ProgressDot(_a) {
 }
 
 export { ProgressDot, dotVariants, progressDotVariants };
-//# sourceMappingURL=chunk-E7MMJTJY.js.map
-//# sourceMappingURL=chunk-E7MMJTJY.js.map
+//# sourceMappingURL=chunk-SQRNXYYD.js.map
+//# sourceMappingURL=chunk-SQRNXYYD.js.map

package/dist/{chunk-E7MMJTJY.js.map → chunk-SQRNXYYD.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/progress-dot.tsx"],"names":["_a"],"mappings":";;;;;AAKA,IAAM,mBAAA,GAAsB,IAAI,mBAAA,EAAqB;AAAA,EACnD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,OAAA;AAAA,MACJ,OAAA,EAAS,OAAA;AAAA,MACT,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC;AAED,IAAM,WAAA,GAAc,IAAI,uBAAA,EAAyB;AAAA,EAC/C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,UAAA;AAAA,MACJ,OAAA,EAAS,QAAA;AAAA,MACT,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC;AAeD,SAAS,YAAY,EAAA,EAQA;AARA,EAAA,IAAA,EAAA,GAAA,EAAA,EACnB;AAAA,IAAA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,GAAO,SAAA;AAAA,IACP,KAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GApDF,GA8CqB,EAAA,EAOhB,KAAA,GAAA,SAAA,CAPgB,EAAA,EAOhB;AAAA,IANH,QAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,EAAA,EAAI,KAAK,GAAA,CAAI,CAAA,EAAG,MAAM,CAAC,CAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,KAAK,GAAA,CAAI,KAAA,EAAO,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAA;AAEjD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,WAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,IAAA,EAAM,GAAG,SAAS;AAAA,KAAA,EAClD,KAAA,CAAA,EAHL;AAAA,MAKE,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAM,EAAG,CAAC,GAAG,CAAA,KAAM;AAhE/C,QAAA,IAAAA,GAAAA;AAiEQ,QAAA,MAAM,QAAA,GAAA,CAAWA,GAAAA,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,CAAA,CAAA,KAAT,OAAAA,GAAAA,GAAe,KAAA;AAChC,QAAA,uBACE,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAW,EAAA;AAAA,cACT,WAAA,CAAY,EAAE,IAAA,EAAM,CAAA;AAAA,cACpB,CAAA,GAAI,MAAA,GACA,EAAA,CAAG,QAAA,EAAU,YAAY,CAAA,GACzB;AAAA;AACN,WAAA;AAAA,UANK;AAAA,SAOP;AAAA,MAEJ,CAAC;AAAA,KAAA;AAAA,GACH;AAEJ","file":"chunk-E7MMJTJY.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst progressDotVariants = cva(\"flex items-center\", {\n  variants: {\n    size: {\n      xs: \"gap-0.5\",\n      sm: \"gap-1\",\n      default: \"gap-1\",\n      lg: \"gap-1\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\nconst dotVariants = cva(\"shrink-0 rounded-full\", {\n  variants: {\n    size: {\n      xs: \"size-1\",\n      sm: \"size-1.5\",\n      default: \"size-2\",\n      lg: \"size-3\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\nexport interface ProgressDotProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof dotVariants> {\n  /** Numero total de stages (2–10) */\n  stages: number\n  /** Quantos stages estao preenchidos (0–stages) */\n  value: number\n  /** Classe de tema aplicada em todos os dots preenchidos (ex: \"theme-class\") */\n  theme?: string\n  /** Temas individuais por dot (ex: [\"theme-class\", \"theme-brand\", undefined, \"theme-private\"]). Sobrescreve `theme` para dots que tiverem valor. */\n  themes?: (string | undefined)[]\n}\n\nfunction ProgressDot({\n  stages,\n  value,\n  size = \"default\",\n  theme,\n  themes,\n  className,\n  ...props\n}: ProgressDotProps) {\n  const total = Math.min(10, Math.max(2, stages))\n  const filled = Math.min(total, Math.max(0, value))\n\n  return (\n    <div\n      data-slot=\"progress-dot\"\n      className={cn(progressDotVariants({ size }), className)}\n      {...props}\n    >\n      {Array.from({ length: total }, (_, i) => {\n        const dotTheme = themes?.[i] ?? theme\n        return (\n          <div\n            key={i}\n            className={cn(\n              dotVariants({ size }),\n              i < filled\n                ? cn(dotTheme, \"bg-primary\")\n                : \"bg-neutral-input\"\n            )}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport { ProgressDot, progressDotVariants, dotVariants }\n"]}
+{"version":3,"sources":["../src/components/ui/progress-dot.tsx"],"names":["_a"],"mappings":";;;;;AAKA,IAAM,mBAAA,GAAsB,IAAI,mBAAA,EAAqB;AAAA,EACnD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,OAAA;AAAA,MACJ,OAAA,EAAS,OAAA;AAAA,MACT,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC;AAED,IAAM,WAAA,GAAc,IAAI,uBAAA,EAAyB;AAAA,EAC/C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,UAAA;AAAA,MACJ,OAAA,EAAS,QAAA;AAAA,MACT,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC;AAeD,SAAS,YAAY,EAAA,EAQA;AARA,EAAA,IAAA,EAAA,GAAA,EAAA,EACnB;AAAA,IAAA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,GAAO,SAAA;AAAA,IACP,KAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GApDF,GA8CqB,EAAA,EAOhB,KAAA,GAAA,SAAA,CAPgB,EAAA,EAOhB;AAAA,IANH,QAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,EAAA,EAAI,KAAK,GAAA,CAAI,CAAA,EAAG,MAAM,CAAC,CAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,KAAK,GAAA,CAAI,KAAA,EAAO,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAA;AAEjD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,WAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,IAAA,EAAM,GAAG,SAAS;AAAA,KAAA,EAClD,KAAA,CAAA,EAHL;AAAA,MAKE,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAM,EAAG,CAAC,GAAG,CAAA,KAAM;AAhE/C,QAAA,IAAAA,GAAAA;AAiEQ,QAAA,MAAM,QAAA,GAAA,CAAWA,GAAAA,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,CAAA,CAAA,KAAT,OAAAA,GAAAA,GAAe,KAAA;AAChC,QAAA,uBACE,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAW,EAAA;AAAA,cACT,WAAA,CAAY,EAAE,IAAA,EAAM,CAAA;AAAA,cACpB,CAAA,GAAI,MAAA,GACA,EAAA,CAAG,QAAA,EAAU,YAAY,CAAA,GACzB;AAAA;AACN,WAAA;AAAA,UANK;AAAA,SAOP;AAAA,MAEJ,CAAC;AAAA,KAAA;AAAA,GACH;AAEJ","file":"chunk-SQRNXYYD.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst progressDotVariants = cva(\"flex items-center\", {\n  variants: {\n    size: {\n      xs: \"gap-0.5\",\n      sm: \"gap-1\",\n      default: \"gap-1\",\n      lg: \"gap-1\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\nconst dotVariants = cva(\"shrink-0 rounded-full\", {\n  variants: {\n    size: {\n      xs: \"size-1\",\n      sm: \"size-1.5\",\n      default: \"size-2\",\n      lg: \"size-3\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\nexport interface ProgressDotProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof dotVariants> {\n  /** Numero total de stages (2–10) */\n  stages: number\n  /** Quantos stages estao preenchidos (0–stages) */\n  value: number\n  /** Classe de tema aplicada em todos os dots preenchidos (ex: \"theme-class\") */\n  theme?: string\n  /** Temas individuais por dot (ex: [\"theme-class\", \"theme-brand\", undefined, \"theme-streak\"]). Sobrescreve `theme` para dots que tiverem valor. */\n  themes?: (string | undefined)[]\n}\n\nfunction ProgressDot({\n  stages,\n  value,\n  size = \"default\",\n  theme,\n  themes,\n  className,\n  ...props\n}: ProgressDotProps) {\n  const total = Math.min(10, Math.max(2, stages))\n  const filled = Math.min(total, Math.max(0, value))\n\n  return (\n    <div\n      data-slot=\"progress-dot\"\n      className={cn(progressDotVariants({ size }), className)}\n      {...props}\n    >\n      {Array.from({ length: total }, (_, i) => {\n        const dotTheme = themes?.[i] ?? theme\n        return (\n          <div\n            key={i}\n            className={cn(\n              dotVariants({ size }),\n              i < filled\n                ? cn(dotTheme, \"bg-primary\")\n                : \"bg-neutral-input\"\n            )}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport { ProgressDot, progressDotVariants, dotVariants }\n"]}

package/dist/index.js

@@ -32,7 +32,7 @@ export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, Ava
 export { MessageRating } from './chunk-YIOXPV2N.js';
 export { MessageBar } from './chunk-5AH2PNYW.js';
 export { ProgressStage } from './chunk-OM4W6UQG.js';
-export { ProgressDot, dotVariants, progressDotVariants } from './chunk-E7MMJTJY.js';
+export { ProgressDot, dotVariants, progressDotVariants } from './chunk-SQRNXYYD.js';
 export { CircularProgress, circularProgressVariants } from './chunk-2NVKK7UB.js';
 export { ERROR_STATE_PRESETS, ErrorState, ErrorStateActions, ErrorStateDescription, ErrorStateMedia, ErrorStateMeta, ErrorStateTitle } from './chunk-J3QIX7EZ.js';
 export { StatusBanner, useCountdown } from './chunk-VMUNB4RA.js';

package/dist/styles/tokens.css

@@ -9,17 +9,20 @@
 :root {
   --color-base-white: #FFFFFF;
   --color-base-black: #000000;
-  --color-gray-50: #FAFAFA;
-  --color-gray-100: #F5F5F5;
-  --color-gray-200: #E9EAEB;
-  --color-gray-300: #D5D7DA;
-  --color-gray-400: #A4A7AE;
+  --color-gray-50: #F9FAFB;
+  --color-gray-100: #F4F5F7;
+  --color-gray-200: #E9EAED;
+  --color-gray-300: #D5D7DB;
+  --color-gray-400: #A3A7AE;
+  --color-gray-450: #898E96;
   --color-gray-500: #717680;
   --color-gray-600: #535862;
-  --color-gray-700: #414651;
-  --color-gray-800: #252B37;
-  --color-gray-900: #181D27;
-  --color-gray-950: #0D0D12;
+  --color-gray-700: #414650;
+  --color-gray-800: #30353F;
+  --color-gray-850: #262A33;
+  --color-gray-900: #1B1F27;
+  --color-gray-925: #13161D;
+  --color-gray-950: #0B0E13;
   --color-brand-50: #FFE8E8;
   --color-brand-100: #FFD0D1;
   --color-brand-200: #FFB0B2;
@@ -77,6 +80,20 @@
   --color-red-600: #8F1717;
   --color-red-700: #6B1010;
   --color-red-900: #470A0A;
+  --color-yellow-50: #FEF6DC;
+  --color-yellow-100: #FBECBB;
+  --color-yellow-400: #F7CE45;
+  --color-yellow-500: #F6C523;
+  --color-yellow-600: #DAAA0B;
+  --color-yellow-700: #795E06;
+  --color-yellow-900: #685103;
+  --color-lemon-50: #FEFBDC;
+  --color-lemon-100: #FBF5BB;
+  --color-lemon-400: #F7E545;
+  --color-lemon-500: #F5DF14;
+  --color-lemon-600: #DAC50B;
+  --color-lemon-700: #6F6506;
+  --color-lemon-900: #5E5502;
   --radius-base: 0.625rem;
   --tracking-tighter: -0.05em;
   --tracking-tight: -0.025em;
@@ -132,6 +149,9 @@
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-raised-foreground: var(--surface-raised-foreground);
   --color-input: var(--input);
   --color-ring: var(--ring);
   --color-chart-1: var(--chart-1);
@@ -190,36 +210,42 @@
 :root {
   --base-white: #FFFFFF;
   --base-black: #000000;
-  --gray-50: #FAFAFA;
-  --gray-100: #F5F5F5;
-  --gray-200: #E9EAEB;
-  --gray-300: #D5D7DA;
-  --gray-400: #A4A7AE;
+  --gray-50: #F9FAFB;
+  --gray-100: #F4F5F7;
+  --gray-200: #E9EAED;
+  --gray-300: #D5D7DB;
+  --gray-400: #A3A7AE;
+  --gray-450: #898E96;
   --gray-500: #717680;
   --gray-600: #535862;
-  --gray-700: #414651;
-  --gray-800: #252B37;
-  --gray-900: #181D27;
-  --gray-950: #0D0D12;
+  --gray-700: #414650;
+  --gray-800: #30353F;
+  --gray-850: #262A33;
+  --gray-900: #1B1F27;
+  --gray-925: #13161D;
+  --gray-950: #0B0E13;
 }
 
 /* === Light Mode: Neutral (global theme) === */
 :root {
   --background: var(--base-white);
   --foreground: var(--gray-950);
-  --card: var(--base-white);
+  --card: var(--gray-200);
   --card-foreground: var(--gray-950);
   --popover: var(--base-white);
   --popover-foreground: var(--gray-950);
+  --surface-raised: var(--base-white);
+  --surface-raised-foreground: var(--gray-950);
   --muted: var(--gray-50);
   --muted-foreground: var(--gray-600);
-  --accent: var(--gray-100);
+  --accent: var(--gray-200);
   --accent-foreground: var(--gray-900);
   --primary: var(--gray-950);
   --primary-foreground: var(--gray-100);
   --secondary: var(--gray-50);
   --secondary-foreground: var(--gray-900);
   --border: var(--gray-300);
+  --border-strong: var(--gray-500);
   --input: var(--gray-200);
   --ring: var(--gray-500);
   --destructive: #B32020;
@@ -269,21 +295,24 @@
 
 /* === Dark Mode: Neutral === */
 .dark {
-  --background: var(--base-black);
+  --background: var(--gray-950);
   --foreground: var(--gray-50);
-  --card: var(--gray-950);
+  --card: var(--gray-900);
   --card-foreground: var(--gray-50);
-  --popover: var(--gray-950);
+  --popover: var(--gray-850);
   --popover-foreground: var(--gray-50);
-  --muted: var(--gray-950);
+  --surface-raised: var(--gray-850);
+  --surface-raised-foreground: var(--gray-50);
+  --muted: var(--gray-900);
   --muted-foreground: var(--gray-400);
   --accent: var(--gray-800);
   --accent-foreground: var(--gray-50);
   --primary: var(--base-white);
   --primary-foreground: var(--gray-900);
-  --secondary: var(--gray-900);
+  --secondary: var(--gray-850);
   --secondary-foreground: var(--gray-200);
   --border: var(--gray-700);
+  --border-strong: var(--gray-500);
   --input: var(--gray-800);
   --ring: var(--gray-400);
   --destructive: #D42B2B;
@@ -349,6 +378,8 @@
   --border: #D45558;
   --input: #ED6A6D;
   --ring: #B33E41;
+  --gradient-from: #940538;
+  --gradient-to: #D04649;
 }
 
 .theme-class {
@@ -369,8 +400,13 @@
   --border: #1A5FE0;
   --input: #2E74FF;
   --ring: #0F4BBC;
+  --gradient-from: #112FBE;
+  --gradient-to: #1A5FE0;
 }
 
+/* theme-streak: laranja da sequência (streak). theme-private é alias DEPRECIADO
+   com os mesmos valores — na 2.0 passa a ser o amarelo do Private Talk. */
+.theme-streak,
 .theme-private {
   --background: #FFEDE0;
   --foreground: #BC4818;
@@ -389,8 +425,13 @@
   --border: #E56530;
   --input: #FF8041;
   --ring: #BF4D20;
+  --gradient-from: #8E1F03;
+  --gradient-to: #CB4E1A;
 }
 
+/* theme-progress: verde de avanço/acerto. theme-group é alias DEPRECIADO com os
+   mesmos valores — na 2.0 passa a ser o amarelo do Group Talk. */
+.theme-progress,
 .theme-group {
   --background: #E0FFE9;
   --foreground: #008423;
@@ -409,6 +450,8 @@
   --border: #00C234;
   --input: #00E73E;
   --ring: #009929;
+  --gradient-from: #15D886;
+  --gradient-to: #00C234;
 }
 
 .theme-impulse {
@@ -429,6 +472,8 @@
   --border: #7D0DD4;
   --input: #9810FA;
   --ring: #6209A8;
+  --gradient-from: #4901A0;
+  --gradient-to: #7D0DD4;
 }
 
 .theme-positive {
@@ -449,6 +494,8 @@
   --border: #098A5E;
   --input: #0BA370;
   --ring: #07704C;
+  --gradient-from: #01682D;
+  --gradient-to: #09875C;
 }
 
 .theme-warning {
@@ -469,6 +516,8 @@
   --border: #D48E00;
   --input: #F5A800;
   --ring: #AA7200;
+  --gradient-from: #7F4F06;
+  --gradient-to: #A16C00;
 }
 
 .theme-critical {
@@ -489,6 +538,56 @@
   --border: #B32020;
   --input: #D42B2B;
   --ring: #8F1717;
+  --gradient-from: #87051E;
+  --gradient-to: #B32020;
+}
+
+/* ─── Amarelos de produto (OPT-IN da 1.x) ───
+   Group Talk (Sol) e Private Talk (Limão). Na 2.0 estes valores passam para
+   .theme-group e .theme-private e os nomes "-next" saem. Preenchimento amarelo
+   sempre com texto escuro: branco sobre amarelo nunca chega a 4,5:1. */
+.theme-group-talk-next {
+  --background: #FEF6DC;
+  --foreground: #896A04;
+  --card: #FEF6DC;
+  --card-foreground: #896A04;
+  --popover: #FEF6DC;
+  --popover-foreground: #896A04;
+  --muted: #FBECBB;
+  --muted-foreground: #795E06;
+  --accent: #FEF6DC;
+  --accent-foreground: #685103;
+  --primary: #F6C523;
+  --primary-foreground: #1A1400;
+  --secondary: #FEF6DC;
+  --secondary-foreground: #0a0a0a;
+  --border: #F6C523;
+  --input: #F7CE45;
+  --ring: #DAAA0B;
+  --gradient-from: #FFE268;
+  --gradient-to: #F6C523;
+}
+
+.theme-private-talk-next {
+  --background: #FEFBDC;
+  --foreground: #7F7203;
+  --card: #FEFBDC;
+  --card-foreground: #7F7203;
+  --popover: #FEFBDC;
+  --popover-foreground: #7F7203;
+  --muted: #FBF5BB;
+  --muted-foreground: #6F6506;
+  --accent: #FEFBDC;
+  --accent-foreground: #5E5502;
+  --primary: #F5DF14;
+  --primary-foreground: #1A1400;
+  --secondary: #FEFBDC;
+  --secondary-foreground: #0a0a0a;
+  --border: #F5DF14;
+  --input: #F7E545;
+  --ring: #DAC50B;
+  --gradient-from: #FFF65C;
+  --gradient-to: #F5DF14;
 }
 
 /* === Theme Variations: Dark Mode === */
@@ -505,13 +604,15 @@
   --muted-foreground: #FFB0B2;
   --accent: rgba(237, 106, 109, 0.3);
   --accent-foreground: #FFE8E8;
-  --primary: #E4272B;
+  --primary: #CB4B51;
   --primary-foreground: #FFFFFF;
   --secondary: rgba(237, 106, 109, 0.1);
   --secondary-foreground: #ffffff;
   --border: #ED6A6D;
   --input: #F57B7E;
   --ring: #F57B7E;
+  --gradient-from: #93073C;
+  --gradient-to: #CB4B51;
 }
 
 .dark .theme-class,
@@ -533,8 +634,12 @@
   --border: #2E74FF;
   --input: #4D8AFF;
   --ring: #4D8AFF;
+  --gradient-from: #1B3ADC;
+  --gradient-to: #226CFF;
 }
 
+.dark .theme-streak,
+.theme-streak:is(.dark *),
 .dark .theme-private,
 .theme-private:is(.dark *) {
   --background: rgba(255, 128, 65, 0.1);
@@ -554,8 +659,12 @@
   --border: #FF8041;
   --input: #FF9158;
   --ring: #FF9158;
+  --gradient-from: #911C01;
+  --gradient-to: #D34600;
 }
 
+.dark .theme-progress,
+.theme-progress:is(.dark *),
 .dark .theme-group,
 .theme-group:is(.dark *) {
   --background: rgba(0, 231, 62, 0.1);
@@ -575,6 +684,8 @@
   --border: #00E73E;
   --input: #1AFF61;
   --ring: #1AFF61;
+  --gradient-from: #0AFD9C;
+  --gradient-to: #00E73E;
 }
 
 .dark .theme-impulse,
@@ -596,6 +707,8 @@
   --border: #9810FA;
   --input: #B844FF;
   --ring: #B844FF;
+  --gradient-from: #5F04C7;
+  --gradient-to: #9810FA;
 }
 
 .dark .theme-positive,
@@ -617,6 +730,8 @@
   --border: #0BA370;
   --input: #1EC485;
   --ring: #1EC485;
+  --gradient-from: #086830;
+  --gradient-to: #09875D;
 }
 
 .dark .theme-warning,
@@ -638,6 +753,8 @@
   --border: #F5A800;
   --input: #FDC028;
   --ring: #FDC028;
+  --gradient-from: #FEBD2C;
+  --gradient-to: #F5A800;
 }
 
 .dark .theme-critical,
@@ -659,7 +776,156 @@
   --border: #D42B2B;
   --input: #ED5555;
   --ring: #ED5555;
-}
+  --gradient-from: #AA0228;
+  --gradient-to: #D42B2B;
+}
+
+.dark .theme-group-talk-next,
+.theme-group-talk-next:is(.dark *) {
+  --background: rgba(250, 205, 56, 0.1);
+  --foreground: #FACD38;
+  --card: rgba(250, 205, 56, 0.1);
+  --card-foreground: #FACD38;
+  --popover: rgba(250, 205, 56, 0.1);
+  --popover-foreground: #FACD38;
+  --muted: rgba(250, 205, 56, 0.2);
+  --muted-foreground: #FCE69C;
+  --accent: rgba(250, 205, 56, 0.3);
+  --accent-foreground: #FEF6DC;
+  --primary: #FACD38;
+  --primary-foreground: #0a0a0a;
+  --secondary: rgba(250, 205, 56, 0.1);
+  --secondary-foreground: #ffffff;
+  --border: #FACD38;
+  --input: #FBD760;
+  --ring: #FBD760;
+  --gradient-from: #FFEA8C;
+  --gradient-to: #FACD38;
+}
+
+.dark .theme-private-talk-next,
+.theme-private-talk-next:is(.dark *) {
+  --background: rgba(250, 231, 56, 0.1);
+  --foreground: #FAE738;
+  --card: rgba(250, 231, 56, 0.1);
+  --card-foreground: #FAE738;
+  --popover: rgba(250, 231, 56, 0.1);
+  --popover-foreground: #FAE738;
+  --muted: rgba(250, 231, 56, 0.2);
+  --muted-foreground: #FCF39C;
+  --accent: rgba(250, 231, 56, 0.3);
+  --accent-foreground: #FEFBDC;
+  --primary: #FAE738;
+  --primary-foreground: #0a0a0a;
+  --secondary: rgba(250, 231, 56, 0.1);
+  --secondary-foreground: #ffffff;
+  --border: #FAE738;
+  --input: #FBEB60;
+  --ring: #FBEB60;
+  --gradient-from: #FFFB91;
+  --gradient-to: #FAE738;
+}
+
+/* >>> cycle-gradients — catálogo de degradês (1.34.0)
+   Uso: tema + preset no mesmo elemento (ou tema num ancestral):
+     <div className="theme-class gradient-linear-br text-primary-foreground">…</div>
+   Ponte de família: some a classe da ponte (troca os dois tons):
+     <div className="theme-group-talk-next gradient-practice gradient-linear-r">…</div>
+   Regras: interpolação em OKLCH (a 1ª declaração é a reserva sem "in oklch");
+   os dois tons de cada tema passam 4,5:1 contra --primary-foreground, então
+   qualquer preset/direção é seguro para o texto do preenchimento.
+   Escopo: cards de produto preenchidos, bloco do ícone e selos de produto —
+   não usar em botões, texto, inputs ou barras de progresso.
+   Esta seção é IDÊNTICA em tokens.css e globals.css (travado por teste). */
+
+/* Pontes de família */
+.gradient-practice { /* Group Talk → Private Talk (Sol → Limão) */
+  --gradient-from: #F6C523;
+  --gradient-to: #F5DF14;
+}
+.dark .gradient-practice,
+.gradient-practice:is(.dark *) {
+  --gradient-from: #FACD38;
+  --gradient-to: #FAE738;
+}
+.gradient-learning { /* Impulse → Class */
+  --gradient-from: #7D0DD4;
+  --gradient-to: #1A5FE0;
+}
+.dark .gradient-learning,
+.gradient-learning:is(.dark *) {
+  --gradient-from: #9810FA;
+  --gradient-to: #226CFF;
+}
+
+/* Linear — a ponta de mais contraste (--gradient-from) sai do lado oposto à direção. */
+.gradient-linear-b { /* para baixo */
+  background-image: linear-gradient(180deg, var(--gradient-from), var(--gradient-to));
+  background-image: linear-gradient(180deg in oklch, var(--gradient-from), var(--gradient-to));
+}
+.gradient-linear-t { /* para cima */
+  background-image: linear-gradient(0deg, var(--gradient-from), var(--gradient-to));
+  background-image: linear-gradient(0deg in oklch, var(--gradient-from), var(--gradient-to));
+}
+.gradient-linear-r { /* para a direita */
+  background-image: linear-gradient(90deg, var(--gradient-from), var(--gradient-to));
+  background-image: linear-gradient(90deg in oklch, var(--gradient-from), var(--gradient-to));
+}
+.gradient-linear-l { /* para a esquerda */
+  background-image: linear-gradient(270deg, var(--gradient-from), var(--gradient-to));
+  background-image: linear-gradient(270deg in oklch, var(--gradient-from), var(--gradient-to));
+}
+.gradient-linear-br { /* diagonal ↘ (padrão) */
+  background-image: linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
+  background-image: linear-gradient(135deg in oklch, var(--gradient-from), var(--gradient-to));
+}
+.gradient-linear-tr { /* diagonal ↗ */
+  background-image: linear-gradient(45deg, var(--gradient-from), var(--gradient-to));
+  background-image: linear-gradient(45deg in oklch, var(--gradient-from), var(--gradient-to));
+}
+.gradient-linear-bl { /* diagonal ↙ */
+  background-image: linear-gradient(225deg, var(--gradient-from), var(--gradient-to));
+  background-image: linear-gradient(225deg in oklch, var(--gradient-from), var(--gradient-to));
+}
+.gradient-linear-tl { /* diagonal ↖ */
+  background-image: linear-gradient(315deg, var(--gradient-from), var(--gradient-to));
+  background-image: linear-gradient(315deg in oklch, var(--gradient-from), var(--gradient-to));
+}
+/* Radial — brilho na cor do tema (--gradient-to) no ponto indicado. */
+.gradient-glow-tr { /* canto superior direito */
+  background-image: radial-gradient(120% 120% at 100% 0%, var(--gradient-to), var(--gradient-from));
+  background-image: radial-gradient(120% 120% at 100% 0% in oklch, var(--gradient-to), var(--gradient-from));
+}
+.gradient-glow-br { /* canto inferior direito */
+  background-image: radial-gradient(120% 120% at 100% 100%, var(--gradient-to), var(--gradient-from));
+  background-image: radial-gradient(120% 120% at 100% 100% in oklch, var(--gradient-to), var(--gradient-from));
+}
+.gradient-glow-tl { /* canto superior esquerdo */
+  background-image: radial-gradient(120% 120% at 0% 0%, var(--gradient-to), var(--gradient-from));
+  background-image: radial-gradient(120% 120% at 0% 0% in oklch, var(--gradient-to), var(--gradient-from));
+}
+.gradient-glow-bl { /* canto inferior esquerdo */
+  background-image: radial-gradient(120% 120% at 0% 100%, var(--gradient-to), var(--gradient-from));
+  background-image: radial-gradient(120% 120% at 0% 100% in oklch, var(--gradient-to), var(--gradient-from));
+}
+.gradient-glow-c { /* centro */
+  background-image: radial-gradient(90% 90% at 50% 50%, var(--gradient-to), var(--gradient-from));
+  background-image: radial-gradient(90% 90% at 50% 50% in oklch, var(--gradient-to), var(--gradient-from));
+}
+/* Compostos */
+.gradient-spotlight { /* holofote à direita sobre a ponta de contraste (texto à esquerda) */
+  background-image: radial-gradient(60% 90% at 85% 55%, var(--gradient-to), transparent), linear-gradient(var(--gradient-from), var(--gradient-from));
+  background-image: radial-gradient(60% 90% at 85% 55% in oklch, var(--gradient-to), transparent), linear-gradient(var(--gradient-from), var(--gradient-from));
+}
+.gradient-mesh { /* malha com dois focos */
+  background-image: radial-gradient(70% 70% at 0% 0%, var(--gradient-from), transparent), radial-gradient(80% 80% at 100% 100%, var(--gradient-to), transparent), linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
+  background-image: radial-gradient(70% 70% at 0% 0% in oklch, var(--gradient-from), transparent), radial-gradient(80% 80% at 100% 100% in oklch, var(--gradient-to), transparent), linear-gradient(135deg in oklch, var(--gradient-from), var(--gradient-to));
+}
+.gradient-band { /* faixa diagonal: ponta de contraste firme até 35% */
+  background-image: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-from) 35%, var(--gradient-to) 100%);
+  background-image: linear-gradient(135deg in oklch, var(--gradient-from) 0%, var(--gradient-from) 35%, var(--gradient-to) 100%);
+}
+/* <<< cycle-gradients */
 
 /* === Base layer === */
 @layer base {

package/dist/ui/progress-dot.d.ts

@@ -16,7 +16,7 @@ interface ProgressDotProps extends React.ComponentProps<"div">, VariantProps<typ
     value: number;
     /** Classe de tema aplicada em todos os dots preenchidos (ex: "theme-class") */
     theme?: string;
-    /** Temas individuais por dot (ex: ["theme-class", "theme-brand", undefined, "theme-private"]). Sobrescreve `theme` para dots que tiverem valor. */
+    /** Temas individuais por dot (ex: ["theme-class", "theme-brand", undefined, "theme-streak"]). Sobrescreve `theme` para dots que tiverem valor. */
     themes?: (string | undefined)[];
 }
 declare function ProgressDot({ stages, value, size, theme, themes, className, ...props }: ProgressDotProps): react_jsx_runtime.JSX.Element;

package/dist/ui/progress-dot.js

@@ -1,5 +1,5 @@
 "use client";
-export { ProgressDot, dotVariants, progressDotVariants } from '../chunk-E7MMJTJY.js';
+export { ProgressDot, dotVariants, progressDotVariants } from '../chunk-SQRNXYYD.js';
 import '../chunk-LYTC7UMN.js';
 import '../chunk-W4KJCBMW.js';
 import '../chunk-2NMEKWO5.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluencypassdevs/cycle",
-  "version": "1.33.1",
+  "version": "1.35.0",
   "description": "Cycle Design System — UI component library by Fluencypass (produto)",
   "license": "MIT",
   "repository": {