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

package/experimental/CommandPalette/CommandPaletteFooter.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-slot="command-palette-footer"
-    class="flex shrink-0 items-center gap-4 border-t border-outline-gray-1 px-4.5 py-2 text-sm text-ink-gray-6 dark:border-outline-gray-2"
+    class="flex shrink-0 items-center gap-4 border-t border-outline-gray-1 px-4.5 py-2 text-sm leading-tighter text-ink-gray-6 dark:border-outline-gray-2"
   >
     <slot v-bind="slotProps" />
   </div>

package/experimental/CommandPalette/CommandPaletteGroup.vue

@@ -9,7 +9,7 @@
       v-if="label"
       as="div"
       data-slot="command-palette-group-label"
-      class="mb-2.5 px-4.5 text-base text-ink-gray-5"
+      class="mb-2.5 px-4.5 text-base leading-tighter text-ink-gray-5"
     >
       {{ label }}
     </ListboxGroupLabel>

package/experimental/CommandPalette/CommandPaletteInput.vue

@@ -12,7 +12,7 @@
       auto-focus
       autocomplete="off"
       :placeholder="placeholder"
-      class="w-full border-none bg-transparent py-3 px-0 text-base text-ink-gray-8 placeholder-ink-gray-4 focus:ring-0"
+      class="w-full border-none bg-transparent py-3 px-0 text-base leading-tighter text-ink-gray-8 placeholder-ink-gray-4 focus:ring-0"
       v-bind="$attrs"
     />
     <slot name="suffix" />

package/experimental/CommandPalette/CommandPaletteItem.vue

@@ -13,7 +13,7 @@
       data-slot="command-palette-item"
       :data-state="active ? 'active' : undefined"
       :data-disabled="disabled ? '' : undefined"
-      class="mx-2.5 flex min-w-0 cursor-default items-center rounded-4 px-2 py-2 text-base-medium text-ink-gray-8 outline-none data-[state=active]:bg-surface-gray-2 data-[disabled]:cursor-not-allowed data-[disabled]:text-ink-gray-4"
+      class="mx-2.5 flex min-w-0 cursor-default items-center rounded-4 px-2 py-2 text-base-medium leading-tighter text-ink-gray-8 outline-none data-[state=active]:bg-surface-gray-2 data-[disabled]:cursor-not-allowed data-[disabled]:text-ink-gray-4"
       v-bind="$attrs"
     >
       <slot name="prefix" v-bind="slotProps" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.74",
+  "version": "1.0.0-beta.76",
   "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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex select-none items-center gap-1 overflow-clip rounded-full whitespace-nowrap"
+    class="inline-flex select-none items-center gap-1 overflow-clip rounded-full leading-tighter whitespace-nowrap"
     :class="classes"
   >
     <div
@@ -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/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -13,13 +13,15 @@
       </span>
     </template>
 
-    <div class="flex min-w-0 items-center text-ellipsis whitespace-nowrap">
+    <div
+      class="flex min-w-0 items-center text-ellipsis whitespace-nowrap leading-tighter"
+    >
       <template v-for="(item, i) in crumbs" :key="item.label">
         <router-link
           v-if="item.route"
           :to="item.route"
           @click="item.onClick?.($event)"
-          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium"
+          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium leading-tighter"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'
@@ -39,7 +41,7 @@
           v-else-if="item.href"
           :href="item.href"
           @click="onLinkClick(item, $event)"
-          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium"
+          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium leading-tighter"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'
@@ -58,7 +60,7 @@
         <button
           v-else
           @click="item.onClick?.($event)"
-          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium"
+          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium leading-tighter"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'

package/src/components/Button/Button.vue

@@ -321,7 +321,12 @@ export default defineComponent({
       }
       return h(
         'span',
-        { class: ['truncate', { 'sr-only': isIconButton.value }] },
+        {
+          class: [
+            'truncate leading-tighter',
+            { 'sr-only': isIconButton.value },
+          ],
+        },
         slots.default?.() ?? props.label,
       )
     }

package/src/components/Combobox/Combobox.vue

@@ -587,7 +587,7 @@ defineSlots<ComboboxSlots>()
 
               <span
                 :class="[
-                  'min-w-0 flex-1 truncate text-left font-normal',
+                  'min-w-0 flex-1 truncate text-left font-normal leading-tighter',
                   !selectedOption && 'text-ink-gray-4',
                 ]"
               >

package/src/components/Combobox/ComboboxResults.vue

@@ -140,7 +140,7 @@ function handleSelect(item: NormalizedItem, event: Event) {
             <ComboboxLabel
               v-if="group.group && !group.hideLabel"
               data-slot="group-label"
-              class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
+              class="flex h-7 items-center px-2 text-sm-medium leading-tighter text-ink-gray-4"
             >
               <component
                 :is="ItemSlotRender"
@@ -245,7 +245,7 @@ function handleSelect(item: NormalizedItem, event: Event) {
                   />
 
                   <div v-else class="min-w-0">
-                    <div class="truncate">{{ item.label }}</div>
+                    <div class="truncate leading-tighter">{{ item.label }}</div>
                     <div
                       v-if="item.description"
                       class="truncate text-p-sm text-ink-gray-5"

package/src/components/DatePicker/CalendarPanel.vue

@@ -158,7 +158,7 @@
             v-for="y in years"
             type="button"
             :key="y"
-            class="w-full text-ink-gray-8 h-7 shrink-0 rounded-4 py-1 text-sm text-center cursor-pointer transition-colors duration-100"
+            class="w-full text-ink-gray-8 h-7 shrink-0 rounded-4 py-1 text-sm leading-tighter text-center cursor-pointer transition-colors duration-100"
             :class="
               y === currentYear
                 ? 'bg-surface-gray-2 hover:bg-surface-gray-3'
@@ -181,7 +181,7 @@
             v-for="(m, i) in months"
             type="button"
             :key="m"
-            class="w-full text-ink-gray-8 shrink-0 h-7 rounded-4 py-1 text-sm text-center cursor-pointer transition-colors duration-100"
+            class="w-full text-ink-gray-8 shrink-0 h-7 rounded-4 py-1 text-sm leading-tighter text-center cursor-pointer transition-colors duration-100"
             :class="
               i === currentMonth
                 ? 'bg-surface-gray-2 hover:bg-surface-gray-3'

package/src/components/FormLabel/FormLabel.vue

@@ -1,5 +1,9 @@
 <template>
-  <label class="block text-sm text-ink-gray-6" :for="id" data-slot="label">
+  <label
+    class="block text-sm leading-tighter text-ink-gray-6"
+    :for="id"
+    data-slot="label"
+  >
     {{ label }}
     <RequiredIndicator :required="required" />
   </label>

package/src/components/InputLabeling/InputLabel.vue

@@ -41,7 +41,7 @@ const labelClasses = computed(() => {
   // Disabled wins over `color` — a dimmed label is a state, not a choice, so
   // callers shouldn't have to remember to swap the colour themselves.
   return [
-    'block text-sm',
+    'block text-sm leading-tighter',
     props.disabled
       ? 'text-ink-gray-4'
       : props.color === 'gray-7'

package/src/components/ItemListRow/ItemListRow.vue

@@ -69,7 +69,7 @@ defineSlots<{
       <slot name="prefix" />
     </div>
 
-    <div data-slot="item-label" class="min-w-0 flex-1">
+    <div data-slot="item-label" class="min-w-0 flex-1 leading-tighter">
       <slot name="label">
         <slot />
       </slot>

package/src/components/Menu/MenuItemContent.vue

@@ -167,7 +167,7 @@ function handleSwitchChange(value: boolean) {
         :content="itemSlotsLabelContent"
       />
       <div v-else class="min-w-0">
-        <div :class="['truncate', getMenuTextColor(item)]">
+        <div :class="['truncate leading-tighter', getMenuTextColor(item)]">
           {{ item.label }}
         </div>
         <div v-if="item.description" class="truncate text-p-sm text-ink-gray-5">

package/src/components/Menu/utils.ts

@@ -18,7 +18,8 @@ export const menuClasses = {
   content:
     'menu-content z-[100] min-w-40 divide-y divide-outline-elevation-2 rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none',
   group: 'p-1.5',
-  groupLabel: 'flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4',
+  groupLabel:
+    'flex h-7 items-center px-2 text-sm font-medium leading-tighter text-ink-gray-4',
   itemIcon: 'size-4 shrink-0',
   itemIconPlaceholder: 'size-4 shrink-0',
   chevronIcon: 'size-4 shrink-0',

package/src/components/MobileNav/MobileNavItem.vue

@@ -26,7 +26,7 @@
       />
     </slot>
     <span
-      class="text-xs-medium"
+      class="text-xs-medium leading-tighter"
       :class="resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5'"
     >
       {{ label }}
@@ -51,7 +51,7 @@
       />
     </slot>
     <span
-      class="text-xs-medium"
+      class="text-xs-medium leading-tighter"
       :class="resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5'"
     >
       {{ label }}

package/src/components/MultiSelect/MultiSelectResults.vue

@@ -109,7 +109,7 @@ function getItemTextValue(item: NormalizedOption) {
             <ComboboxLabel
               v-if="group.group && !group.hideLabel"
               data-slot="group-label"
-              class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
+              class="flex h-7 items-center px-2 text-sm-medium leading-tighter text-ink-gray-4"
             >
               <component
                 :is="ItemSlotRender"

package/src/components/Select/Select.vue

@@ -362,7 +362,7 @@ defineExpose(exposed)
           >
             <SelectValue
               :placeholder="placeholder"
-              class="max-w-full truncate opacity-0"
+              class="max-w-full truncate leading-tighter opacity-0"
               :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
             >
               <template v-if="selectedOption">
@@ -400,7 +400,7 @@ defineExpose(exposed)
           <div class="grid min-w-0 text-left truncate">
             <SelectValue
               :placeholder="placeholder"
-              class="col-start-1 row-start-1 max-w-full truncate"
+              class="col-start-1 row-start-1 max-w-full truncate leading-tighter"
               :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
             >
               <template v-if="selectedOption">
@@ -540,7 +540,7 @@ defineExpose(exposed)
                           name="item-label"
                           v-bind="getItemSlotProps(internalOption.option)"
                         >
-                          <div class="truncate">
+                          <div class="truncate leading-tighter">
                             {{ internalOption.option.label }}
                           </div>
                           <div

package/src/components/SettingsDialog/SettingsRow.vue

@@ -4,7 +4,7 @@
       <component
         :is="resolvedFor ? 'label' : 'div'"
         :for="resolvedFor"
-        class="text-base-medium block text-ink-gray-8"
+        class="text-base-medium leading-tighter block text-ink-gray-8"
         :class="{ 'cursor-pointer': resolvedFor }"
       >
         {{ title }}

package/src/components/Sidebar/SidebarHeader.vue

@@ -51,10 +51,14 @@
                  inherited size and text at another puts the baseline at a
                  different offset in an app whose layout sets a smaller base
                  size, and the header text sat a px lower there. -->
-            <div class="truncate text-base-medium text-ink-gray-8">
+            <div
+              class="truncate text-base-medium leading-tighter text-ink-gray-8"
+            >
               {{ props.title }}
             </div>
-            <div class="mt-0.5 truncate text-sm text-ink-gray-6">
+            <div
+              class="mt-0.5 truncate text-sm leading-tighter text-ink-gray-6"
+            >
               {{ props.subtitle }}
             </div>
           </div>

package/src/components/Sidebar/SidebarItem.vue

@@ -52,7 +52,9 @@
       >
         <span ref="labelEl" class="flex min-w-0 items-center">
           <slot
-            ><span class="truncate text-sm">{{ label }}</span></slot
+            ><span class="truncate text-sm leading-tighter">{{
+              label
+            }}</span></slot
           >
         </span>
       </span>
@@ -91,7 +93,9 @@
       >
         <span ref="labelEl" class="flex min-w-0 items-center">
           <slot
-            ><span class="truncate text-sm">{{ label }}</span></slot
+            ><span class="truncate text-sm leading-tighter">{{
+              label
+            }}</span></slot
           >
         </span>
       </span>

package/src/components/Sidebar/SidebarLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <div data-slot="sidebar-label" class="relative flex h-7 items-center pl-2">
     <h3
-      class="text-base text-ink-gray-5 transition-all duration-300 ease-in-out"
+      class="text-base leading-tighter text-ink-gray-5 transition-all duration-300 ease-in-out"
       :class="
         isCollapsed ? 'w-0 overflow-hidden opacity-0' : 'w-auto opacity-100'
       "

package/src/components/Sidebar/SidebarSection.vue

@@ -16,7 +16,7 @@
         <h3> inside it strips the heading from the accessibility tree.
       -->
       <h3
-        class="h-4 text-sm text-ink-gray-5 transition-all duration-300 ease-in-out"
+        class="h-4 text-sm leading-tighter text-ink-gray-5 transition-all duration-300 ease-in-out"
         :class="
           isSidebarCollapsed
             ? 'w-0 overflow-hidden opacity-0'

package/src/components/Switch/Switch.vue

@@ -189,7 +189,10 @@ const controlPosition = computed(() => props.controlPosition ?? 'end')
 const switchGroupClasses = computed(() => {
   const hasLabel = props.label || slots.label
   const hasDescription = props.description || slots.description
-  if (!hasLabel && !hasDescription) return undefined
+  // A bare switch still gets `flex`: in a plain block the inline-flex control
+  // sits on a text line, and that line takes its height from the parent's
+  // line-height. In a 28px menu row that made the row 29px.
+  if (!hasLabel && !hasDescription) return 'flex'
 
   // `flex-row-reverse` / `justify-*` are inline-axis aware, so this flips
   // correctly under RTL without any physical left/right values.

package/src/components/TextInput/TextInput.vue

@@ -252,7 +252,7 @@ const inputClasses = computed(() => {
     paddingClasses,
     variantClasses,
     textColor.value,
-    'transition-colors w-full dark:[color-scheme:dark]',
+    'leading-tighter transition-colors w-full dark:[color-scheme:dark]',
   ]
 })
 

package/src/components/TimePicker/TimePicker.vue

@@ -82,7 +82,7 @@
             :id="optionId(idx)"
             type="button"
             role="option"
-            class="group flex h-7 w-full items-center rounded-4 px-2 text-left tabular-nums"
+            class="group flex h-7 w-full items-center rounded-4 px-2 text-left leading-tighter tabular-nums"
             :class="rowClass(opt, idx)"
             :aria-selected="canonicalValue === opt.value || undefined"
             @click="selectOption(opt.value)"

package/src/components/Tree/TreeItem.vue

@@ -66,7 +66,9 @@
         <slot name="item-prefix" v-bind="itemSlotProps" />
 
         <slot name="item-label" v-bind="itemSlotProps">
-          <span class="truncate text-base text-ink-gray-8">{{ label }}</span>
+          <span class="truncate text-base leading-tighter text-ink-gray-8">{{
+            label
+          }}</span>
         </slot>
 
         <span class="ml-auto flex items-center">

package/src/components/shared/tabs/Pill.vue

@@ -76,7 +76,9 @@ const rootClasses = computed(() => [
   'inline-flex box-border shrink-0 select-none items-center justify-center whitespace-nowrap outline-none transition-[background-color,color,box-shadow] duration-150 ease-out motion-reduce:transition-none',
   // Shipped v1 subtle typography (overrides Figma): 13px regular at both
   // sizes, never medium.
-  props.variant === 'subtle' ? 'text-sm leading-[16.1px]' : 'text-base',
+  props.variant === 'subtle'
+    ? 'text-sm leading-[16.1px]'
+    : 'text-base leading-tighter',
   props.active ? 'text-ink-gray-8' : 'text-ink-gray-5',
   // Figma: md ghost/browser labels use text/base/medium (500, 0.015em);
   // md underline and all sm labels stay regular. The selected state

package/src/molecules/list/ListGroup.vue

@@ -7,7 +7,7 @@
     <div
       v-if="label || $slots.label"
       data-slot="list-group-header"
-      class="flex h-8 items-center text-sm-medium text-ink-gray-5"
+      class="flex h-8 items-center text-sm-medium leading-tighter text-ink-gray-5"
       :class="sticky && 'sticky top-0 z-10 bg-surface-base'"
     >
       <slot name="label">{{ label }}</slot>

package/src/molecules/list/ListHeader.vue

@@ -1,5 +1,9 @@
 <template>
-  <div data-slot="list-header" role="row" class="h-8 text-sm text-ink-gray-5">
+  <div
+    data-slot="list-header"
+    role="row"
+    class="h-8 text-sm leading-tighter text-ink-gray-5"
+  >
     <slot />
     <Transition
       enter-active-class="transition-transform duration-75 ease-out"

package/src/molecules/list/ListHeaderCell.vue

@@ -7,7 +7,7 @@
     <span v-if="$slots.prefix" class="shrink-0">
       <slot name="prefix" />
     </span>
-    <span class="truncate"><slot /></span>
+    <span class="truncate leading-tighter"><slot /></span>
     <span v-if="$slots.suffix" class="shrink-0">
       <slot name="suffix" />
     </span>

package/src/molecules/list/ListHeaderCellSort.vue

@@ -16,7 +16,7 @@
       <button
         ref="button"
         type="button"
-        class="group inline-flex h-7 min-w-0 items-center gap-1 rounded-4 text-sm-medium text-ink-gray-5 transition-colors"
+        class="group inline-flex h-7 min-w-0 items-center gap-1 rounded-4 text-sm-medium leading-tighter text-ink-gray-5 transition-colors"
         @click="emit('click', $event)"
       >
         <!-- End-aligned: the glyph leads so the label stays flush with the
@@ -35,7 +35,7 @@
         <span v-if="$slots.prefix" class="shrink-0">
           <slot name="prefix" :direction="direction ?? null" />
         </span>
-        <span class="truncate"><slot /></span>
+        <span class="truncate leading-tighter"><slot /></span>
         <!-- A built-in arrow derived from `direction` by default, so the common
              case needs no glyph wiring; supply #sort-indicator to override. The cell
              owns the reveal: an inactive column's glyph shows on hover. -->