@cl-light-ds/ui 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cl-light-ds/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "ClickLearn Lightning Design System — Astro UI component library.",
   "license": "MIT",
   "type": "module",
@@ -10,7 +10,7 @@
   "exports": {
     "./globals.css": "./src/styles/globals.css",
     "./lib/*": "./src/lib/*.ts",
-    "./components/*": "./src/components/*.ts"
+    "./components/*": "./src/components/*/index.ts"
   },
   "publishConfig": {
     "access": "public"

package/src/components/callout/CHANGELOG.md

@@ -0,0 +1,32 @@
+# Changelog
+
+All notable changes to the `Callout` component will be documented in this file.
+
+## 2026-10-06 — Initial implementation (ClickLearn Lightning Design Library, node `7650-5947`)
+
+Figma documents Callout as a single component set (`7656:12714`) with one property, `Type = Default | Info | Warning | Danger`.
+
+### Added
+
+- `Callout`, `CalloutTitle`, `CalloutDescription`.
+- `variant: "default" | "info" | "warning" | "danger"` — maps 1:1 to Figma's `Type` (Figma's "Danger" kept as `danger`, its background token is `callout-background-error`).
+- Default icon per variant, rendered in a 30px bordered white box, matching Figma: `Lightbulb` (foreground), `Info` (primary), `CircleAlert` (warning), `ShieldAlert` (destructive). Override with `icon={…}` or hide with `icon={false}`.
+- `actions` named slot — right-aligned row under the copy. Figma's actions are small buttons, so pass `<Button size="sm">` (use `variant="destructive"` for the Danger primary action, as in Figma).
+- `dismissible` (default `true`, Figma always shows the X). Visual only, same as `Alert`.
+- `role="note"` — callouts are static, in-flow content, unlike `Alert`'s `role="alert"`.
+
+### New tokens (`globals.css`)
+
+| Token | Light | Dark | Figma variable |
+|---|---|---|---|
+| `--warning` / `bg-warning`, `text-warning` | `#eab308` | — | `badge-warning-backgground` |
+| `--warning-foreground` | white | — | — |
+| `--callout-background-info` / `bg-callout-info` | `var(--primary-50)` (`#ebf3fc`) | primary-500 15% on background | `callout-background-info` |
+| `--callout-background-warning` / `bg-callout-warning` | `#fefce8` | `#eab308` 12% on background | `callout-background-warning` |
+| `--callout-background-error` / `bg-callout-error` | `#fef2f2` | red-600 15% on background | `callout-background-error` |
+
+### Notes
+
+- Default variant uses `bg-popover` + `border-border`; tinted variants use a transparent border so all four keep identical dimensions.
+- Radius is `rounded-md` (6px) and padding `p-3` per Figma's `radius/rounded-md` and `padding/p-3`.
+- Dark values are not defined in Figma; they are tinted mixes chosen to keep contrast with `foreground`.

package/src/components/callout/Callout.astro

@@ -0,0 +1,147 @@
+---
+/**
+ * @component Callout
+ * @title Callout
+ * @description An inline, in-flow message that highlights a tip, update, warning or problem, with optional actions.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7650-5947
+ * @status stable
+ * @since 0.4.0
+ *
+ * @preview
+ *
+ * <Callout variant="info" class="max-w-md">
+ *   <CalloutTitle>Bookmark your organisation link</CalloutTitle>
+ *   <CalloutDescription>Save your organisation URL to sign in directly next time.</CalloutDescription>
+ *   <Fragment slot="actions">
+ *     <Button size="sm">View updates</Button>
+ *     <Button size="sm" variant="outline">Not now</Button>
+ *   </Fragment>
+ * </Callout>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Callout, CalloutTitle, CalloutDescription } from '@cl-light-ds/ui/components/callout';
+ * import { Button } from '@cl-light-ds/ui/components/button';
+ * ---
+ * <Callout variant="warning">
+ *   <CalloutTitle>Your session is about to expire</CalloutTitle>
+ *   <CalloutDescription>Save your work or extend the session.</CalloutDescription>
+ *   <Fragment slot="actions">
+ *     <Button size="sm">Extend session</Button>
+ *     <Button size="sm" variant="outline">Save work</Button>
+ *   </Fragment>
+ * </Callout>
+ * ```
+ */
+import { cva } from "class-variance-authority";
+import { CircleAlert, Info, Lightbulb, ShieldAlert, X as XIcon } from "@lucide/astro";
+import type { AstroComponent } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type CalloutVariant = "default" | "info" | "warning" | "danger";
+
+interface Props extends HTMLAttributes<"div"> {
+  variant?: CalloutVariant;
+  /** Icon component; defaults to the variant's icon. Pass `false` to hide it. */
+  icon?: AstroComponent | false;
+  dismissible?: boolean;
+  class?: string;
+}
+
+const defaultIcons: Record<CalloutVariant, AstroComponent> = {
+  default: Lightbulb,
+  info: Info,
+  warning: CircleAlert,
+  danger: ShieldAlert,
+};
+
+const {
+  class: className = "",
+  variant = "default",
+  icon,
+  dismissible = true,
+  ...rest
+} = Astro.props as Props;
+
+const Icon = icon === false ? undefined : (icon ?? defaultIcons[variant]);
+const hasActions = Astro.slots.has("actions");
+
+const calloutVariants = cva(
+  "group/callout relative flex w-full items-start gap-2 rounded-md border p-3",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-popover",
+        info: "border-transparent bg-callout-info",
+        warning: "border-transparent bg-callout-warning",
+        danger: "border-transparent bg-callout-error",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const iconVariants = cva(
+  "flex size-7.5 shrink-0 items-center justify-center rounded-lg border border-border bg-background [&>svg]:size-[15px]",
+  {
+    variants: {
+      variant: {
+        default: "text-foreground",
+        info: "text-primary",
+        warning: "text-warning",
+        danger: "text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+---
+
+<div
+  {...rest}
+  data-slot="callout"
+  data-variant={variant}
+  role="note"
+  class={cn(calloutVariants({ variant }), className)}
+>
+  <div data-slot="callout-message" class="flex min-w-0 flex-1 items-start gap-3">
+    {
+      Icon && (
+        <div data-slot="callout-icon" class={iconVariants({ variant })}>
+          <Icon aria-hidden="true" />
+        </div>
+      )
+    }
+    <div data-slot="callout-content" class="flex min-w-0 flex-1 flex-col gap-3 pt-0.5">
+      <div class="flex flex-col gap-1">
+        <slot />
+      </div>
+      {
+        hasActions && (
+          <div data-slot="callout-actions" class="flex w-full items-center justify-end gap-2">
+            <slot name="actions" />
+          </div>
+        )
+      }
+    </div>
+  </div>
+  {
+    dismissible && (
+      <button
+        type="button"
+        data-slot="callout-dismiss"
+        class="flex shrink-0 items-center justify-center rounded-lg p-2 text-muted-foreground [&>svg]:size-4"
+      >
+        <XIcon aria-hidden="true" />
+        <span class="sr-only">Dismiss</span>
+      </button>
+    )
+  }
+</div>

package/src/components/callout/CalloutDescription.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="callout-description"
+  class={cn("text-sm leading-5 text-muted-foreground", className)}
+>
+  <slot />
+</div>

package/src/components/callout/CalloutTitle.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="callout-title"
+  class={cn("text-sm leading-5 font-semibold text-foreground", className)}
+>
+  <slot />
+</div>

package/src/components/callout/index.ts

@@ -0,0 +1,3 @@
+export { default as Callout } from "./Callout.astro";
+export { default as CalloutTitle } from "./CalloutTitle.astro";
+export { default as CalloutDescription } from "./CalloutDescription.astro";

package/src/components/input/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to the `Input` component will be documented in this file.
 
+## 2026-10-06 — OTP Input (ClickLearn Lightning Design Library, node `7650-4177`)
+
+Figma adds an "OTP Input" component set to the Input page with states Default, Focused, Filled, Disabled and Error: six joined 56×40 slots (outer corners `rounded-lg`, shared inner borders, 14px medium centered text), a label above and hint text below.
+
+### Added
+
+- `InputOTP` (exported from `components/input`). Props: `length` (default 6), `name`, `value`, `size` (`sm` | `default` | `lg`; `default` is Figma's 56×40), `mode` (`numeric` | `alphanumeric`), `id` (applied to the first slot so `FieldLabel for` works), `disabled`, `required`, `autofocus`, `aria-invalid`.
+- Joined value is submitted through a hidden input named by `name`.
+- Inline script: auto-advance on type, Backspace to previous slot, arrow-key navigation, paste/OS autofill distributes characters across slots. Emits `input-otp:change` and `input-otp:complete` (`detail.value`).
+
+### Notes
+
+- States reuse Input's tokens exactly: `border-input`, `bg-card`, `shadow-xs`; Focus `border-ring ring-3 ring-ring/50`; Error `aria-invalid:border-destructive` (no outer ring, matching Figma); Disabled `bg-muted text-muted-foreground`. Hover not implemented (standing direction).
+- Label and hint are composed with `Field` / `FieldLabel` / `FieldDescription` / `FieldError`, same as Input, rather than new props.
+
 ## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `145-3`)
 
 Figma documents Input across four pages: Variants (Default, Lead, Tail, Complex, Wide), Sizes (Default 32px, Large 40px), States (Default, Hover, Pressed, Focus, Disabled, Error), and Contents (Default, Lead Icon, Tail Icon, Label, Counter, Helper, Error text, All Details).

package/src/components/input/InputOTP.astro

@@ -0,0 +1,211 @@
+---
+/**
+ * @component InputOTP
+ * @title OTP Input
+ * @description A row of single-character slots for entering one-time codes, with auto-advance, backspace and paste support.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7650-4177
+ * @status stable
+ * @since 0.4.0
+ *
+ * @preview
+ *
+ * <Field class="w-fit">
+ *   <FieldLabel for="otp">Verification code</FieldLabel>
+ *   <InputOTP id="otp" name="code" />
+ *   <FieldDescription>Enter the 6-digit code we sent to your email.</FieldDescription>
+ * </Field>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { InputOTP } from '@cl-light-ds/ui/components/input';
+ * ---
+ * <InputOTP id="otp" name="code" length={6} />
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `input-otp:change` | `{ value: string }` | Fired whenever the code changes |
+ * | `input-otp:complete` | `{ value: string }` | Fired when every slot is filled |
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type InputOTPSize = "sm" | "default" | "lg";
+type InputOTPMode = "numeric" | "alphanumeric";
+
+interface Props extends Omit<HTMLAttributes<"div">, "id"> {
+  /** Number of slots. */
+  length?: number;
+  /** Name of the hidden input that carries the joined code on form submit. */
+  name?: string;
+  /** Initial value; characters fill slots from the left. */
+  value?: string;
+  size?: InputOTPSize;
+  /** `numeric` accepts digits only; `alphanumeric` accepts letters and digits. */
+  mode?: InputOTPMode;
+  /** Applied to the first slot so a `<label for>` / `FieldLabel` focuses it. */
+  id?: string;
+  disabled?: boolean;
+  required?: boolean;
+  autofocus?: boolean;
+  "aria-invalid"?: boolean | "true" | "false";
+  class?: string;
+}
+
+const {
+  class: className = "",
+  length = 6,
+  name,
+  value = "",
+  size = "default",
+  mode = "numeric",
+  id,
+  disabled = false,
+  required = false,
+  autofocus = false,
+  "aria-invalid": ariaInvalid,
+  ...rest
+} = Astro.props as Props;
+
+const allowed = mode === "alphanumeric" ? /[a-z0-9]/i : /\d/;
+const chars = [...value].filter((char) => allowed.test(char)).slice(0, length);
+const slots = Array.from({ length }, (_, index) => chars[index] ?? "");
+const invalid = ariaInvalid === true || ariaInvalid === "true";
+---
+
+<div
+  {...rest}
+  role="group"
+  data-slot="input-otp"
+  data-size={size}
+  data-mode={mode}
+  data-length={length}
+  data-disabled={disabled ? "" : undefined}
+  data-invalid={invalid ? "" : undefined}
+  class={cn("flex w-fit items-center", className)}
+>
+  {
+    slots.map((char, index) => (
+      <input
+        type="text"
+        id={index === 0 ? id : undefined}
+        data-slot="input-otp-slot"
+        data-size={size}
+        value={char}
+        inputmode={mode === "numeric" ? "numeric" : "text"}
+        autocomplete={index === 0 ? "one-time-code" : "off"}
+        autocapitalize="off"
+        spellcheck="false"
+        aria-label={`Character ${index + 1} of ${length}`}
+        aria-invalid={invalid ? "true" : undefined}
+        disabled={disabled}
+        autofocus={index === 0 && autofocus}
+        class={cn(
+          "relative -ml-px min-w-0 border border-input bg-card text-center font-medium text-foreground shadow-xs outline-none transition-[color,box-shadow] first:ml-0 first:rounded-l-lg last:rounded-r-lg",
+          "focus-visible:z-10 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:border-ring",
+          "aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:focus-visible:ring-destructive/20",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
+          "data-[size=sm]:h-8 data-[size=sm]:w-10 data-[size=sm]:text-xs",
+          "data-[size=default]:h-10 data-[size=default]:w-14 data-[size=default]:text-sm",
+          "data-[size=lg]:h-12 data-[size=lg]:w-16 data-[size=lg]:text-base",
+        )}
+      />
+    ))
+  }
+  <input
+    type="hidden"
+    data-slot="input-otp-value"
+    name={name}
+    value={chars.join("")}
+    required={required}
+    disabled={disabled}
+  />
+</div>
+
+<script>
+  function initInputOTP(root: HTMLElement) {
+    if (root.dataset.initialized !== undefined) return;
+    root.dataset.initialized = "";
+
+    const slots = Array.from(root.querySelectorAll<HTMLInputElement>('[data-slot="input-otp-slot"]'));
+    const hidden = root.querySelector<HTMLInputElement>('[data-slot="input-otp-value"]');
+    const allowed = root.dataset.mode === "alphanumeric" ? /[a-z0-9]/i : /\d/;
+    const accept = (text: string) => [...text].filter((char) => allowed.test(char));
+
+    function sync() {
+      const value = slots.map((slot) => slot.value).join("");
+      if (hidden) hidden.value = value;
+      root.dispatchEvent(new CustomEvent("input-otp:change", { bubbles: true, detail: { value } }));
+      if (slots.every((slot) => slot.value)) {
+        root.dispatchEvent(new CustomEvent("input-otp:complete", { bubbles: true, detail: { value } }));
+      }
+    }
+
+    // Writes characters into consecutive slots starting at `start`, then focuses the next empty one.
+    function fill(start: number, chars: string[]) {
+      let index = start;
+      for (const char of chars) {
+        const slot = slots[index];
+        if (!slot) break;
+        slot.value = char;
+        index++;
+      }
+      slots[Math.min(index, slots.length - 1)]?.focus();
+      sync();
+    }
+
+    slots.forEach((slot, index) => {
+      slot.addEventListener("focus", () => slot.select());
+
+      let previousValue = slot.value;
+      slot.addEventListener("beforeinput", () => (previousValue = slot.value));
+
+      slot.addEventListener("input", (event) => {
+        const { data: typed, inputType } = event as InputEvent;
+        // Single keystroke: use only the typed character, so typing into a filled slot replaces it.
+        // Anything else (OS autofill, IME) carries the whole string in the value.
+        const chars = accept(typed && typed.length === 1 ? typed : slot.value);
+        if (chars.length) {
+          slot.value = "";
+          fill(index, chars);
+        } else {
+          // Rejected characters leave the slot as it was; deletions clear it.
+          slot.value = inputType.startsWith("insert") ? previousValue : "";
+          sync();
+        }
+      });
+
+      slot.addEventListener("paste", (event) => {
+        event.preventDefault();
+        const chars = accept(event.clipboardData?.getData("text") ?? "");
+        if (chars.length) fill(index, chars);
+      });
+
+      slot.addEventListener("keydown", (event) => {
+        const previous = slots[index - 1];
+        const next = slots[index + 1];
+        if (event.key === "Backspace" && !slot.value && previous) {
+          event.preventDefault();
+          previous.value = "";
+          previous.focus();
+          sync();
+        } else if (event.key === "ArrowLeft" && previous) {
+          event.preventDefault();
+          previous.focus();
+        } else if (event.key === "ArrowRight" && next) {
+          event.preventDefault();
+          next.focus();
+        }
+      });
+    });
+  }
+
+  document.querySelectorAll<HTMLElement>('[data-slot="input-otp"]').forEach(initInputOTP);
+</script>

package/src/components/input/index.ts

@@ -1,2 +1,2 @@
 export { default as Input } from "./Input.astro";
-
+export { default as InputOTP } from "./InputOTP.astro";

package/src/components/logo/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+All notable changes to the `Logo` component will be documented in this file.
+
+## 2026-10-06 — Initial implementation
+
+### Added
+
+- `Logo` — inline SVG ClickLearn logo. Props: `variant` (`full` | `mark` | `wordmark`), `tone` (`color` | `dark` | `white`), `size` (`sm` 24px | `default` 32px | `lg` 48px | `xl` 64px height, width auto), `title` (accessible name; `""` marks it decorative).
+- `logoSvg(variant, tone)` — returns standalone SVG markup for the same artwork (used for the downloads on the Foundations → Logos page).
+- `LOGO_COLORS` — mark `#3785E0` (`--primary-500`), wordmark `#112843` (`--primary-950`).
+
+### Notes
+
+- Artwork taken from the logo previously inlined in the storybook sidebar. The Figma "ClickLearn Logo" component set (library key `87ef4404…`) was not reachable through the Figma API at the time of writing; align variants/tones with it once a node link is available.
+- Fills are fixed brand hex values (not theme tokens) so the logo stays on-brand regardless of theme; use `tone="white"` on dark or brand-coloured surfaces.
+- No `clipPath`/`id`s are used, so multiple logos on a page never clash.

package/src/components/logo/Logo.astro

@@ -0,0 +1,90 @@
+---
+/**
+ * @component Logo
+ * @title Logo
+ * @description The ClickLearn logo as an inline SVG: full lockup, mark only or wordmark only, in brand colour, dark or white.
+ * @status stable
+ * @since 0.4.0
+ *
+ * @preview
+ *
+ * <Logo />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Logo } from '@cl-light-ds/ui/components/logo';
+ * ---
+ * <Logo variant="full" tone="color" size="default" />
+ * ```
+ */
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import {
+  LOGO_VIEWBOX,
+  MARK_PATHS,
+  WORDMARK_PATHS,
+  logoFills,
+  type LogoTone,
+  type LogoVariant,
+} from "./logo-paths";
+
+type LogoSize = "sm" | "default" | "lg" | "xl";
+
+interface Props extends HTMLAttributes<"svg"> {
+  variant?: LogoVariant;
+  tone?: LogoTone;
+  size?: LogoSize;
+  /** Accessible name. Pass an empty string when the logo is decorative (e.g. next to visible "ClickLearn" text). */
+  title?: string;
+  class?: string;
+}
+
+const {
+  class: className = "",
+  variant = "full",
+  tone = "color",
+  size = "default",
+  title = "ClickLearn",
+  ...rest
+} = Astro.props as Props;
+
+const logoVariants = cva("w-auto shrink-0", {
+  variants: {
+    size: {
+      sm: "h-6",
+      default: "h-8",
+      lg: "h-12",
+      xl: "h-16",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+const fills = logoFills(tone);
+const showMark = variant !== "wordmark";
+const showWordmark = variant !== "mark";
+const decorative = title === "";
+---
+
+<svg
+  {...rest}
+  data-slot="logo"
+  data-variant={variant}
+  data-tone={tone}
+  viewBox={LOGO_VIEWBOX[variant]}
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role={decorative ? undefined : "img"}
+  aria-label={decorative ? undefined : title}
+  aria-hidden={decorative ? "true" : undefined}
+  class={cn(logoVariants({ size }), className)}
+>
+  {!decorative && <title>{title}</title>}
+  {showWordmark && WORDMARK_PATHS.map((d) => <path d={d} fill={fills.wordmark} />)}
+  {showMark && MARK_PATHS.map((d) => <path d={d} fill={fills.mark} />)}
+</svg>

package/src/components/logo/index.ts

@@ -0,0 +1,3 @@
+export { default as Logo } from "./Logo.astro";
+export { LOGO_COLORS, LOGO_VIEWBOX, logoSvg } from "./logo-paths";
+export type { LogoTone, LogoVariant } from "./logo-paths";

package/src/components/logo/logo-paths.ts

@@ -0,0 +1,57 @@
+/**
+ * ClickLearn logo artwork. Single source for the `Logo` component and for
+ * generating downloadable SVG files.
+ */
+
+export type LogoVariant = "full" | "mark" | "wordmark";
+export type LogoTone = "color" | "dark" | "white";
+
+/** Brand colours of the logo artwork (mark = primary-500, wordmark = primary-950). */
+export const LOGO_COLORS = {
+  mark: "#3785E0",
+  wordmark: "#112843",
+  white: "#FFFFFF",
+} as const;
+
+/** Paths for the speech-bubble mark, in the full lockup's coordinate space. */
+export const MARK_PATHS = [
+  "M54.4204 27.2102C39.3935 27.2102 27.2102 39.3936 27.2102 54.4204C27.2102 69.4472 39.3935 81.6306 54.4204 81.6306C69.4472 81.6306 81.6306 69.4472 81.6306 54.4204C81.6306 39.3936 69.4472 27.2102 54.4204 27.2102ZM54.4204 68.0255C46.9172 68.0255 40.8153 61.9236 40.8153 54.4204C40.8153 46.9172 46.9172 40.8153 54.4204 40.8153C61.9236 40.8153 68.0255 46.9172 68.0255 54.4204C68.0255 61.9236 61.9236 68.0255 54.4204 68.0255Z",
+  "M54.4204 0C24.3633 0 0 24.3633 0 54.4204C0 79.8291 17.4104 101.169 40.9529 107.162C48.2346 109.015 54.4204 114.932 54.4204 122.446C77.8586 122.446 108.841 95.4465 108.841 54.4204C108.841 24.3633 84.4774 0 54.4204 0ZM54.4204 95.2357C31.9141 95.2357 13.6051 76.9266 13.6051 54.4204C13.6051 31.9142 31.9141 13.6051 54.4204 13.6051C76.9266 13.6051 95.2357 31.9142 95.2357 54.4204C95.2357 76.9266 76.9266 95.2357 54.4204 95.2357Z",
+] as const;
+
+/** Paths for the "ClickLearn" wordmark, in the full lockup's coordinate space. */
+export const WORDMARK_PATHS = [
+  "M136.051 54.4202C136.051 73.1851 151.22 88.433 170.002 88.433C176.325 88.433 182.192 86.8106 187.07 83.8311V69.7566C183.186 74.0864 177.227 76.7938 170.274 76.7938C157.812 76.7938 148.241 67.0492 148.241 54.4202C148.241 41.7913 157.812 32.0467 170.274 32.0467C177.227 32.0467 183.189 34.7541 187.07 39.0839V25.0094C182.192 22.0333 176.325 20.4075 170.002 20.4075C151.22 20.4075 136.051 35.6554 136.051 54.4202Z",
+  "M227.079 40.8152H215.175V87.0725H227.079V40.8152Z",
+  "M233.307 64.1139C233.307 78.0897 244.643 88.433 257.888 88.433C261.969 88.433 265.779 87.5248 268.68 85.8922V74.4572C265.867 76.7258 262.874 77.9945 258.612 77.9945C251.174 77.9945 244.735 72.2769 244.735 64.1105C244.735 55.944 251.174 50.3183 258.612 50.3183C262.874 50.3183 265.867 51.5904 268.68 53.7672V42.3321C265.779 40.6995 261.969 39.7914 257.888 39.7914C244.647 39.7914 233.307 50.138 233.307 64.1139Z",
+  "M384.334 39.7948C371.654 39.7948 360.514 50.2265 360.514 64.2057C360.514 78.1849 371.654 88.433 386.235 88.433C392.031 88.433 398.371 86.9806 402.99 83.8038V73.2769C399.003 76.5421 393.119 78.4502 387.684 78.4502C379.17 78.4502 373.011 74.3653 371.742 67.1988H406.34C406.432 66.1989 406.432 65.2907 406.432 64.3826C406.432 50.5904 399.007 39.7914 384.334 39.7914V39.7948ZM372.106 59.2126C373.735 53.223 378.354 49.4102 384.15 49.4102C390.946 49.4102 394.656 54.3148 395.201 59.2126H372.106Z",
+  "M193.872 87.0725H205.777V19.047C201.355 20.4075 198.634 20.7476 193.872 20.7476V87.0725Z",
+  "M317.614 40.8152H303.523L287.387 59.2603V19.047C282.965 20.4075 280.244 20.7476 275.483 20.7476V87.0725H287.387V66.09L304.155 87.0725H318.339L298.013 62.318L317.614 40.8152Z",
+  "M471.103 40.873H459.151V87.0725H471.056V64.5969C471.056 55.6311 476.447 51.9203 483.331 51.9203C484.236 51.9203 485.025 51.9475 486.021 52.0394V40.0873C478.879 39.4546 473.641 43.5906 471.103 48.0293V40.873Z",
+  "M517.004 39.7948C511.096 39.7948 506.279 42.5906 503.824 46.2912V40.1995H491.824V87.0725H503.728V60.6378C503.728 55.1345 507.184 50.5326 512.912 50.5326C518.64 50.5326 521.755 55.1345 521.755 60.5493V87.0759H534V57.393C534 47.1075 527.728 39.7982 517.004 39.7982V39.7948Z",
+  "M430.645 39.7948C424.584 39.7948 418.55 41.5396 414.931 43.5362V54.0801C418.642 51.8999 423.224 50.138 428.111 50.138C435.081 50.138 439.063 53.7706 439.063 58.4882V61.6888C437.162 59.6922 432.819 57.8521 427.57 57.8521C417.884 57.8521 409.829 63.9336 409.829 72.9164C409.829 82.4467 417.884 88.433 427.207 88.433C432.999 88.433 437.363 86.1916 439.08 84.0113V87.0725H450.645V57.9406C450.645 46.5973 443.043 39.7948 430.645 39.7948ZM429.921 79.5387C425.217 79.5387 420.782 77.1782 420.782 72.9164C420.782 68.6546 425.217 66.1989 429.921 66.1989C434.625 66.1989 439.244 68.6478 439.244 72.9164C439.244 77.185 434.536 79.5387 429.921 79.5387Z",
+  "M221.083 33.2065C224.84 33.2065 227.885 30.1609 227.885 26.404C227.885 22.647 224.84 19.6014 221.083 19.6014C217.326 19.6014 214.28 22.647 214.28 26.404C214.28 30.1609 217.326 33.2065 221.083 33.2065Z",
+  "M333.984 22.4483C329.563 23.8088 326.842 24.1489 322.08 24.1489V87.0725H359.494V76.8687H333.984V22.4483Z",
+] as const;
+
+/** viewBox per variant — crops the shared coordinate space. */
+export const LOGO_VIEWBOX: Record<LogoVariant, string> = {
+  full: "0 0 534 122.446",
+  mark: "0 0 108.841 122.446",
+  wordmark: "136.051 19.047 397.949 69.386",
+};
+
+export function logoFills(tone: LogoTone) {
+  if (tone === "white") return { mark: LOGO_COLORS.white, wordmark: LOGO_COLORS.white };
+  if (tone === "dark") return { mark: LOGO_COLORS.wordmark, wordmark: LOGO_COLORS.wordmark };
+  return { mark: LOGO_COLORS.mark, wordmark: LOGO_COLORS.wordmark };
+}
+
+/** Standalone SVG markup, e.g. for download links. */
+export function logoSvg(variant: LogoVariant, tone: LogoTone = "color"): string {
+  const fills = logoFills(tone);
+  const [, , width, height] = LOGO_VIEWBOX[variant].split(" ").map(Number);
+  const mark = variant === "wordmark" ? [] : MARK_PATHS.map((d) => `<path d="${d}" fill="${fills.mark}"/>`);
+  const word = variant === "mark" ? [] : WORDMARK_PATHS.map((d) => `<path d="${d}" fill="${fills.wordmark}"/>`);
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${LOGO_VIEWBOX[variant]}" width="${width}" height="${height}" fill="none"><title>ClickLearn</title>${[...word, ...mark].join("")}</svg>`;
+}

package/src/styles/globals.css

@@ -37,6 +37,11 @@
   --color-destructive-foreground: var(--destructive-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-callout-info: var(--callout-background-info);
+  --color-callout-warning: var(--callout-background-warning);
+  --color-callout-error: var(--callout-background-error);
   --color-badge-success: var(--badge-success);
   --color-badge-success-foreground: var(--badge-success-foreground);
   --color-badge-warning: var(--badge-warning);
@@ -104,6 +109,11 @@
   --destructive-foreground: var(--color-white);
   --success: var(--color-green-600);
   --success-foreground: var(--color-white);
+  --warning: #eab308;
+  --warning-foreground: var(--color-white);
+  --callout-background-info: var(--primary-50);
+  --callout-background-warning: #fefce8;
+  --callout-background-error: #fef2f2;
   --badge-success: var(--color-green-700);
   --badge-success-foreground: var(--color-white);
   --badge-warning: var(--color-yellow-500);
@@ -152,7 +162,6 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: var(--primary);
   --primary-foreground: oklch(0.97 0.014 264.76);
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
@@ -161,6 +170,9 @@
   --accent: oklch(0.371 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --callout-background-info: color-mix(in oklab, var(--primary-500) 15%, var(--background));
+  --callout-background-warning: color-mix(in oklab, #eab308 12%, var(--background));
+  --callout-background-error: color-mix(in oklab, var(--color-red-600) 15%, var(--background));
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);