fix(ui): color jittering (#899)

packages/ui/src/components/Form/Checkbox/Checkbox.vue

@@ -11,6 +11,7 @@ const modelValue = defineModel<boolean>({ required: true })
       'duration-250 ease-in-out',
       'focus-within:outline-none',
       'flex',
+      'is-interacting',
       'border-neutral-300 dark:border-neutral-700 data-[state=checked]:border-primary-200 data-[state=unchecked]:border-neutral-300 focus-within:border-neutral-800',
       'data-[state=checked]:bg-primary-400 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:dark:bg-primary-400/80 dark:data-[state=unchecked]:bg-neutral-800',
       'relative h-7 w-12.5 rounded-full',

packages/ui/src/components/Form/SelectTab/SelectTab.vue

@@ -48,6 +48,7 @@ const rootStyle = computed(() => ({
     :aria-readonly="props.readonly"
     :class="[
       'select-tab',
+      'is-interacting',
       'relative', 'flex', 'w-full', 'items-stretch', 'rounded-lg',
       'overflow-hidden',
       'bg-white-400/6', 'dark:bg-neutral-950/70',

packages/ui/src/fallback.css

@@ -13,3 +13,7 @@
   --chromatic-chroma-900: calc(var(--chromatic-chroma) * 0.7);
   --chromatic-chroma-950: calc(var(--chromatic-chroma) * 0.5);
 }
+
+.is-interacting {
+  transition-property: none !important;
+}