@cloudgrid-io/ui 0.23.0 → 0.25.0

package/dist/tokens.css

@@ -44,6 +44,39 @@
   --cg-primary: #5a47f0;
   --cg-secondary: #b6de68;
   --cg-tertiary: #60e9f0;
+  /*
+     SOURCE: the founder's 2026-09-10 draft, "Accent", RETUNED. The draft value is
+     #086FFF and this is #0061f0.
+
+     The blue is the fourth brand hue and it has one job the other three do not: the
+     draft spends it on WORDS. "View All", "Explore All", "+ New" are 15px links, so
+     the bar is 4.5:1 (WCAG 1.4.3) and not the 3:1 an indicator gets.
+
+       #086FFF on the page ground #f1f1f6 : 3.94:1   <-- under the text floor
+       #086FFF on the card        #ffffff : 4.44:1   <-- also under it
+       #0061f0 on the page ground         : 4.70:1
+       #0061f0 on the card                : 5.29:1
+       white   on #0061f0                 : 5.29:1
+
+     Derived rather than picked: the draft value in OKLCH is L 0.581 C 0.230 h -1.749,
+     and this is the same hue and chroma walked down in lightness until the page
+     ground clears the floor. The nearest passing value on that ray is #0064f4 at
+     4.5089:1, which clears by 0.009 — a margin a later ground retune would erase in
+     silence — so it is taken one step further to 4.70:1. That margin practice is
+     --cg-neutral-500's, which holds 3.27:1 against a 3:1 bar for the same reason.
+
+     DECLARED AT :root ONLY, like every other value in this group. A brand hue is not
+     a semantic and does not flip; the semantics that SPEND it do. Measured, so the
+     next person does not have to:
+
+       #0061f0 on the purple panel #5a47f0 : 1.10:1   invisible
+       #0061f0 on ink              #222222 : 3.00:1   an indicator, never a word
+
+     which is why --cg-link is #ffffff inside both surface scopes rather than this
+     value. On the ink surface --cg-text-accent is already the lime, and on the panel
+     it is white; the accent role has an on-surface answer in both places and none of
+     them is this blue. Do not "fix" that by copying this value into a dark scope. */
+  --cg-accent: #0061f0;
 
   /* ---- danger ----
      danger (PLACEHOLDER, not a brand value)
@@ -356,6 +389,16 @@
   --cg-primary-tint: #eeecfe;
   --cg-secondary-press: #a6cf57;
   --cg-tertiary-press: #4dd8e0;
+  /*
+     The pressed and hovered rung of the accent, and --cg-link-hover.
+
+     Derived with the step --cg-primary-press takes from --cg-primary rather than
+     chosen: OKLCH L -0.0494, C -0.0078, hue held. One recipe for all four brand
+     hues means a retune of any one of them moves its press with it.
+
+     5.79:1 on the page ground and 6.52:1 on the card, so a link that darkens on
+     hover never crosses a floor on the way. */
+  --cg-accent-press: #0052da;
 
   /* ---- neutrals ---- */
   --cg-neutral-0: #ffffff;
@@ -448,24 +491,70 @@
   --cg-focus-ring: rgba(90, 71, 240, 0.28);
 
   /* ---- link ---- */
-  --cg-link: var(--cg-text-primary);
-  --cg-link-hover: var(--cg-primary);
+  /*
+     The blue, not the ink. The founder's 2026-09-10 draft paints "View All",
+     "Explore All" and "+ New" in the accent, which is the role the fourth brand hue
+     was added for.
+
+     Was {semantic-text.text-primary}: an ink link with a purple hover, which is a
+     link that is invisible as a link until the pointer is over it. 4.70:1 on the
+     page ground.
+
+     Both surface scopes override it to #ffffff and keep the lime hover, unchanged by
+     this. The accent is a light-surface value and says so in its own note. */
+  --cg-link: var(--cg-accent);
+  /*
+     A darkening of the link's own hue rather than a jump to another one. Was
+     {brand.primary}, which read as a visited-link colour change once the resting
+     state stopped being ink. */
+  --cg-link-hover: var(--cg-accent-press);
 
   /* ---- type-families ----
-     H1 is Futura Condensed Extra Bold where it is installed. It is a licensed
-     face, NOT a webfont, so Saira Semi Condensed 800 is the self-hosted
-     fallback that keeps every H1 heavy and condensed everywhere else. Drop the
-     licensed woff2 in and it takes over with no other change. */
-  --cg-font-display: 'Futura Condensed ExtraBold', 'Futura Condensed', 'Saira Semi Condensed Variable', 'Saira Semi Condensed', 'Arial Narrow', sans-serif;
+     One face. The founder's 2026-09-10 draft (#197) is set in Manrope throughout —
+     its only text styles are Manrope Medium 22, SemiBold 15 and Regular 13 — so the
+     display rung is Manrope too and the condensed face is retired.
+
+     What that replaced: Futura Condensed Extra Bold where it was installed, with
+     Saira Semi Condensed 800 self-hosted as the stand-in everywhere else. Neither is
+     loaded any more. --cg-font-display is still its OWN stack rather than an alias of
+     the body one, so a future display face is a one-value edit here and not a
+     re-plumbing.
+
+     The mono face is untouched: it is used only inside prompt and terminal surfaces
+     and the draft says nothing about it. */
+  /*
+     The display rung, now Manrope (#197). Identical to --cg-font-body today and
+     deliberately still a separate token.
+
+     A consumer that wants the licensed Futura back puts it in front of this stack in
+     its own :root and changes nothing else. Note that the blocks reading this rung
+     also set `uppercase` and --cg-display-tracking, which were tuned for a condensed
+     800; they still render, in Manrope, and whether the lockups keep the uppercase is
+     a block decision rather than a token one (#203). */
+  --cg-font-display: 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --cg-font-body: 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --cg-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
 
   /* ---- weights ----
-     weights (Manrope ships 400/500/700) */
+     weights. Manrope Variable carries the whole 200-800 axis; the brand uses four of
+     them — 400 / 500 / 600 / 700 (#197). */
   --cg-weight-regular: 400;
   --cg-weight-medium: 500;
-  --cg-weight-bold: 700;
-  --cg-weight-display: 800;
+  /*
+     SemiBold, not Bold. The draft's "Body Bold" style is Manrope SemiBold 600 at
+     15/1.46, and 600 is what this rung has to be for `font-bold` to render it (#197).
+
+     Was 700. Manrope at 700 next to the draft's 600 reads a weight heavier than the
+     design everywhere the token is spent, and the alternative — a new
+     --cg-weight-semibold that no component reads, beside a --cg-weight-bold that is
+     now wrong — would have left the wrong value reachable under the obvious name. */
+  --cg-weight-bold: 600;
+  /*
+     The display rung, reachable as `font-heavy` (`font-display` is the family; see
+     theme.css). 700 rather than 800 since the face became Manrope (#197): the brand
+     loads 400/500/600/700 and the 800 end of the axis belonged to the condensed
+     face's own weight. */
+  --cg-weight-display: 700;
 
   /* ---- h1-display-ramp ----
      H1 display ramp: uppercase, condensed, Primary or white
@@ -481,12 +570,25 @@
   --cg-display-tracking: 0.012em;
 
   /* ---- manrope-ramp ---- */
-  --cg-heading-lg: 24px;
+  /*
+     SOURCE: the founder's 2026-09-10 draft, "H4" — Manrope Medium 22/1.2 (#197).
+
+     Was 24px. This is the section-heading rung: CardGrid, Carousel and PricingTiers
+     each render an h2 as `text-heading-lg font-medium text-ink`, which is the draft's
+     H4 exactly ("My Creations", "Most Popular", "On the Grid"). */
+  --cg-heading-lg: 22px;
   /* SOURCE: card title */
   --cg-heading-md: 20px;
   /* SOURCE: step title */
   --cg-heading-sm: 17px;
-  --cg-heading-line: 1.3;
+  /*
+     SOURCE: the draft's H4 line height (#197). Was 1.3.
+
+     One leading serves all three heading rungs, so the 17px and 20px rungs tighten
+     with the 22px one. That is the draft's own proportion rather than an
+     extrapolation, and a heading is short enough that 1.2 does not cost a line its
+     descenders. */
+  --cg-heading-line: 1.2;
   /* SOURCE: H1 subline */
   --cg-body-lg: 19px;
   /* SOURCE: default UI text */
@@ -495,7 +597,13 @@
   --cg-body-sm: 15px;
   /* SOURCE: footer, helper */
   --cg-caption: 13px;
-  --cg-body-line: 1.5;
+  /*
+     SOURCE: the draft's "Body Bold" and "Small" both carry 1.46 (#197). Was 1.5.
+
+     It serves every body rung and the caption, which is what makes the draft's two
+     body styles land whole: Body Bold is --cg-body-sm at 15/1.46 and Small is
+     --cg-caption at 13/1.46, both already the right size. */
+  --cg-body-line: 1.46;
   --cg-body-tracking: 0em;
   --cg-mono-size: 14px;
   --cg-mono-line: 1.7;
@@ -611,26 +719,38 @@
      The live/current INDICATOR — the dot in its halo, and the brand mark. Never
      decorative, never a fill.
 
-     MEASURED 1.21:1 on white, which is below every bar there is. It works on the
-     panel (4.82:1) and on ink (13.13:1); on the page ground it reads only because
-     it is paired with volt-ink in a pill. Recorded rather than
-     silently corrected: darkening it would change the Console's appearance, which
-     is a design decision and not a contrast fix.
+     AN ALIAS of --cg-secondary as of the 2026-09-10 re-skin (#197), which is the
+     answer to the question this note used to hold open. It was #b6ff2e, a SECOND
+     lime 36 dE from the brand's own, and the note asked which one the brand owns.
+     The founder's draft carries exactly one lime, #b6de68, and it is --cg-secondary:
+     the Most Popular bars are painted in it and #b6ff2e appears nowhere.
+
+     So the hue is retired and the NAME is kept. Every surface that draws a live mark
+     keeps writing --cg-volt, --cg-live-halo follows through the color-mix it already
+     had, and nothing downstream has to know the value moved. The alias is deliberate
+     in the same way --cg-pending's is: one value today, two names, so the mark and
+     the brand hue can part later with a one-line edit here.
 
-     Note it is a SECOND lime beside --cg-secondary (#b6de68), 36 dE away. Which one
-     the brand owns is the open question here.
+     Measured, on both sides of the move:
 
-     It is also a second LIVE. state.online (#00a05c) is the same idea in the state
-     scale, and EntityStatus (#116) already paints the live dot with it. They are not
-     interchangeable at any bar — online is 3.40:1 on white, volt is 1.21:1 — so a
-     surface must not swap one for the other on the assumption that both mean
-     'serving'. Which name the brand keeps for live belongs to the same open question,
-     and until it is answered volt is the Console's brand mark and online is the
-     entity's state. */
-  --cg-volt: #b6ff2e;
+       #b6ff2e on white : 1.21:1     #b6de68 on white : 1.53:1
+       --cg-volt-ink on it : 9.94:1  --cg-volt-ink on it : 7.82:1
+
+     Still below every text bar on white, and still recorded rather than corrected:
+     it reads because it is paired with --cg-volt-ink in a pill, it works on the panel
+     and on ink, and darkening it would be a design decision rather than a contrast
+     fix. The halo lightens with it, from #e8ffbc to #e8f4cf composited over white.
+
+     It is still a second LIVE beside state.online (#00a05c), and they are still not
+     interchangeable — online is 3.40:1 on white and this is 1.53:1. volt is the
+     brand mark; online is the entity's state. */
+  --cg-volt: var(--cg-secondary);
   /*
-     Text and glyphs ON volt. 9.95:1 against it — the one part of the volt family that
-     is comfortably legible.
+     Text and glyphs ON volt. 7.82:1 against it, re-measured for the 2026-09-10
+     re-skin (#197) when volt became an alias of --cg-secondary: it was 9.94:1
+     against the old #b6ff2e. Unchanged in value, because 7.82:1 is comfortably over
+     the 4.5:1 text floor and re-deriving a value that still holds would move a
+     colour for arithmetic's sake.
 
      This is NOT the state -ink that EntityStatus (#116) says the library lacks. That
      note wants a foreground for the WORD on a state chip, and the arrangement it
@@ -734,7 +854,21 @@
 
   /* ---- link ---- */
   --cg-link: #ffffff;
-  --cg-link-hover: var(--cg-secondary);
+  /*
+     A lightened lime, not the brand one. #197 extended the contrast guardrail to the
+     link rungs and the panel is where it went red:
+
+       {brand.secondary} #b6de68 on the panel #5a47f0 : 3.79:1   <-- under AA
+       #caf37d           on the panel                 : 4.62:1
+
+     Same hue and chroma in OKLCH, lifted in lightness until a hovered link on purple
+     is readable. A hover state is still normal text and gets no exemption, and the
+     panel is the one surface where the lime is a foreground rather than a mark.
+
+     The rest rung above stays #ffffff, so hovering still moves the colour rather than
+     only adding the underline the block draws. On ink the brand lime is left alone:
+     it measures 10.33:1 there and needs nothing. */
+  --cg-link-hover: #caf37d;
 
   /* ---- semantic-surfaces ---- */
   --cg-surface-card: transparent;

package/dist/tokens.json

@@ -7,6 +7,7 @@
       "--cg-primary": "#5a47f0",
       "--cg-secondary": "#b6de68",
       "--cg-tertiary": "#60e9f0",
+      "--cg-accent": "#0061f0",
       "--cg-danger": "#E53935",
       "--cg-online": "#00a05c",
       "--cg-offline": "var(--cg-neutral-500)",
@@ -32,6 +33,7 @@
       "--cg-primary-tint": "#eeecfe",
       "--cg-secondary-press": "#a6cf57",
       "--cg-tertiary-press": "#4dd8e0",
+      "--cg-accent-press": "#0052da",
       "--cg-neutral-0": "#ffffff",
       "--cg-neutral-25": "#f1f1f6",
       "--cg-lavender-50": "#f2f1f7",
@@ -64,30 +66,30 @@
       "--cg-border-strong": "var(--cg-ink)",
       "--cg-border-accent": "var(--cg-primary)",
       "--cg-focus-ring": "rgba(90, 71, 240, 0.28)",
-      "--cg-link": "var(--cg-text-primary)",
-      "--cg-link-hover": "var(--cg-primary)",
-      "--cg-font-display": "'Futura Condensed ExtraBold', 'Futura Condensed', 'Saira Semi Condensed Variable', 'Saira Semi Condensed', 'Arial Narrow', sans-serif",
+      "--cg-link": "var(--cg-accent)",
+      "--cg-link-hover": "var(--cg-accent-press)",
+      "--cg-font-display": "'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
       "--cg-font-body": "'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
       "--cg-font-mono": "'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
       "--cg-weight-regular": "400",
       "--cg-weight-medium": "500",
-      "--cg-weight-bold": "700",
-      "--cg-weight-display": "800",
+      "--cg-weight-bold": "600",
+      "--cg-weight-display": "700",
       "--cg-display-xl": "56px",
       "--cg-display-lg": "44px",
       "--cg-display-md": "38px",
       "--cg-display-sm": "30px",
       "--cg-display-line": "1.06",
       "--cg-display-tracking": "0.012em",
-      "--cg-heading-lg": "24px",
+      "--cg-heading-lg": "22px",
       "--cg-heading-md": "20px",
       "--cg-heading-sm": "17px",
-      "--cg-heading-line": "1.3",
+      "--cg-heading-line": "1.2",
       "--cg-body-lg": "19px",
       "--cg-body-md": "16px",
       "--cg-body-sm": "15px",
       "--cg-caption": "13px",
-      "--cg-body-line": "1.5",
+      "--cg-body-line": "1.46",
       "--cg-body-tracking": "0em",
       "--cg-mono-size": "14px",
       "--cg-mono-line": "1.7",
@@ -142,7 +144,7 @@
       "--cg-transition-control": "background-color var(--cg-duration) var(--cg-ease-out), border-color var(--cg-duration) var(--cg-ease-out), color var(--cg-duration) var(--cg-ease-out), box-shadow var(--cg-duration) var(--cg-ease-out)",
       "--cg-lift-hover": "translateY(-1px)",
       "--cg-press-scale": "0.985",
-      "--cg-volt": "#b6ff2e",
+      "--cg-volt": "var(--cg-secondary)",
       "--cg-volt-ink": "#243d00",
       "--cg-live-halo": "color-mix(in srgb, var(--cg-volt) 32%, transparent)",
       "--cg-scrim": "rgba(34, 34, 34, 0.4)",
@@ -162,7 +164,7 @@
       "--cg-border-strong": "#ffffff",
       "--cg-focus-ring": "rgba(255, 255, 255, 0.5)",
       "--cg-link": "#ffffff",
-      "--cg-link-hover": "var(--cg-secondary)",
+      "--cg-link-hover": "#caf37d",
       "--cg-surface-card": "transparent",
       "--cg-danger": "#FFDAD6",
       "--cg-online": "#C8F5DC",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -32,7 +32,6 @@
     "@base-ui/react": "^1.7.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/manrope": "^5.3.0",
-    "@fontsource/saira-semi-condensed": "^5.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "sonner": "^2.0.8",