fix(ui): consistant ui

Author: antfu

packages/core/src/client/webcomponents/.generated/css.ts

@@ -80,7 +80,7 @@ useEventListener('pointerdown', () => {
       :class="[
         isVertical ? 'rotate-270' : '',
         isDimmed ? 'op50 saturate-0' : '',
-        isSelected ? 'scale-120 text-purple' : '',
+        isSelected ? 'scale-120 text-primary' : '',
         isAction ? 'bg-[#8881] hover:bg-[#8882] rounded-full' : 'rounded-xl',
       ]"
       class="flex items-center justify-center p1.5 hover:bg-[#8881] hover:scale-110 transition-all duration-300 relative outline-none"

packages/core/src/client/webcomponents/components/dock/DockEntry.vue

@@ -17,15 +17,15 @@ const emit = defineEmits<{
 
 <template>
   <div class="flex flex-col gap-0.5 min-w-44 max-w-64" @mousemove.stop>
-    <div class="flex items-center gap-1.5 px2 pt1 pb1.5 op60 text-2.75 uppercase tracking-wide font-medium">
-      <DockIcon :icon="group.icon" class="w-3.5 h-3.5" />
+    <div class="flex items-center gap-1.5 px4 mx--2 pt2 pb2.5 font-bold text-2.75 uppercase tracking-wide border-b border-base">
+      <DockIcon :icon="group.icon" class="w-4.5 h-4.5" />
       <span class="truncate">{{ group.title }}</span>
     </div>
     <button
       v-for="member of members"
       :key="member.id"
       class="flex items-center gap-2 w-full px2 py1.5 rounded text-sm text-left transition"
-      :class="selectedId === member.id ? 'text-purple bg-active' : 'op80 hover:op100 hover:bg-active'"
+      :class="selectedId === member.id ? 'text-primary bg-active' : 'op80 hover:op100 hover:bg-active'"
       @click="emit('select', member)"
     >
       <DockIcon :icon="member.icon" class="w-4.5 h-4.5 flex-none" />

packages/core/src/client/webcomponents/components/dock/DockGroupPopover.vue

@@ -45,14 +45,14 @@ function hideTooltip() {
     >
       <DockIcon :icon="group.icon" class="w-5 h-5 flex-none" />
     </div>
-    <div class="w-5 h-px bg-base my0.5" />
+    <div class="w-8 h-px border-t border-base my0.5" />
 
     <!-- Member icons -->
     <button
       v-for="member of members"
       :key="member.id"
       class="relative flex items-center justify-center w-8 h-8 rounded-lg transition"
-      :class="selectedId === member.id ? 'text-purple bg-active' : 'op60 hover:op100 hover:bg-active'"
+      :class="selectedId === member.id ? 'text-primary bg-active' : 'op60 hover:op100 hover:bg-active'"
       @pointerenter="showTooltip($event, member.title)"
       @pointerleave="hideTooltip"
       @pointerdown="hideTooltip"

packages/core/src/client/webcomponents/components/dock/DockGroupSidebar.vue

@@ -6,10 +6,10 @@ const theme = computed(() => isDark.value ? 'white' : '#08060E')
 </script>
 
 <template>
-  <div class="flex gap-2 group" h-20 p4 relative>
+  <div class="flex gap-2 group" h-15 p4 relative>
     <div op10 group-hover="op100" transition duration-800 class="absolute -bottom-[10px] -left-[20px] w-[80px] h-[80px] bg-linear-to-b from-[#ff4100] to-transparent blur-[30px]" />
     <div op10 group-hover="op100" transition duration-800 class="absolute -top-[10px] left-300px w-[80px] h-[80px] bg-[linear-gradient(270deg,_#ff00b3,_#ff00b3cc_60%,_#ff4100cc,_#ff410000)] blur-[30px]" />
-    <svg width="1123" height="47" viewBox="0 0 1123 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 1123 47" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_12_249)">
         <path d="M84.875 0C103.939 0 113.956 8.014 113.956 23.395C113.956 38.776 103.939 46.789 84.875 46.789C65.811 46.789 55.859 38.775 55.858 23.395C55.858 8.014 65.811 0 84.875 0ZM304.339 0C323.403 0 333.42 8.014 333.42 23.395C333.42 38.776 323.403 46.789 304.339 46.789C285.275 46.789 275.322 38.775 275.322 23.395C275.322 8.014 285.274 0 304.339 0ZM35.349 0.775C45.689 0.775 51.571 6.139 51.571 15.575C51.571 21.003 48.986 25.01 44.98 27.337L51.765 46.013H35.285L30.567 31.343H15.51V46.013H0V0.775H35.349ZM135.411 34.705H162.488V46.013H119.9V0.775H135.411V34.705ZM183.791 34.705H210.869V46.013H168.281V0.775H183.791V34.705ZM245.53 0.774C261.234 0.774 270.217 7.884 270.217 23.394C270.217 38.904 261.169 46.012 245.465 46.012H217.095V0.775L245.53 0.774ZM356.661 31.86L363.253 8.854H380.637L387.616 32.764L393.109 0.776H408.232L398.926 46.014H379.345L371.849 20.423L364.546 46.013H344.899L335.594 0.776H350.975L356.661 31.86ZM432.876 0.775L451.553 30.18H451.682V0.775H466.417V46.013H447.805L428.999 16.48H428.805V46.013H414.135V0.775H432.876ZM84.875 11.115C75.892 11.115 71.691 14.993 71.691 23.395C71.691 31.795 75.892 35.608 84.875 35.608C93.858 35.608 98.058 31.86 98.058 23.395C98.058 14.93 93.858 11.115 84.875 11.115ZM304.339 11.115C295.356 11.115 291.155 14.993 291.155 23.395C291.155 31.795 295.356 35.608 304.339 35.608C313.322 35.608 317.522 31.86 317.522 23.395C317.522 14.93 313.322 11.115 304.339 11.115ZM232.604 35.026H243.333C250.7 35.026 254.318 31.86 254.318 23.394C254.318 14.928 250.7 11.762 243.333 11.762H232.604V35.026ZM15.51 20.68H30.955C34.122 20.68 35.673 19 35.673 16.027C35.673 13.054 34.122 11.438 30.955 11.438H15.51V20.68Z" :fill="theme" />
         <path d="M530.998 0.773438C531.957 0.773438 532.48 1.89144 531.866 2.62844L521.423 15.1604C520.195 16.6334 521.242 18.8714 523.161 18.8714H533.262C534.221 18.8714 534.744 19.9894 534.13 20.7264L513.922 44.9804C513.816 45.108 513.683 45.2107 513.533 45.2811C513.383 45.3516 513.219 45.3881 513.053 45.3881C512.887 45.3881 512.723 45.3516 512.573 45.2811C512.423 45.2107 512.29 45.108 512.184 44.9804L491.975 20.7284C491.361 19.9914 491.885 18.8734 492.844 18.8734H502.942C504.859 18.8734 505.909 16.6354 504.681 15.1624L494.237 2.62844C493.623 1.89144 494.147 0.773438 495.105 0.773438H530.998Z" fill="#FF4100" />