@cloudgrid-io/ui 0.40.0 → 0.41.0

package/dist/tokens.css

@@ -389,6 +389,15 @@
   --cg-primary-tint: #eeecfe;
   --cg-secondary-press: #a6cf57;
   --cg-tertiary-press: #4dd8e0;
+  /*
+     Figma "Tertiary Dark" (CloudGrid-2026; the header menus' "+ New", node 11324:90629).
+
+     Teal text links ("+ New", "Explore All", "Open", "Dismiss") and the line of the rail's scroll button.
+
+     Measures 1.92:1 on white and 1.70:1 on the page ground: under AA, used knowingly as a design decision (Gilad, 2026-11-01). Every link drawn in it also carries an accessible name.
+
+     Not --cg-tertiary-press (#4dd8e0), which is the cta's pressed fill. */
+  --cg-tertiary-dark: #45cdd4;
   /*
      The pressed and hovered rung of the accent, and --cg-link-hover.
 
@@ -1606,8 +1615,9 @@
      a mark flipping is a light disc with a white glyph on the ink surface, which
      renders perfectly and shows nothing. --cg-text-on-accent is the glyph on all
      three, and it measures 12.74:1, 14.65:1 and 10.24:1 on them. */
-  /* SOURCE: the founder's draft, the Inspiration badge. */
-  --cg-kind-inspiration: #fae4b3;
+  /*
+     SOURCE: the 2026 Figma (CloudGrid-2026, the Tile's Inspiration badge, node I11324:91033), paint style "Secondary 20" (#382). It was #fae4b3, the founder's 2025 draft; the Gilad-approved 2026 frames put the lightbulb on lime. Ink on it measures 14.56:1. */
+  --cg-kind-inspiration: #f0f8e1;
   /* SOURCE: the founder's draft, the App badge. */
   --cg-kind-app: #dffbfc;
   /*
@@ -1640,6 +1650,12 @@
      0.22. Inside the panel and ink scopes it is the brand cyan itself, which already clears
      (4.01:1 on #5a47f0, 10.92:1 on #222222). A data colour, never text. */
   --cg-data-cyan: #0a959b;
+
+  /* ---- avatar ----
+     The grid avatar grounds, raw hex in the CloudGrid-2026 frames (11323:8600, 11324:90635, 11324:90641). Letters are --cg-ink: 12.02:1, 10.74:1 and 11.43:1. An identity colour, so it does not flip on the panel or ink surfaces. */
+  --cg-avatar-pastel-1: #dce4bc;
+  --cg-avatar-pastel-2: #bcd9e4;
+  --cg-avatar-pastel-3: #bce4ca;
 }
 
 [data-cg-surface='panel'] {

package/dist/tokens.json

@@ -33,6 +33,7 @@
       "--cg-primary-tint": "#eeecfe",
       "--cg-secondary-press": "#a6cf57",
       "--cg-tertiary-press": "#4dd8e0",
+      "--cg-tertiary-dark": "#45cdd4",
       "--cg-accent-press": "#0052da",
       "--cg-neutral-0": "#ffffff",
       "--cg-neutral-25": "#f1f1f6",
@@ -210,10 +211,13 @@
       "--cg-scrim-blur": "6.8px",
       "--cg-scrim-strong": "rgba(34, 34, 34, 0.82)",
       "--cg-hover": "rgba(34, 34, 34, 0.045)",
-      "--cg-kind-inspiration": "#fae4b3",
+      "--cg-kind-inspiration": "#f0f8e1",
       "--cg-kind-app": "#dffbfc",
       "--cg-kind-agent": "#d1c9ff",
-      "--cg-data-cyan": "#0a959b"
+      "--cg-data-cyan": "#0a959b",
+      "--cg-avatar-pastel-1": "#dce4bc",
+      "--cg-avatar-pastel-2": "#bcd9e4",
+      "--cg-avatar-pastel-3": "#bce4ca"
     },
     "panel": {
       "--cg-text-primary": "#ffffff",

package/dist/ui/button.d.ts

@@ -2,7 +2,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "ghost" | "default" | "secondary" | "destructive" | "outline" | "cta" | "tertiary-soft" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | "2xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
 export { Button, buttonVariants };

package/dist/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EAgFnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EA0FnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/button.js

@@ -61,10 +61,20 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
             xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-caption in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
             sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-caption in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
             lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            /* The 2026 Button component (Figma 4919:688) has two sizes, S and M, and
+               Home draws both (#382): Invite is S, Add is M. Named `xl` and `2xl`
+               rather than `s` and `m` because `sm` already exists and means 28.
+               Radius 16, gap 12, the UI face at Bold 15, a 20px glyph. The frame's
+               10 and 14 of vertical padding are the centring inside the height,
+               not a value to set; the 1px transparent border is inside it too. */
+            xl: "h-10 gap-3 rounded-xl px-5 font-ui font-bold leading-none [&_svg:not([class*='size-'])]:size-5",
+            "2xl": "h-12 gap-3 rounded-xl px-8 font-ui font-bold leading-none [&_svg:not([class*='size-'])]:size-5",
             icon: "size-8",
             "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
             "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
             "icon-lg": "size-9",
+            /* The icon-only M: the scroll rail's arrow, 48 square at radius 16 (#382). */
+            "icon-2xl": "size-12 rounded-xl [&_svg:not([class*='size-'])]:size-5",
         },
     },
     defaultVariants: {

package/dist/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,MAAM,cAAc,GAAG,GAAG,CACxB,8lBAA8lB,EAC9lB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,wDAAwD;YACjE;;;;;;;;;;;;;;;;;;;;;;;;;;iFA0BqE;YACrE,GAAG,EAAE,wEAAwE;YAC7E;;;;;;;;;;;;;;6CAciC;YACjC,eAAe,EACb,qGAAqG;YACvG,OAAO,EACL,iLAAiL;YACnL,SAAS,EACP,gLAAgL;YAClL,KAAK,EACH,kHAAkH;YACpH,WAAW,EACT,6NAA6N;YAC/N,IAAI,EAAE,iDAAiD;SACxD;QACD,IAAI,EAAE;YACJ,OAAO,EACL,sFAAsF;YACxF,EAAE,EAAE,oNAAoN;YACxN,EAAE,EAAE,wNAAwN;YAC5N,EAAE,EAAE,sFAAsF;YAC1F,IAAI,EAAE,QAAQ;YACd,SAAS,EACP,yHAAyH;YAC3H,SAAS,EACP,oFAAoF;YACtF,SAAS,EAAE,QAAQ;SACpB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAA;AAED,SAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,GAAG,KAAK,EACoD;IAC5D,OAAO,CACL,KAAC,eAAe,iBACJ,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,KACvD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,MAAM,cAAc,GAAG,GAAG,CACxB,8lBAA8lB,EAC9lB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,wDAAwD;YACjE;;;;;;;;;;;;;;;;;;;;;;;;;;iFA0BqE;YACrE,GAAG,EAAE,wEAAwE;YAC7E;;;;;;;;;;;;;;6CAciC;YACjC,eAAe,EACb,qGAAqG;YACvG,OAAO,EACL,iLAAiL;YACnL,SAAS,EACP,gLAAgL;YAClL,KAAK,EACH,kHAAkH;YACpH,WAAW,EACT,6NAA6N;YAC/N,IAAI,EAAE,iDAAiD;SACxD;QACD,IAAI,EAAE;YACJ,OAAO,EACL,sFAAsF;YACxF,EAAE,EAAE,oNAAoN;YACxN,EAAE,EAAE,wNAAwN;YAC5N,EAAE,EAAE,sFAAsF;YAC1F;;;;;kFAKsE;YACtE,EAAE,EAAE,gGAAgG;YACpG,KAAK,EAAE,gGAAgG;YACvG,IAAI,EAAE,QAAQ;YACd,SAAS,EACP,yHAAyH;YAC3H,SAAS,EACP,oFAAoF;YACtF,SAAS,EAAE,QAAQ;YACnB,8EAA8E;YAC9E,UAAU,EAAE,yDAAyD;SACtE;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAA;AAED,SAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,GAAG,KAAK,EACoD;IAC5D,OAAO,CACL,KAAC,eAAe,iBACJ,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,KACvD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/drawer.d.ts

@@ -152,7 +152,7 @@ declare const drawerViewportVariants: (props?: ({
  */
 declare const drawerPopupVariants: (props?: ({
     side?: "bottom" | "left" | "right" | null | undefined;
-    size?: "lg" | "md" | "xl" | null | undefined;
+    size?: "lg" | "xl" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Drawer({ modal, ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
 declare function DrawerTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",