@womp/kookie-ui 0.3.26 → 0.5.0

package/src/styles/tokens/font-family.css

@@ -0,0 +1,263 @@
+/***************************************************************************************************
+ *                                                                                                 *
+ * TYPEFACES                                                                                       *
+ *                                                                                                 *
+ * This file is the single owner of every font-family decision in Kookie UI. Sizes, weights,       *
+ * line heights and letter spacing live in `typography.css`; nothing else declares a stack.        *
+ *                                                                                                 *
+ * There are exactly two tiers:                                                                    *
+ *                                                                                                 *
+ *   1. STACKS  — which typefaces exist. Three of them: --font-sans, --font-mono, --font-serif.    *
+ *                Declared on `:root`, because a typeface is an app-wide resource (and because     *
+ *                that is where `next/font` and friends put theirs). Override at `:root`.          *
+ *                                                                                                 *
+ *   2. ROLES   — which stack each piece of text uses: --font-body, --font-heading, --font-code,   *
+ *                --font-strong, --font-em, --font-quote. Declared on `.radix-themes`, because a   *
+ *                role is a per-theme decision that `<Theme fontFamily>` has to be able to switch  *
+ *                per subtree. Override at `.radix-themes`.                                        *
+ *                                                                                                 *
+ * No webfonts are loaded here. The defaults below are system stacks. To use Kookie's own          *
+ * typefaces (Inter / JetBrains Mono / Playfair Display), additionally import                      *
+ * '@womp/kookie-ui/fonts.css'.                                                                    *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+:root {
+  /* Tier 1: stacks. Override these to change every typeface in the system. */
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji';
+  --font-mono: 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-serif: 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
+}
+
+.radix-themes {
+  /* Tier 2: roles. Each one points at a stack. Override these to give a role its own typeface —
+     e.g. `--font-heading: var(--font-serif)` for serif headings over a sans body. */
+  --font-body: var(--font-sans);
+  --font-heading: var(--font-body); /* follows the body unless you say otherwise */
+  --font-code: var(--font-mono);
+  --font-strong: var(--font-body);
+  --font-em: var(--font-serif);
+  --font-quote: var(--font-serif);
+
+  /* Radix Themes names, kept as aliases of the roles above. Components read these, so overriding
+     either the Kookie role or the Radix name works — they are the same token, spelled twice. */
+  --default-font-family: var(--font-body);
+  --heading-font-family: var(--font-heading);
+  --code-font-family: var(--font-code);
+  --strong-font-family: var(--font-strong);
+  --em-font-family: var(--font-em);
+  --quote-font-family: var(--font-quote);
+
+  /* @deprecated Use --font-sans / --font-mono / --font-serif directly. */
+  --default-font-family-sans: var(--font-sans);
+  --default-font-family-mono: var(--font-mono);
+  --default-font-family-serif: var(--font-serif);
+}
+
+/* `<Theme fontFamily>` — sets the body role only. Heading follows it through --font-heading's
+   default, so a `--font-heading` override of yours survives a theme font switch. */
+[data-font-family='sans'] {
+  --font-body: var(--font-sans);
+}
+[data-font-family='mono'] {
+  --font-body: var(--font-mono);
+}
+[data-font-family='serif'] {
+  --font-body: var(--font-serif);
+}
+
+/* `<Theme headingFontFamily>` — sets the heading role independently of the body. */
+[data-heading-font-family='sans'] {
+  --font-heading: var(--font-sans);
+}
+[data-heading-font-family='mono'] {
+  --font-heading: var(--font-mono);
+}
+[data-heading-font-family='serif'] {
+  --font-heading: var(--font-serif);
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * METRIC OVERRIDES                                                                                *
+ *                                                                                                 *
+ * Fallback faces normalised to match the primary stack's metrics, so swapping a webfont for a    *
+ * system face does not reflow the page. Referenced by the default stacks above.                  *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 300;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semilight'), local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 300;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semilight Italic'), local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 400;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 500;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semibold'), local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 500;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semibold Italic'), local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 700;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Bold');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Bold Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 300;
+  descent-override: 35%;
+  src: local('Open Sans Light'), local('Open Sans Regular');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 300;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Light Italic'), local('Open Sans Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 400;
+  descent-override: 35%;
+  src: local('Open Sans Regular');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 500;
+  descent-override: 35%;
+  src: local('Open Sans Medium'), local('Open Sans Regular');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 500;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Medium Italic'), local('Open Sans Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 700;
+  descent-override: 35%;
+  src: local('Open Sans Bold');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Bold Italic');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 400;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Italic');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 700;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Bold');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Bold Italic');
+}

package/src/styles/tokens/radius.css

@@ -1,45 +1,88 @@
+/*
+ * RADIUS
+ *
+ * Two channels, one theme.
+ *
+ * `--radius-*`         CONTROLS & MARKS — buttons, inputs, checkboxes, badges,
+ *                      switches, tabs. These scale aggressively with the theme
+ *                      and opt into `--radius-full` to become pills.
+ *
+ * `--radius-surface-*` SURFACES — cards, dialogs, popovers, menus, tables,
+ *                      callouts. These damp as the theme grows and never go
+ *                      pill. A surface at `full` is exactly as round as a
+ *                      surface at `medium`; `--radius-surface-factor` is
+ *                      capped at 1.
+ *
+ * The gap between the two channels is the point: round controls read as
+ * touchable, restrained surfaces read as architectural. Widening the theme
+ * widens that contrast instead of inflating everything at once.
+ */
+
 [data-radius] {
-  /*  */
+  /* Controls & marks */
   --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
   --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
   --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
   --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
-  
+
   /*  */
   --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
   --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
   --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
   --radius-8: calc(28px * var(--scaling) * var(--radius-factor));
-  
+
   /*  */
   --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
   --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
   --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
   --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
+
+  /* Surfaces — same ramp, damped factor, no pill */
+  --radius-surface-1: calc(6px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-2: calc(8px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-3: calc(10px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-4: calc(12px * var(--scaling) * var(--radius-surface-factor));
+
+  /*  */
+  --radius-surface-5: calc(16px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-6: calc(20px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-7: calc(24px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-8: calc(28px * var(--scaling) * var(--radius-surface-factor));
+
+  /*  */
+  --radius-surface-9: calc(32px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-10: calc(40px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-11: calc(48px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-12: calc(56px * var(--scaling) * var(--radius-surface-factor));
 }
 
 
 [data-radius='none'] {
   --radius-factor: 0;
+  --radius-surface-factor: 0;
   --radius-full: 0px;
 }
 
 [data-radius='small'] {
   --radius-factor: 0.75;
+  --radius-surface-factor: 0.5;
   --radius-full: 0px;
 }
 
 [data-radius='medium'] {
   --radius-factor: 1;
+  --radius-surface-factor: 0.75;
   --radius-full: 0px;
 }
 
 [data-radius='large'] {
   --radius-factor: 1.5;
+  --radius-surface-factor: 0.9;
   --radius-full: 0px;
 }
 
 [data-radius='full'] {
-  --radius-factor: 2.0;
+  --radius-factor: 2;
+  --radius-surface-factor: 1;
   --radius-full: 9999px;
 }

package/src/styles/tokens/typography.css

@@ -50,18 +50,8 @@
   --letter-spacing-11: -0.035em;
   --letter-spacing-12: -0.04em;
 
-  /* default values */
+  /* default values (typefaces live in font-family.css) */
 
-  --default-font-family:
-    var(--font-sans, var(--font-inter, 'Inter')), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji';
-
-  /* Font family overrides based on theme data attribute */
-  --default-font-family-sans:
-    var(--font-sans, var(--font-inter, 'Inter')), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji';
-  --default-font-family-mono: var(--font-mono);
-  --default-font-family-serif: var(--font-serif);
   --default-font-size: var(--font-size-3); /* Same size used for `<Text size="3">` */
   --default-font-style: normal;
   --default-font-weight: var(--font-weight-regular);
@@ -72,7 +62,6 @@
 
   /* Heading */
 
-  --heading-font-family: var(--default-font-family);
   --heading-font-size-adjust: 1;
   --heading-font-style: normal;
   --heading-leading-trim-start: var(--default-leading-trim-start);
@@ -95,7 +84,6 @@
 
   /* Code */
 
-  --code-font-family: var(--font-mono, var(--font-jetbrains-mono, 'JetBrains Mono')), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
   --code-font-size-adjust: 0.95;
   --code-font-style: normal;
   --code-font-weight: inherit;
@@ -107,7 +95,6 @@
 
   /* Strong */
 
-  --strong-font-family: var(--default-font-family);
   --strong-font-size-adjust: 1;
   --strong-font-style: inherit;
   --strong-font-weight: var(--font-weight-medium);
@@ -115,7 +102,6 @@
 
   /* Em */
 
-  --em-font-family: 'Times New Roman', 'Times', serif;
   --em-font-size-adjust: 1.18;
   --em-font-style: italic;
   --em-font-weight: inherit;
@@ -123,7 +109,6 @@
 
   /* Quote */
 
-  --quote-font-family: 'Times New Roman', 'Times', serif;
   --quote-font-size-adjust: 1.18;
   --quote-font-style: italic;
   --quote-font-weight: inherit;
@@ -140,6 +125,7 @@
 .radix-themes {
   overflow-wrap: break-word;
   font-family: var(--default-font-family);
+  font-synthesis: none;
   font-size: var(--default-font-size);
   font-weight: var(--default-font-weight);
   font-style: var(--default-font-style);
@@ -149,203 +135,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-@font-face {
-  font-family: 'Segoe UI (Custom)';
-  font-weight: 300;
-  size-adjust: 103%;
-  descent-override: 35%;
-  ascent-override: 105%;
-  src: local('Segoe UI Semilight'), local('Segoe UI');
-}
-
-@font-face {
-  font-family: 'Segoe UI (Custom)';
-  font-weight: 300;
-  font-style: italic;
-  size-adjust: 103%;
-  descent-override: 35%;
-  ascent-override: 105%;
-  src: local('Segoe UI Semilight Italic'), local('Segoe UI Italic');
-}
-
-@font-face {
-  font-family: 'Segoe UI (Custom)';
-  font-weight: 400;
-  size-adjust: 103%;
-  descent-override: 35%;
-  ascent-override: 105%;
-  src: local('Segoe UI');
-}
-
-@font-face {
-  font-family: 'Segoe UI (Custom)';
-  font-weight: 400;
-  font-style: italic;
-  size-adjust: 103%;
-  descent-override: 35%;
-  ascent-override: 105%;
-  src: local('Segoe UI Italic');
-}
-
-@font-face {
-  font-family: 'Segoe UI (Custom)';
-  font-weight: 500;
-  size-adjust: 103%;
-  descent-override: 35%;
-  ascent-override: 105%;
-  src: local('Segoe UI Semibold'), local('Segoe UI');
-}
-
-@font-face {
-  font-family: 'Segoe UI (Custom)';
-  font-weight: 500;
-  font-style: italic;
-  size-adjust: 103%;
-  descent-override: 35%;
-  ascent-override: 105%;
-  src: local('Segoe UI Semibold Italic'), local('Segoe UI Italic');
-}
-
-@font-face {
-  font-family: 'Segoe UI (Custom)';
-  font-weight: 700;
-  size-adjust: 103%;
-  descent-override: 35%;
-  ascent-override: 105%;
-  src: local('Segoe UI Bold');
-}
-
-@font-face {
-  font-family: 'Segoe UI (Custom)';
-  font-weight: 700;
-  font-style: italic;
-  size-adjust: 103%;
-  descent-override: 35%;
-  ascent-override: 105%;
-  src: local('Segoe UI Bold Italic');
-}
-
-@font-face {
-  font-family: 'Open Sans (Custom)';
-  font-weight: 300;
-  descent-override: 35%;
-  src: local('Open Sans Light'), local('Open Sans Regular');
-}
-
-@font-face {
-  font-family: 'Open Sans (Custom)';
-  font-weight: 300;
-  font-style: italic;
-  descent-override: 35%;
-  src: local('Open Sans Light Italic'), local('Open Sans Italic');
-}
-
-@font-face {
-  font-family: 'Open Sans (Custom)';
-  font-weight: 400;
-  descent-override: 35%;
-  src: local('Open Sans Regular');
-}
-
-@font-face {
-  font-family: 'Open Sans (Custom)';
-  font-weight: 400;
-  font-style: italic;
-  descent-override: 35%;
-  src: local('Open Sans Italic');
-}
-
-@font-face {
-  font-family: 'Open Sans (Custom)';
-  font-weight: 500;
-  descent-override: 35%;
-  src: local('Open Sans Medium'), local('Open Sans Regular');
-}
-
-@font-face {
-  font-family: 'Open Sans (Custom)';
-  font-weight: 500;
-  font-style: italic;
-  descent-override: 35%;
-  src: local('Open Sans Medium Italic'), local('Open Sans Italic');
-}
-
-@font-face {
-  font-family: 'Open Sans (Custom)';
-  font-weight: 700;
-  descent-override: 35%;
-  src: local('Open Sans Bold');
-}
-
-@font-face {
-  font-family: 'Open Sans (Custom)';
-  font-weight: 700;
-  font-style: italic;
-  descent-override: 35%;
-  src: local('Open Sans Bold Italic');
-}
-
-@font-face {
-  font-family: 'Consolas (Custom)';
-  font-weight: 400;
-  size-adjust: 110%;
-  ascent-override: 85%;
-  descent-override: 22%;
-  src: local('Consolas');
-}
-
-@font-face {
-  font-family: 'Consolas (Custom)';
-  font-weight: 400;
-  font-style: italic;
-  size-adjust: 110%;
-  ascent-override: 85%;
-  descent-override: 22%;
-  src: local('Consolas Italic');
-}
-
-@font-face {
-  font-family: 'Consolas (Custom)';
-  font-weight: 700;
-  size-adjust: 110%;
-  ascent-override: 85%;
-  descent-override: 22%;
-  src: local('Consolas Bold');
-}
-
-@font-face {
-  font-family: 'Consolas (Custom)';
-  font-weight: 700;
-  font-style: italic;
-  size-adjust: 110%;
-  ascent-override: 85%;
-  descent-override: 22%;
-  src: local('Consolas Bold Italic');
-}
-
-/* Font family data attribute support */
-[data-font-family='sans'] {
-  --default-font-family: var(--default-font-family-sans);
-  --heading-font-family: var(--default-font-family-sans);
-  --strong-font-family: var(--default-font-family-sans);
-}
-
-[data-font-family='mono'] {
-  --default-font-family: var(--default-font-family-mono);
-  --heading-font-family: var(--default-font-family-mono);
-  --strong-font-family: var(--default-font-family-mono);
-}
-
-[data-font-family='serif'] {
-  /* Map serif directly to --font-serif to avoid resolution issues */
-  --default-font-family: var(--font-serif);
-  --heading-font-family: var(--font-serif);
-  --strong-font-family: var(--font-serif);
-}
-
-/* Ensure serif font takes precedence over .radix-themes */
-/* stylelint-disable-next-line selector-max-specificity */
-.radix-themes[data-font-family='serif'] {
-  font-family: var(--font-serif) !important;
-}