frappe-ui 0.1.80 → 0.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.80",
+  "version": "0.1.83",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/Alert.vue

@@ -21,7 +21,7 @@
       </svg>
       <div class="ml-2 w-full">
         <div class="flex flex-col md:flex-row md:items-baseline">
-          <h3 class="text-lg font-medium text-gray-900" v-if="title">
+          <h3 class="text-lg font-medium text-ink-gray-9" v-if="title">
             {{ title }}
           </h3>
           <div class="mt-1 md:ml-2 md:mt-0">
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<AlertProps>(), {
 
 const classes = computed(() => {
   return {
-    warning: 'text-gray-700 bg-blue-50',
+    warning: 'text-ink-gray-7 bg-surface-blue-1',
   }[props.type]
 })
 </script>

package/src/components/Autocomplete.vue

@@ -10,22 +10,25 @@
         <slot name="target" v-bind="{ open: openPopover, togglePopover }">
           <div class="w-full">
             <button
-              class="flex h-7 w-full items-center justify-between gap-2 rounded bg-gray-100 px-2 py-1 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-gray-400"
-              :class="{ 'bg-gray-200': isComboboxOpen }"
+              class="flex h-7 w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 border border-transparent focus:border-outline-gray-4 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
+              :class="{ 'bg-surface-gray-3': isComboboxOpen }"
               @click="() => togglePopover()"
             >
               <div class="flex items-center overflow-hidden">
                 <slot name="prefix" />
-                <span class="truncate text-base leading-5" v-if="selectedValue">
+                <span
+                  class="truncate text-base leading-5 text-ink-gray-8"
+                  v-if="selectedValue"
+                >
                   {{ displayValue(selectedValue) }}
                 </span>
-                <span class="text-base leading-5 text-gray-500" v-else>
+                <span class="text-base leading-5 text-ink-gray-4" v-else>
                   {{ placeholder || '' }}
                 </span>
               </div>
               <FeatherIcon
                 name="chevron-down"
-                class="h-4 w-4 text-gray-600"
+                class="h-4 w-4 text-ink-gray-5"
                 aria-hidden="true"
               />
             </button>
@@ -35,7 +38,7 @@
       <template #body="{ isOpen, togglePopover }">
         <div v-show="isOpen">
           <div
-            class="relative mt-1 rounded-lg bg-white text-base shadow-2xl"
+            class="relative mt-1 rounded-lg bg-surface-modal text-base shadow-2xl"
             :class="bodyClasses"
           >
             <ComboboxOptions
@@ -45,12 +48,12 @@
             >
               <div
                 v-if="!hideSearch"
-                class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-white py-1.5"
+                class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-surface-modal py-1.5"
               >
                 <div class="relative w-full">
                   <ComboboxInput
                     ref="searchInput"
-                    class="form-input w-full"
+                    class="form-input w-full bg-surface-gray-2 focus:bg-surface-gray-3 hover:bg-surface-gray-4 text-ink-gray-8"
                     type="text"
                     @change="
                       (e) => {
@@ -65,7 +68,7 @@
                     class="absolute right-0 inline-flex h-7 w-7 items-center justify-center"
                     @click="selectedValue = null"
                   >
-                    <FeatherIcon name="x" class="w-4" />
+                    <FeatherIcon name="x" class="w-4 text-ink-gray-8" />
                   </button>
                 </div>
               </div>
@@ -76,7 +79,7 @@
               >
                 <div
                   v-if="group.group && !group.hideLabel"
-                  class="sticky top-10 truncate bg-white px-2.5 py-1.5 text-sm font-medium text-gray-600"
+                  class="sticky top-10 truncate bg-surface-modal px-2.5 py-1.5 text-sm font-medium text-ink-gray-5"
                 >
                   {{ group.group }}
                 </div>
@@ -90,13 +93,13 @@
                   <li
                     :class="[
                       'flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base',
-                      { 'bg-gray-100': active },
+                      { 'bg-surface-gray-3': active },
                     ]"
                   >
-                    <div class="flex flex-1 gap-2 overflow-hidden">
+                    <div class="flex flex-1 gap-2 overflow-hidden items-center">
                       <div
                         v-if="$slots['item-prefix'] || $props.multiple"
-                        class="flex-shrink-0"
+                        class="flex flex-shrink-0"
                       >
                         <slot
                           name="item-prefix"
@@ -105,12 +108,12 @@
                           <FeatherIcon
                             name="check"
                             v-if="isOptionSelected(option)"
-                            class="h-4 w-4 text-gray-700"
+                            class="h-4 w-4 text-ink-gray-7"
                           />
                           <div v-else class="h-4 w-4" />
                         </slot>
                       </div>
-                      <span class="flex-1 truncate">
+                      <span class="flex-1 truncate text-ink-gray-7">
                         {{ getLabel(option) }}
                       </span>
                     </div>
@@ -125,7 +128,7 @@
                       >
                         <div
                           v-if="option?.description"
-                          class="text-sm text-gray-600"
+                          class="text-sm text-ink-gray-5"
                         >
                           {{ option.description }}
                         </div>
@@ -136,7 +139,7 @@
               </div>
               <li
                 v-if="groups.length == 0"
-                class="rounded-md px-2.5 py-1.5 text-base text-gray-600"
+                class="rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
               >
                 No results found
               </li>

package/src/components/Avatar.vue

@@ -12,7 +12,7 @@
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-gray-100 uppercase text-gray-600"
+      class="flex h-full w-full items-center justify-center bg-surface-gray-2 uppercase text-ink-gray-5"
       :class="[labelClasses, shapeClasses]"
     >
       <div :class="iconClasses" v-if="$slots.default">
@@ -25,7 +25,7 @@
     <div
       v-if="$slots.indicator"
       :class="[
-        'absolute bottom-0 right-0 grid place-items-center rounded-full bg-white',
+        'absolute bottom-0 right-0 grid place-items-center rounded-full bg-surface-white',
         indicatorContainerClasses,
       ]"
     >

package/src/components/Billing/TrialBanner.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     v-if="!isSidebarCollapsed && showBanner"
-    class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-white text-base"
+    class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
   >
     <div class="flex flex-col gap-1">
       <div class="inline-flex gap-2 items-center font-medium">
         <FeatherIcon class="h-4" name="info" />
         {{ trialTitle }}
       </div>
-      <div class="text-gray-700 text-sm font-normal leading-5">
+      <div class="text-ink-gray-7 text-sm font-normal leading-5">
         {{ trialMessage }}
       </div>
     </div>

package/src/components/Breadcrumbs.vue

@@ -5,7 +5,7 @@
         <Button variant="ghost">
           <template #icon>
             <svg
-              class="w-4 text-gray-600"
+              class="w-4 text-ink-gray-5"
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
@@ -23,7 +23,7 @@
           </template>
         </Button>
       </Dropdown>
-      <span class="ml-1 mr-0.5 text-base text-gray-500" aria-hidden="true">
+      <span class="ml-1 mr-0.5 text-base text-ink-gray-4" aria-hidden="true">
         /
       </span>
     </template>
@@ -33,11 +33,11 @@
       <template v-for="(item, i) in crumbs" :key="item.label">
         <component
           :is="item.route ? 'router-link' : 'button'"
-          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400"
+          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
           :class="[
             i == crumbs.length - 1
-              ? 'text-gray-900'
-              : 'text-gray-600 hover:text-gray-700',
+              ? 'text-ink-gray-9'
+              : 'text-ink-gray-5 hover:text-ink-gray-7',
           ]"
           v-bind="item.route ? { to: item.route } : { onClick: item.onClick }"
         >
@@ -49,7 +49,7 @@
         </component>
         <span
           v-if="i != crumbs.length - 1"
-          class="mx-0.5 text-base text-gray-500"
+          class="mx-0.5 text-base text-ink-gray-4"
           aria-hidden="true"
         >
           /

package/src/components/Button/Button.story.vue

@@ -18,7 +18,9 @@ const sizes = ['sm', 'md', 'lg', 'xl', '2xl']
 <template>
   <Story :layout="{ type: 'grid', width: 300 }">
     <Variant v-for="variant in variants" :key="variant" :title="variant">
-      <Button :variant="variant" v-bind="state">{{ state.label }}</Button>
+      <div class="p-1">
+        <Button :variant="variant" v-bind="state">{{ state.label }}</Button>
+      </div>
     </Variant>
 
     <template #controls>

package/src/components/Button/Button.vue

@@ -89,40 +89,42 @@ const router = useRouter()
 
 const buttonClasses = computed(() => {
   let solidClasses = {
-    gray: 'text-white bg-gray-900 hover:bg-gray-800 active:bg-gray-700',
-    blue: 'text-white bg-blue-500 hover:bg-blue-600 active:bg-blue-700',
-    green: 'text-white bg-green-600 hover:bg-green-700 active:bg-green-800',
-    red: 'text-white bg-red-600 hover:bg-red-700 active:bg-red-800',
+    gray: 'text-ink-white bg-surface-gray-7 hover:bg-surface-gray-6 active:bg-surface-gray-5',
+    blue: 'text-ink-white bg-blue-500 hover:bg-surface-blue-3 active:bg-blue-700',
+    green:
+      'text-ink-white bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
+    red: 'text-ink-white bg-surface-red-5 hover:bg-surface-red-6 active:bg-surface-red-7',
   }[props.theme]
 
   let subtleClasses = {
-    gray: 'text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300',
-    blue: 'text-blue-600 bg-blue-100 hover:bg-blue-200 active:bg-blue-300',
-    green: 'text-green-800 bg-green-100 hover:bg-green-200 active:bg-green-300',
-    red: 'text-red-700 bg-red-100 hover:bg-red-200 active:bg-red-300',
+    gray: 'text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4',
+    blue: 'text-ink-blue-3 bg-surface-blue-2 hover:bg-blue-200 active:bg-blue-300',
+    green:
+      'text-green-800 bg-surface-green-2 hover:bg-green-200 active:bg-green-300',
+    red: 'text-red-700 bg-surface-red-2 hover:bg-surface-red-3 active:bg-surface-red-4',
   }[props.theme]
 
   let outlineClasses = {
-    gray: 'text-gray-800 bg-white border border-gray-300 hover:border-gray-400 active:border-gray-400 active:bg-gray-300',
-    blue: 'text-blue-600 bg-white border border-blue-300 hover:border-blue-400 active:border-blue-400 active:bg-blue-300',
+    gray: 'text-ink-gray-8 bg-surface-white bg-surface-white border border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-3 active:bg-surface-gray-4',
+    blue: 'text-ink-blue-3 bg-surface-white border border-outline-blue-1 hover:border-blue-400 active:border-blue-400 active:bg-blue-300',
     green:
-      'text-green-800 bg-white border border-green-400 hover:border-green-500 active:border-green-500 active:bg-green-300',
-    red: 'text-red-700 bg-white border border-red-300 hover:border-red-400 active:border-red-400 active:bg-red-200',
+      'text-green-800 bg-surface-white border border-outline-green-2 hover:border-green-500 active:border-green-500 active:bg-green-300',
+    red: 'text-red-700 bg-surface-white border border-outline-red-1 hover:border-outline-red-2 active:border-outline-red-2 active:bg-surface-red-3',
   }[props.theme]
 
   let ghostClasses = {
-    gray: 'text-gray-800 bg-transparent hover:bg-gray-200 active:bg-gray-300',
-    blue: 'text-blue-600 bg-transparent hover:bg-blue-200 active:bg-blue-300',
+    gray: 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
+    blue: 'text-ink-blue-3 bg-transparent hover:bg-blue-200 active:bg-blue-300',
     green:
       'text-green-800 bg-transparent hover:bg-green-200 active:bg-green-300',
-    red: 'text-red-700 bg-transparent hover:bg-red-200 active:bg-red-300',
+    red: 'text-red-700 bg-transparent hover:bg-surface-red-3 active:bg-surface-red-4',
   }[props.theme]
 
   let focusClasses = {
-    gray: 'focus-visible:ring focus-visible:ring-gray-400',
+    gray: 'focus-visible:ring focus-visible:ring-outline-gray-3',
     blue: 'focus-visible:ring focus-visible:ring-blue-400',
-    green: 'focus-visible:ring focus-visible:ring-green-400',
-    red: 'focus-visible:ring focus-visible:ring-red-400',
+    green: 'focus-visible:ring focus-visible:ring-outline-green-2',
+    red: 'focus-visible:ring focus-visible:ring-outline-red-2',
   }[props.theme]
 
   let variantClasses = {
@@ -136,25 +138,29 @@ const buttonClasses = computed(() => {
   let themeVariant: ThemeVariant = `${props.theme}-${props.variant}`
 
   let disabledClassesMap: Record<ThemeVariant, string> = {
-    'gray-solid': 'bg-gray-100 text-gray-500',
-    'gray-subtle': 'bg-gray-100 text-gray-500',
-    'gray-outline': 'bg-gray-100 text-gray-500 border border-gray-300',
-    'gray-ghost': 'text-gray-500',
-
-    'blue-solid': 'bg-blue-300 text-white',
-    'blue-subtle': 'bg-blue-100 text-blue-400',
-    'blue-outline': 'bg-blue-100 text-blue-400 border border-blue-300',
-    'blue-ghost': 'text-blue-400',
-
-    'green-solid': 'bg-green-100 text-green-500',
-    'green-subtle': 'bg-green-100 text-green-500',
-    'green-outline': 'bg-green-100 text-green-500 border border-green-400',
-    'green-ghost': 'text-green-500',
-
-    'red-solid': 'bg-red-100 text-red-400',
-    'red-subtle': 'bg-red-100 text-red-400',
-    'red-outline': 'bg-red-100 text-red-400 border border-red-300',
-    'red-ghost': 'text-red-400',
+    'gray-solid': 'bg-surface-gray-2 text-ink-gray-4',
+    'gray-subtle': 'bg-surface-gray-2 text-ink-gray-4',
+    'gray-outline':
+      'bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2',
+    'gray-ghost': 'text-ink-gray-4',
+
+    'blue-solid': 'bg-blue-300 text-ink-white',
+    'blue-subtle': 'bg-surface-blue-2 text-ink-blue-link',
+    'blue-outline':
+      'bg-surface-blue-2 text-ink-blue-link border border-outline-blue-1',
+    'blue-ghost': 'text-ink-blue-link',
+
+    'green-solid': 'bg-surface-green-2 text-ink-green-2',
+    'green-subtle': 'bg-surface-green-2 text-ink-green-2',
+    'green-outline':
+      'bg-surface-green-2 text-ink-green-2 border border-outline-green-2',
+    'green-ghost': 'text-ink-green-2',
+
+    'red-solid': 'bg-surface-red-2 text-ink-red-2',
+    'red-subtle': 'bg-surface-red-2 text-ink-red-2',
+    'red-outline':
+      'bg-surface-red-2 text-ink-red-2 border border-outline-red-1',
+    'red-ghost': 'text-ink-red-2',
   }
   let disabledClasses = disabledClassesMap[themeVariant]
 

package/src/components/Checkbox.vue

@@ -4,7 +4,7 @@
     :class="{
       'px-2.5 py-1.5': padding && size === 'sm',
       'px-3 py-2': padding && size === 'md',
-      'focus-within:bg-gray-100 focus-within:ring-2 focus-within:ring-gray-400 hover:bg-gray-200 active:bg-gray-300':
+      'focus-within:bg-surface-gray-2 focus-within:ring-2 focus-within:ring-outline-gray-3 hover:bg-surface-gray-3 active:bg-surface-gray-4':
         padding && !disabled,
     }"
   >
@@ -54,21 +54,21 @@ const labelClasses = computed(() => {
       sm: 'text-base font-medium',
       md: 'text-lg font-medium',
     }[props.size],
-    props.disabled ? 'text-gray-500' : 'text-gray-800',
+    props.disabled ? 'text-ink-gray-4' : 'text-ink-gray-8',
     'select-none',
   ]
 })
 
 const inputClasses = computed(() => {
   let baseClasses = props.disabled
-    ? 'border-gray-300 bg-gray-50 text-gray-400'
-    : 'border-gray-500 text-gray-900 hover:border-gray-600 focus:ring-offset-0 focus:border-gray-900 active:border-gray-700 transition'
+    ? 'border-outline-gray-2 bg-surface-menu-bar text-ink-gray-3'
+    : 'border-outline-gray-4 text-ink-gray-9 hover:border-gray-600 focus:ring-offset-0 focus:border-gray-900 active:border-gray-700 transition'
 
   let interactionClasses = props.disabled
     ? ''
     : props.padding
       ? 'focus:ring-0'
-      : 'hover:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 active:bg-gray-100'
+      : 'hover:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 active:bg-surface-gray-2'
 
   let sizeClasses = {
     sm: 'w-3.5 h-3.5',

package/src/components/CommandPalette/CommandPalette.vue

@@ -14,7 +14,7 @@
               </div>
               <ComboboxInput
                 placeholder="Search"
-                class="w-full border-none bg-transparent py-3 pl-11.5 pr-4.5 text-base text-gray-800 placeholder-gray-500 focus:ring-0"
+                class="w-full border-none bg-transparent py-3 pl-11.5 pr-4.5 text-base text-ink-gray-8 placeholder-ink-gray-4 focus:ring-0"
                 v-model="searchQuery"
                 autocomplete="off"
               />
@@ -30,7 +30,7 @@
                 :key="group.title"
               >
                 <div
-                  class="mb-2.5 px-4.5 text-base text-gray-600"
+                  class="mb-2.5 px-4.5 text-base text-ink-gray-5"
                   v-if="!group.hideTitle"
                 >
                   {{ group.title }}

package/src/components/CommandPalette/CommandPaletteItem.vue

@@ -7,20 +7,20 @@ defineProps({
 
 <template>
   <div
-    class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-gray-800"
-    :class="{ 'bg-gray-200': active }"
+    class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-8"
+    :class="{ 'bg-surface-gray-3': active }"
   >
     <component
       :is="item.icon"
       v-if="item.icon"
-      class="mr-3 h-4 w-4 text-gray-700"
+      class="mr-3 h-4 w-4 text-ink-gray-7"
     />
     <span class="overflow-hidden text-ellipsis whitespace-nowrap">
       {{ item.title }}
     </span>
     <span
       v-if="item.description"
-      class="ml-auto whitespace-nowrap pl-2 text-gray-600"
+      class="ml-auto whitespace-nowrap pl-2 text-ink-gray-5"
     >
       {{ item.description }}
     </span>

package/src/components/Dialog.story.vue

@@ -21,6 +21,10 @@ const createPromise = () => {
           title: 'Confirm',
           message: 'Are you sure you want to confirm this action?',
           size: 'xl',
+          icon: {
+            name: 'alert-triangle',
+            appearance: 'warning',
+          },
           actions: [
             {
               label: 'Confirm',

package/src/components/Dialog.vue

@@ -23,7 +23,7 @@
           leave-to="opacity-0"
         >
           <div
-            class="fixed inset-0 bg-black-overlay-200 transition-opacity"
+            class="fixed inset-0 bg-black-overlay-200 transition-opacity dark:backdrop-filter dark:backdrop-blur-[1px]"
             :data-dialog="options.title"
           />
         </TransitionChild>
@@ -38,7 +38,7 @@
           leave-to="opacity-50 translate-y-4 translate-y-4 scale-95"
         >
           <DialogPanel
-            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-white text-left align-middle shadow-xl transition-all"
+            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl transition-all"
             :class="{
               'max-w-7xl': options.size === '7xl',
               'max-w-6xl': options.size === '6xl',
@@ -55,7 +55,7 @@
           >
             <slot name="body">
               <slot name="body-main">
-                <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+                <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
                   <div class="flex">
                     <div class="w-full flex-1">
                       <div class="mb-6 flex items-center justify-between">
@@ -75,7 +75,7 @@
                           <DialogTitle as="header">
                             <slot name="body-title">
                               <h3
-                                class="text-2xl font-semibold leading-6 text-gray-900"
+                                class="text-2xl font-semibold leading-6 text-ink-gray-9"
                               >
                                 {{ options.title || 'Untitled' }}
                               </h3>
@@ -90,12 +90,13 @@
                               viewBox="0 0 16 16"
                               fill="none"
                               xmlns="http://www.w3.org/2000/svg"
+                              class="text-ink-gray-9"
                             >
                               <path
                                 fill-rule="evenodd"
                                 clip-rule="evenodd"
                                 d="M12.8567 3.85355C13.052 3.65829 13.052 3.34171 12.8567 3.14645C12.6615 2.95118 12.3449 2.95118 12.1496 3.14645L8.00201 7.29405L3.85441 3.14645C3.65914 2.95118 3.34256 2.95118 3.1473 3.14645C2.95204 3.34171 2.95204 3.65829 3.1473 3.85355L7.29491 8.00116L3.14645 12.1496C2.95118 12.3449 2.95118 12.6615 3.14645 12.8567C3.34171 13.052 3.65829 13.052 3.85355 12.8567L8.00201 8.70827L12.1505 12.8567C12.3457 13.052 12.6623 13.052 12.8576 12.8567C13.0528 12.6615 13.0528 12.3449 12.8576 12.1496L8.70912 8.00116L12.8567 3.85355Z"
-                                fill="#383838"
+                                fill="currentColor"
                               />
                             </svg>
                           </template>
@@ -104,7 +105,7 @@
 
                       <slot name="body-content">
                         <p
-                          class="text-p-base text-gray-700"
+                          class="text-p-base text-ink-gray-7"
                           v-if="options.message"
                         >
                           {{ options.message }}
@@ -272,23 +273,23 @@ const dialogPositionClasses = computed(() => {
 
 const dialogIconBgClasses = computed(() => {
   const appearance = icon.value?.appearance
-  if (!appearance) return 'bg-gray-100'
+  if (!appearance) return 'bg-surface-gray-2'
   return {
-    warning: 'bg-yellow-100',
-    info: 'bg-blue-100',
-    danger: 'bg-red-100',
-    success: 'bg-green-100',
+    warning: 'bg-surface-amber-2',
+    info: 'bg-surface-blue-2',
+    danger: 'bg-surface-red-2',
+    success: 'bg-surface-green-2',
   }[appearance]
 })
 
 const dialogIconClasses = computed(() => {
   const appearance = icon.value?.appearance
-  if (!appearance) return 'text-gray-600'
+  if (!appearance) return 'text-ink-gray-5'
   return {
-    warning: 'text-yellow-600',
-    info: 'text-blue-600',
-    danger: 'text-red-600',
-    success: 'text-green-600',
+    warning: 'text-ink-amber-3',
+    info: 'text-ink-blue-3',
+    danger: 'text-ink-red-4',
+    success: 'text-ink-green-3',
   }[appearance]
 })
 </script>

package/src/components/Divider.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="props.action ? 'div' : 'hr'"
-    class="relative whitespace-nowrap border-0 border-gray-300"
+    class="relative whitespace-nowrap border-0 border-outline-gray-2"
     :class="alignmentClasses"
   >
     <span class="absolute" v-if="props.action" :class="actionAlignmentClasses">

package/src/components/Dropdown.vue

@@ -16,7 +16,7 @@
 
       <template #body>
         <MenuItems
-          class="mt-2 min-w-40 divide-y divide-gray-100 rounded-lg bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+          class="mt-2 min-w-40 divide-y divide-outline-gray-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
           :class="{
             'left-0 origin-top-left': placement == 'left',
             'right-0 origin-top-right': placement == 'right',
@@ -43,7 +43,7 @@
               <button
                 v-else
                 :class="[
-                  active ? 'bg-gray-100' : 'text-ink-gray-6',
+                  active ? 'bg-surface-gray-3' : 'text-ink-gray-6',
                   'group flex h-7 w-full items-center rounded px-2 text-base',
                 ]"
                 @click="item.onClick"
@@ -59,7 +59,7 @@
                   v-else-if="item.icon"
                   :is="item.icon"
                 />
-                <span class="whitespace-nowrap">
+                <span class="whitespace-nowrap text-ink-gray-7">
                   {{ item.label }}
                 </span>
               </button>
@@ -136,12 +136,19 @@ const filterOptions = (options: DropdownOption[]) => {
 
 const groups = computed(() => {
   let groups: DropdownGroupOption[] = []
+  let currentGroup: DropdownGroupOption | null = null
   let i = 0
+
   for (let option of props.options) {
     if (option == null) {
       continue
     }
+
     if ('group' in option) {
+      if (currentGroup) {
+        groups.push(currentGroup)
+        currentGroup = null
+      }
       let groupOption = {
         key: i,
         ...option,
@@ -149,16 +156,23 @@ const groups = computed(() => {
       } as DropdownGroupOption
       groups.push(groupOption)
     } else {
-      let groupOption = {
-        key: i,
-        group: '',
-        hideLabel: true,
-        items: filterOptions([option]),
-      } as DropdownGroupOption
-      groups.push(groupOption)
+      if (!currentGroup) {
+        currentGroup = {
+          key: i,
+          group: '',
+          hideLabel: true,
+          items: [],
+        } as DropdownGroupOption
+      }
+      currentGroup.items.push(...filterOptions([option]))
     }
     i++
   }
+
+  if (currentGroup) {
+    groups.push(currentGroup)
+  }
+
   return groups
 })
 

package/src/components/ErrorMessage.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="message"
-    class="whitespace-pre-line text-sm text-red-600"
+    class="whitespace-pre-line text-sm text-ink-red-4"
     role="alert"
     v-html="errorMessage"
   ></div>