refactor(ui): rem based (#90)

packages/client/src/App.vue

@@ -23,7 +23,7 @@ const sidebarExpanded = computed(() => clientState.value.expandSidebar)
 
 watchEffect(() => {
  const scale = devtoolsClientState.value.scale
- document.body.style.fontSize = `${scale * 15}px`
+ document.documentElement.style.fontSize = `${scale * 15}px`
 })
 
 watch(connected, (v) => {

packages/client/src/pages/settings.vue

@@ -166,12 +166,13 @@ const minimizePanelInteractiveLabel = computed(() => {
  Switch to Overlay Mode
  </VueButton>
  </div>
- <!-- TODO: need rewrite client/(UI package) to rem based -->
- <!-- <div mx--2 my1 h-1px border="b base" op75 />
+ <div mx--2 my1 h-1px border="b base" op75 />
  <p>UI Scale</p>
  <div>
- <VueSelect v-model="scale" :options="scaleOptions.map(([label, value]) => ({ label, value }))" />
- </div> -->
+ <VueSelect
+ v-model="scale" :options="scaleOptions.map(([label, value]) => ({ label, value }))" :button-props="{ outlined: true }"
+ />
+ </div>
  <div mx--2 my1 h-1px border="b base" op75 />
  <div class="flex items-center gap2 text-sm">
  <VueCheckbox v-model="expandSidebar" />

packages/ui/src/components/Button.vue

@@ -108,7 +108,7 @@ const variantClasses = computed(() => {
  <component
  :is="component" v-bind="$attrs"
  role="button" :aria-disabled="disabled"
- class="$ui-base $ui-inline-fcc inline-flex cursor-pointer select-none gap5px py-0 no-underline $ui-transition"
+ class="$ui-base $ui-inline-fcc inline-flex cursor-pointer select-none gap1.25 py-0 no-underline $ui-transition"
  :class="[
  [styles.common[props.type]],
  {
@@ -119,14 +119,14 @@ const variantClasses = computed(() => {
  },
  [
  outlined ? 'b-1 $ui-border-base active:ring-3 shadow-sm' : 'border-none',
- size === 'mini' ? 'px4px text-12px h22px' : 'px-14px text-14px h32px',
+ size === 'mini' ? 'px1 text-3 h5.5' : 'px3.5 text-3.5 h8',
  variantClasses,
  ],
  ]"
  @click.capture="handleClick"
  >
- <LoadingIndicator v-if="loading" class="mt2px h-full w-12px" />
- <slot v-else name="icon" class="h-full w-12px $ui-inline-fcc" />
+ <LoadingIndicator v-if="loading" class="mt0.5 h-full w3" />
+ <slot v-else name="icon" class="h-full w3 $ui-inline-fcc" />
  <div v-if="slots.default">
  <slot />
  </div>

packages/ui/src/components/Checkbox.vue

@@ -17,7 +17,7 @@ const value = useVModel(props, 'modelValue', emit)
 
 <template>
  <div
- class="relative $ui-base h20px w20px $ui-inline-fcc cursor-pointer border-2px rounded-5px transition-colors duration-200 ease-in-out"
+ class="relative $ui-base h5 w5 $ui-inline-fcc cursor-pointer border-0.125rem rounded-1.25 transition-colors duration-200 ease-in-out"
  :class="[
  value
  ? variant === 'normal'
@@ -31,7 +31,7 @@ const value = useVModel(props, 'modelValue', emit)
  :class="[
  value ? 'opacity-100' : 'opacity-0',
  ]"
- class="h-60% w-35% transform-translate-y--1px transform-rotate-45 border-width-[0_2px_2px_0] border-white border-solid transition-opacity duration-200 ease-in-out"
+ class="h-60% w-35% transform-translate-y--0.25 transform-rotate-45 border-width-[0_0.125rem_0.125rem_0] border-white border-solid transition-opacity duration-200 ease-in-out"
  />
  </div>
 </template>

packages/ui/src/components/Confirm.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<{
  cancelText: 'Cancel',
  confirmText: 'Confirm',
  width: '20%',
- height: '150px',
+ height: '9rem',
  title: 'Warning',
  loading: false,
  autoClose: true,
@@ -50,7 +50,7 @@ function close(close = false) {
  {{ content }}
  </slot>
  <template #footer>
- <div class="$ui-fec gap10px">
+ <div class="$ui-fec gap2.5">
  <VueButton
  @click="() => {
  emit('cancel')

packages/ui/src/components/Dialog.vue

@@ -19,8 +19,8 @@ const props = withDefaults(
  title: 'Dialog',
  modelValue: false,
  autoClose: true,
- width: '500px',
- height: '300px',
+ width: '32rem',
+ height: '18rem',
  closable: true,
  mountTo: 'body',
  },
@@ -58,21 +58,21 @@ onMounted(() => isMount.value = true)
 <template>
  <Teleport v-if="isMount || mountTo === 'body'" :to="mountTo">
  <Transition
- enter-from-class="opacity-0 [&_.modal]:scale-95 [&_.content,&_.footer]:translate-y--10px [&_.content,&_.footer]:opacity-0"
+ enter-from-class="opacity-0 [&_.modal]:scale-95 [&_.content,&_.footer]:translate-y--2.5 [&_.content,&_.footer]:opacity-0"
  enter-to-class="opacity-100 [&_.modal]:scale-100"
  leave-from-class="opacity-100 [&_.modal]:scale-100"
  leave-to-class="opacity-0 [&_.modal]:scale-95"
  >
  <Overlay v-if="show" :dim="dim" :blur="blur">
  <div
- class="modal relative grid grid-rows-[30px_1fr_40px] $ui-base max-h-[calc(100vh-100x)] max-w-[calc(100vw-100px)] min-h-100px min-w-200px gap-10px rounded-md bg-white px24px py18px color-gray-800 shadow-2xl transition-transform transition-duration-300 dark:bg-gray-900 dark:color-gray-200"
+ class="modal relative grid grid-rows-[1.875rem_1fr_2.5rem] $ui-base max-h-[calc(100vh-6.25rem)] max-w-[calc(100vw-6.25rem)] min-h-6.25rem min-w-12.5rem gap-2.5 rounded-md bg-white px6 py4.5 color-gray-800 shadow-2xl transition-transform transition-duration-300 dark:bg-gray-900 dark:color-gray-200"
  :style="{
  width: props.width,
  height: props.height,
  }"
  >
- <div class="h-30px w-full $ui-fbc">
- <div class="text-18px">
+ <div class="h7.5 w-full $ui-fbc">
+ <div class="text-4.5">
  <slot name="title">
  {{ props.title }}
  </slot>
@@ -84,7 +84,7 @@ onMounted(() => isMount.value = true)
  <div class="content transition-all transition-duration-300">
  <slot />
  </div>
- <div class="footer h32px w-full transition-all transition-duration-300 delay-250">
+ <div class="footer h8 w-full transition-all transition-duration-300 delay-250">
  <slot name="footer">
  <slot name="footer">
  <div class="$ui-fcc">

packages/ui/src/components/Drawer.vue

@@ -85,7 +85,7 @@ onMounted(() => isMount.value = true)
  top: placement === 'bottom' ? 'auto' : `${height}px`,
  height: ['top', 'bottom'].includes(placement) ? 'auto' : `calc(100% - ${height}px)`,
  }"
- class="drawer pointer-events-auto absolute min-w-100px of-auto $ui-border-base transition-transform transition-duration-300"
+ class="drawer pointer-events-auto absolute min-w-25 of-auto $ui-border-base transition-transform transition-duration-300"
  @click.stop
  >
  <div v-if="closable" class="i-carbon-close absolute right-1.5 top-1.5 $ui-z-max cursor-pointer p1 text-lg $ui-text" @click="show = false" />

packages/ui/src/components/FormField.vue

@@ -44,7 +44,7 @@ const iconMapping = {
  <div class="$ui-base">
  <VueInput v-model="value" :placeholder="placeholder" @update-focused="f => focused = f" />
  <div
- class="mt2 $ui-base text-14px" :class="[
+ class="mt2 $ui-base text-3.5" :class="[
  statusMapping[status],
  { 'opacity-65': !focused },
  ]"

packages/ui/src/components/Input.vue

@@ -76,7 +76,7 @@ watchEffect(() => {
 
 <template>
  <div
- class="group relative w-200px w-auto flex items-center justify-between gap-2px overflow-hidden b-1 rounded-1 px12px py-3px color-gray-800 dark:color-gray-100"
+ class="group relative w-50 w-auto flex items-center justify-between gap-0.5 overflow-hidden b-1 rounded-1 px3 py-0.75 color-gray-800 dark:color-gray-100"
  :class="[
  {
  'border-none bg-transparent group': variant === 'flat',
@@ -111,7 +111,7 @@ watchEffect(() => {
  </div>
  <!-- Focus animation -->
  <div
- v-if="!noFocusAnimation" class="pointer-events-none absolute bottom--1px left-50% right-50% z-9999 h-3px bg-primary-500 opacity-0 transition-all duration-240 group-[&.focused]:(left-0 right-0 opacity-100) group-[&.accent.focused]:bg-accent-500"
+ v-if="!noFocusAnimation" class="pointer-events-none absolute bottom--0.25 left-50% right-50% z-9999 h-0.75 bg-primary-500 opacity-0 transition-all duration-240 group-[&.focused]:(left-0 right-0 opacity-100) group-[&.accent.focused]:bg-accent-500"
  />
  </div>
 </template>

packages/ui/src/components/LoadingIndicator.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="h-12px w-12px $ui-inline-fcc">
+ <div class="h-3 w-3 $ui-inline-fcc">
  <svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />

packages/ui/src/components/Select.vue

@@ -46,7 +46,7 @@ const label = computed(() => {
  }"
  >
  <template #popper>
- <div class="m1 min-w-140px w-auto flex flex-col">
+ <div class="m1 min-w-35 w-auto flex flex-col">
  <VueButton
  v-for="item in options" :key="item.value" v-close-popper="props.autoClose" :disabled="disabled" round="normal"
  class="flex-[auto_1_1] not-action:[&:not(.active)]:bg-transparent!"

packages/ui/src/components/Switch.vue

@@ -19,17 +19,17 @@ const toggleValue = useToggle(value)
  :class="[
  disabled ? 'cursor-not-allowed' : 'cursor-pointer',
  ]"
- class="$ui-base $ui-if-sc cursor-pointer select-none gap5px vertical-mid text-14px" role="checkbox" @click="!disabled && toggleValue()"
+ class="$ui-base $ui-if-sc cursor-pointer select-none gap1.25 vertical-mid text-3.5" role="checkbox" @click="!disabled && toggleValue()"
  >
  <slot />
  <div
  :class="{
  selected: value,
  }"
- class="group relative $ui-base h16px w32px rounded-8px bg-primary-100 transition-colors dark:bg-gray-700 [&.selected]:bg-primary-500!"
+ class="group relative $ui-base h4 w8 rounded-2 bg-primary-100 transition-colors dark:bg-gray-700 [&.selected]:bg-primary-500!"
  >
  <div
- class="h16px w16px rounded-full bg-primary-800 transition-transform group-[&.selected]:transform-translate-x-16px dark:bg-white"
+ class="h4 w4 rounded-full bg-primary-800 transition-transform group-[&.selected]:transform-translate-x-4 dark:bg-white"
  :class="[
  { 'group-hover:opacity-75 group-active:scale-85': !disabled },
  { 'opacity-65': disabled },