rework colorpicker, brand button

website/theme/components/ColorPicker.vue

@@ -33,7 +33,7 @@ const selectedColor = useStorage<ColorNames>('preferred-color', 'swarm')
 
 const colorOptions = Object.keys(colors).filter(
   (key) => typeof colors[key as keyof typeof colors] === 'object'
-)
+) as ColorNames[]
 
 const { css } = useStyleTag('', { id: 'brand-color' })
 
@@ -79,16 +79,17 @@ const handleColorChange = (value: string) => {
 
 <template>
   <div class="color-picker">
+    <div class="color-input-wrapper">
+      <div
+        class="color-preview"
+        :style="{ backgroundColor: colors[selectedColor][500] }"
+      />
+    </div>
     <SelectRoot :model-value="selectedColor" @update:model-value="handleColorChange">
       <SelectTrigger
-        class="inline-flex items-center justify-between px-3 py-2 text-sm bg-bg-alt border border-div rounded-md hover:bg-bg-elv transition-colors min-w-[180px] mx-auto align-left"
+        class="color-input-text"
         aria-label="Select theme color">
-        <div class="flex items-center gap-2">
+        <SelectValue :placeholder="normalizeColorName(selectedColor)" />
-          <span class="inline-block w-4 h-4 rounded-full border border-div"
-            :style="{ backgroundColor: colors[selectedColor][500] }" />
-          <SelectValue :placeholder="normalizeColorName(selectedColor)" />
-        </div>
-        <span class="i-lucide:chevron-down w-4 h-4 text-text-2" />
       </SelectTrigger>
 
       <SelectPortal>
@@ -112,3 +113,56 @@ const handleColorChange = (value: string) => {
     </SelectRoot>
   </div>
 </template>
+
+<style scoped>
+.color-preview {
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  border: 1px solid var(--vp-c-divider);
+  flex-shrink: 0;
+}
+
+.color-input-wrapper {
+  height: 24px;
+  width: 24px;
+  overflow: hidden;
+  position: relative;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+
+.color-picker {
+  background: var(--color-picker-bg, var(--vp-c-bg-alt));
+  border-radius: 8px;
+  color: var(--vp-c-text-2);
+  padding: 4px 8px;
+  height: auto;
+  font-size: 14px;
+  text-align: left;
+  border: 1px solid transparent;
+  cursor: text;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.color-input-text {
+  width: 100%;
+  height: 100%;
+  padding: 0 0 0 8px;
+  border: none;
+  background: transparent;
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+  text-align: left;
+  border-radius: 8px;
+  cursor: text;
+  transition: border-color 0.25s, background 0.4s ease;
+}
+
+.color-picker:hover, .color-picker:focus {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-alt);
+}
+</style>

website/theme/components/SidebarCard.vue

@@ -24,7 +24,14 @@ import ToggleStarred from './ToggleStarred.vue'
         <ToggleStarred />
       </template>
     </InputField>
+    <InputField
+      id="icon-color"
+      label="Color"
+    >
+      <template #display>
+        <ColorPicker class="ml-auto"/>
+      </template>
+    </InputField>
 
-    <ColorPicker />
   </div>
 </template>

website/theme/components/VPButton.vue

@@ -140,7 +140,7 @@ const processedItems = computed(() => {
         <slot>{{ text }}</slot>
       </component>
       <button
-        class="bg-$vp-c-default-soft text-text border-$vp-c-default-soft hover:border-primary ml-3 inline-flex h-8 items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-2.5 py-4.5 text-md font-medium transition-all duration-300 sm:h-7 VPButtonTrigger"
+        class="bg-$vp-c-default-soft text-text border-$vp-c-default-soft hover:bg-$vp-c-default-hover active:bg-$vp-c-default-active inline-flex items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-2.5 py-5 text-md font-medium sm:h-7 VPButtonTrigger"
         @click="toggleDropdown" :aria-expanded="isDropdownOpen" aria-label="Toggle dropdown menu">
         <span class="i-lucide:menu"></span>
       </button>
@@ -200,21 +200,16 @@ const processedItems = computed(() => {
 }
 
 .VPButton.brand {
-  border-color: var(--vp-button-brand-border);
+  color: var(--vp-c-text-1);
-  color: var(--vp-button-brand-text);
+  background-color: var(--vp-c-default-soft);
-  background-color: var(--vp-button-brand-bg);
 }
 
 .VPButton.brand:hover {
-  border-color: var(--vp-button-brand-hover-border);
+  background-color: var(--vp-c-default-hover);
-  color: var(--vp-button-brand-hover-text);
-  background-color: var(--vp-button-brand-hover-bg);
 }
 
 .VPButton.brand:active {
-  border-color: var(--vp-button-brand-active-border);
+  background-color: var(--vp-c-default-active);
-  color: var(--vp-button-brand-active-text);
-  background-color: var(--vp-button-brand-active-bg);
 }
 
 .VPButton.alt {
@@ -265,9 +260,16 @@ const processedItems = computed(() => {
 }
 
 .VPButtonMain {
-  border-top-right-radius: 0;
+  --uno: border-2 border-$vp-c-default-soft;
-  border-bottom-right-radius: 0;
+  border-top-right-radius: 0 !important;
-  border-right: none;
+  border-bottom-right-radius: 0 !important;
+}
+
+.VPButtonTrigger {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-left: none !important;
+  margin-left: 0 !important;
 }
 
 .VPButtonDropdownMenu {