frappe-ui 1.0.0-beta.3 → 1.0.0-beta.5

package/frappe/Billing/SignupBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-base text-base"
   >
     <div class="flex flex-col gap-1">
       <slot>

package/frappe/Billing/TrialBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed && showBanner"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-elevation-2 text-base"
   >
     <div class="flex flex-col gap-1">
       <div class="inline-flex text-ink-gray-9 gap-2 items-center font-medium">

package/frappe/DataImport/DataImport.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-base px-3 py-2.5 sm:px-5"
     >
       <Breadcrumbs :items="breadcrumbs" />
       <ImportSteps class="flex-1 hidden lg:flex" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />

package/frappe/DataImport/ImportSteps.vue

@@ -7,10 +7,10 @@
         @click="emit('updateStep', 'upload', { ...data })"
         >
             <FeatherIcon v-if="uploadStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
+                'text-ink-base bg-surface-gray-10': onUploadStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
+                'text-ink-base bg-surface-gray-10': onUploadStep,
             }">
                 <span>
                     1
@@ -28,10 +28,10 @@
         @click="moveToMapStep()"
         >
             <FeatherIcon v-if="mapStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
+                'text-ink-base bg-surface-gray-10': onMapStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
+                'text-ink-base bg-surface-gray-10': onMapStep,
             }">
                 <span>
                     2
@@ -49,10 +49,10 @@
         @click="moveToPreviewStep()"
         >
             <FeatherIcon v-if="previewStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
+                'text-ink-base bg-surface-gray-10': onPreviewStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
+                'text-ink-base bg-surface-gray-10': onPreviewStep,
             }">
                 <span>
                     3

package/frappe/DataImport/PreviewStep.vue

@@ -47,8 +47,8 @@
             </div>
             <div class="rounded-md bg-surface-amber-2 p-2 space-y-2 text-xs">
                 <div v-for="warning in warnings" class="flex items-center space-x-2">
-                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
-                    <div v-html="warning.message" class="text-ink-amber-3"></div>
+                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-6" />
+                    <div v-html="warning.message" class="text-ink-amber-6"></div>
                 </div>
             </div>
         </div>
@@ -71,7 +71,7 @@
                         </th>
                     </tr>
                 </thead>
-                <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+                <tbody class="bg-surface-base divide-y divide-surface-gray-2">
                     <tr v-for="(row, rowIndex) in previewData" :key="rowIndex">
                         <td
                             v-for="column in previewColumns"
@@ -117,12 +117,12 @@
                             </th>
                         </tr>
                     </thead>
-                    <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+                    <tbody class="bg-surface-base divide-y divide-surface-gray-2">
                         <tr v-for="(row, rowIndex) in filteredLogs" :key="rowIndex" class="group">
                             <td class="px-3 py-2 text-sm text-ink-gray-7 border-r">
                                 <div class="flex items-center justify-center space-x-2">
                                     <div v-if="row.success" class="size-1.5 bg-surface-green-3 rounded"></div>
-                                    <div v-else class="size-1.5 bg-surface-red-5 rounded"></div>
+                                    <div v-else class="size-1.5 bg-surface-red-7 rounded"></div>
                                     <div>
                                         {{ JSON.parse(row["row_indexes"])[0] - 1 }}
                                     </div>
@@ -312,11 +312,11 @@ const importErrorCount = computed(() => {
 
 const importBannerClass = computed(() => {
     if (importErrorCount.value == 0) {
-        return 'bg-surface-green-2 text-ink-green-3'
+        return 'bg-surface-green-2 text-ink-green-6'
     } else if (importSuccessCount.value == 0) {
-        return 'bg-surface-red-2 text-ink-red-3'
+        return 'bg-surface-red-2 text-ink-red-6'
     } else {
-        return 'bg-surface-amber-2 text-ink-amber-3'
+        return 'bg-surface-amber-2 text-ink-amber-6'
     }
 })
 

package/frappe/DataImport/TemplateModal.vue

@@ -37,7 +37,7 @@
                                     <label
                                         :for="`checkbox-${doctype}-${field.fieldname}`"
                                         :class="{
-                                            'text-ink-red-3': field.reqd
+                                            'text-ink-red-6': field.reqd
                                         }">
                                         {{ field.label || field.fieldname }}
                                     </label>

package/frappe/DataImport/UploadStep.vue

@@ -47,7 +47,7 @@
                         </span>
                     </div>
                 </div>
-                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2">
+                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-base border rounded-md p-2">
                     <div class="space-y-2">
                         <div class="font-medium">
                             {{ uploadingdFile.name }}
@@ -58,14 +58,14 @@
                     </div>
                     <div class="w-full bg-surface-gray-1 h-1 rounded-full mt-3">
                         <div
-                            class="bg-surface-gray-7 h-1 rounded-full transition-all duration-500 ease-in-out"
+                            class="bg-surface-gray-10 h-1 rounded-full transition-all duration-500 ease-in-out"
                             :style="`width: ${uploadProgress}%`"
                         ></div>
                     </div>
                 </div>
             </div>
             <div v-else-if="importFile" class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
+                <div class="w-4/5 lg:w-2/5 bg-surface-base border rounded-md p-2 flex items-center justify-between items-center">
                     <div class="space-y-2">
                         <div class="font-medium leading-5 text-ink-gray-9">
                             {{ importFile.file_name || importFile.split("/").pop() }}
@@ -76,7 +76,7 @@
                     </div>
                     <FeatherIcon
                         name="trash-2"
-                        class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
+                        class="size-4 stroke-1.5 text-ink-red-6 cursor-pointer"
                         @click="deleteFile"
                     />
                 </div>

package/frappe/Filter/Filter.vue

@@ -133,7 +133,7 @@ const filterCount = computed(() =>
 
 <template>
   <Popover
-    popover-class="mt-2 p-2 rounded-lg border bg-surface-modal shadow-xl max-w-xl"
+    popover-class="mt-2 p-2 rounded-lg border bg-surface-elevation-2 shadow-xl max-w-xl"
     placement="bottom-end"
     :matchTargetWidth="true"
   >

package/frappe/Help/HelpModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="show"
-    class="fixed z-50 right-0 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-modal shadow-2xl"
+    class="fixed z-50 right-0 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-elevation-2 shadow-2xl"
     :class="{ 'top-[calc(100%_-_120px)] border': minimize }"
     @click.stop
   >

package/frappe/Link/stories/Suffix.vue

@@ -76,7 +76,7 @@ const selectedUser = computed(() =>
                   class="inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-p-xs"
                   :class="
                     selectedUser.enabled
-                      ? 'bg-surface-green-1 text-ink-green-3'
+                      ? 'bg-surface-green-1 text-ink-green-6'
                       : 'bg-surface-gray-2 text-ink-gray-5'
                   "
                 >
@@ -85,7 +85,7 @@ const selectedUser = computed(() =>
                     :class="
                       selectedUser.enabled
                         ? 'bg-surface-green-3'
-                        : 'bg-surface-gray-5'
+                        : 'bg-surface-gray-8'
                     "
                   />
                   {{ selectedUser.enabled ? 'Active' : 'Disabled' }}

package/frappe/Onboarding/GettingStartedBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-elevation-2 text-base"
   >
     <div
       v-if="stepsCompleted != totalSteps"

package/frappe/drive/components/AppSwitcher.vue

@@ -22,7 +22,7 @@ const open = ref(false)
 <template>
   <div class="fixed left-0 top-0 h-screen w-3 z-40" @mouseenter="open = true" />
   <aside
-    class="fixed left-0 top-0 h-screen z-50 transition-transform duration-300 ease-out bg-surface-white border-r border-gray-200 px-2"
+    class="fixed left-0 top-0 h-screen z-50 transition-transform duration-300 ease-out bg-surface-base border-r border-gray-200 px-2"
     :class="!open && '-translate-x-full'"
     @mouseleave="open = false"
   >

package/frappe/drive/components/InfoDialog.vue

@@ -190,12 +190,12 @@ onKeyDown('D', () => {
 const accessConfig = {
   team: {
     icon: LucideBuilding2,
-    color: 'bg-surface-blue-2 text-ink-blue-2',
+    color: 'bg-surface-blue-2 text-ink-blue-5',
     label: 'Team',
   },
   public: {
     icon: LucideGlobe2,
-    color: 'bg-surface-red-2 text-ink-red-3',
+    color: 'bg-surface-red-2 text-ink-red-6',
     label: 'Public',
   },
   restricted: {

package/frappe/drive/components/MoveDialog.vue

@@ -75,7 +75,7 @@
                           ? 'bg-surface-gray-3'
                           : 'hover:bg-surface-gray-2',
                         entities[0].parent_entity === node.value
-                          ? 'cursor-not-allowed hover:bg-surface-white'
+                          ? 'cursor-not-allowed hover:bg-surface-base'
                           : 'group',
                       ]"
                     >

package/frappe/drive/components/Select/Select.vue

@@ -84,7 +84,7 @@ const labelFunction = (val: SelectValue_, selected = false) => {
         <SelectContent
           :hide-when-detached="true"
           :align="'start'"
-          class="z-10 min-w-[--reka-select-trigger-width] mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          class="z-10 min-w-[--reka-select-trigger-width] mt-1 bg-surface-elevation-2 overflow-hidden rounded-lg shadow-2xl"
         >
           <SelectViewport
             class="max-h-60 overflow-auto p-1.5"
@@ -99,7 +99,7 @@ const labelFunction = (val: SelectValue_, selected = false) => {
                   <hr v-if="optionOrGroup.group === true" class="my-1.5" />
                   <SelectLabel
                     v-else
-                    class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-modal z-10"
+                    class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-elevation-2 z-10"
                   >
                     {{ optionOrGroup.group }}
                   </SelectLabel>

package/icons/IconPicker.vue

@@ -182,7 +182,7 @@ defineExpose({
       </ComboboxAnchor>
       <ComboboxPortal>
         <ComboboxContent
-          class="z-10 w-60 mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          class="z-10 w-60 mt-1 bg-surface-elevation-2 overflow-hidden rounded-lg shadow-2xl"
           position="popper"
           @openAutoFocus.prevent
           @closeAutoFocus.prevent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,
@@ -17,8 +17,8 @@
     "test:cypress:coverage": "cross-env COVERAGE=true cypress run --component",
     "coverage": "yarn test:coverage && yarn test:cypress:coverage && yarn coverage:merge",
     "coverage:merge": "tsx .github/scripts/merge-coverage.ts",
-    "type-check": "vue-tsc --noEmit",
-    "type-check:tsc": "tsc --noEmit",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json",
+    "type-check:tsc": "tsc --noEmit -p tsconfig.app.json",
     "format": "prettier -w ./src",
     "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
     "release-patch": "yarn version --patch && git push && git push --tags",
@@ -31,7 +31,8 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "docs:gen": "tsx docs/scripts/propsgen.ts",
-    "docs:gen:all": "yarn docs:gen --all"
+    "docs:gen:all": "yarn docs:gen --all",
+    "sync-tokens": "node tailwind/figma-tokens-to-theme.js"
   },
   "exports": {
     ".": {
@@ -98,31 +99,41 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
-    "@tiptap/core": "^3.11.0",
-    "@tiptap/extension-bubble-menu": "^3.11.0",
-    "@tiptap/extension-code": "^3.11.0",
-    "@tiptap/extension-code-block": "^3.11.0",
-    "@tiptap/extension-code-block-lowlight": "^3.11.0",
-    "@tiptap/extension-color": "^3.11.0",
-    "@tiptap/extension-heading": "^3.11.0",
-    "@tiptap/extension-highlight": "^3.11.0",
-    "@tiptap/extension-image": "^3.11.0",
-    "@tiptap/extension-link": "^3.11.0",
-    "@tiptap/extension-list": "^3.11.0",
-    "@tiptap/extension-mention": "^3.11.0",
-    "@tiptap/extension-node-range": "^3.11.0",
-    "@tiptap/extension-placeholder": "^3.11.0",
-    "@tiptap/extension-table": "^3.11.0",
-    "@tiptap/extension-task-item": "^3.11.0",
-    "@tiptap/extension-task-list": "^3.11.0",
-    "@tiptap/extension-text-align": "^3.11.0",
-    "@tiptap/extension-text-style": "^3.11.0",
-    "@tiptap/extension-typography": "^3.11.0",
-    "@tiptap/extensions": "^3.11.0",
-    "@tiptap/pm": "^3.11.0",
-    "@tiptap/starter-kit": "^3.11.0",
-    "@tiptap/suggestion": "^3.11.0",
-    "@tiptap/vue-3": "^3.11.0",
+    "@tiptap/core": "^3.26.0",
+    "@tiptap/extension-blockquote": "^3.26.0",
+    "@tiptap/extension-bold": "^3.26.0",
+    "@tiptap/extension-bubble-menu": "^3.26.0",
+    "@tiptap/extension-code": "^3.26.0",
+    "@tiptap/extension-code-block": "^3.26.0",
+    "@tiptap/extension-code-block-lowlight": "^3.26.0",
+    "@tiptap/extension-color": "^3.26.0",
+    "@tiptap/extension-document": "^3.26.0",
+    "@tiptap/extension-hard-break": "^3.26.0",
+    "@tiptap/extension-heading": "^3.26.0",
+    "@tiptap/extension-highlight": "^3.26.0",
+    "@tiptap/extension-horizontal-rule": "^3.26.0",
+    "@tiptap/extension-image": "^3.26.0",
+    "@tiptap/extension-italic": "^3.26.0",
+    "@tiptap/extension-link": "^3.26.0",
+    "@tiptap/extension-list": "^3.26.0",
+    "@tiptap/extension-mention": "^3.26.0",
+    "@tiptap/extension-node-range": "^3.26.0",
+    "@tiptap/extension-paragraph": "^3.26.0",
+    "@tiptap/extension-placeholder": "^3.26.0",
+    "@tiptap/extension-strike": "^3.26.0",
+    "@tiptap/extension-table": "^3.26.0",
+    "@tiptap/extension-task-item": "^3.26.0",
+    "@tiptap/extension-task-list": "^3.26.0",
+    "@tiptap/extension-text": "^3.26.0",
+    "@tiptap/extension-text-align": "^3.26.0",
+    "@tiptap/extension-text-style": "^3.26.0",
+    "@tiptap/extension-typography": "^3.26.0",
+    "@tiptap/extension-underline": "^3.26.0",
+    "@tiptap/extensions": "^3.26.0",
+    "@tiptap/pm": "^3.26.0",
+    "@tiptap/starter-kit": "^3.26.0",
+    "@tiptap/suggestion": "^3.26.0",
+    "@tiptap/vue-3": "^3.26.0",
     "@vueuse/core": "^10.4.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.4.0",
@@ -178,10 +189,26 @@
     "vue-tsc": "^3.2.7"
   },
   "resolutions": {
-    "prosemirror-model": "1.25.2",
-    "prosemirror-state": "1.4.3",
-    "prosemirror-view": "1.40.0",
-    "prosemirror-transform": "1.10.4",
+    "prosemirror-model": "1.25.7",
+    "prosemirror-state": "1.4.4",
+    "prosemirror-view": "1.41.8",
+    "prosemirror-transform": "1.12.0",
+    "@tiptap/extension-blockquote": "3.26.0",
+    "@tiptap/extension-bold": "3.26.0",
+    "@tiptap/extension-bullet-list": "3.26.0",
+    "@tiptap/extension-document": "3.26.0",
+    "@tiptap/extension-dropcursor": "3.26.0",
+    "@tiptap/extension-gapcursor": "3.26.0",
+    "@tiptap/extension-hard-break": "3.26.0",
+    "@tiptap/extension-horizontal-rule": "3.26.0",
+    "@tiptap/extension-italic": "3.26.0",
+    "@tiptap/extension-list-item": "3.26.0",
+    "@tiptap/extension-list-keymap": "3.26.0",
+    "@tiptap/extension-ordered-list": "3.26.0",
+    "@tiptap/extension-paragraph": "3.26.0",
+    "@tiptap/extension-strike": "3.26.0",
+    "@tiptap/extension-text": "3.26.0",
+    "@tiptap/extension-underline": "3.26.0",
     "defu": "^6.1.5",
     "esbuild": "^0.25.0",
     "lodash": "^4.18.0",

package/src/components/Alert/Alert.md

@@ -2,6 +2,10 @@
 
 A prominent message used to communicate important information, warnings, or status updates to the user.
 
+## Playground
+
+<ClientOnly><AlertBuilder /></ClientOnly>
+
 ## Themes
 <ComponentPreview name="Alert-Themes" />
 

package/src/components/Alert/Alert.vue

@@ -28,10 +28,10 @@ const classes = computed(() => {
 
 const icon = computed(() => {
   const data = {
-    yellow: { class: 'lucide-triangle-alert', css: 'text-ink-amber-3' },
-    blue: { class: 'lucide-info', css: 'text-ink-blue-3' },
-    red: { class: 'lucide-circle-x', css: 'text-ink-red-3' },
-    green: { class: 'lucide-circle-check', css: 'text-ink-green-3' },
+    yellow: { class: 'lucide-triangle-alert', css: 'text-ink-amber-6' },
+    blue: { class: 'lucide-info', css: 'text-ink-blue-6' },
+    red: { class: 'lucide-circle-x', css: 'text-ink-red-6' },
+    green: { class: 'lucide-circle-check', css: 'text-ink-green-6' },
   }
   return props.theme ? data[props.theme] : null
 })

package/src/components/Autocomplete/Autocomplete.vue

@@ -59,7 +59,7 @@
       <template #body="{ isOpen, togglePopover }">
         <div v-show="isOpen">
           <div
-            class="relative mt-1 rounded-lg bg-surface-modal text-base shadow-2xl"
+            class="relative mt-1 rounded-lg bg-surface-elevation-2 text-base shadow-2xl"
             :class="bodyClasses"
           >
             <ComboboxOptions
@@ -69,7 +69,7 @@
             >
               <div
                 v-if="!hideSearch"
-                class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-surface-modal py-1.5"
+                class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-surface-elevation-2 py-1.5"
               >
                 <div class="relative w-full">
                   <ComboboxInput
@@ -101,7 +101,7 @@
               >
                 <div
                   v-if="group.group && !group.hideLabel"
-                  class="sticky top-10 truncate bg-surface-modal px-2.5 py-1.5 text-sm font-medium text-ink-gray-5"
+                  class="sticky top-10 truncate bg-surface-elevation-2 px-2.5 py-1.5 text-sm-medium text-ink-gray-5"
                 >
                   {{ group.group }}
                 </div>

package/src/components/Avatar/Avatar.md

@@ -2,6 +2,10 @@
 
 A visual representation of a user, typically shown as an image, initials, or an icon.
 
+## Playground
+
+<ClientOnly><AvatarBuilder /></ClientOnly>
+
 ## Themes
 <ComponentPreview name="Avatar-Shapes" />
 

package/src/components/Avatar/Avatar.vue

@@ -25,7 +25,7 @@
     <div
       v-if="$slots.indicator"
       :class="[
-        'absolute bottom-0 right-0 grid place-items-center rounded-full bg-surface-white',
+        'absolute bottom-0 right-0 grid place-items-center rounded-full bg-surface-base',
         indicatorContainerClasses,
       ]"
     >
@@ -80,9 +80,9 @@ const labelClasses = computed(() => {
     sm: 'text-sm',
     md: 'text-base',
     lg: 'text-base',
-    xl: 'text-lg',
-    '2xl': 'text-xl',
-    '3xl': 'text-2xl',
+    xl: 'text-xl',
+    '2xl': 'text-3xl',
+    '3xl': 'text-4xl',
   }[props.size]
   return ['font-medium', sizeClass]
 })

package/src/components/Badge/Badge.api.md

@@ -9,7 +9,7 @@
     name: 'theme',
     description: 'Visual color theme of the badge',
     required: false,
-    type: '"blue" | "red" | "green" | "gray" | "orange"',
+    type: '"blue" | "red" | "green" | "gray" | "amber" | "violet" | "orange"',
     default: '"gray"'
   },
   {

package/src/components/Badge/Badge.cy.ts

@@ -41,7 +41,7 @@ describe('<Badge />', () => {
         label: 'Blue',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-blue-2')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-blue-8')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-blue-2')
 
     // Green
@@ -51,18 +51,28 @@ describe('<Badge />', () => {
         label: 'Green',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-green-3')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-green-8')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-green-2')
 
-    // Orange
+    // Amber
+    cy.mount(Badge, {
+      props: {
+        theme: 'amber',
+        label: 'Amber',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-8')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-2')
+
+    // Orange (deprecated alias for amber)
     cy.mount(Badge, {
       props: {
         theme: 'orange',
         label: 'Orange',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-3')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-1')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-8')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-2')
 
     // Red
     cy.mount(Badge, {
@@ -71,20 +81,30 @@ describe('<Badge />', () => {
         label: 'Red',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-red-4')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-red-8')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-red-2')
+
+    // Violet
+    cy.mount(Badge, {
+      props: {
+        theme: 'violet',
+        label: 'Violet',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-violet-8')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-violet-2')
   })
 
   it('renders different variants with gray theme', () => {
-    // Solid
+    // Solid (gray uses semantic token; non-gray solids use raw palette)
     cy.mount(Badge, {
       props: {
         variant: 'solid',
         label: 'Solid',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-white')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-7')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-base')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-10')
 
     // Subtle (default)
     cy.mount(Badge, {
@@ -104,8 +124,7 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-transparent')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'border-outline-gray-1')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'border-outline-gray-2')
 
     // Ghost
     cy.mount(Badge, {
@@ -115,7 +134,6 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-transparent')
   })
 
   it('renders different sizes', () => {
@@ -149,7 +167,7 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'h-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-sm')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-[13px]')
     cy.get('.inline-flex.rounded-full').should('have.class', 'px-2')
   })
 
@@ -250,7 +268,7 @@ describe('<Badge />', () => {
         prefix: () => h(TestIcon),
       },
     })
-    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-4')
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'size-2.5')
 
     // Test with md size (default)
     cy.mount(Badge, {
@@ -259,7 +277,7 @@ describe('<Badge />', () => {
         prefix: () => h(TestIcon),
       },
     })
-    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-4')
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'size-2.5')
 
     // Test with lg size
     cy.mount(Badge, {
@@ -268,6 +286,6 @@ describe('<Badge />', () => {
         prefix: () => h(TestIcon),
       },
     })
-    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-6')
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'size-3')
   })
 })