frappe-ui 1.0.0-beta.74 → 1.0.0-beta.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.74",
+  "version": "1.0.0-beta.75",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"
@@ -69,7 +69,8 @@
     "docs:gen": "tsx docs/scripts/propsgen.ts",
     "docs:gen:all": "yarn docs:gen --all",
     "docs:check": "tsx docs/scripts/propsgen.ts --check",
-    "sync-tokens": "node tailwind/figma-tokens-to-theme.js"
+    "sync-tokens": "node tailwind/tokens/build.js",
+    "sync-token-types": "node tailwind/tokens/build-types.js"
   },
   "exports": {
     ".": {
@@ -105,6 +106,11 @@
       "import": "./tailwind/index.js",
       "default": "./tailwind/index.js"
     },
+    "./tailwind/tokens": {
+      "types": "./tailwind/tokens.d.ts",
+      "import": "./tailwind/tokens.js",
+      "default": "./tailwind/tokens.js"
+    },
     "./vite": {
       "types": "./vite/index.d.ts",
       "import": "./vite/index.js"
@@ -240,7 +246,7 @@
     "@shikijs/transformers": ">=3.15.0",
     "@vue/compiler-dom": ">=3.5.0",
     "shiki": ">=3.15.0",
-    "tailwindcss": ">=3.4.0 <4",
+    "tailwindcss": ">=3.4.2 <4",
     "vite": ">=5",
     "vitepress": ">=2.0.0-alpha.15",
     "vue": ">=3.5.0",
@@ -326,7 +332,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "shiki": "^3.15.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.2",
     "tsx": "^4.20.6",
     "vite": "^7.3.2",
     "vite-plugin-istanbul": "^9.0.0",

package/src/components/Badge/Badge.vue

@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<BadgeProps>(), {
   variant: 'subtle',
 })
 
-// The semantic scale (Figma export → tailwind/generated/colors.json) is
+// The semantic scale (Figma export → tailwind/tokens/colors.js) is
 // consistent across all themes — gray is the only exception (`-7` is its
 // saturated step, since gray needs more headroom). Tailwind's JIT needs
 // literal class names so the per-theme strings are inlined below.

package/tailwind/colorPalette.js

@@ -1,13 +1,21 @@
+/**
+ * Tailwind-shaped colours.
+ *
+ * Everything here exists because Tailwind needs a sentinel that is meaningless
+ * anywhere else. `<alpha-value>` is how Tailwind v3 threads the `/50` opacity
+ * modifier into a colour: it substitutes the modifier at compile time. A bare
+ * `oklch(L C H)` has no alpha slot, so without the placeholder `bg-blue-900/30`
+ * silently emits an opaque colour.
+ *
+ * Which is why this is a separate layer. `tokens.js` holds the same values
+ * clean, for every consumer that is not Tailwind.
+ */
 import tailwindColors from 'tailwindcss/colors'
-import colorsData from './colors.json'
-import effectsData from './generated/effects.json'
+import { colors, semanticColors } from './tokens.js'
 
-// Tailwind v3 can only apply the `/<opacity>` modifier (e.g. `bg-blue-900/30`)
-// when the color value exposes an alpha slot. Hex did this implicitly; a bare
-// `oklch(L C H)` string does not, so the modifier silently fails. Inject the
-// `<alpha-value>` placeholder into solid oklch values used as theme colors.
-// Values that already carry an alpha channel (overlay tokens) are left intact;
-// colors.json and the raw `--*` CSS variables keep their plain oklch form.
+// Inject the placeholder into solid oklch values. Values that already carry an
+// alpha channel (the overlay ramps) are left intact — they are deliberately
+// translucent, and a modifier on top of that is not a thing Tailwind supports.
 function withAlphaPlaceholder(value) {
   if (typeof value !== 'string') return value
   const solid = value.match(/^oklch\(([^/]+)\)$/)
@@ -23,6 +31,26 @@ function mapShades(shades) {
   )
 }
 
+// Declared in the order Tailwind should emit their utilities. Key order in
+// `theme.colors` is CSS source order, so two colour utilities on the same
+// element resolve by it — which makes this list behaviour, not decoration.
+// Families in the export but not named here still land, after the two
+// overlay ramps that follow this list.
+const FAMILY_ORDER = [
+  'gray',
+  'blue',
+  'green',
+  'red',
+  'orange',
+  'yellow',
+  'teal',
+  'violet',
+  'cyan',
+  'amber',
+  'pink',
+  'purple',
+]
+
 function generateColorPalette() {
   const colorPalette = {
     inherit: tailwindColors.inherit,
@@ -30,174 +58,41 @@ function generateColorPalette() {
     transparent: tailwindColors.transparent,
     black: tailwindColors.black,
     white: tailwindColors.white,
-    gray: {},
-    blue: {},
-    green: {},
-    red: {},
-    orange: {},
-    yellow: {},
-    teal: {},
-    violet: {},
-    cyan: {},
-    amber: {},
-    pink: {},
-    purple: {},
-    'white-overlay': {},
-    'black-overlay': {},
   }
+  for (const family of FAMILY_ORDER) colorPalette[family] = {}
+  colorPalette['white-overlay'] = { ...colors.overlay.white }
+  colorPalette['black-overlay'] = { ...colors.overlay.black }
 
-  Object.keys(colorsData.lightMode).forEach((color) => {
-    colorPalette[color] = mapShades(colorsData.lightMode[color])
-  })
-  Object.keys(colorsData.darkMode).forEach((color) => {
-    colorPalette[`dark-${color}`] = mapShades(colorsData.darkMode[color])
-  })
-
-  Object.keys(colorsData.overlay.white).forEach((shade) => {
-    colorPalette['white-overlay'][shade] = colorsData.overlay.white[shade]
-  })
-
-  Object.keys(colorsData.overlay.black).forEach((shade) => {
-    colorPalette['black-overlay'][shade] = colorsData.overlay.black[shade]
-  })
-
-  return colorPalette
-}
-
-function resolveColorReference(reference) {
-  const [mode, color, shade] = reference.split('/')
-  if (mode === 'lightMode') {
-    return colorsData.lightMode[color][shade]
-  } else if (mode === 'darkMode') {
-    return colorsData.darkMode[color][shade]
-  } else if (mode === 'overlay') {
-    return colorsData.overlay[color][shade]
-  } else if (mode === 'neutral') {
-    return colorsData.neutral[color]
+  for (const [family, shades] of Object.entries(colors.light)) {
+    colorPalette[family] = mapShades(shades)
   }
-  return null
-}
-
-function generateCSSVariables() {
-  const output = {
-    ':root': {},
-    '[data-theme="dark"]': {},
+  // Dark ramps are addressable by name (`bg-dark-gray-500`) for the rare case
+  // a component needs the other theme's step explicitly. Theme flipping itself
+  // goes through the semantic `--<category>-<name>` variables, not these.
+  for (const [family, shades] of Object.entries(colors.dark)) {
+    colorPalette[`dark-${family}`] = mapShades(shades)
   }
 
-  // Generate CSS variables for light mode
-  Object.keys(colorsData.themedVariables.light).forEach((category) => {
-    Object.keys(colorsData.themedVariables.light[category]).forEach(
-      (colorName) => {
-        const variableName = `--${category}-${colorName}`
-        const reference = colorsData.themedVariables.light[category][colorName]
-        const lightValue = resolveColorReference(reference)
-        output[':root'][variableName] = lightValue
-      },
-    )
-  })
-
-  // Generate CSS variables for dark mode
-  Object.keys(colorsData.themedVariables.dark).forEach((category) => {
-    Object.keys(colorsData.themedVariables.dark[category]).forEach(
-      (colorName) => {
-        const variableName = `--${category}-${colorName}`
-        const reference = colorsData.themedVariables.dark[category][colorName]
-        const darkValue = resolveColorReference(reference)
-        output['[data-theme="dark"]'][variableName] = darkValue
-      },
-    )
-  })
-
-  // Generate CSS variables for each color shade
-  Object.keys(colorsData.lightMode).forEach((color) => {
-    Object.keys(colorsData.lightMode[color]).forEach((shade) => {
-      const variableName = `--${color}-${shade}`
-      const value = colorsData.lightMode[color][shade]
-      output[':root'][variableName] = value
-    })
-  })
-
-  Object.keys(colorsData.darkMode).forEach((color) => {
-    Object.keys(colorsData.darkMode[color]).forEach((shade) => {
-      const variableName = `--dark-${color}-${shade}`
-      const value = colorsData.darkMode[color][shade]
-      output['[data-theme="dark"]'][variableName] = value
-    })
-  })
-
-  return output
+  return colorPalette
 }
 
+// Semantic colours point at their CSS variable rather than a fixed value, so
+// one utility works in both themes. The `color-mix` wrapper is what gives them
+// an alpha slot: a `var(...)` reference has none, so `bg-surface-base/50` would
+// otherwise be ignored. The resolved light value rides along as the var's
+// fallback, so the colour still renders where the stylesheet isn't loaded.
 function generateSemanticColors() {
-  const output = Object.fromEntries(
-    Object.keys(colorsData.themedVariables.light).map((category) => [
+  return Object.fromEntries(
+    Object.entries(semanticColors.light).map(([category, entries]) => [
       category,
-      {},
+      Object.fromEntries(
+        Object.entries(entries).map(([name, lightValue]) => [
+          name,
+          `color-mix(in srgb, var(--${category}-${name}, ${lightValue}) calc(<alpha-value> * 100%), transparent)`,
+        ]),
+      ),
     ]),
   )
-
-  // Generate semantic colors
-  Object.keys(colorsData.themedVariables.light).forEach((category) => {
-    Object.keys(colorsData.themedVariables.light[category]).forEach(
-      (colorName) => {
-        const variableName = `${category}-${colorName}`
-        const reference = colorsData.themedVariables.light[category][colorName]
-        const lightValue = resolveColorReference(reference)
-        output[category][colorName] =
-          `color-mix(in srgb, var(--${variableName}, ${lightValue}) calc(<alpha-value> * 100%), transparent)`
-      },
-    )
-  })
-
-  return output
-}
-
-// Emit `--elevation-*` and `--focus-outline-*` CSS variables. Elevation uses
-// the Figma `light/*` values in both modes (matches how Espresso 2.0 actually
-// applies shadows in dark mode — see the dark-mode page in Figma, which
-// references `elevation/light/*` exclusively). Focus rings still mode-swap.
-// Theme-independent entries (e.g. `elevation.custom.status`) land in
-// `:root` only.
-//
-// The focus source values are box-shadows; only the outline form is emitted
-// (ADR-0005). A box-shadow ring collides with `shadow-*` on the same element
-// and forced-colors mode drops it, so nothing in frappe-ui ever read
-// `--focus-<name>`.
-function generateEffectVariables() {
-  const output = {
-    ':root': {},
-    '[data-theme="dark"]': {},
-  }
-
-  for (const [step, value] of Object.entries(effectsData.elevation.light)) {
-    output[':root'][`--elevation-${step}`] = value
-  }
-  for (const [name, value] of Object.entries(effectsData.elevation.custom)) {
-    output[':root'][`--elevation-${name}`] = value
-  }
-  for (const [name, value] of Object.entries(effectsData.focus.light)) {
-    output[':root'][`--focus-outline-${name}`] = shadowToOutline(value)
-  }
-  for (const [name, value] of Object.entries(effectsData.focus.dark)) {
-    output['[data-theme="dark"]'][`--focus-outline-${name}`] =
-      shadowToOutline(value)
-  }
-
-  return output
 }
 
-// Focus tokens are single-layer `0 0 0 <spread> <color>` shadows — re-express
-// as an `outline` shorthand (`<spread> solid <color>`) so the global focus
-// ring can use outline instead of box-shadow (no collisions with shadow/ring
-// utilities, survives forced-colors mode).
-function shadowToOutline(shadow) {
-  const parts = shadow.trim().split(/\s+/)
-  return `${parts[3]} solid ${parts.slice(4).join(' ')}`
-}
-
-export {
-  generateColorPalette,
-  generateCSSVariables,
-  generateSemanticColors,
-  generateEffectVariables,
-}
+export { generateColorPalette, generateSemanticColors }

package/tailwind/index.d.ts

@@ -15,3 +15,7 @@ export default preset
  * not merge a preset's `content`, so spread these into your own `content`.
  */
 export declare const content: string[]
+
+// The design tokens live at `frappe-ui/tailwind/tokens`, not here. This entry
+// statically imports `tailwindcss/plugin`, which plain Node does not resolve.
+// The token module imports nothing but its own data modules and loads anywhere.

package/tailwind/lucideIconsPlugin.js

@@ -4,9 +4,17 @@ import { iconPackPlugin } from './iconPackPlugin.js'
 
 // Resolve lucide-static's icons directory once per plugin init. Works whether
 // frappe-ui is consumed locally or installed as a dependency of another app.
-const require = createRequire(import.meta.url)
+//
+// Named `nodeRequire`, not `require`. A loader that transpiles this module to
+// CJS with sucrase puts it in a wrapper that already declares a `require`
+// parameter, so a top-level `const require` throws `SyntaxError: Identifier
+// 'require' has already been declared`. tailwindcss 3.4.0 and 3.4.1 load the
+// config that way. Babel renames the binding instead, which is why tailwindcss
+// 3.4.2 and later are unaffected: they route any source with `import.meta`
+// through jiti's babel transform.
+const nodeRequire = createRequire(import.meta.url)
 const ICONS_DIR = path.join(
-  path.dirname(require.resolve('lucide-static/package.json')),
+  path.dirname(nodeRequire.resolve('lucide-static/package.json')),
   'icons',
 )
 

package/tailwind/migrate-tokens-v2.js

@@ -142,7 +142,7 @@ const OUTLINE_ALPHA_RENAMES = {
 
 // `tiny` and `13xl`-`16xl` were removed as unused vocabulary in #940 — no
 // utility ships for them anymore. Must stay in sync with `DROPPED_SIZES` in
-// `figma-tokens-to-theme.js`. Filtered out of the shift tables below so the
+// `tokens/build.js`. Filtered out of the shift tables below so the
 // codemod can never *rename a class onto one of these dead sizes*; see the
 // "no destination" handling further down for reporting pre-existing usage.
 const DEAD_SIZES = ['tiny', '13xl', '14xl', '15xl', '16xl']
@@ -666,7 +666,7 @@ const EXTENSIONS = new Set([
   '.vue', '.ts', '.tsx', '.js', '.jsx', '.md', '.css', '.scss', '.html',
 ])
 const SKIP_DIRS = new Set([
-  'node_modules', '.git', 'dist', 'cache', 'generated', 'espresso-v2-design-tokens',
+  'node_modules', '.git', 'dist', 'cache', 'generated',
 ])
 
 // Symlinks — directories and files alike — are followed only while their real

package/tailwind/plugin.js

@@ -1,40 +1,48 @@
 import plugin from 'tailwindcss/plugin'
+import { generateColorPalette, generateSemanticColors } from './colorPalette.js'
 import {
-  generateColorPalette,
-  generateSemanticColors,
-  generateCSSVariables,
-  generateEffectVariables,
-} from './colorPalette.js'
-import radiusTokens from './generated/radius.json'
-import typographyTokens from './generated/typography.json'
-import effectsData from './generated/effects.json'
+  cssVariables,
+  focusRing as focusRingTokens,
+  fontSize as fontSizeTokens,
+  fontWeight as fontWeightTokens,
+  radius as radiusTokens,
+  screens as screenTokens,
+  shadows as shadowTokens,
+  tracking as trackingTokens,
+} from './tokens.js'
+import typographyTokens from './tokens/typography.js'
 import { listColumnRules } from './listColumns.js'
 
+// Read straight from the token module. `textTransform` is not a public token
+// export: it is empty, and the one style that filled it went away in #940.
+const textTransformTokens = typographyTokens.textTransform
+
 let colorPalette = generateColorPalette()
 let semanticColors = generateSemanticColors()
-let cssVariables = mergeVariableLayers(
-  generateCSSVariables(),
-  generateEffectVariables(),
-  generateRadiusVariables(),
-)
 
-// Emit `--radius-{key}` for every radius token (the numbered scale plus the
-// kept `none` / `full` names — the deprecated size aliases were removed in
-// 1.0.0 per ADR-0006, #998) so the values are inspectable as real CSS
-// variables. `borderRadius` is rewired below to consume these vars, so
-// `rounded-4` and `--radius-4` stay in sync.
-function generateRadiusVariables() {
-  const vars = {}
-  for (const [key, value] of Object.entries(radiusTokens)) {
-    vars[`--radius-${key}`] = value
+// The `shadow-*` key list is declared once, in tokens.js#shadows, so a new
+// elevation step reaches both the token map and the utility from one edit.
+// The theme values stay `var(--elevation-*)` so a themed page can retune a
+// step at runtime. `none` and `DEFAULT` are Tailwind key names, not tokens:
+// `none` has no variable and `DEFAULT` shares the `base` one.
+function buildBoxShadowConfig() {
+  const out = {}
+  for (const key of Object.keys(shadowTokens)) {
+    if (key === 'none') out[key] = 'none'
+    else if (key === 'DEFAULT') out[key] = 'var(--elevation-base)'
+    else out[key] = `var(--elevation-${key})`
   }
-  return { ':root': vars }
+  return out
 }
 
+// `--radius-{key}` is emitted for every token by tokens.js#cssVariables, and
+// `borderRadius` consumes those vars, so `rounded-4` and `--radius-4` stay in
+// sync by construction.
+//
 // Each value carries a trailing `/* {px} */` comment so editor tooling
 // (Tailwind IntelliSense) surfaces the resolved px on hover, instead of
 // the opaque `var(--radius-*)` reference. No `DEFAULT` key: the bare
-// `rounded` utility no longer exists — use `rounded-4`.
+// `rounded` utility no longer exists, so write `rounded-4`.
 function buildRadiusConfig() {
   const out = {}
   for (const [key, value] of Object.entries(radiusTokens)) {
@@ -43,18 +51,6 @@ function buildRadiusConfig() {
   return out
 }
 
-// Merge two `{ selector: { var: value } }` objects into one, preserving any
-// vars already declared under the same selector.
-function mergeVariableLayers(...layers) {
-  const out = {}
-  for (const layer of layers) {
-    for (const [selector, vars] of Object.entries(layer)) {
-      out[selector] = { ...(out[selector] || {}), ...vars }
-    }
-  }
-  return out
-}
-
 // Weight variants are exposed as component classes — `text-<size>-<weight>` and
 // the paragraph counterpart `text-p-<size>-<weight>` — one per Figma named
 // style. Figma tracks each weight differently per size and CSS letter-spacing
@@ -65,28 +61,21 @@ function mergeVariableLayers(...layers) {
 // were corrupt export data.
 const WEIGHT_VARIANTS = ['medium', 'semibold', 'bold']
 
+// tokens.js holds each style as a plain object — it does not speak Tailwind.
+// Tailwind's `fontSize` theme wants the `[size, meta]` tuple. Convert here.
+// Both families are already present: `base` is the text style, `p-base` the
+// paragraph one (same size, looser line-height, its own letter-spacing).
 function buildFontSize() {
-  const out = {}
-  // Each size's regular variant already carries lineHeight, letterSpacing and
-  // fontWeight from the text-styles export (see figma-tokens-to-theme.js).
-  for (const [key, [size, meta]] of Object.entries(typographyTokens.fontSize)) {
-    out[key] = [size, { ...meta }]
-  }
-  // Paragraph variants (`text-p-<size>`): same size, the paragraph style's
-  // looser line-height and its own letter-spacing.
-  for (const [key, p] of Object.entries(typographyTokens.paragraph || {})) {
-    if (!out[key]) continue
-    const [size, meta] = out[key]
-    out[`p-${key}`] = [
-      size,
-      { ...meta, lineHeight: p.lineHeight, letterSpacing: p.letterSpacing },
-    ]
-  }
-  return out
+  return Object.fromEntries(
+    Object.entries(fontSizeTokens).map(([key, { fontSize, ...meta }]) => [
+      key,
+      [fontSize, meta],
+    ]),
+  )
 }
 
 // Focus ring utilities backed by `--focus-outline-*` CSS vars (theme-flipped
-// in colorPalette.js#generateEffectVariables). Implemented as `outline`, not
+// in tokens.js#cssVariables). Implemented as `outline`, not
 // box-shadow, so rings never collide with shadow/ring utilities on the same
 // element and survive forced-colors mode. The default ring is applied
 // globally via `:focus-visible` (see globalStyles); these utilities are for
@@ -95,7 +84,7 @@ function buildFontSize() {
 // Tailwind IntelliSense picks them up.
 function buildFocusRingUtilities() {
   const out = {}
-  for (const name of Object.keys(effectsData.focus.light)) {
+  for (const name of Object.keys(focusRingTokens.light)) {
     const className = name === 'default' ? '.focus-ring' : `.focus-ring-${name}`
     out[className] = {
       outline: `var(--focus-outline-${name})`,
@@ -107,41 +96,39 @@ function buildFocusRingUtilities() {
 
 function buildTextStyleUtilities() {
   const out = {}
-  const t = typographyTokens
   const groups = [
     {
       className: (s, w) => `.text-${s}-${w}`,
-      tracking: t.tracking?.text || {},
-      lineHeight: (s) => t.fontSize[s]?.[1].lineHeight,
+      tracking: trackingTokens?.text || {},
+      style: (s) => fontSizeTokens[s],
     },
     {
       className: (s, w) => `.text-p-${s}-${w}`,
-      tracking: t.tracking?.paragraph || {},
-      lineHeight: (s) => t.paragraph?.[s]?.lineHeight,
+      tracking: trackingTokens?.paragraph || {},
+      style: (s) => fontSizeTokens[`p-${s}`],
     },
   ]
   for (const group of groups) {
     for (const [size, byWeight] of Object.entries(group.tracking)) {
-      const entry = t.fontSize[size]
-      if (!entry) continue
-      const [fontSize] = entry
-      const lineHeight = group.lineHeight(size)
-      const transform = t.textTransform?.[size]
+      const style = group.style(size)
+      if (!style) continue
+      const transform = textTransformTokens?.[size]
       for (const weight of WEIGHT_VARIANTS) {
         if (!(weight in byWeight)) continue
         out[group.className(size, weight)] = {
-          fontSize,
-          lineHeight,
-          fontWeight: String(t.fontWeight[weight]),
+          fontSize: style.fontSize,
+          lineHeight: style.lineHeight,
+          fontWeight: String(fontWeightTokens[weight]),
           letterSpacing: byWeight[weight],
           ...(transform ? { textTransform: transform } : {}),
         }
       }
     }
   }
-  // `tiny` is an uppercase eyebrow style; the bare regular utility needs the
-  // text-transform too (Tailwind's fontSize tuple can't express it).
-  for (const [size, transform] of Object.entries(t.textTransform || {})) {
+  // An uppercase eyebrow style needs the text-transform on its bare regular
+  // utility too — Tailwind's fontSize tuple can't express one. Empty today:
+  // `tiny`, the only such style, was dropped in #940.
+  for (const [size, transform] of Object.entries(textTransformTokens || {})) {
     out[`.text-${size}`] = {
       ...(out[`.text-${size}`] || {}),
       textTransform: transform,
@@ -213,7 +200,13 @@ let darkCheckboxStyles = {
 
 export default plugin(
   function ({ addBase, addComponents, matchUtilities, theme }) {
-    addBase({ ...globalStyles(theme), ...cssVariables })
+    // tokens.js keys the variables by theme; the selector each theme lands on
+    // is a Tailwind concern, so it is decided here.
+    addBase({
+      ...globalStyles(theme),
+      ':root': cssVariables.light,
+      '[data-theme="dark"]': cssVariables.dark,
+    })
     // Resolves <List :columns="{ base, md, … }"> against this app's own
     // breakpoints, so list tracks and `md:hidden` cells switch at the same
     // width. See tailwind/listColumns.js.
@@ -237,28 +230,14 @@ export default plugin(
     theme: {
       colors: colorPalette,
       borderRadius: buildRadiusConfig(),
-      boxShadow: {
-        none: 'none',
-        sm: 'var(--elevation-sm)',
-        base: 'var(--elevation-base)',
-        DEFAULT: 'var(--elevation-base)',
-        md: 'var(--elevation-md)',
-        lg: 'var(--elevation-lg)',
-        xl: 'var(--elevation-xl)',
-        '2xl': 'var(--elevation-2xl)',
-      },
+      boxShadow: buildBoxShadowConfig(),
       container: {
         padding: {
           xl: '5rem',
         },
       },
       fontSize: buildFontSize(),
-      screens: {
-        sm: '640px',
-        md: '768px',
-        lg: '1024px',
-        xl: '1280px',
-      },
+      screens: screenTokens,
       extend: {
         textColor: {
           ink: semanticColors.ink,

package/tailwind/preset.js

@@ -2,6 +2,7 @@ import themePlugin from './plugin.js'
 import forms from '@tailwindcss/forms'
 import typography from '@tailwindcss/typography'
 import lucideIconsPlugin from './lucideIconsPlugin.js'
+import { spacing } from './tokens.js'
 
 // NOTE: Tailwind v3 does NOT merge `content` from presets into the resolved
 // config (it reads only the top-level config's content.files). So consuming
@@ -9,26 +10,6 @@ import lucideIconsPlugin from './lucideIconsPlugin.js'
 // `content` — declaring them here would be silently ignored. Spread the
 // `content` export from `frappe-ui/tailwind` (see content.js) instead of
 // hand-maintaining the glob list; see docs/content/docs/foundations/tailwind.md.
-// Stock Tailwind's numeric spacing scale has gaps above 12 (13, 15, 17, 18,
-// 19, 21… are undefined), so `h-17` / `size-17` silently don't compile. Fill
-// every integer 1–128 plus every half step 0.5–19.5, all at the canonical
-// 0.25rem step. Values match Tailwind's own formula, so overriding the
-// already-defined keys is a no-op; the win is the in-between steps. Presets DO
-// merge `theme` (unlike `content`), so this reaches consuming apps
-// automatically.
-//
-// This is the ONE place sizing is declared. Tailwind 3.4 reads `theme('spacing')`
-// for width, height, size, minWidth, maxWidth, minHeight and maxHeight, which
-// is why the peer range starts at 3.4 and why the plugin declares no sizing
-// blocks of its own.
-const spacing = Object.fromEntries(
-  [
-    ...Array.from({ length: 20 }, (_, i) => i + 0.5),
-    ...Array.from({ length: 128 }, (_, i) => i + 1),
-  ]
-    .sort((a, b) => a - b)
-    .map((n) => [n, `${n * 0.25}rem`]),
-)
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -41,6 +22,8 @@ export default {
   // keeps both.
   future: { hoverOnlyWhenSupported: true },
   theme: {
+    // Presets DO merge `theme` (unlike `content`), so the spacing scale
+    // declared in tokens.js reaches consuming apps from here.
     extend: {
       spacing,
     },