@cartbase/storefront 0.17.0 → 0.18.1

package/theme/theme.css

@@ -1,150 +1,150 @@
-/*
- * Cartbase storefront — the VOCABULARY.
- *
- * Every line maps a value from tokens.css into a Tailwind namespace, which is
- * what turns it into a utility class. Registering `--color-primary` is what
- * makes `bg-primary`, `text-primary`, `border-primary` and `ring-primary`
- * exist. Registering `--text-h2` is what makes `text-h2` exist.
- *
- * THIS FILE HOLDS NO VALUES, and a theme never edits it. A theme swaps
- * tokens.css and the whole library repaints, because components only ever
- * reference names from here.
- *
- * Every namespace below is Tailwind's own. We invented none of them and we
- * add none of our own, because the requirement is that a developer or a
- * coding agent reads `text-h2` or `bg-primary` and needs no documentation to
- * know what it is or how to change it.
- */
-
-@theme {
-  /* ── Colour ───────────────────────────────────────────────────────────── */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-
-  --color-destructive: var(--destructive);
-  --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-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* ── Typefaces ────────────────────────────────────────────────────────── */
-  --font-body: var(--font-body-family);
-  --font-display: var(--font-display-family);
-  --font-mono: var(--font-mono-family);
-
-  /*
-   * ── Type scale ──────────────────────────────────────────────────────────
-   * Generated at a 1.2 ratio from a 16px base and rounded to 4px steps, the
-   * major-third scale Polaris uses. Named h1 to h6 because that is what every
-   * web developer reads without translation.
-   *
-   * The name is a STYLE, never a tag. Put `text-h2` on an <h1> when the page
-   * needs a smaller heading: the tag stays correct for search engines and
-   * screen readers, the style is a separate decision. This is exactly how
-   * Webflow's Client-First `heading-style-h*` classes work.
-   */
-  --text-h1: 2.5rem;
-  --text-h1--line-height: 1.1;
-  --text-h1--letter-spacing: -0.02em;
-  --text-h1--font-weight: 600;
-
-  --text-h2: 2rem;
-  --text-h2--line-height: 1.15;
-  --text-h2--letter-spacing: -0.015em;
-  --text-h2--font-weight: 600;
-
-  --text-h3: 1.75rem;
-  --text-h3--line-height: 1.2;
-  --text-h3--letter-spacing: -0.01em;
-  --text-h3--font-weight: 600;
-
-  --text-h4: 1.5rem;
-  --text-h4--line-height: 1.25;
-  --text-h4--font-weight: 600;
-
-  --text-h5: 1.25rem;
-  --text-h5--line-height: 1.3;
-  --text-h5--font-weight: 600;
-
-  --text-h6: 1rem;
-  --text-h6--line-height: 1.4;
-  --text-h6--font-weight: 600;
-
-  --text-body-large: 1.125rem;
-  --text-body-large--line-height: 1.6;
-
-  --text-body: 1rem;
-  --text-body--line-height: 1.6;
-
-  --text-body-small: 0.875rem;
-  --text-body-small--line-height: 1.5;
-
-  /* Buttons, form labels, badges — short, never a sentence. */
-  --text-label: 0.875rem;
-  --text-label--line-height: 1.2;
-  --text-label--font-weight: 500;
-
-  /* Fine print, metadata, timestamps. */
-  --text-caption: 0.75rem;
-  --text-caption--line-height: 1.4;
-
-  /*
-   * ── Weight ──────────────────────────────────────────────────────────────
-   * Three, not four. Bold and semibold were doing the same job in different
-   * places, which is how a scale rots.
-   */
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-
-  /*
-   * ── Spacing ─────────────────────────────────────────────────────────────
-   * Tailwind's own 4px step, stated rather than assumed so a theme can widen
-   * the whole rhythm with one number.
-   */
-  --spacing: 0.25rem;
-
-  /* ── Shape ────────────────────────────────────────────────────────────── */
-  --radius-sm: calc(var(--radius-base) - 4px);
-  --radius-md: calc(var(--radius-base) - 2px);
-  --radius-lg: var(--radius-base);
-  --radius-xl: calc(var(--radius-base) + 4px);
-  --radius-2xl: calc(var(--radius-base) + 12px);
-
-  /*
-   * ── Elevation ───────────────────────────────────────────────────────────
-   * Named for what is raised, not for how big the blur is. `shadow-card` says
-   * what it is for; `shadow-md` says nothing and cannot be retuned per theme.
-   */
-  --shadow-card: var(--elevation-card);
-  --shadow-card-hover: var(--elevation-card-hover);
-  --shadow-popover: var(--elevation-popover);
-  --shadow-drawer: var(--elevation-drawer);
-
-  /* ── Motion ───────────────────────────────────────────────────────────── */
-  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
-  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
-
-  /* ── Layout ───────────────────────────────────────────────────────────── */
-  --container-page: var(--layout-page-width);
-  --container-prose: var(--layout-prose-width);
-}
+/*
+ * Cartbase storefront — the VOCABULARY.
+ *
+ * Every line maps a value from tokens.css into a Tailwind namespace, which is
+ * what turns it into a utility class. Registering `--color-primary` is what
+ * makes `bg-primary`, `text-primary`, `border-primary` and `ring-primary`
+ * exist. Registering `--text-h2` is what makes `text-h2` exist.
+ *
+ * THIS FILE HOLDS NO VALUES, and a theme never edits it. A theme swaps
+ * tokens.css and the whole library repaints, because components only ever
+ * reference names from here.
+ *
+ * Every namespace below is Tailwind's own. We invented none of them and we
+ * add none of our own, because the requirement is that a developer or a
+ * coding agent reads `text-h2` or `bg-primary` and needs no documentation to
+ * know what it is or how to change it.
+ */
+
+@theme {
+  /* ── Colour ───────────────────────────────────────────────────────────── */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --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-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* ── Typefaces ────────────────────────────────────────────────────────── */
+  --font-body: var(--font-body-family);
+  --font-display: var(--font-display-family);
+  --font-mono: var(--font-mono-family);
+
+  /*
+   * ── Type scale ──────────────────────────────────────────────────────────
+   * Generated at a 1.2 ratio from a 16px base and rounded to 4px steps, the
+   * major-third scale Polaris uses. Named h1 to h6 because that is what every
+   * web developer reads without translation.
+   *
+   * The name is a STYLE, never a tag. Put `text-h2` on an <h1> when the page
+   * needs a smaller heading: the tag stays correct for search engines and
+   * screen readers, the style is a separate decision. This is exactly how
+   * Webflow's Client-First `heading-style-h*` classes work.
+   */
+  --text-h1: 2.5rem;
+  --text-h1--line-height: 1.1;
+  --text-h1--letter-spacing: -0.02em;
+  --text-h1--font-weight: 600;
+
+  --text-h2: 2rem;
+  --text-h2--line-height: 1.15;
+  --text-h2--letter-spacing: -0.015em;
+  --text-h2--font-weight: 600;
+
+  --text-h3: 1.75rem;
+  --text-h3--line-height: 1.2;
+  --text-h3--letter-spacing: -0.01em;
+  --text-h3--font-weight: 600;
+
+  --text-h4: 1.5rem;
+  --text-h4--line-height: 1.25;
+  --text-h4--font-weight: 600;
+
+  --text-h5: 1.25rem;
+  --text-h5--line-height: 1.3;
+  --text-h5--font-weight: 600;
+
+  --text-h6: 1rem;
+  --text-h6--line-height: 1.4;
+  --text-h6--font-weight: 600;
+
+  --text-body-large: 1.125rem;
+  --text-body-large--line-height: 1.6;
+
+  --text-body: 1rem;
+  --text-body--line-height: 1.6;
+
+  --text-body-small: 0.875rem;
+  --text-body-small--line-height: 1.5;
+
+  /* Buttons, form labels, badges — short, never a sentence. */
+  --text-label: 0.875rem;
+  --text-label--line-height: 1.2;
+  --text-label--font-weight: 500;
+
+  /* Fine print, metadata, timestamps. */
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 1.4;
+
+  /*
+   * ── Weight ──────────────────────────────────────────────────────────────
+   * Three, not four. Bold and semibold were doing the same job in different
+   * places, which is how a scale rots.
+   */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
+  /*
+   * ── Spacing ─────────────────────────────────────────────────────────────
+   * Tailwind's own 4px step, stated rather than assumed so a theme can widen
+   * the whole rhythm with one number.
+   */
+  --spacing: 0.25rem;
+
+  /* ── Shape ────────────────────────────────────────────────────────────── */
+  --radius-sm: calc(var(--radius-base) - 4px);
+  --radius-md: calc(var(--radius-base) - 2px);
+  --radius-lg: var(--radius-base);
+  --radius-xl: calc(var(--radius-base) + 4px);
+  --radius-2xl: calc(var(--radius-base) + 12px);
+
+  /*
+   * ── Elevation ───────────────────────────────────────────────────────────
+   * Named for what is raised, not for how big the blur is. `shadow-card` says
+   * what it is for; `shadow-md` says nothing and cannot be retuned per theme.
+   */
+  --shadow-card: var(--elevation-card);
+  --shadow-card-hover: var(--elevation-card-hover);
+  --shadow-popover: var(--elevation-popover);
+  --shadow-drawer: var(--elevation-drawer);
+
+  /* ── Motion ───────────────────────────────────────────────────────────── */
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* ── Layout ───────────────────────────────────────────────────────────── */
+  --container-page: var(--layout-page-width);
+  --container-prose: var(--layout-prose-width);
+}

package/theme/tokens.css

@@ -1,106 +1,106 @@
-/*
- * Cartbase storefront — the DEFAULT THEME's values.
- *
- * This file is one half of the two-layer token model. It holds VALUES and
- * nothing else. The other half (theme.css) holds the NAMES and never holds a
- * value. A theme replaces this file; it never touches the other one.
- *
- * Naming follows shadcn/ui exactly, because that is the vocabulary every
- * developer and every coding agent already knows without reading a document:
- * a semantic role (`primary`, `muted`, `destructive`) always paired with its
- * `-foreground`, so text on a surface is never a guess.
- *
- * Colours are oklch. Opacity modifiers (`bg-primary/50`) work on full colour
- * values in Tailwind 4, so unlike the old preset these are complete colours
- * rather than bare channels waiting for a wrapper.
- */
-
-:root {
-  color-scheme: light;
-
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-
-  /* ── Roles ────────────────────────────────────────────────────────────── */
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-
-  /* ── Feedback ─────────────────────────────────────────────────────────── */
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --success: oklch(0.648 0.15 160);
-  --success-foreground: oklch(0.985 0 0);
-  --warning: oklch(0.828 0.189 84.429);
-  --warning-foreground: oklch(0.279 0.077 45.635);
-
-  /* ── Lines and focus ──────────────────────────────────────────────────── */
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-
-  /* ── Typefaces ────────────────────────────────────────────────────────── */
-  --font-body-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-display-family: ui-serif, Georgia, serif;
-  --font-mono-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-
-  /* ── Shape ────────────────────────────────────────────────────────────── */
-  --radius-base: 0.5rem;
-
-  /* ── Elevation ────────────────────────────────────────────────────────── */
-  --elevation-card: 0 1px 2px 0 oklch(0 0 0 / 5%);
-  --elevation-card-hover: 0 4px 12px -2px oklch(0 0 0 / 10%), 0 2px 4px -2px oklch(0 0 0 / 6%);
-  --elevation-popover: 0 8px 24px -4px oklch(0 0 0 / 12%), 0 2px 6px -2px oklch(0 0 0 / 8%);
-  --elevation-drawer: -8px 0 32px -8px oklch(0 0 0 / 16%);
-
-  /* ── Layout ───────────────────────────────────────────────────────────── */
-  --layout-page-width: 80rem;
-  --layout-prose-width: 42rem;
-}
-
-.dark {
-  color-scheme: dark;
-
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --success: oklch(0.696 0.17 162.48);
-  --success-foreground: oklch(0.145 0 0);
-  --warning: oklch(0.828 0.189 84.429);
-  --warning-foreground: oklch(0.279 0.077 45.635);
-
-  --border: oklch(1 0 0 / 12%);
-  --input: oklch(1 0 0 / 18%);
-  --ring: oklch(0.556 0 0);
-
-  /* Shadows have to be heavier on a dark ground or they vanish entirely. */
-  --elevation-card: 0 1px 2px 0 oklch(0 0 0 / 40%);
-  --elevation-card-hover: 0 4px 12px -2px oklch(0 0 0 / 55%), 0 2px 4px -2px oklch(0 0 0 / 40%);
-  --elevation-popover: 0 8px 24px -4px oklch(0 0 0 / 60%), 0 2px 6px -2px oklch(0 0 0 / 45%);
-  --elevation-drawer: -8px 0 32px -8px oklch(0 0 0 / 65%);
-}
+/*
+ * Cartbase storefront — the DEFAULT THEME's values.
+ *
+ * This file is one half of the two-layer token model. It holds VALUES and
+ * nothing else. The other half (theme.css) holds the NAMES and never holds a
+ * value. A theme replaces this file; it never touches the other one.
+ *
+ * Naming follows shadcn/ui exactly, because that is the vocabulary every
+ * developer and every coding agent already knows without reading a document:
+ * a semantic role (`primary`, `muted`, `destructive`) always paired with its
+ * `-foreground`, so text on a surface is never a guess.
+ *
+ * Colours are oklch. Opacity modifiers (`bg-primary/50`) work on full colour
+ * values in Tailwind 4, so unlike the old preset these are complete colours
+ * rather than bare channels waiting for a wrapper.
+ */
+
+:root {
+  color-scheme: light;
+
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  /* ── Roles ────────────────────────────────────────────────────────────── */
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  /* ── Feedback ─────────────────────────────────────────────────────────── */
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.648 0.15 160);
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.828 0.189 84.429);
+  --warning-foreground: oklch(0.279 0.077 45.635);
+
+  /* ── Lines and focus ──────────────────────────────────────────────────── */
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* ── Typefaces ────────────────────────────────────────────────────────── */
+  --font-body-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-display-family: ui-serif, Georgia, serif;
+  --font-mono-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* ── Shape ────────────────────────────────────────────────────────────── */
+  --radius-base: 0.5rem;
+
+  /* ── Elevation ────────────────────────────────────────────────────────── */
+  --elevation-card: 0 1px 2px 0 oklch(0 0 0 / 5%);
+  --elevation-card-hover: 0 4px 12px -2px oklch(0 0 0 / 10%), 0 2px 4px -2px oklch(0 0 0 / 6%);
+  --elevation-popover: 0 8px 24px -4px oklch(0 0 0 / 12%), 0 2px 6px -2px oklch(0 0 0 / 8%);
+  --elevation-drawer: -8px 0 32px -8px oklch(0 0 0 / 16%);
+
+  /* ── Layout ───────────────────────────────────────────────────────────── */
+  --layout-page-width: 80rem;
+  --layout-prose-width: 42rem;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.696 0.17 162.48);
+  --success-foreground: oklch(0.145 0 0);
+  --warning: oklch(0.828 0.189 84.429);
+  --warning-foreground: oklch(0.279 0.077 45.635);
+
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 18%);
+  --ring: oklch(0.556 0 0);
+
+  /* Shadows have to be heavier on a dark ground or they vanish entirely. */
+  --elevation-card: 0 1px 2px 0 oklch(0 0 0 / 40%);
+  --elevation-card-hover: 0 4px 12px -2px oklch(0 0 0 / 55%), 0 2px 4px -2px oklch(0 0 0 / 40%);
+  --elevation-popover: 0 8px 24px -4px oklch(0 0 0 / 60%), 0 2px 6px -2px oklch(0 0 0 / 45%);
+  --elevation-drawer: -8px 0 32px -8px oklch(0 0 0 / 65%);
+}