feat(tokens)!: adopt espresso v2 tokens + codemod migration

.gitignore

@@ -41,4 +41,6 @@ docs/content/docs/components/*.md
 coverage
 .nyc_output
 
-cypress/screenshots
+cypress/screenshots
+
+.tmp-screenshots

components.d.ts

@@ -62,6 +62,7 @@ declare module 'vue' {
     FormLabel: typeof import('./src/components/FormLabel.vue')['default']
     FrappeUIProvider: typeof import('./src/components/Provider/FrappeUIProvider.vue')['default']
     FunnelChart: typeof import('./src/components/Charts/FunnelChart.vue')['default']
+    Icon: typeof import('./src/components/Icon/Icon.vue')['default']
     IframeNodeView: typeof import('./src/components/TextEditor/extensions/iframe/IframeNodeView.vue')['default']
     ImageGroupNodeView: typeof import('./src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue')['default']
     ImageGroupUploadDialog: typeof import('./src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue')['default']
@@ -109,6 +110,7 @@ declare module 'vue' {
     OptionIcon: typeof import('./src/components/shared/selection/OptionIcon.vue')['default']
     Password: typeof import('./src/components/Password/Password.vue')['default']
     PickerShell: typeof import('./src/components/shared/picker/PickerShell.vue')['default']
+    Pill: typeof import('./src/components/Pill/Pill.vue')['default']
     Popover: typeof import('./src/components/Popover/Popover.vue')['default']
     Progress: typeof import('./src/components/Progress/Progress.vue')['default']
     Rating: typeof import('./src/components/Rating/Rating.vue')['default']
@@ -129,7 +131,6 @@ declare module 'vue' {
     SuggestionList: typeof import('./src/components/TextEditor/extensions/suggestion/SuggestionList.vue')['default']
     Switch: typeof import('./src/components/Switch/Switch.vue')['default']
     TabButtons: typeof import('./src/components/TabButtons/TabButtons.vue')['default']
-    'TabButtons.story': typeof import('./src/components/TabButtons/TabButtons.story.vue')['default']
     Tabs: typeof import('./src/components/Tabs/Tabs.vue')['default']
     Textarea: typeof import('./src/components/Textarea/Textarea.vue')['default']
     TextEditor: typeof import('./src/components/TextEditor/TextEditor.vue')['default']

docs/.vitepress/config.ts

@@ -60,7 +60,10 @@ export default defineConfig({
       dark: 'tokyo-night',
       light: 'github-light',
     },
-    codeTransformers: [toClass],
+    // transformerStyleToClass flushes its CSS only at buildEnd, so in dev
+    // the generated shiki.css stays empty and code blocks lose colors —
+    // skip it in dev and let shiki emit inline --shiki-light/dark styles.
+    codeTransformers: isDev ? [] : [toClass],
     config(md) {
       md.use(componentTransformer)
     },

docs/.vitepress/theme/index.ts

@@ -1,17 +1,67 @@
 import type { Theme } from 'vitepress'
-import "../../../src/fonts/Inter/inter.css"
-import "../../css/style.css"
-import "../../css/shiki.css"
+import '../../../src/fonts/Inter/inter.css'
+import '../../css/style.css'
+import '../../css/shiki.css'
 import Demo from '../../components/Docs/Demo.vue'
+import ButtonBuilder from '../../components/Docs/ButtonBuilder.vue'
+import BadgeBuilder from '../../components/Docs/BadgeBuilder.vue'
+import PillBuilder from '../../components/Docs/PillBuilder.vue'
+import TabButtonsBuilder from '../../components/Docs/TabButtonsBuilder.vue'
+import AlertBuilder from '../../components/Docs/AlertBuilder.vue'
+import AvatarBuilder from '../../components/Docs/AvatarBuilder.vue'
+import BreadcrumbsBuilder from '../../components/Docs/BreadcrumbsBuilder.vue'
+import CheckboxBuilder from '../../components/Docs/CheckboxBuilder.vue'
+import ComboboxBuilder from '../../components/Docs/ComboboxBuilder.vue'
+import DialogBuilder from '../../components/Docs/DialogBuilder.vue'
+import DividerBuilder from '../../components/Docs/DividerBuilder.vue'
+import DropdownBuilder from '../../components/Docs/DropdownBuilder.vue'
+import ErrorMessageBuilder from '../../components/Docs/ErrorMessageBuilder.vue'
+import FormControlBuilder from '../../components/Docs/FormControlBuilder.vue'
+import MultiSelectBuilder from '../../components/Docs/MultiSelectBuilder.vue'
+import PasswordBuilder from '../../components/Docs/PasswordBuilder.vue'
+import ProgressBuilder from '../../components/Docs/ProgressBuilder.vue'
+import RatingBuilder from '../../components/Docs/RatingBuilder.vue'
+import SelectBuilder from '../../components/Docs/SelectBuilder.vue'
+import SliderBuilder from '../../components/Docs/SliderBuilder.vue'
+import SwitchBuilder from '../../components/Docs/SwitchBuilder.vue'
+import TabsBuilder from '../../components/Docs/TabsBuilder.vue'
+import TextInputBuilder from '../../components/Docs/TextInputBuilder.vue'
+import TextareaBuilder from '../../components/Docs/TextareaBuilder.vue'
+import TooltipBuilder from '../../components/Docs/TooltipBuilder.vue'
 import Layout from '../../components/Layout.vue'
 
 if (process.env.NODE_ENV === 'production') {
   import.meta.glob('../components/**/stories/*.vue', { eager: true })
 }
 
 export default {
-	Layout,
+  Layout,
   enhanceApp({ app, router, siteData }) {
     app.component('ComponentPreview', Demo)
+    app.component('ButtonBuilder', ButtonBuilder)
+    app.component('BadgeBuilder', BadgeBuilder)
+    app.component('PillBuilder', PillBuilder)
+    app.component('TabButtonsBuilder', TabButtonsBuilder)
+    app.component('AlertBuilder', AlertBuilder)
+    app.component('AvatarBuilder', AvatarBuilder)
+    app.component('BreadcrumbsBuilder', BreadcrumbsBuilder)
+    app.component('CheckboxBuilder', CheckboxBuilder)
+    app.component('ComboboxBuilder', ComboboxBuilder)
+    app.component('DialogBuilder', DialogBuilder)
+    app.component('DividerBuilder', DividerBuilder)
+    app.component('DropdownBuilder', DropdownBuilder)
+    app.component('ErrorMessageBuilder', ErrorMessageBuilder)
+    app.component('FormControlBuilder', FormControlBuilder)
+    app.component('MultiSelectBuilder', MultiSelectBuilder)
+    app.component('PasswordBuilder', PasswordBuilder)
+    app.component('ProgressBuilder', ProgressBuilder)
+    app.component('RatingBuilder', RatingBuilder)
+    app.component('SelectBuilder', SelectBuilder)
+    app.component('SliderBuilder', SliderBuilder)
+    app.component('SwitchBuilder', SwitchBuilder)
+    app.component('TabsBuilder', TabsBuilder)
+    app.component('TextInputBuilder', TextInputBuilder)
+    app.component('TextareaBuilder', TextareaBuilder)
+    app.component('TooltipBuilder', TooltipBuilder)
   },
 } satisfies Theme

docs/components/Docs/AlertBuilder.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Alert } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'title', type: 'text', default: 'Heads up', width: '14rem' },
+  {
+    name: 'description',
+    type: 'text',
+    default: 'You can dismiss this alert.',
+    width: '20rem',
+  },
+  {
+    name: 'theme',
+    type: 'tabs',
+    default: 'blue',
+    options: [
+      { label: 'none', value: 'none' },
+      { label: 'yellow', value: 'yellow' },
+      { label: 'blue', value: 'blue' },
+      { label: 'green', value: 'green' },
+      { label: 'red', value: 'red' },
+    ],
+  },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+    ],
+  },
+  { name: 'dismissible', type: 'switch', default: true },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [`title="${v.title}"`]
+  if (v.description) attrs.push(`description="${v.description}"`)
+  if (v.theme !== 'none') attrs.push(`theme="${v.theme}"`)
+  if (v.variant !== 'subtle') attrs.push(`variant="${v.variant}"`)
+  if (!v.dismissible) attrs.push(':dismissible="false"')
+  return ['<Alert', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="120px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-md">
+        <Alert
+          :title="values.title"
+          :description="values.description || undefined"
+          :theme="values.theme === 'none' ? undefined : values.theme"
+          :variant="values.variant"
+          :dismissible="values.dismissible"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>

docs/components/Docs/AvatarBuilder.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Avatar } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'John Doe', width: '12rem' },
+  { name: 'image', type: 'text', default: '', width: '20rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'md',
+    options: [
+      { label: 'xs', value: 'xs' },
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+      { label: '2xl', value: '2xl' },
+      { label: '3xl', value: '3xl' },
+    ],
+  },
+  {
+    name: 'shape',
+    type: 'tabs',
+    default: 'circle',
+    options: [
+      { label: 'circle', value: 'circle' },
+      { label: 'square', value: 'square' },
+    ],
+  },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [`label="${v.label}"`]
+  if (v.image) attrs.push(`image="${v.image}"`)
+  if (v.size !== 'md') attrs.push(`size="${v.size}"`)
+  if (v.shape !== 'circle') attrs.push(`shape="${v.shape}"`)
+  return ['<Avatar', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="120px">
+    <template #preview="{ values }">
+      <Avatar
+        :label="values.label"
+        :image="values.image || undefined"
+        :size="values.size"
+        :shape="values.shape"
+      />
+    </template>
+  </ComponentPlayground>
+</template>

docs/components/Docs/BadgeBuilder.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { Badge } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Gamma' },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'solid',
+    options: [
+      { label: 'solid', value: 'solid' },
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+      { label: 'ghost', value: 'ghost' },
+    ],
+  },
+  {
+    name: 'theme',
+    type: 'tabs',
+    default: 'green',
+    options: [
+      { label: 'gray', value: 'gray' },
+      { label: 'blue', value: 'blue' },
+      { label: 'green', value: 'green' },
+      { label: 'amber', value: 'amber' },
+      { label: 'red', value: 'red' },
+      { label: 'violet', value: 'violet' },
+    ],
+  },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'lg',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+    ],
+  },
+  { name: 'prefix', type: 'switch', default: true },
+  { name: 'suffix', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [
+    `variant="${v.variant}"`,
+    `theme="${v.theme}"`,
+    `size="${v.size}"`,
+  ]
+  const slots: string[] = []
+  if (v.prefix) {
+    slots.push('  <template #prefix><span class="lucide-check" /></template>')
+  }
+  slots.push(`  ${v.label}`)
+  if (v.suffix) {
+    slots.push(
+      '  <template #suffix><span class="lucide-chevron-down" /></template>',
+    )
+  }
+  return ['<Badge', ...attrs.map((a) => '  ' + a), '>', ...slots, '</Badge>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode">
+    <template #preview="{ values }">
+      <Badge :theme="values.theme" :variant="values.variant" :size="values.size">
+        <template v-if="values.prefix" #prefix>
+          <span class="lucide-check" />
+        </template>
+        {{ values.label }}
+        <template v-if="values.suffix" #suffix>
+          <span class="lucide-chevron-down" />
+        </template>
+      </Badge>
+    </template>
+  </ComponentPlayground>
+</template>

docs/components/Docs/BreadcrumbsBuilder.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Breadcrumbs } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const allItems = [
+  { label: 'Workspace' },
+  { label: 'Projects' },
+  { label: 'Frappe UI' },
+  { label: 'Pull Requests' },
+  { label: '#716' },
+]
+
+const knobs: Knob[] = [
+  {
+    name: 'count',
+    type: 'tabs',
+    default: '3',
+    options: [
+      { label: '2', value: '2' },
+      { label: '3', value: '3' },
+      { label: '4', value: '4' },
+      { label: '5', value: '5' },
+    ],
+  },
+]
+
+function itemsFor(count: number) {
+  return allItems.slice(0, count)
+}
+
+function buildCode(v: Record<string, any>) {
+  const count = Number(v.count)
+  const items = itemsFor(count)
+  const lines = items
+    .map((i) => `    { label: '${i.label}' },`)
+    .join('\n')
+  return `<Breadcrumbs :items="[\n${lines}\n  ]" />`
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="80px">
+    <template #preview="{ values }">
+      <Breadcrumbs :items="itemsFor(Number(values.count))" />
+    </template>
+  </ComponentPlayground>
+</template>