frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/TextEditor/extensions/iframe/iframe-extension.ts

@@ -2,7 +2,12 @@ import { Node, mergeAttributes } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import IframeNodeView from './IframeNodeView.vue'
-import { validateURL, processURL, getOptimalDimensions, ALLOWED_DOMAINS } from './utils'
+import {
+  validateURL,
+  processURL,
+  getOptimalDimensions,
+  ALLOWED_DOMAINS,
+} from './utils'
 
 // Constants for iframe constraints
 const MIN_IFRAME_WIDTH = 200
@@ -30,7 +35,10 @@ declare module '@tiptap/core' {
       setIframe: (options: SetIframeOptions) => ReturnType
       insertIframeURL: (url: string) => ReturnType
       setIframeAlign: (align: 'left' | 'center' | 'right') => ReturnType
-      openIframeDialog: () => ReturnType
+      // `platform` is consumed by the molecules editor's implementation; this
+      // legacy one ignores it. The signature must match — both editors augment
+      // the same `Commands.iframe` group, and divergence is a TS2717 error.
+      openIframeDialog: (platform?: string) => ReturnType
     }
   }
 }
@@ -80,7 +88,7 @@ export const IframeExtension = Node.create<IframeOptions>({
         }),
       },
       aspectRatio: {
-        default: 9/16, // Default 16:9 aspect ratio
+        default: 9 / 16, // Default 16:9 aspect ratio
         parseHTML: () => null, // Don't parse from HTML
         renderHTML: () => ({}), // Don't render to HTML
       },
@@ -155,7 +163,7 @@ export const IframeExtension = Node.create<IframeOptions>({
             width: width ? parseInt(width, 10) : null,
             height: height ? parseInt(height, 10) : null,
             title: title || null,
-            align: align || 'center'
+            align: align || 'center',
           }
         },
       },
@@ -196,7 +204,10 @@ export const IframeExtension = Node.create<IframeOptions>({
           // Calculate optimal dimensions if not provided
           const editorElement = editor.view.dom
           const editorWidth = editorElement?.clientWidth || 800
-          const optimalDimensions = getOptimalDimensions(processedSrc, editorWidth)
+          const optimalDimensions = getOptimalDimensions(
+            processedSrc,
+            editorWidth,
+          )
 
           const attrs = {
             src: processedSrc,
@@ -210,7 +221,7 @@ export const IframeExtension = Node.create<IframeOptions>({
 
           return commands.insertContent({
             type: this.name,
-            attrs
+            attrs,
           })
         },
 
@@ -227,7 +238,7 @@ export const IframeExtension = Node.create<IframeOptions>({
           // Emit a custom event on the editor's view DOM element
           // This is more localized than document.dispatchEvent
           const event = new CustomEvent('iframe:open-dialog', {
-            detail: { editor }
+            detail: { editor },
           })
           editor.view.dom.dispatchEvent(event)
           return true
@@ -251,7 +262,14 @@ export const IframeExtension = Node.create<IframeOptions>({
             if (html) {
               const iframeData = parseIframeFromHTML(html)
               if (iframeData) {
-                return createIframeNode(view, extensionThis, iframeData.src, iframeData.width, iframeData.height, iframeData.title)
+                return createIframeNode(
+                  view,
+                  extensionThis,
+                  iframeData.src,
+                  iframeData.width,
+                  iframeData.height,
+                  iframeData.title,
+                )
               }
             }
 
@@ -259,14 +277,22 @@ export const IframeExtension = Node.create<IframeOptions>({
             if (text && text.includes('<iframe')) {
               const iframeData = parseIframeFromHTML(text)
               if (iframeData) {
-                return createIframeNode(view, extensionThis, iframeData.src, iframeData.width, iframeData.height, iframeData.title)
+                return createIframeNode(
+                  view,
+                  extensionThis,
+                  iframeData.src,
+                  iframeData.width,
+                  iframeData.height,
+                  iframeData.title,
+                )
               }
             }
 
             // Fallback to URL detection for plain text
             if (text) {
               // Check if pasted text is a supported embed URL
-              const urlPattern = /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=[\w-]+|youtu\.be\/[\w-]+|youtube\.com\/embed\/[\w-]+|vimeo\.com\/\d+|player\.vimeo\.com\/video\/\d+|codepen\.io\/[\w-]+\/pen\/[\w-]+|codesandbox\.io\/[\w\/.-]+|figma\.com\/[\w\/.-]+|embed\.figma\.com\/[\w\/.-]+)$/
+              const urlPattern =
+                /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=[\w-]+|youtu\.be\/[\w-]+|youtube\.com\/embed\/[\w-]+|vimeo\.com\/\d+|player\.vimeo\.com\/video\/\d+|codepen\.io\/[\w-]+\/pen\/[\w-]+|codesandbox\.io\/[\w\/.-]+|figma\.com\/[\w\/.-]+|embed\.figma\.com\/[\w\/.-]+)$/
 
               if (urlPattern.test(text.trim())) {
                 return createIframeNode(view, extensionThis, text.trim())
@@ -282,7 +308,9 @@ export const IframeExtension = Node.create<IframeOptions>({
 })
 
 // Helper function to parse iframe embed codes from pasted HTML content
-function parseIframeFromHTML(html: string): { src: string, width?: number, height?: number, title?: string } | null {
+function parseIframeFromHTML(
+  html: string,
+): { src: string; width?: number; height?: number; title?: string } | null {
   try {
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
@@ -301,7 +329,7 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
           src,
           width: widthMatch ? parseInt(widthMatch[1], 10) : undefined,
           height: heightMatch ? parseInt(heightMatch[1], 10) : undefined,
-          title: titleMatch ? titleMatch[1] : undefined
+          title: titleMatch ? titleMatch[1] : undefined,
         }
       }
       return null
@@ -310,8 +338,12 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
     const src = iframe.getAttribute('src')
     if (!src) return null
 
-    const width = iframe.getAttribute('width') ? parseInt(iframe.getAttribute('width')!, 10) : undefined
-    const height = iframe.getAttribute('height') ? parseInt(iframe.getAttribute('height')!, 10) : undefined
+    const width = iframe.getAttribute('width')
+      ? parseInt(iframe.getAttribute('width')!, 10)
+      : undefined
+    const height = iframe.getAttribute('height')
+      ? parseInt(iframe.getAttribute('height')!, 10)
+      : undefined
     const title = iframe.getAttribute('title') || undefined
 
     return { src, width, height, title }
@@ -321,9 +353,18 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
 }
 
 // Helper function to create iframe node from parsed data
-function createIframeNode(view: any, extensionThis: any, src: string, width?: number, height?: number, title?: string) {
+function createIframeNode(
+  view: any,
+  extensionThis: any,
+  src: string,
+  width?: number,
+  height?: number,
+  title?: string,
+) {
   // Ask user for confirmation before creating iframe
-  const shouldCreateEmbed = confirm(`Do you want to embed this content?\n\nURL: ${src}\n\nClick "OK" to create an embed, or "Cancel" to paste as plain text.`)
+  const shouldCreateEmbed = confirm(
+    `Do you want to embed this content?\n\nURL: ${src}\n\nClick "OK" to create an embed, or "Cancel" to paste as plain text.`,
+  )
 
   if (!shouldCreateEmbed) {
     return false // Allow default paste behavior (paste as text)
@@ -339,8 +380,10 @@ function createIframeNode(view: any, extensionThis: any, src: string, width?: nu
   const editorWidth = editorElement?.clientWidth || 800
 
   // Use provided dimensions or calculate optimal ones
-  const finalWidth = width || getOptimalDimensions(processedUrl, editorWidth).width
-  const finalHeight = height || getOptimalDimensions(processedUrl, editorWidth).height
+  const finalWidth =
+    width || getOptimalDimensions(processedUrl, editorWidth).width
+  const finalHeight =
+    height || getOptimalDimensions(processedUrl, editorWidth).height
 
   const attrs = {
     src: processedUrl,
@@ -348,7 +391,7 @@ function createIframeNode(view: any, extensionThis: any, src: string, width?: nu
     height: finalHeight,
     title: title,
     align: 'center' as const,
-    aspectRatio: finalHeight / finalWidth
+    aspectRatio: finalHeight / finalWidth,
   }
 
   const node = view.state.schema.nodes.iframe.create(attrs)

package/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue

@@ -12,7 +12,7 @@
       </div>
       <div class="grid gap-px" :style="gridStyle">
         <div v-for="(img, idx) in images" :key="img.attrs.src + idx"
-          class="relative aspect-square w-full h-full overflow-hidden bg-surface-white group">
+          class="relative aspect-square w-full h-full overflow-hidden bg-surface-base group">
           <button v-if="isEditable" type="button"
             class="absolute top-1 right-1 z-10 bg-white/80 hover:bg-white rounded-full p-1 shadow transition-opacity opacity-0 group-hover:opacity-100 focus:opacity-100"
             aria-label="Remove image" @click.stop="removeImage(idx)">

package/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue

@@ -35,7 +35,7 @@
           <div
             v-for="(item, idx) in images"
             :key="item.id"
-            class="relative aspect-square w-full h-full overflow-hidden group bg-surface-white"
+            class="relative aspect-square w-full h-full overflow-hidden group bg-surface-base"
             :draggable="true"
             @dragstart="onDragStart(idx)"
             @dragover="onDragOver($event, idx)"
@@ -182,7 +182,7 @@
             <div class="text-ink-gray-4 mb-2">
               <LucideImagePlus class="size-6" />
             </div>
-            <div class="text-ink-gray-5 text-sm font-medium">
+            <div class="text-ink-gray-5 text-sm-medium">
               Drag & drop images here or click to select
             </div>
           </div>
@@ -193,7 +193,7 @@
           </div>
           <div class="w-full bg-gray-200 rounded h-2 overflow-hidden">
             <div
-              class="bg-surface-gray-5 h-2 transition-all"
+              class="bg-surface-gray-8 h-2 transition-all"
               :style="{ width: uploadProgress + '%' }"
             ></div>
           </div>
@@ -244,7 +244,7 @@
         v-if="isFileDragging"
         class="fixed inset-0 z-50 bg-gray-900/60 pointer-events-none flex items-center justify-center"
       >
-        <div class="text-ink-gray-1 text-base font-medium">
+        <div class="text-ink-gray-1 text-base-medium">
           Drop images anywhere
         </div>
       </div>

package/src/components/TextEditor/extensions/suggestion/SuggestionList.vue

@@ -2,7 +2,7 @@
   <div
     v-if="items.length"
     ref="container"
-    class="relative max-h-[300px] min-w-40 overflow-y-auto rounded-lg bg-surface-white p-1 text-base shadow-lg"
+    class="relative max-h-[300px] min-w-40 overflow-y-auto rounded-lg bg-surface-base p-1 text-base shadow-lg"
     :class="containerClass"
   >
     <button

package/src/components/TextEditor/extensions/toc-node/TocNodeView.vue

@@ -21,7 +21,7 @@
     <button
       v-if="isEditable"
       @click="removeNode"
-      class="absolute top-2 right-2 bg-black/65 hover:bg-black/80 text-ink-gray-4 hover:text-ink-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+      class="absolute top-2 right-2 bg-black/65 hover:bg-black/80 text-ink-gray-4 hover:text-ink-base p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
       title="Remove table of contents"
     >
       <span class="lucide-x size-4" />

package/src/components/TextEditor/hljs-github.css

@@ -0,0 +1,197 @@
+/* GitHub light / dark syntax-highlight theme for highlight.js.
+   Selector-agnostic: styles any <pre> containing hljs-annotated tokens.
+   Used by both the TipTap editor (CodeBlockComponent) and the chat Markdown renderer. */
+
+/* ── pre shell ────────────────────────────────────────────────── */
+.hljs-pre {
+  background: #f6f8fa;
+  color: #24292e;
+  font-family:
+    ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Source Code Pro', 'Fira Mono',
+    'Droid Sans Mono', 'Consolas', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--outline-gray-2);
+  caret-color: #24292e;
+}
+
+.hljs-pre code {
+  color: inherit;
+  padding: 0;
+  background: none;
+  font-size: inherit;
+}
+
+/* ── GitHub light tokens ──────────────────────────────────────── */
+.hljs-pre .hljs-doctag,
+.hljs-pre .hljs-keyword,
+.hljs-pre .hljs-meta .hljs-keyword,
+.hljs-pre .hljs-template-tag,
+.hljs-pre .hljs-template-variable,
+.hljs-pre .hljs-type,
+.hljs-pre .hljs-variable.language_ {
+  color: #d73a49;
+}
+
+.hljs-pre .hljs-title,
+.hljs-pre .hljs-title.class_,
+.hljs-pre .hljs-title.class_.inherited__,
+.hljs-pre .hljs-title.function_ {
+  color: #6f42c1;
+}
+
+.hljs-pre .hljs-attr,
+.hljs-pre .hljs-attribute,
+.hljs-pre .hljs-literal,
+.hljs-pre .hljs-meta,
+.hljs-pre .hljs-number,
+.hljs-pre .hljs-operator,
+.hljs-pre .hljs-variable,
+.hljs-pre .hljs-selector-attr,
+.hljs-pre .hljs-selector-class,
+.hljs-pre .hljs-selector-id {
+  color: #005cc5;
+}
+
+.hljs-pre .hljs-regexp,
+.hljs-pre .hljs-string,
+.hljs-pre .hljs-meta .hljs-string {
+  color: #032f62;
+}
+
+.hljs-pre .hljs-built_in,
+.hljs-pre .hljs-symbol {
+  color: #e36209;
+}
+
+.hljs-pre .hljs-comment,
+.hljs-pre .hljs-code,
+.hljs-pre .hljs-formula {
+  color: #6a737d;
+}
+
+.hljs-pre .hljs-name,
+.hljs-pre .hljs-quote,
+.hljs-pre .hljs-selector-tag,
+.hljs-pre .hljs-selector-pseudo {
+  color: #22863a;
+}
+
+.hljs-pre .hljs-subst {
+  color: #24292e;
+}
+.hljs-pre .hljs-section {
+  color: #005cc5;
+  font-weight: bold;
+}
+.hljs-pre .hljs-bullet {
+  color: #735c0f;
+}
+.hljs-pre .hljs-emphasis {
+  color: #24292e;
+  font-style: italic;
+}
+.hljs-pre .hljs-strong {
+  color: #24292e;
+  font-weight: 700;
+}
+.hljs-pre .hljs-addition {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.hljs-pre .hljs-deletion {
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+/* ── pre shell — dark mode ───────────────────────────────────── */
+[data-theme='dark'] .hljs-pre {
+  background: #0d1117;
+  color: #c9d1d9;
+  caret-color: #c9d1d9;
+}
+
+/* ── GitHub dark tokens ──────────────────────────────────────── */
+[data-theme='dark'] .hljs-pre .hljs-doctag,
+[data-theme='dark'] .hljs-pre .hljs-keyword,
+[data-theme='dark'] .hljs-pre .hljs-meta .hljs-keyword,
+[data-theme='dark'] .hljs-pre .hljs-template-tag,
+[data-theme='dark'] .hljs-pre .hljs-template-variable,
+[data-theme='dark'] .hljs-pre .hljs-type,
+[data-theme='dark'] .hljs-pre .hljs-variable.language_ {
+  color: #ff7b72;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-title,
+[data-theme='dark'] .hljs-pre .hljs-title.class_,
+[data-theme='dark'] .hljs-pre .hljs-title.class_.inherited__,
+[data-theme='dark'] .hljs-pre .hljs-title.function_ {
+  color: #d2a8ff;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-attr,
+[data-theme='dark'] .hljs-pre .hljs-attribute,
+[data-theme='dark'] .hljs-pre .hljs-literal,
+[data-theme='dark'] .hljs-pre .hljs-meta,
+[data-theme='dark'] .hljs-pre .hljs-number,
+[data-theme='dark'] .hljs-pre .hljs-operator,
+[data-theme='dark'] .hljs-pre .hljs-variable,
+[data-theme='dark'] .hljs-pre .hljs-selector-attr,
+[data-theme='dark'] .hljs-pre .hljs-selector-class,
+[data-theme='dark'] .hljs-pre .hljs-selector-id {
+  color: #79c0ff;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-regexp,
+[data-theme='dark'] .hljs-pre .hljs-string,
+[data-theme='dark'] .hljs-pre .hljs-meta .hljs-string {
+  color: #a5d6ff;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-built_in,
+[data-theme='dark'] .hljs-pre .hljs-symbol {
+  color: #ffa657;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-comment,
+[data-theme='dark'] .hljs-pre .hljs-code,
+[data-theme='dark'] .hljs-pre .hljs-formula {
+  color: #8b949e;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-name,
+[data-theme='dark'] .hljs-pre .hljs-quote,
+[data-theme='dark'] .hljs-pre .hljs-selector-tag,
+[data-theme='dark'] .hljs-pre .hljs-selector-pseudo {
+  color: #7ee787;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-subst {
+  color: #c9d1d9;
+}
+[data-theme='dark'] .hljs-pre .hljs-section {
+  color: #1f6feb;
+  font-weight: bold;
+}
+[data-theme='dark'] .hljs-pre .hljs-bullet {
+  color: #f2cc60;
+}
+[data-theme='dark'] .hljs-pre .hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+[data-theme='dark'] .hljs-pre .hljs-strong {
+  color: #c9d1d9;
+  font-weight: 700;
+}
+[data-theme='dark'] .hljs-pre .hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+[data-theme='dark'] .hljs-pre .hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}

package/src/components/TextEditor/index.ts

@@ -1,7 +1,20 @@
+/** @deprecated Use `Editor` from `frappe-ui/editor` instead. */
 export { default } from './TextEditor.vue'
+
+/** @deprecated Use `Editor` from `frappe-ui/editor` instead. */
 export { default as TextEditor } from './TextEditor.vue'
+
+/** @deprecated Use `EditorBubbleMenu` from `frappe-ui/editor` instead. */
 export { default as TextEditorBubbleMenu } from './components/TextEditorBubbleMenu.vue'
+
+/** @deprecated Use `EditorFixedMenu` from `frappe-ui/editor` instead. */
 export { default as TextEditorFixedMenu } from './components/TextEditorFixedMenu.vue'
+
+/** @deprecated Use `EditorFloatingMenu` from `frappe-ui/editor` instead. */
 export { default as TextEditorFloatingMenu } from './components/TextEditorFloatingMenu.vue'
+
+/** @deprecated Use `EditorContent` from `frappe-ui/editor` instead. */
 export { EditorContent as TextEditorContent } from '@tiptap/vue-3'
+
+/** @deprecated Use toolbar presets and menu items from `frappe-ui/editor` instead. */
 export { createEditorButton as createEditorButton } from './utils'

package/src/components/TextInput/TextInput.cy.ts

@@ -18,12 +18,12 @@ const sizeCLass = {
   sm: 'text-base rounded h-7',
   md: 'text-base rounded h-8',
   lg: 'text-lg rounded-md h-10',
-  xl: 'text-xl rounded-md h-10',
+  xl: 'text-2xl rounded-md h-10',
 }
 
 const variantClasses = {
   subtle: 'bg-surface-gray-2',
-  outline: 'bg-surface-white',
+  outline: 'bg-surface-base',
   ghost: 'border-0',
 }
 
@@ -104,11 +104,16 @@ describe('Textinput', () => {
         },
       })
       cy.contains('label', 'Email').should('exist')
+      cy.contains('label', 'Email')
+        .should('have.class', 'text-base')
+        .and('have.class', 'text-ink-gray-5')
       cy.get('input').then(($input) => {
         const id = $input.attr('id')!
         const describedBy = $input.attr('aria-describedby')!
         expect(describedBy).to.equal(`${id}-description`)
-        cy.get(`#${id}-description`).should('contain.text', 'We never share')
+        cy.get(`#${id}-description`)
+          .should('contain.text', 'We never share')
+          .and('have.class', 'text-ink-gray-5')
         cy.get(`label[for="${id}"]`).should('exist')
       })
     })

package/src/components/TextInput/TextInput.md

@@ -2,6 +2,10 @@
 
 A flexible input for entering text, numbers etc. Supports many sizes, styles, and custom slots.
 
+## Playground
+
+<ClientOnly><TextInputBuilder /></ClientOnly>
+
 <ComponentPreview name="TextInput-Default" layout="stacked" />
 
 ## Variants

package/src/components/TextInput/TextInput.vue

@@ -2,7 +2,7 @@
   <LabelingWrapper
     :enabled="hasLabeling"
     :wrapper-class="['space-y-1.5', attrs.class]"
-    :wrapper-style="attrs.style"
+    :wrapper-style="attrs.style as StyleValue"
   >
     <InputLabel
       v-if="props.label || $slots.label"
@@ -10,7 +10,6 @@
       :for-id="inputId"
       :label="props.label"
       :required="props.required"
-      class="text-p-sm font-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -68,16 +67,13 @@
     >
       <slot v-if="$slots.description" name="description" />
     </InputDescription>
-    <InputError
-      v-if="hasError"
-      :id="errorMessageId"
-      :lines="errorLines"
-    />
+    <InputError v-if="hasError" :id="errorMessageId" :lines="errorLines" />
   </LabelingWrapper>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, useAttrs, useSlots } from 'vue'
+import type { StyleValue } from 'vue'
 import debounce from '../../utils/debounce'
 import { useInputLabeling } from '../../composables/useInputLabeling'
 import InputLabel from '../InputLabeling/InputLabel.vue'
@@ -140,10 +136,10 @@ const {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      props.description ||
-      hasError.value ||
-      slots.label ||
-      slots.description,
+    props.description ||
+    hasError.value ||
+    slots.label ||
+    slots.description,
   )
 })
 
@@ -160,7 +156,7 @@ const inputClasses = computed(() => {
     sm: 'text-base rounded h-7',
     md: 'text-base rounded h-8',
     lg: 'text-lg rounded-md h-10',
-    xl: 'text-xl rounded-md h-10',
+    xl: 'text-2xl rounded-md h-10',
   }[props.size]
 
   let paddingClasses = {
@@ -189,16 +185,16 @@ const inputClasses = computed(() => {
   let variant = props.disabled ? 'disabled' : props.variant
   let variantClasses = {
     subtle:
-      'border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0',
     outline:
-      'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-outline-gray-2 bg-surface-base placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
       props.variant === 'outline'
         ? 'border-outline-gray-2'
         : 'border-transparent',
     ],
-    ghost: 'border-0 focus:ring-0 focus-visible:ring-0',
+    ghost: 'border-0 focus:ring-0 focus-visible:outline-none',
   }[variant]
 
   return [

package/src/components/TextInput/stories/Slots.vue

@@ -6,7 +6,7 @@ import { TextInput } from 'frappe-ui'
   <TextInput placeholder="acme" required>
     <template #label="{ required }">
       <span class="font-semibold">Workspace name</span>
-      <span v-if="required" class="text-ink-red-3">*</span>
+      <span v-if="required" class="text-ink-red-6">*</span>
     </template>
     <template #description>
       <span class="italic">Lowercase letters and dashes only.</span>

package/src/components/Textarea/Textarea.cy.ts

@@ -37,7 +37,7 @@ describe('Textarea', () => {
 
     cy.get('textarea')
       .should('have.class', 'border-outline-gray-2')
-      .and('have.class', 'bg-surface-white')
+      .and('have.class', 'bg-surface-base')
   })
 
   it('renders disabled state', () => {

package/src/components/Textarea/Textarea.md

@@ -2,6 +2,10 @@
 
 A multi-line input for entering longer text. Supports clear editing and flexible sizing for different content needs.
 
+## Playground
+
+<ClientOnly><TextareaBuilder /></ClientOnly>
+
 <ComponentPreview name="Textarea-Default" layout="stacked" />
 
 ## Variants