@fluencypassdevs/cycle 1.34.0 → 1.35.0

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"],

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;
@@ -146,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);
@@ -204,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;
@@ -283,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;

package/package.json

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