@talelk/newui-tailwind 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talelk/newui-tailwind",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "description": "Tailwind CSS v4 layer: the newui design tokens as @theme, @utility and plugins.",
   "exports": {
@@ -16,8 +16,13 @@
   "files": [
     "src"
   ],
+  "scripts": {
+    "build": "tsx scripts/build-css.ts",
+    "build:css": "tsx scripts/build-css.ts",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
   "dependencies": {
-    "@talelk/newui-tokens": "0.1.0"
+    "@talelk/newui-tokens": "workspace:*"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.11",
@@ -37,10 +42,5 @@
     "type": "git",
     "url": "git+https://github.com/talelk/newui.git",
     "directory": "packages/tailwind"
-  },
-  "scripts": {
-    "build": "tsx scripts/build-css.ts",
-    "build:css": "tsx scripts/build-css.ts",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
   }
-}
+}

package/src/contrast.test.ts

@@ -59,6 +59,29 @@ const PAIRS: Pair[] = [
     what: 'chart subtitle and card caption',
   },
 
+  // the shared overlay panel (atoms/lib overlayPanel + listboxRow): body ink
+  // and the checked step on the panel and on the highlighted row
+  {
+    fg: 'ink-gray-8',
+    bg: 'surface-elevation-1',
+    what: 'overlay panel body and listbox row',
+  },
+  {
+    fg: 'ink-gray-8',
+    bg: 'surface-gray-3',
+    what: 'highlighted listbox row',
+  },
+  {
+    fg: 'ink-blue-8',
+    bg: 'surface-elevation-1',
+    what: 'checked listbox row',
+  },
+  {
+    fg: 'ink-blue-8',
+    bg: 'surface-gray-3',
+    what: 'checked and highlighted listbox row',
+  },
+
   // a board column is the one tinted region muted text lands on
   { fg: 'ink-gray-8', bg: 'surface-gray-1', what: 'column heading' },
   { fg: 'ink-gray-6', bg: 'surface-gray-1', what: 'muted on a board column' },
@@ -67,6 +90,14 @@ const PAIRS: Pair[] = [
   { fg: 'ink-blue-link', bg: 'surface-elevation-1', what: 'blue link on card' },
   { fg: 'ink-blue-link', bg: 'surface-gray-1', what: 'blue link on canvas' },
 
+  // required marker on a label, on the page or a card
+  { fg: 'ink-red-8', bg: 'surface-base', what: 'required marker on base' },
+  {
+    fg: 'ink-red-8',
+    bg: 'surface-elevation-1',
+    what: 'required marker on a card',
+  },
+
   {
     fg: 'ink-blue-8',
     bg: 'surface-blue-1',
@@ -158,3 +189,29 @@ for (const mode of ['light', 'dark'] as Mode[]) {
     ).toBeGreaterThanOrEqual(3)
   })
 }
+
+/**
+ * Solid buttons use the `-9` surface on hover and while open/pressed. The ramp
+ * inverts with the theme: `-9` is darker than the resting `-8` in light mode
+ * and lighter in dark mode. The foreground stays `ink-base`, so both
+ * directions are asserted — this is the pair that ships while the pointer is
+ * on the button, separate from the resting pair above.
+ */
+describe('solid button state contract (WCAG AA)', () => {
+  const SOLID_THEMES = ['gray', 'blue', 'green', 'red'] as const
+
+  for (const theme of SOLID_THEMES) {
+    for (const mode of ['light', 'dark'] as Mode[]) {
+      it(`${mode}: ${theme} solid hover/open ≥ ${AA}`, () => {
+        const ratio = contrast(
+          resolve(mode, 'ink-base'),
+          resolve(mode, `surface-${theme}-9`),
+        )
+        expect(
+          Number(ratio.toFixed(2)),
+          `ink-base on surface-${theme}-9 = ${ratio.toFixed(2)}:1`,
+        ).toBeGreaterThanOrEqual(AA)
+      })
+    }
+  }
+})

package/src/fonts/Inter/inter.css

@@ -3,33 +3,61 @@
 @supports (font-variation-settings: normal) {
   :root { font-family: "InterVar", sans-serif; font-optical-sizing: auto; }
 } */
+
+/* Latin is the common download. Extended scripts and CJK load only when used. */
 @font-face {
   font-family: "InterVar";
   font-weight: 100 900;
   font-display: swap;
   font-style: normal;
-  src:
-    url("Inter.var.woff2?v=3.19") format("woff2-variations"),
-    url("Inter.var.woff2?v=3.19") format("woff2");
-  src: url("Inter.var.woff2?v=3.19") format("woff2") tech("variations");
+  src: url("Inter-latin.var.woff2?v=3.19") format("woff2");
+  unicode-range: U+0000-02FF, U+2000-2FFF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "InterVar";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  src: url("Inter-extended.var.woff2?v=3.19") format("woff2");
   unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
-    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
-    /* Additional scripts */ U+4E00-9FFF,
-    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
+    U+0300-1FFF, U+2C00-2FFF, U+A000-AFFF, U+E000-F8FF, U+FDFC, U+FE20-FE2D,
+    U+1F12F-1F16B, U+1F850-1F852, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "InterVar";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  src: url("Inter-cjk.var.woff2?v=3.19") format("woff2");
+  unicode-range: U+4E00-9FFF, U+AC00-D7AF, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: "InterVar";
   font-weight: 100 900;
   font-display: swap;
   font-style: italic;
-  src:
-    url("Inter-Italic.var.woff2?v=3.19") format("woff2-variations"),
-    url("Inter-Italic.var.woff2?v=3.19") format("woff2");
-  src: url("Inter-Italic.var.woff2?v=3.19") format("woff2") tech("variations");
+  src: url("Inter-Italic-latin.var.woff2?v=3.19") format("woff2");
+  unicode-range: U+0000-02FF, U+2000-2FFF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "InterVar";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  src: url("Inter-Italic-extended.var.woff2?v=3.19") format("woff2");
   unicode-range:
-    U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
+    U+0300-1FFF, U+2C00-2FFF, U+A000-AFFF, U+E000-F8FF, U+FDFC, U+FE20-FE2D,
+    U+1F12F-1F16B, U+1F850-1F852, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "InterVar";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  src: url("Inter-Italic-cjk.var.woff2?v=3.19") format("woff2");
+  unicode-range: U+4E00-9FFF, U+AC00-D7AF, U+FEFF, U+FFFD;
 }
+
 /* Aliased 'InterVar' font as 'Inter' */
 /* To prevent breaking usage of `font-family: 'Inter'` */
 @font-face {
@@ -37,25 +65,50 @@
   font-weight: 100 900;
   font-display: swap;
   font-style: normal;
-  src:
-    url("Inter.var.woff2?v=3.19") format("woff2-variations"),
-    url("Inter.var.woff2?v=3.19") format("woff2");
-  src: url("Inter.var.woff2?v=3.19") format("woff2") tech("variations");
+  src: url("Inter-latin.var.woff2?v=3.19") format("woff2");
+  unicode-range: U+0000-02FF, U+2000-2FFF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  src: url("Inter-extended.var.woff2?v=3.19") format("woff2");
   unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
-    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
-    /* Additional scripts */ U+4E00-9FFF,
-    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
+    U+0300-1FFF, U+2C00-2FFF, U+A000-AFFF, U+E000-F8FF, U+FDFC, U+FE20-FE2D,
+    U+1F12F-1F16B, U+1F850-1F852, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  src: url("Inter-cjk.var.woff2?v=3.19") format("woff2");
+  unicode-range: U+4E00-9FFF, U+AC00-D7AF, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: "Inter";
   font-weight: 100 900;
   font-display: swap;
   font-style: italic;
-  src:
-    url("Inter-Italic.var.woff2?v=3.19") format("woff2-variations"),
-    url("Inter-Italic.var.woff2?v=3.19") format("woff2");
-  src: url("Inter-Italic.var.woff2?v=3.19") format("woff2") tech("variations");
+  src: url("Inter-Italic-latin.var.woff2?v=3.19") format("woff2");
+  unicode-range: U+0000-02FF, U+2000-2FFF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  src: url("Inter-Italic-extended.var.woff2?v=3.19") format("woff2");
   unicode-range:
-    U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
+    U+0300-1FFF, U+2C00-2FFF, U+A000-AFFF, U+E000-F8FF, U+FDFC, U+FE20-FE2D,
+    U+1F12F-1F16B, U+1F850-1F852, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  src: url("Inter-Italic-cjk.var.woff2?v=3.19") format("woff2");
+  unicode-range: U+4E00-9FFF, U+AC00-D7AF, U+FEFF, U+FFFD;
 }

package/src/generated/theme.css

@@ -126,6 +126,7 @@
   --color-surface-pink-8: var(--surface-pink-8);
   --color-surface-pink-9: var(--surface-pink-9);
   --color-surface-pink-10: var(--surface-pink-10);
+  --color-surface-scrim: var(--surface-scrim);
   --color-surface-alpha-base: var(--surface-alpha-base);
   --color-surface-alpha-gray-1: var(--surface-alpha-gray-1);
   --color-surface-alpha-gray-2: var(--surface-alpha-gray-2);
@@ -893,6 +894,13 @@
   --spacing-page-gutter: 1.5rem;
   --spacing-page-gutter-wide: 2rem;
   --spacing-page-stack: 2rem;
+  --spacing-menu-pad: 0.25rem;
+  --spacing-dialog-pad: 1rem;
+  --spacing-table-cell-x: 1rem;
+  --spacing-table-cell-y: 0.5rem;
+  --spacing-toolbar-pad: 0.5rem;
+  --spacing-stack: 1rem;
+  --spacing-inline: 0.5rem;
 
   /* elevation — shadow-<step> resolves the runtime elevation var */
   --shadow-sm: var(--elevation-sm);
@@ -903,6 +911,14 @@
   --shadow-xl: var(--elevation-xl);
   --shadow-2xl: var(--elevation-2xl);
 
+  /* shadow roles — shadow-<role> resolves its mapped elevation step */
+  --shadow-card: var(--elevation-sm);
+  --shadow-raised: var(--elevation-base);
+  --shadow-popover: var(--elevation-md);
+  --shadow-dialog: var(--elevation-lg);
+  --shadow-toast: var(--elevation-xl);
+  --shadow-drag: var(--elevation-2xl);
+
   /* typography — text-<size> and text-<size>-<weight>, text + paragraph */
   --text-interface: 0.875rem;
   --text-interface--line-height: 1.25rem;
@@ -1451,6 +1467,15 @@
 
   /* fonts */
   --font-sans: 'InterVar', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+
+  /* breakpoints — xs/sm/md/lg/xl/2xl variants resolve the token screens, never a literal */
+  --breakpoint-xs: 360px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
 
   /* line-heights — leading-tighter pins single-line chrome to 1.15 */
   --leading-tighter: 1.15;
@@ -1461,9 +1486,21 @@
   --z-overlay: 50;
   --z-top: 100;
 
-  /* motion — duration-fast/base/slow and the standard ease */
+  /* motion — named durations and eases; components name the speed, never a number */
+  --duration-instant: 75ms;
   --duration-fast: 100ms;
   --duration-base: 150ms;
+  --duration-moderate: 200ms;
   --duration-slow: 300ms;
+  --duration-progress: 660ms;
   --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* animations — @keyframes live in utilities.css; speeds compose the tokens above */
+  --animate-overlay-in: overlay-in 100ms cubic-bezier(0.23, 1, 0.32, 1);
+  --animate-drawer-in: drawer-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
+  --animate-shimmer: shimmer 1400ms linear infinite;
+  --animate-progress: progress 1400ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
 }

package/src/generated/tokens.css

@@ -125,6 +125,7 @@
   --surface-pink-8: oklch(0.481 0.17 346.479);
   --surface-pink-9: oklch(0.408 0.155 348.063);
   --surface-pink-10: oklch(0.316 0.115 345.791);
+  --surface-scrim: oklch(0 0 0 / 0.271);
   --surface-alpha-base: oklch(1 0 0);
   --surface-alpha-gray-1: oklch(0 0 0 / 0.031);
   --surface-alpha-gray-2: oklch(0 0 0 / 0.043);
@@ -674,6 +675,7 @@
   --surface-pink-8: oklch(0.667 0.192 346.848);
   --surface-pink-9: oklch(0.726 0.166 344.979);
   --surface-pink-10: oklch(0.796 0.128 343.745);
+  --surface-scrim: oklch(0 0 0 / 0.722);
   --surface-alpha-base: oklch(0 0 0 / 0.039);
   --surface-alpha-gray-1: oklch(1 0 0 / 0.055);
   --surface-alpha-gray-2: oklch(1 0 0 / 0.078);
@@ -1078,6 +1080,12 @@
   --dark-gray-alpha-800: oklch(1 0 0 / 0.055);
   --dark-gray-alpha-900: oklch(1 0 0 / 0.035);
   --dark-gray-alpha-950: oklch(0 0 0 / 0.039);
+  --elevation-sm: inset 0px 0.5px 0.5px 0.5px #ffffff08, 0px 0px 14px 0px #0000002e, 0px 1px 3px 0px #000000b2;
+  --elevation-base: inset 0px 0.5px 0.5px 0.5px #ffffff08, 0px 0px 14px 0px #0000002e, 0px 2px 5px 0px #00000099;
+  --elevation-md: inset 0px 0.5px 0.5px 0.5px #ffffff08, 0px 0px 16px 2px #00000033, 0px 6px 12px -2px #00000099;
+  --elevation-lg: inset 0px 0.5px 1.5px 0.5px #ffffff0a, 0px 0px 16px 0px #0000001a, 0px 18px 20px -8px #00000085;
+  --elevation-xl: inset 0px 0.5px 1.5px 0.5px #ffffff0a, 0px 0px 14px 2px #0000001f, 0px 26px 34px -6px #0000006b;
+  --elevation-2xl: inset 0px 0.5px 1.5px 0.5px #ffffff0f, 0px 0px 14px 10px #0000001f, 0px 44px 52px -4px #0000006b;
   --focus-outline-default: 3px solid #464646cc;
   --focus-outline-red: 3px solid #751819cc;
   --focus-outline-green: 3px solid #1d563bcc;

package/src/generated.test.ts

@@ -6,7 +6,9 @@ import {
   easing,
   fontSize,
   radius,
+  screens,
   semanticColors,
+  shadowRoles,
   shadows,
   spacing,
   tracking,
@@ -77,6 +79,9 @@ function expectedShadows(): Set<string> {
     if (key === 'none') continue
     names.add(key === 'DEFAULT' ? '--shadow' : `--shadow-${key}`)
   }
+  for (const role of Object.keys(shadowRoles)) {
+    names.add(`--shadow-${role}`)
+  }
   return names
 }
 
@@ -138,4 +143,19 @@ describe('generated theme parity with @talelk/newui-tokens', () => {
     const missing = expected.filter((name) => !defined.has(name))
     expect(missing).toEqual([])
   })
+
+  it('emits the breakpoint, animation and mono scales', () => {
+    // The animation names are composed in build-css.ts from the duration and
+    // easing tokens; the list is mirrored here so a dropped branch fails.
+    const expected = [
+      ...Object.keys(screens).map((key) => `--breakpoint-${key}`),
+      '--animate-overlay-in',
+      '--animate-drawer-in',
+      '--animate-shimmer',
+      '--animate-progress',
+      '--font-mono',
+    ]
+    const missing = expected.filter((name) => !defined.has(name))
+    expect(missing).toEqual([])
+  })
 })

package/src/utilities.css

@@ -30,6 +30,17 @@
   outline-offset: 0px;
 }
 
+/* The padded-row outline: the row (Checkbox/Switch `padded`) draws the ring
+ * around itself while its hidden control holds keyboard focus. Same outline
+ * mechanism as `focus-ring` — never a `ring-*` box-shadow, which would
+ * collide with `shadow-*` and vanish in forced-colors mode. */
+@utility focus-ring-within {
+  &:has(:focus-visible) {
+    outline: var(--focus-outline-default);
+    outline-offset: 0px;
+  }
+}
+
 /* Stacking and motion scales. The numbers live in `@theme` (`--z-*`,
  * `--duration-*`, generated from `@talelk/newui-tokens`); these utilities are the
  * named vocabulary components use, so a layer change is a token edit and the
@@ -46,15 +57,24 @@
 @utility z-top {
   z-index: var(--z-top);
 }
+@utility duration-instant {
+  transition-duration: var(--duration-instant);
+}
 @utility duration-fast {
   transition-duration: var(--duration-fast);
 }
 @utility duration-base {
   transition-duration: var(--duration-base);
 }
+@utility duration-moderate {
+  transition-duration: var(--duration-moderate);
+}
 @utility duration-slow {
   transition-duration: var(--duration-slow);
 }
+@utility duration-progress {
+  transition-duration: var(--duration-progress);
+}
 
 /* A disclosure panel — the body of an `Accordion` item or a `Collapsible`.
  *
@@ -74,15 +94,15 @@
   grid-template-rows: 1fr;
   visibility: visible;
   transition:
-    grid-template-rows 200ms cubic-bezier(0.23, 1, 0.32, 1),
+    grid-template-rows var(--duration-moderate) var(--ease-out),
     visibility 0s 0s;
 
   &[data-state="closed"] {
     grid-template-rows: 0fr;
     visibility: hidden;
     transition:
-      grid-template-rows 200ms cubic-bezier(0.23, 1, 0.32, 1),
-      visibility 0s 200ms;
+      grid-template-rows var(--duration-moderate) var(--ease-out),
+      visibility 0s var(--duration-moderate);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -105,6 +125,43 @@
   }
 }
 
+/* Overlay entrances (speeds are the `--animate-*` tokens in `@theme`; the
+ * global reduced-motion block below collapses every one of them). Popups and
+ * modals fade in over a 2px settle — no scale, no slide theatrics. */
+@keyframes overlay-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Bottom-anchored sheets rise the last few pixels into place. */
+@keyframes drawer-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Skeleton sheen: sweeps a wide background gradient across the block. The
+ * consumer supplies the gradient and `background-size: 200% 100%`. */
+@keyframes shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
 /* Respect the OS "reduce motion" setting everywhere, once. Animations collapse
  * to a single near-instant frame instead of being removed, so nothing that
  * depends on an `animationend` (Zag's presence, our exit transitions) stalls. */