1,570th Commit

app/src/layouts/baseline/Baseline.vue

@@ -173,7 +173,7 @@ function changeLang(lang: string) {
         <XButton
           variant="text"
           size="small"
-          class="!h-38px !text-slate-400 !rounded-md !border-slate-900/10 !hover:bg-slate-100 !dark:hover:bg-slate-700"
+          class="!h-9.5 !text-slate-400 !rounded-md !border-slate-900/10 !hover:bg-slate-100 !dark:hover:bg-slate-700"
           @click="flux.searchDialog = true"
         >
           <div class="i-material-symbols-search-rounded w-5 h-5"></div>

app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Draggable.vue

@@ -76,7 +76,7 @@ const flux = reactive({
               <XTable.Row>
                 <XTable.Cell>
                   <div
-                    class="min-h-38px i-ic-baseline-drag-indicator handle w-6 h-6 cursor-move"
+                    class="min-h-9.5 i-ic-baseline-drag-indicator handle w-6 h-6 cursor-move"
                   ></div>
                 </XTable.Cell>
 

app/src/routes/(backstage)/(library)/data-display/tree-table/+page.vue

@@ -114,13 +114,13 @@ function treeNode(item: TreeTableNode) {
       <thead>
         <tr>
           <XTable.Column>
-            <div class="inline-flex items-center min-h-38px">Name</div>
+            <div class="inline-flex items-center min-h-9.5">Name</div>
           </XTable.Column>
           <XTable.Column>
-            <div class="inline-flex items-center min-h-38px">Size</div>
+            <div class="inline-flex items-center min-h-9.5">Size</div>
           </XTable.Column>
           <XTable.Column>
-            <div class="inline-flex items-center min-h-38px">Type</div>
+            <div class="inline-flex items-center min-h-9.5">Type</div>
           </XTable.Column>
         </tr>
       </thead>
@@ -143,7 +143,7 @@ function treeNode(item: TreeTableNode) {
                 variant="text"
                 @click="treeNode(node)"
               />
-              <div v-else class="w-38px h-38px"></div>
+              <div v-else class="size-9.5"></div>
               <div class="ml-2">{{ node.name }} - {{ node.level }}</div>
             </div>
           </XTable.Cell>

ui/src/components/button/Button.vue

@@ -212,14 +212,14 @@ function onClick(evt: MouseEvent) {
   }
 
   &.icon {
-    @apply p-0 rounded-full w-38px h-38px overflow-hidden;
+    @apply p-0 rounded-full size-9.5 overflow-hidden;
 
     &.small {
-      @apply w-34px h-34px;
+      @apply size-8.5;
     }
 
     &.large {
-      @apply w-42px h-42px;
+      @apply size-10.5;
     }
   }
 

ui/src/components/checkbox/Checkbox.vue

@@ -75,7 +75,7 @@ const id = useId();
 }
 
 .Checkbox-Label {
-  @apply flex items-center min-h-38px cursor-pointer;
+  @apply flex items-center min-h-9.5 cursor-pointer;
 
   &.disabled {
     @apply cursor-not-allowed opacity-60;

ui/src/components/pagination/Pagination.vue

@@ -60,7 +60,7 @@ watch(
     <Button label="1" :variant="currentPage === 1 ? 'contained' : 'text'" @click="onPage(1)" />
 
     <template v-if="currentPage">
-      <div v-if="currentPage > 3" class="w-38px text-center">...</div>
+      <div v-if="currentPage > 3" class="w-9.5 text-center">...</div>
 
       <Button
         v-else
@@ -83,7 +83,7 @@ watch(
     />
 
     <template v-if="currentPage">
-      <div v-if="currentPage < pages - 3" class="w-38px text-center">...</div>
+      <div v-if="currentPage < pages - 3" class="w-9.5 text-center">...</div>
 
       <Button
         v-else
@@ -140,6 +140,6 @@ watch(
 
 <style lang="scss" scoped>
 :deep(.Button) {
-  @apply rounded-full p-2 min-w-38px;
+  @apply rounded-full p-2 min-w-9.5;
 }
 </style>

ui/src/components/radio-group/RadioGroup.vue

@@ -25,7 +25,7 @@ const emit = defineEmits<{
 
 <template>
   <FormControl v-slot="{ id }" :label :required :invalid :help>
-    <div class="flex flex-wrap items-center gap-4 min-h-38px">
+    <div class="flex flex-wrap items-center gap-4 min-h-9.5">
       <label
         v-for="(item, index) in options"
         :key="index"

ui/src/components/range-slider/RangeSlider.vue

@@ -114,7 +114,7 @@ function onInput(evt: Event) {
   --range-slider-value-low-fallback: calc(var(--range-slider-value-low, 0) * 1%);
   --range-slider-value-high-fallback: calc(var(--range-slider-value-high, 100) * 1%);
 
-  @apply relative min-h-38px flex items-center;
+  @apply relative min-h-9.5 flex items-center;
 
   width: calc(100% - 1rem);
 

ui/src/components/select/Select.vue

@@ -258,7 +258,7 @@ if (popover.withinPopover) {
             ref="panel"
             class="shadow-lg rounded bg-white dark:bg-slate-800 border border-gray-200 dark:border-gray-700"
           >
-            <div v-if="filterable" class="Select-FilterWrapper">
+            <div v-if="filterable" class="px-2 pt-2">
               <TextField
                 ref="filter"
                 v-model:value="filterValue"
@@ -299,12 +299,8 @@ if (popover.withinPopover) {
 </template>
 
 <style lang="scss" scoped>
-.Select-FilterWrapper {
-  @apply px-2 pt-2;
-}
-
 .Select-List {
-  @apply cursor-pointer max-h-40 overflow-auto p-2 empty:hidden;
+  @apply max-h-40 overflow-auto p-2 empty:hidden;
 }
 
 .Select-Item {

ui/src/components/slider/Slider.vue

@@ -89,7 +89,7 @@ watch(
 
 <style lang="scss" scoped>
 .Slider-Wrapper {
-  @apply relative min-h-38px flex items-center;
+  @apply relative min-h-9.5 flex items-center;
 
   width: calc(100% - 1rem);
 }

ui/src/components/table/Cell.vue

@@ -6,7 +6,7 @@
 
 <style lang="scss" scoped>
 .Cell {
-  @apply h-38px px-4 py-0 align-middle whitespace-nowrap;
+  @apply h-9.5 px-4 py-0 align-middle whitespace-nowrap;
 
   > :deep(div) {
     @apply inline-flex items-center h-full;

ui/src/components/table/Column.vue

@@ -6,7 +6,7 @@
 
 <style lang="scss" scoped>
 .Column {
-  @apply h-38px;
+  @apply h-9.5;
   @apply px-4 py-0 text-zinc-600 dark:text-zinc-400 bg-gray-200 dark:bg-gray-700;
   @apply border border-zinc-100 dark:border-zinc-600 border-l-0 border-r-0;
   @apply align-middle whitespace-nowrap font-semibold text-left;

ui/src/components/tag/Tag.vue

@@ -8,9 +8,9 @@ defineProps<{
 <template>
   <div class="flex items-center">
     <div
-      class="border rounded text-10px px-10px py-2px mr-5px"
+      class="border rounded text-xs px-2.5 py-0.5"
       :class="{
-        'text-primary-500 border-primary-500': color === 'primary' || !color,
+        'text-primary-500 border-primary-500 bg-primary-50': color === 'primary' || !color,
         'text-secondary-500 border-secondary-500': color === 'secondary',
         'text-success-500 border-success-500': color === 'success',
         'text-danger-500 border-danger-500': color === 'danger',

ui/src/components/tree-select/TreeSelect.vue

@@ -8,9 +8,7 @@ import FormControl, { type FormControlProps, formControlDefaults } from '../form
 import Popover from '../popover/Popover.vue';
 import Tree, { type Node } from '../tree';
 
-defineOptions({
-  inheritAttrs: false,
-});
+defineOptions({ inheritAttrs: false });
 
 const valueModel = defineModel<string[]>('value', { default: [] });