@womp/kookie-ui 0.5.0 → 0.7.0

package/src/styles/fonts.css

@@ -9,7 +9,7 @@
  *   import '@womp/kookie-ui/styles.css';                                                          *
  *   import '@womp/kookie-ui/fonts.css';                                                           *
  *                                                                                                 *
- * This costs three render-blocking requests to Google Fonts. If you already load fonts yourself   *
+ * This costs four render-blocking requests to Google Fonts. If you already load fonts yourself    *
  * (`next/font`, a self-hosted @font-face, a CDN), skip this file and point the stacks at your     *
  * own faces instead:                                                                              *
  *                                                                                                 *
@@ -20,6 +20,7 @@
  ***************************************************************************************************/
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 
@@ -27,4 +28,8 @@
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas (Custom)', 'Liberation Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
   --font-serif: 'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
+
+  /* Headings get Inter Tight; body stays Inter. Inter is listed next so a heading rendered before
+     Inter Tight arrives falls back to the body face rather than to a system sans. */
+  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
 }

package/src/styles/tokens/color.css

@@ -1022,6 +1022,115 @@
   --accent-track: var(--yellow-track);
 }
 
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*             Accent roles            */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+/*
+ * Role tokens for accent text and solid fills. There is no per-component contrast prop.
+ *
+ * Text reads an INK, strong by default. Gray ink is step 12. Chromatic ink is step 11
+ * mixed toward step 12, so an error still reads red instead of near-black. The muted and
+ * faint rungs back the `emphasis` prop ('medium' and 'quiet').
+ *
+ * Fills read a SOLID. Gray always fills with step 12 and inverted text; chromatic colours
+ * keep step 9. This is keyed on the colour being gray, never on a prop.
+ *
+ * Why these are declared on every [data-accent-color] element: a custom property that
+ * holds var(--accent-11) resolves on the element that declares it, and children inherit
+ * the resolved colour. So each element that changes the accent must re-declare the roles.
+ * Elements with data-accent-color="" mean "inherit the parent's accent" and are skipped,
+ * so they inherit the parent's resolved roles (chroma stays chroma, gray stays gray).
+ * The gray rule comes last so it wins over `.radix-themes` at equal specificity.
+ */
+
+/* Mode-dependent filters for solid fills. Chromatic fills change colour on hover (step 10);
+ * gray is already at step 12, so it gets a filter instead. */
+:where(.radix-themes) {
+  --solid-chroma-hover-filter: none;
+  --solid-chroma-active-filter: brightness(0.9) contrast(1.03);
+  --solid-chroma-open-filter: brightness(0.96) contrast(1.02);
+  --solid-gray-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
+  --solid-gray-active-filter: brightness(0.92);
+  --solid-gray-open-filter: brightness(0.96);
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --solid-chroma-hover-filter: none;
+  --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
+  --solid-chroma-open-filter: brightness(0.95) contrast(1.02);
+  --solid-gray-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
+  --solid-gray-active-filter: brightness(0.9);
+  --solid-gray-open-filter: brightness(0.95);
+}
+
+/* Gray ink ladder, independent of the accent. Used by `emphasis` when no colour is set. */
+.radix-themes {
+  --gray-ink: var(--gray-12);
+  --gray-ink-muted: var(--gray-a11);
+  --gray-ink-faint: var(--gray-a10);
+}
+
+/* Chromatic accent */
+.radix-themes,
+[data-accent-color]:where(:not([data-accent-color=''], [data-accent-color='gray'])) {
+  /* How far chromatic ink moves from step 11 toward step 12. */
+  --accent-ink-mix: 45%;
+
+  --accent-ink: color-mix(in oklab, var(--accent-11), var(--accent-12) var(--accent-ink-mix));
+  --accent-ink-muted: color-mix(in oklab, var(--accent-ink) 74%, transparent);
+  --accent-ink-faint: color-mix(in oklab, var(--accent-ink) 52%, transparent);
+
+  --accent-solid: var(--accent-9);
+  --accent-solid-a: var(--accent-a9);
+  --accent-solid-hover: var(--accent-10);
+  --accent-solid-hover-a: var(--accent-a10);
+  --accent-solid-active: var(--accent-11);
+  --accent-solid-active-a: var(--accent-a11);
+  --accent-solid-contrast: var(--accent-contrast);
+  --accent-solid-selection: var(--accent-7);
+  --accent-solid-selection-contrast: var(--accent-12);
+  /* Thin marks (Tabs indicator, RadioCards outline): light yellow uses step 10 here */
+  --accent-solid-indicator: var(--accent-indicator);
+  /* Thumb that sits on a solid fill (Switch, Slider) */
+  --accent-solid-thumb: white;
+  /* Badge chip on a solid-highlighted row (Sidebar) */
+  --accent-solid-badge: var(--accent-12);
+  --accent-solid-badge-contrast: var(--accent-1);
+
+  --accent-solid-hover-filter: var(--solid-chroma-hover-filter);
+  --accent-solid-active-filter: var(--solid-chroma-active-filter);
+  --accent-solid-open-filter: var(--solid-chroma-open-filter);
+}
+
+/* Gray accent: ink is step 12, fills are step 12 with inverted text */
+[data-accent-color='gray'] {
+  --accent-ink: var(--gray-12);
+  --accent-ink-muted: var(--gray-a11);
+  --accent-ink-faint: var(--gray-a10);
+
+  --accent-solid: var(--gray-12);
+  --accent-solid-a: var(--gray-a12);
+  --accent-solid-hover: var(--gray-12);
+  --accent-solid-hover-a: var(--gray-a12);
+  --accent-solid-active: var(--gray-12);
+  --accent-solid-active-a: var(--gray-a12);
+  --accent-solid-contrast: var(--gray-1);
+  --accent-solid-selection: var(--gray-a11);
+  --accent-solid-selection-contrast: var(--gray-1);
+  --accent-solid-indicator: var(--gray-12);
+  /* gray-12 is near-white in dark mode, so the thumb flips with it */
+  --accent-solid-thumb: var(--gray-1);
+  --accent-solid-badge: var(--gray-1);
+  --accent-solid-badge-contrast: var(--gray-12);
+
+  --accent-solid-hover-filter: var(--solid-gray-hover-filter);
+  --accent-solid-active-filter: var(--solid-gray-active-filter);
+  --accent-solid-open-filter: var(--solid-gray-open-filter);
+}
+
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
 /*             Gray color              */

package/src/styles/tokens/constants.css

@@ -163,7 +163,6 @@
   /* Opacity constants - using new opacity tokens */
   --opacity-disabled: var(--opacity-5);
   --opacity-soft-variant: var(--opacity-8);
-  --opacity-high-contrast: var(--opacity-8);
 
   /* Positioning constants */
   --position-center: 50%;

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

@@ -7,9 +7,11 @@
  *                                                                                                 *
  * 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`.          *
+ *   1. STACKS  — which typefaces exist: --font-sans, --font-mono, --font-serif, plus the         *
+ *                optional --font-display for headings. 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`. --font-display is unset by default; define it and  *
+ *                headings use it, leave it alone and they follow the body.                        *
  *                                                                                                 *
  *   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   *
@@ -17,7 +19,7 @@
  *                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                      *
+ * typefaces (Inter / Inter Tight / JetBrains Mono / Playfair Display), additionally import        *
  * '@womp/kookie-ui/fonts.css'.                                                                    *
  *                                                                                                 *
  ***************************************************************************************************/
@@ -29,13 +31,19 @@
     '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;
+
+  /* --font-display, the heading typeface, is deliberately NOT declared here. It is left undefined
+     so that the fallback in --font-heading below stays live: define it and headings use it, leave
+     it alone and they follow the body. Declaring it here as `var(--font-body)` would not work —
+     --font-body only exists on `.radix-themes`, and a var() inside a custom property resolves
+     against the element the declaration sits on, which would make this guaranteed-invalid. */
 }
 
 .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-heading: var(--font-display, var(--font-body)); /* a display face if one is defined, else the body */
   --font-code: var(--font-mono);
   --font-strong: var(--font-body);
   --font-em: var(--font-serif);