@cloudgrid-io/ui 0.0.1

package/dist/tokens/surface-ink.json

@@ -0,0 +1,136 @@
+{
+  "semantic-text": {
+    "text-primary": {
+      "$value": "#ffffff",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-primary"
+        }
+      }
+    },
+    "text-secondary": {
+      "$value": "rgba(255, 255, 255, 0.78)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-secondary"
+        }
+      }
+    },
+    "text-muted": {
+      "$value": "rgba(255, 255, 255, 0.56)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-muted"
+        }
+      }
+    },
+    "text-accent": {
+      "$value": "{brand.secondary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-accent"
+        }
+      }
+    }
+  },
+  "semantic-surfaces": {
+    "surface-card": {
+      "$value": "rgba(255, 255, 255, 0.04)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-card"
+        }
+      }
+    },
+    "surface-page-alt": {
+      "$value": "rgba(255, 255, 255, 0.06)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-page-alt"
+        }
+      }
+    }
+  },
+  "semantic-lines": {
+    "border-control": {
+      "$value": "rgba(255, 255, 255, 0.4)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-control"
+        }
+      }
+    },
+    "border-hairline": {
+      "$value": "rgba(255, 255, 255, 0.16)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-hairline"
+        }
+      }
+    },
+    "border-strong": {
+      "$value": "#ffffff",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-strong"
+        }
+      }
+    },
+    "border-accent": {
+      "$value": "{brand.secondary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-accent"
+        }
+      }
+    },
+    "focus-ring": {
+      "$value": "rgba(182, 222, 104, 0.45)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-focus-ring"
+        }
+      }
+    }
+  },
+  "link": {
+    "link": {
+      "$value": "#ffffff",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-link"
+        }
+      }
+    },
+    "link-hover": {
+      "$value": "{brand.secondary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-link-hover"
+        }
+      }
+    }
+  },
+  "danger": {
+    "danger": {
+      "$value": "#FF8A80",
+      "$type": "color",
+      "$description": "Ink has more headroom than the panel, so this stays recognisably red rather\nthan washing out to pink: 6.97:1 against #222, comfortably past AA for body\ntext. The source red would have managed only 3.76:1 here.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger"
+        }
+      }
+    }
+  }
+}

package/dist/tokens/surface-panel.json

@@ -0,0 +1,120 @@
+{
+  "semantic-text": {
+    "text-primary": {
+      "$value": "#ffffff",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-primary"
+        }
+      }
+    },
+    "text-secondary": {
+      "$value": "rgba(255, 255, 255, 0.82)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-secondary"
+        }
+      }
+    },
+    "text-muted": {
+      "$value": "rgba(255, 255, 255, 0.66)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-muted"
+        }
+      }
+    },
+    "text-accent": {
+      "$value": "#ffffff",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-accent"
+        }
+      }
+    }
+  },
+  "semantic-lines": {
+    "border-control": {
+      "$value": "rgba(255, 255, 255, 0.62)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-control"
+        }
+      }
+    },
+    "border-hairline": {
+      "$value": "rgba(255, 255, 255, 0.24)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-hairline"
+        }
+      }
+    },
+    "border-strong": {
+      "$value": "#ffffff",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-strong"
+        }
+      }
+    },
+    "focus-ring": {
+      "$value": "rgba(255, 255, 255, 0.5)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-focus-ring"
+        }
+      }
+    }
+  },
+  "link": {
+    "link": {
+      "$value": "#ffffff",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-link"
+        }
+      }
+    },
+    "link-hover": {
+      "$value": "{brand.secondary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-link-hover"
+        }
+      }
+    }
+  },
+  "semantic-surfaces": {
+    "surface-card": {
+      "$value": "transparent",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-card"
+        }
+      }
+    }
+  },
+  "danger": {
+    "danger": {
+      "$value": "#FFDAD6",
+      "$type": "color",
+      "$description": "The source red measures 1.38:1 against this purple, which is invisible.\nSame class as #41. This tint is derived from it and measures 4.52:1, so it\nclears AA for body text as well as the 3:1 UI bar.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger"
+        }
+      }
+    }
+  }
+}

package/dist/tokens.css

@@ -0,0 +1,289 @@
+/*
+  GENERATED by scripts/build-css.mjs from src/tokens/*.json. Do not edit.
+
+  The DTCG sets are the source. Edit those, or let a Figma sync open a PR
+  against them, then run `pnpm build`. Editing this file works until the
+  next build silently reverts it.
+
+  CloudGrid tokens: the CloudGrid Web 2026 design language.
+
+  This is the @cloudgrid-io/ui copy, ported 2026-08-10 from the v0 library
+  (atomicfuse/ui, src/styles/tokens.css), which was itself synced from
+  cloudgrid-landing. That makes this the third copy in the chain, and three
+  copies is one too many: the intent is that this package becomes authoritative
+  and the other two consume it. Until that migration happens, treat the SITE's
+  src/styles/tokens.css as the source of truth and sync changes forward to here.
+
+  The site's copy carries a superset (a legacy alias shim, --bg/--ink/etc., for
+  its unrebuilt surfaces) that is deliberately NOT part of this package.
+
+  Values here are the real brand system. The setup guide's Step 2 sketch
+  (cyan/magenta, dark-first, Nunito/DM Mono) does not describe this brand and
+  was not used.
+
+  Originally ported from the Claude Design project "Cloudgrid"
+  (303a54ca-2f23-4906-8040-879e8d9a7b6f), token files colors/typography/fonts/
+  spacing/radius/elevation/motion. Values marked SOURCE were sampled from the
+  supplied 1440px brand frames or given by the brand owner.
+
+  The system is light, flat and gradient-free. Containment is done with 1px
+  hairlines, not elevation. The one dramatic move is the purple panel, which is
+  a token flip rather than a separate stylesheet: put data-cg-surface="panel" on
+  any container filled with --cg-surface-panel and every semantic token below
+  switches to its on-purple value.
+
+  A theme change is a value swap in this file. Components consume custom
+  properties exclusively and must never hardcode a hex.
+*/
+
+:root,
+[data-theme='default'] {
+  /* ---- brand ----
+     brand (SOURCE) */
+  --cg-ink: #222222;
+  --cg-primary: #5a47f0;
+  --cg-secondary: #b6de68;
+  --cg-tertiary: #60e9f0;
+
+  /* ---- danger ----
+     danger (PLACEHOLDER, not a brand value)
+
+     Operator decision 2026-08-16, issue #62, stated as a placeholder in the
+     operator's own words: "its just a red i found. one day the brand designer
+     might change it, but until then this is it."
+
+     It lives here, beside the brand sources, because that is the one place a
+     designer should have to edit. Nothing else in the system carries a red.
+
+     Measured against every surface before it was chosen, because a flat value
+     cannot work on all three:
+
+     #E53935 on white  #ffffff : 4.23:1
+     #E53935 on panel  #5a47f0 : 1.38:1   <-- invisible, hence the override
+     #E53935 on ink    #222222 : 3.76:1
+
+     1.38:1 on purple is the #41 failure repeating: that issue found the primary
+     button rendering the panel's own colour at 1:1. The per-surface values in
+     the panel and ink scopes below are derived from this red rather than being
+     new brand decisions.
+
+     KNOWN, and deliberately not "fixed" by changing the operator's value: 4.23:1
+     on white clears the 3:1 bar for UI components and borders, and is just under
+     the 4.5:1 AA bar for body text. `text-destructive` has 5 uses. A future
+     brand pass can darken it; that is a decision, not a tidy-up. */
+  --cg-danger: #E53935;
+
+  /* ---- brand-derived ----
+     brand derived (interaction only) */
+  --cg-primary-press: #4b39db;
+  --cg-primary-tint: #eeecfe;
+  --cg-secondary-press: #a6cf57;
+  --cg-tertiary-press: #4dd8e0;
+
+  /* ---- neutrals ---- */
+  --cg-neutral-0: #ffffff;
+  --cg-lavender-50: #f2f1f7; /* SOURCE: alternate page wash */ --cg-neutral-100: #f1f1f1; /* SOURCE: hairline / card border */ --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
+  --cg-neutral-100: #f1f1f1; /* SOURCE: hairline / card border */ --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
+  --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
+  --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
+  --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
+  --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
+  --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
+
+  /* ---- semantic-surfaces ---- */
+  --cg-surface-page: var(--cg-neutral-0);
+  --cg-surface-page-alt: var(--cg-lavender-50);
+  --cg-surface-card: var(--cg-neutral-0);
+  --cg-surface-subtle: var(--cg-lavender-50);
+  --cg-surface-control: var(--cg-neutral-200);
+  --cg-surface-panel: var(--cg-primary);
+  --cg-surface-code: var(--cg-ink);
+
+  /* ---- semantic-text ---- */
+  --cg-text-primary: var(--cg-neutral-900);
+  --cg-text-secondary: var(--cg-neutral-700);
+  --cg-text-muted: var(--cg-neutral-500);
+  --cg-text-placeholder: var(--cg-neutral-400);
+  --cg-text-accent: var(--cg-primary);
+  --cg-text-inverse: var(--cg-neutral-0);
+  --cg-text-on-primary: var(--cg-neutral-0);
+  --cg-text-on-accent: var(--cg-ink);
+  --cg-text-on-code: #e7e7e7;
+
+  /* ---- semantic-lines ---- */
+  --cg-border-hairline: var(--cg-neutral-100);
+  --cg-border-control: var(--cg-neutral-200);
+  --cg-border-strong: var(--cg-ink);
+  --cg-border-accent: var(--cg-primary);
+  --cg-focus-ring: rgba(90, 71, 240, 0.28);
+
+  /* ---- link ---- */
+  --cg-link: var(--cg-text-primary);
+  --cg-link-hover: var(--cg-primary);
+
+  /* ---- 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;
+  --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) */
+  --cg-weight-regular: 400;
+  --cg-weight-medium: 500;
+  --cg-weight-bold: 700;
+  --cg-weight-display: 800;
+
+  /* ---- h1-display-ramp ----
+     H1 display ramp: uppercase, condensed, Primary or white
+
+     Stepped down one notch 2026-08-06 (operator: main headings read too
+     dominant). The SOURCE values were xl 64 / lg 48 / md 42 / sm 32. */
+  --cg-display-xl: 56px;
+  --cg-display-lg: 44px;
+  --cg-display-md: 38px; /* SOURCE: onboarding H1 (was 42px) */ --cg-display-sm: 30px;
+  --cg-display-sm: 30px;
+  --cg-display-line: 1.06;
+  --cg-display-tracking: 0.012em;
+
+  /* ---- manrope-ramp ---- */
+  --cg-heading-lg: 24px;
+  --cg-heading-md: 20px; /* SOURCE: card title */ --cg-heading-sm: 17px; /* SOURCE: step title */ --cg-heading-line: 1.3;
+  --cg-heading-sm: 17px; /* SOURCE: step title */ --cg-heading-line: 1.3;
+  --cg-heading-line: 1.3;
+  --cg-body-lg: 19px; /* SOURCE: H1 subline */ --cg-body-md: 16px; /* SOURCE: default UI text */ --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5;
+  --cg-body-md: 16px; /* SOURCE: default UI text */ --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5;
+  --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5;
+  --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5;
+  --cg-body-line: 1.5;
+  --cg-body-tracking: 0em;
+  --cg-mono-size: 14px;
+  --cg-mono-line: 1.7;
+  --cg-label-size: 15px;
+  --cg-label-weight: var(--cg-weight-medium);
+
+  /* ---- spacing ----
+     spacing: 4px base */
+  --cg-space-1: 4px;
+  --cg-space-2: 8px;
+  --cg-space-3: 12px;
+  --cg-space-4: 16px;
+  --cg-space-5: 20px;
+  --cg-space-6: 24px;
+  --cg-space-8: 32px;
+  --cg-space-10: 40px;
+  --cg-space-12: 48px;
+  --cg-space-16: 64px;
+  --cg-space-20: 80px;
+  --cg-space-30: 120px;
+
+  /* ---- layout ----
+     layout (SOURCE measurements from the 1440px frames) */
+  --cg-column-form: 414px;
+  --cg-column-wide: 920px; /* SOURCE 844px; widened 2026-08-06 with the container */ --cg-page-pad: 32px;
+  --cg-page-pad: 32px;
+  --cg-header-height: 90px;
+  --cg-footer-height: 64px;
+  --cg-stack-tight: 8px;
+  --cg-stack: 16px;
+  --cg-stack-loose: 24px;
+  --cg-section-gap: 56px;
+  /*
+     Marketing pages are wider than the onboarding frames the system was
+     measured from, so the site adds one container width of its own.
+     1120 -> 1280 on 2026-08-06 (operator: too much white space at the sides). */
+  --cg-container: 1280px;
+  --cg-measure: 68ch;
+
+  /* ---- corners ---- */
+  --cg-radius-xs: 8px;
+  --cg-radius-sm: 10px;
+  --cg-radius-md: 12px; /* SOURCE: code block, OTP cell */ --cg-radius-lg: 14px; /* SOURCE: provider button, input, tool card */ --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px;
+  --cg-radius-lg: 14px; /* SOURCE: provider button, input, tool card */ --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px;
+  --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px;
+  --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px;
+  --cg-radius-pill: 999px;
+  --cg-border-width: 1px;
+  --cg-border-width-strong: 1.5px;
+
+  /* ---- elevation ----
+     elevation: hairlines first, shadow only on the wash or on hover */
+  --cg-shadow-none: none;
+  --cg-shadow-card: 0 1px 2px rgba(34, 34, 34, 0.04);
+  --cg-shadow-raised: 0 4px 14px rgba(34, 34, 34, 0.06);
+  --cg-shadow-hover: 0 8px 24px rgba(34, 34, 34, 0.08);
+  --cg-shadow-panel: 0 10px 40px rgba(90, 71, 240, 0.18);
+  --cg-ring-focus: 0 0 0 3px var(--cg-focus-ring);
+
+  /* ---- motion ----
+     motion: small and quick, nothing slides in */
+  --cg-duration-fast: 120ms;
+  --cg-duration: 180ms;
+  --cg-duration-slow: 280ms;
+  --cg-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --cg-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --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;
+}
+
+[data-cg-surface='panel'] {
+  /* ---- semantic-text ---- */
+  --cg-text-primary: #ffffff;
+  --cg-text-secondary: rgba(255, 255, 255, 0.82);
+  --cg-text-muted: rgba(255, 255, 255, 0.66);
+  --cg-text-accent: #ffffff;
+
+  /* ---- semantic-lines ---- */
+  --cg-border-control: rgba(255, 255, 255, 0.62);
+  --cg-border-hairline: rgba(255, 255, 255, 0.24);
+  --cg-border-strong: #ffffff;
+  --cg-focus-ring: rgba(255, 255, 255, 0.5);
+
+  /* ---- link ---- */
+  --cg-link: #ffffff;
+  --cg-link-hover: var(--cg-secondary);
+
+  /* ---- semantic-surfaces ---- */
+  --cg-surface-card: transparent;
+
+  /* ---- danger ---- */
+  /*
+     The source red measures 1.38:1 against this purple, which is invisible.
+     Same class as #41. This tint is derived from it and measures 4.52:1, so it
+     clears AA for body text as well as the 3:1 UI bar. */
+  --cg-danger: #FFDAD6;
+}
+
+[data-cg-surface='ink'] {
+  /* ---- semantic-text ---- */
+  --cg-text-primary: #ffffff;
+  --cg-text-secondary: rgba(255, 255, 255, 0.78);
+  --cg-text-muted: rgba(255, 255, 255, 0.56);
+  --cg-text-accent: var(--cg-secondary);
+
+  /* ---- semantic-surfaces ---- */
+  --cg-surface-card: rgba(255, 255, 255, 0.04);
+  --cg-surface-page-alt: rgba(255, 255, 255, 0.06);
+
+  /* ---- semantic-lines ---- */
+  --cg-border-control: rgba(255, 255, 255, 0.4);
+  --cg-border-hairline: rgba(255, 255, 255, 0.16);
+  --cg-border-strong: #ffffff;
+  --cg-border-accent: var(--cg-secondary);
+  --cg-focus-ring: rgba(182, 222, 104, 0.45);
+
+  /* ---- link ---- */
+  --cg-link: #ffffff;
+  --cg-link-hover: var(--cg-secondary);
+
+  /* ---- danger ---- */
+  /*
+     Ink has more headroom than the panel, so this stays recognisably red rather
+     than washing out to pink: 6.97:1 against #222, comfortably past AA for body
+     text. The source red would have managed only 3.76:1 here. */
+  --cg-danger: #FF8A80;
+}