@cloudgrid-io/ui 0.27.1 → 0.28.0

package/dist/lib/cloudgrid-cn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cloudgrid-cn.d.ts","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,+BAAgC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,0KAcnB,CAAA;AAWV,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"cloudgrid-cn.d.ts","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,+BAAgC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,kQAqBnB,CAAA;AAWV,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/cloudgrid-cn.js

@@ -62,19 +62,26 @@ import { extendTailwindMerge } from "tailwind-merge";
  */
 export const BRAND_FONT_WEIGHTS = ["heavy", "regular"];
 export const BRAND_FONT_SIZES = [
+    "display-3xl",
+    "display-2xl",
     "display-xl",
     "display-lg",
     "display-md",
     "display-sm",
+    "title-lg",
+    "title-md",
+    "title-sm",
     "heading-lg",
     "heading-md",
     "heading-sm",
+    "body-xl",
     "body-lg",
     "body-md",
     "body-sm",
     "caption",
     "mono",
     "label",
+    "eyebrow",
 ];
 const twMerge = extendTailwindMerge({
     extend: {

package/dist/lib/cloudgrid-cn.js.map

@@ -1 +1 @@
-{"version":3,"file":"cloudgrid-cn.js","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAA;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,MAAM;IACN,OAAO;CACC,CAAA;AAEV,MAAM,OAAO,GAAG,mBAAmB,CAAC;IAClC,MAAM,EAAE;QACN,WAAW,EAAE;YACX,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,gBAAgB,CAAC,EAAE,CAAC;YAC9C,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,kBAAkB,CAAC,EAAE,CAAC;SACnD;KACF;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC9B,CAAC"}
+{"version":3,"file":"cloudgrid-cn.js","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAA;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,aAAa;IACb,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,UAAU;IACV,UAAU;IACV,UAAU;IACV,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,MAAM;IACN,OAAO;IACP,SAAS;CACD,CAAA;AAEV,MAAM,OAAO,GAAG,mBAAmB,CAAC;IAClC,MAAM,EAAE;QACN,WAAW,EAAE;YACX,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,gBAAgB,CAAC,EAAE,CAAC;YAC9C,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,kBAAkB,CAAC,EAAE,CAAC;SACnD;KACF;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC9B,CAAC"}

package/dist/theme.css

@@ -81,6 +81,10 @@
   --color-ink: var(--cg-text-primary);
   --color-body: var(--cg-text-secondary);
   --color-faint: var(--cg-text-muted);
+  /* The muted rung that clears the 4.5:1 body-text floor on all four grounds
+     (#232). text-faint is large-text-legal only; this is what a caption a reader
+     has to read should use. */
+  --color-faint-strong: var(--cg-text-muted-strong);
   --color-placeholder: var(--cg-text-placeholder);
   --color-inverse: var(--cg-text-inverse);
   --color-on-primary: var(--cg-text-on-primary);
@@ -95,6 +99,50 @@
   --color-lime-press: var(--cg-secondary-press);
   --color-cyan: var(--cg-tertiary);
   --color-cyan-press: var(--cg-tertiary-press);
+
+  /* ---- the hue ramps (#239) ----
+     The rungs the canonical Figma frames spend on chips, badges, avatar strokes,
+     step diagrams and the enterprise button. tokens.css's `hue-ramps` note has
+     the provenance of each value; this block is only about the NAMES.
+
+     Violet takes numbered rungs under `brand`, because brand is already this
+     package's word for the hue and Tailwind ships no `brand` scale to collide
+     with. --color-brand stays the 900, so bg-brand and bg-brand-200 coexist.
+
+     Cyan and lime take SUFFIXED names rather than their Figma rung numbers.
+     --color-cyan-200 and --color-lime-700 would be legal here and would silently
+     repaint every bg-cyan-200 and bg-lime-700 in a consumer's own markup, since
+     Tailwind ships both of those scales. That is rule 4's failure pointed at
+     Tailwind instead of shadcn, and it is worse: shadcn's names arrive with this
+     package, Tailwind's were already there and the consumer never opted in.
+
+     The cool neutral family takes `steel` for the same reason twice over: Figma
+     calls it color/neutral/*, this package's neutral ramp is a different hue
+     family at those numbers, and Tailwind ships `slate`. */
+  --color-brand-100: var(--cg-violet-100);
+  --color-brand-150: var(--cg-violet-150);
+  --color-brand-200: var(--cg-violet-200);
+  --color-brand-300: var(--cg-violet-300);
+  --color-brand-400: var(--cg-violet-400);
+  --color-brand-500: var(--cg-violet-500);
+  --color-brand-600: var(--cg-violet-600);
+  --color-brand-700: var(--cg-violet-700);
+  --color-brand-900: var(--cg-violet-900);
+  --color-cyan-tint: var(--cg-cyan-200);
+  --color-cyan-wash: var(--cg-cyan-300);
+  --color-cyan-fill: var(--cg-cyan-400);
+  --color-lime-tint: var(--cg-lime-200);
+  --color-lime-wash: var(--cg-lime-600);
+  --color-lime-edge: var(--cg-lime-700);
+  /* The design's cool neutrals. `steel` is the quiet-text tone the frames put on
+     every footer link; `steel-strong` is the rung that actually clears 4.5:1 on a
+     light ground, and the one to reach for when the text is content. */
+  --color-steel: var(--cg-slate-500);
+  --color-steel-strong: var(--cg-slate-600);
+  --color-steel-quiet: var(--cg-slate-300);
+  /* Figma's "stone". A warm near-black beside --color-ink's flat #222222. Its
+     role in the design is not yet known; see the token's own note. */
+  --color-stone: var(--cg-stone-800);
   /* The fourth brand hue (#197). NOT `--color-accent`: rule 4 again — shadcn
      owns `accent` and it is a background there, which is the collision that
      once rendered a badge invisible. `azure` is the hue name, alongside brand /
@@ -205,6 +253,9 @@
   --font-sans: var(--cg-font-body);
   --font-body: var(--cg-font-body);
   --font-display: var(--cg-font-display);
+  /* The eyebrow-and-button face (#240). Not a fallback: the frames use Manrope
+     for exactly those two jobs while the body face is Space Grotesk. */
+  --font-ui: var(--cg-font-ui);
   --font-mono: var(--cg-font-mono);
 
   /* ---- type scale ----
@@ -229,6 +280,12 @@
      tracking or weight, so they get none: a companion that invents a value is
      worse than an absent one, since it forces a weight where a component expected
      to inherit. Closes the gap noted in notes.md after #30. */
+  --text-display-3xl: var(--cg-display-3xl);
+  --text-display-3xl--line-height: var(--cg-display-line-tight);
+  --text-display-3xl--letter-spacing: var(--cg-title-tracking);
+  --text-display-2xl: var(--cg-display-2xl);
+  --text-display-2xl--line-height: var(--cg-display-line-tight);
+  --text-display-2xl--letter-spacing: var(--cg-title-tracking);
   --text-display-xl: var(--cg-display-xl);
   --text-display-xl--line-height: var(--cg-display-line);
   --text-display-xl--letter-spacing: var(--cg-display-tracking);
@@ -241,12 +298,30 @@
   --text-display-sm: var(--cg-display-sm);
   --text-display-sm--line-height: var(--cg-display-line);
   --text-display-sm--letter-spacing: var(--cg-display-tracking);
+  /* The display face at card scale (#239). A separate ramp from display-*
+     because the two disagree everywhere they overlap; tokens.css's
+     `tanker-title-ramp` note has the table. --text-title-sm and
+     --text-heading-md are both 20px and differ in face and leading, which is
+     the whole reason the ramp is separate. */
+  --text-title-lg: var(--cg-title-lg);
+  --text-title-lg--line-height: var(--cg-title-line);
+  --text-title-lg--letter-spacing: var(--cg-title-tracking);
+  --text-title-md: var(--cg-title-md);
+  --text-title-md--line-height: var(--cg-title-line);
+  --text-title-md--letter-spacing: var(--cg-title-tracking);
+  --text-title-sm: var(--cg-title-sm);
+  --text-title-sm--line-height: var(--cg-title-line);
+  --text-title-sm--letter-spacing: var(--cg-title-tracking);
   --text-heading-lg: var(--cg-heading-lg);
   --text-heading-lg--line-height: var(--cg-heading-line);
   --text-heading-md: var(--cg-heading-md);
   --text-heading-md--line-height: var(--cg-heading-line);
   --text-heading-sm: var(--cg-heading-sm);
   --text-heading-sm--line-height: var(--cg-heading-line);
+  /* The lede size on all six canonical frames, and the size this ramp could not
+     spell: body-lg is 19 and heading-md is 20 with the wrong leading. */
+  --text-body-xl: var(--cg-body-xl);
+  --text-body-xl--line-height: var(--cg-body-line);
   --text-body-lg: var(--cg-body-lg);
   --text-body-lg--line-height: var(--cg-body-line);
   --text-body-md: var(--cg-body-md);
@@ -260,6 +335,15 @@
   --text-label: var(--cg-label-size);
   --text-label--line-height: var(--cg-body-line);
   --text-label--font-weight: var(--cg-label-weight);
+  /* The eyebrow, as Figma's own bound text variable declares it: 14px, 600,
+     1.2, 0.1em. `uppercase` stays the caller's, the way Eyebrow's docblock
+     already says. Note --cg-eyebrow-weight is 600 and --cg-label-weight is 500;
+     they are different rungs and the one-pixel size difference is not the
+     point. */
+  --text-eyebrow: var(--cg-eyebrow-size);
+  --text-eyebrow--line-height: var(--cg-eyebrow-line);
+  --text-eyebrow--letter-spacing: var(--cg-eyebrow-tracking);
+  --text-eyebrow--font-weight: var(--cg-eyebrow-weight);
 
   /* ---- weights ----
      `--font-weight-display` is unreachable and kept only for completeness. Both
@@ -284,11 +368,18 @@
 
   /* ---- leading and tracking ---- */
   --leading-display: var(--cg-display-line);
+  /* leading-none, which is what every Tanker node in every frame actually uses.
+     --leading-display stays 1.06; it was tuned for a condensed face nothing
+     ships any more and retuning it moves text that exists today (#240). */
+  --leading-display-tight: var(--cg-display-line-tight);
+  --leading-title: var(--cg-title-line);
   --leading-heading: var(--cg-heading-line);
   --leading-body: var(--cg-body-line);
   --leading-mono: var(--cg-mono-line);
   --tracking-display: var(--cg-display-tracking);
   --tracking-body: var(--cg-body-tracking);
+  --tracking-title: var(--cg-title-tracking);
+  --tracking-eyebrow: var(--cg-eyebrow-tracking);
 
   /* ---- corners ---- */
   /* The smallest corner in the system, added for the entity card's 20px kind
@@ -299,7 +390,11 @@
   --radius-md: var(--cg-radius-md);
   --radius-lg: var(--cg-radius-lg);
   --radius-xl: var(--cg-radius-xl);
+  /* The container corner. In these frames 16 is what a CONTROL is rounded to and
+     20 is what a CONTAINER is rounded to, consistently, on all six. */
+  --radius-container: var(--cg-radius-container);
   --radius-2xl: var(--cg-radius-2xl);
+  --radius-3xl: var(--cg-radius-3xl);
   --radius-pill: var(--cg-radius-pill);
 
   /* ---- elevation ----