vome-core 0.0.98 → 0.0.99

package/dist/admin/crud/components/vm-color-picker.vue

@@ -1,34 +1,137 @@
 <template>
-  <div class="vm-color-picker" :class="{ 'is-disabled': disabled }">
-    <label class="vm-color-picker__swatch" :title="disabled ? undefined : '选择颜色'">
+  <div
+    ref="rootRef"
+    class="vm-color-picker"
+    :class="{ 'is-disabled': disabled, 'is-sm': size === 'sm', 'is-open': open }"
+  >
+    <button
+      ref="triggerRef"
+      type="button"
+      class="vm-color-picker__swatch"
+      :disabled="disabled"
+      :title="disabled ? undefined : '选择颜色'"
+      @click="toggle"
+    >
       <span
         class="vm-color-picker__swatch-fill"
         :style="{ background: cssColor }"
       />
-      <input
-        type="color"
-        class="vm-color-picker__native"
-        :value="pickerValue"
-        :disabled="disabled"
-        @input="onPicker"
-      />
-    </label>
+    </button>
+
     <input
       type="text"
       class="vm-color-picker__input"
-      :value="display"
-      :placeholder="placeholder"
+      :value="inlineHex"
+      :placeholder="placeholderText"
       :disabled="disabled"
       spellcheck="false"
       autocomplete="off"
-      @input="onText"
-      @blur="onBlur"
+      @input="onInlineInput"
+      @focus="openPanel"
+      @blur="onInlineBlur"
+      @keydown.esc.stop="closePanel"
     />
+
+    <Teleport to="body">
+      <FocusScope
+        v-if="open"
+        as-child
+        loop
+        :trapped="true"
+        @unmount-auto-focus="onPanelUnmountAutoFocus"
+      >
+        <div
+          ref="panelRef"
+          class="vm-color-picker__panel vm-dialog-float"
+          :style="panelStyle"
+          @pointerdown.stop
+          @mousedown.stop
+        >
+          <div
+            ref="svRef"
+            class="vm-color-picker__sv"
+            :style="{ background: svBg }"
+            @pointerdown="onSvPointer"
+          >
+            <span
+              class="vm-color-picker__sv-cursor"
+              :style="svCursorStyle"
+            />
+          </div>
+
+          <div class="vm-color-picker__sliders">
+            <button
+              v-if="hasEyeDropper"
+              type="button"
+              class="vm-color-picker__eyedropper"
+              title="吸取颜色"
+              @click="pickEyeDropper"
+            >
+              <i class="ri-eyedropper-line" aria-hidden="true" />
+            </button>
+            <div class="vm-color-picker__slider-col">
+              <div
+                ref="hueRef"
+                class="vm-color-picker__hue"
+                @pointerdown="onHuePointer"
+              >
+                <span
+                  class="vm-color-picker__slider-thumb"
+                  :style="{ left: `${(hue / 360) * 100}%` }"
+                />
+              </div>
+              <div
+                ref="alphaRef"
+                class="vm-color-picker__alpha"
+                @pointerdown="onAlphaPointer"
+              >
+                <span
+                  class="vm-color-picker__alpha-fill"
+                  :style="{ background: alphaBg }"
+                />
+                <span
+                  class="vm-color-picker__slider-thumb"
+                  :style="{ left: `${alpha * 100}%` }"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="vm-color-picker__footer">
+            <span class="vm-color-picker__format" title="颜色格式">
+              Hex
+              <i class="ri-arrow-down-s-line" aria-hidden="true" />
+            </span>
+            <input
+              type="text"
+              class="vm-color-picker__hex"
+              :value="panelHex"
+              spellcheck="false"
+              autocomplete="off"
+              @input="onPanelHexInput"
+              @blur="onPanelHexBlur"
+              @keydown.esc.stop="closePanel"
+            />
+            <input
+              type="text"
+              class="vm-color-picker__alpha-pct"
+              :value="alphaPctText"
+              spellcheck="false"
+              autocomplete="off"
+              @input="onAlphaPctInput"
+              @blur="onAlphaPctBlur"
+              @keydown.esc.stop="closePanel"
+            />
+          </div>
+        </div>
+      </FocusScope>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { FocusScope } from 'reka-ui'
 
 defineOptions({ name: 'vm-color-picker' })
 
@@ -37,9 +140,11 @@ const props = withDefaults(
     modelValue?: string | null
     disabled?: boolean
     placeholder?: string
+    size?: 'default' | 'sm'
   }>(),
   {
     placeholder: '#000000',
+    size: 'default',
   },
 )
 
@@ -48,65 +153,489 @@ const emit = defineEmits<{
   change: [v: string]
 }>()
 
-const FALLBACK = '#000000'
+type Rgba = { r: number; g: number; b: number; a: number }
+type Hsv = { h: number; s: number; v: number }
 
-const display = ref(props.modelValue ?? '')
+const rootRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const svRef = ref<HTMLElement | null>(null)
+const hueRef = ref<HTMLElement | null>(null)
+const alphaRef = ref<HTMLElement | null>(null)
 
-watch(
-  () => props.modelValue,
-  (v) => {
-    display.value = v ?? ''
-  },
-)
+const open = ref(false)
+const suppressOpen = ref(false)
+const panelStyle = ref<Record<string, string>>({})
+
+const hue = ref(0)
+const sat = ref(0)
+const val = ref(0)
+const alpha = ref(1)
+
+/** 行内 / 面板 Hex 编辑中的草稿（不含 #） */
+const inlineHex = ref('')
+const panelHex = ref('')
+const alphaPctText = ref('100%')
+
+const hasEyeDropper = ref(false)
 
-/** 解析为 #rrggbb；无效返回 null */
-function parseHex(raw: string): string | null {
+const placeholderText = computed(() => {
+  const p = props.placeholder || '#000000'
+  return p.startsWith('#') ? p.slice(1) : p
+})
+
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n))
+}
+
+function toHex2(n: number) {
+  return clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0')
+}
+
+function rgbToHex(r: number, g: number, b: number, a = 1): string {
+  const base = `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`
+  if (a >= 1 - 1e-6) return base
+  return `${base}${toHex2(a * 255)}`
+}
+
+function hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {
+  const hh = ((h % 360) + 360) % 360
+  const c = v * s
+  const x = c * (1 - Math.abs(((hh / 60) % 2) - 1))
+  const m = v - c
+  let rp = 0
+  let gp = 0
+  let bp = 0
+  if (hh < 60) {
+    rp = c
+    gp = x
+  } else if (hh < 120) {
+    rp = x
+    gp = c
+  } else if (hh < 180) {
+    gp = c
+    bp = x
+  } else if (hh < 240) {
+    gp = x
+    bp = c
+  } else if (hh < 300) {
+    rp = x
+    bp = c
+  } else {
+    rp = c
+    bp = x
+  }
+  return {
+    r: (rp + m) * 255,
+    g: (gp + m) * 255,
+    b: (bp + m) * 255,
+  }
+}
+
+function rgbToHsv(r: number, g: number, b: number): Hsv {
+  const rr = r / 255
+  const gg = g / 255
+  const bb = b / 255
+  const max = Math.max(rr, gg, bb)
+  const min = Math.min(rr, gg, bb)
+  const d = max - min
+  let h = 0
+  if (d !== 0) {
+    if (max === rr) h = ((gg - bb) / d) % 6
+    else if (max === gg) h = (bb - rr) / d + 2
+    else h = (rr - gg) / d + 4
+    h *= 60
+    if (h < 0) h += 360
+  }
+  const s = max === 0 ? 0 : d / max
+  return { h, s, v: max }
+}
+
+/** 解析为 rgba；无效返回 null */
+function parseColor(raw: string): Rgba | null {
   const s = raw.trim()
   if (!s) return null
-  let h = s.startsWith('#') ? s.slice(1) : s
-  if (/^[0-9a-fA-F]{3}$/.test(h)) {
-    h = h
-      .split('')
-      .map((c) => c + c)
-      .join('')
-  }
-  if (/^[0-9a-fA-F]{6}$/.test(h)) return `#${h.toLowerCase()}`
-  if (/^[0-9a-fA-F]{8}$/.test(h)) return `#${h.slice(0, 6).toLowerCase()}`
+
+  if (s.startsWith('#')) {
+    let h = s.slice(1)
+    if (/^[0-9a-fA-F]{3}$/.test(h)) {
+      h = h
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    }
+    if (/^[0-9a-fA-F]{6}$/.test(h)) {
+      return {
+        r: parseInt(h.slice(0, 2), 16),
+        g: parseInt(h.slice(2, 4), 16),
+        b: parseInt(h.slice(4, 6), 16),
+        a: 1,
+      }
+    }
+    if (/^[0-9a-fA-F]{8}$/.test(h)) {
+      return {
+        r: parseInt(h.slice(0, 2), 16),
+        g: parseInt(h.slice(2, 4), 16),
+        b: parseInt(h.slice(4, 6), 16),
+        a: parseInt(h.slice(6, 8), 16) / 255,
+      }
+    }
+    return null
+  }
+
+  const bare = s.startsWith('#') ? s.slice(1) : s
+  if (/^[0-9a-fA-F]{3}$/.test(bare) || /^[0-9a-fA-F]{6}$/.test(bare) || /^[0-9a-fA-F]{8}$/.test(bare)) {
+    return parseColor(`#${bare}`)
+  }
+
+  const m = s.match(
+    /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i,
+  )
+  if (m) {
+    return {
+      r: clamp(Number(m[1]), 0, 255),
+      g: clamp(Number(m[2]), 0, 255),
+      b: clamp(Number(m[3]), 0, 255),
+      a: m[4] != null ? clamp(Number(m[4]), 0, 1) : 1,
+    }
+  }
   return null
 }
 
-const normalized = computed(() => parseHex(display.value))
+function currentRgb() {
+  return hsvToRgb(hue.value, sat.value, val.value)
+}
+
+function currentHex(): string {
+  const { r, g, b } = currentRgb()
+  return rgbToHex(r, g, b, alpha.value)
+}
+
+const cssColor = computed(() => {
+  const parsed = parseColor(props.modelValue ?? '')
+  if (!parsed && !(props.modelValue ?? '').trim()) return 'transparent'
+  if (!parsed) return 'transparent'
+  const { r, g, b, a } = parsed
+  return a < 1 ? `rgba(${r},${g},${b},${a})` : `rgb(${r},${g},${b})`
+})
+
+const svBg = computed(() => {
+  const { r, g, b } = hsvToRgb(hue.value, 1, 1)
+  return `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, rgb(${Math.round(r)},${Math.round(g)},${Math.round(b)}))`
+})
+
+const alphaBg = computed(() => {
+  const { r, g, b } = currentRgb()
+  const c = `rgb(${Math.round(r)},${Math.round(g)},${Math.round(b)})`
+  return `linear-gradient(to right, transparent, ${c})`
+})
+
+const svCursorStyle = computed(() => ({
+  left: `${sat.value * 100}%`,
+  top: `${(1 - val.value) * 100}%`,
+}))
+
+function syncTextsFromState() {
+  const hex = currentHex()
+  const bare = hex.startsWith('#') ? hex.slice(1) : hex
+  // 行内只展示 RGB 六位；透明度在面板 % 里改
+  inlineHex.value = bare.slice(0, 6)
+  panelHex.value = bare.slice(0, 6)
+  alphaPctText.value = `${Math.round(alpha.value * 100)}%`
+}
+
+function applyRgba(c: Rgba, emitValue = true) {
+  const hsv = rgbToHsv(c.r, c.g, c.b)
+  hue.value = hsv.h
+  sat.value = hsv.s
+  val.value = hsv.v
+  alpha.value = clamp(c.a, 0, 1)
+  syncTextsFromState()
+  if (emitValue) commit(currentHex())
+}
 
-const cssColor = computed(() => normalized.value || 'transparent')
+function loadFromModel(raw: string | null | undefined) {
+  const s = raw ?? ''
+  if (!s.trim()) {
+    hue.value = 0
+    sat.value = 0
+    val.value = 0
+    alpha.value = 1
+    inlineHex.value = ''
+    panelHex.value = ''
+    alphaPctText.value = '100%'
+    return
+  }
+  const parsed = parseColor(s)
+  if (!parsed) {
+    inlineHex.value = s.startsWith('#') ? s.slice(1) : s
+    return
+  }
+  const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b)
+  hue.value = hsv.h
+  sat.value = hsv.s
+  val.value = hsv.v
+  alpha.value = parsed.a
+  syncTextsFromState()
+}
 
-const pickerValue = computed(() => normalized.value || FALLBACK)
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (open.value) {
+      // 面板打开时若外部写入且与当前一致则跳过抖动
+      const cur = currentHex()
+      const parsed = parseColor(v ?? '')
+      if (parsed && rgbToHex(parsed.r, parsed.g, parsed.b, parsed.a) === cur) return
+    }
+    loadFromModel(v)
+  },
+  { immediate: true },
+)
 
 function commit(v: string) {
-  display.value = v
   emit('update:modelValue', v)
   emit('change', v)
 }
 
-function onPicker(e: Event) {
-  const v = (e.target as HTMLInputElement).value
-  commit(v.toLowerCase())
+function commitFromState() {
+  syncTextsFromState()
+  commit(currentHex())
 }
 
-function onText(e: Event) {
+function onInlineInput(e: Event) {
   const v = (e.target as HTMLInputElement).value
-  display.value = v
-  emit('update:modelValue', v)
-  emit('change', v)
+  inlineHex.value = v.replace(/^#/, '')
+  const parsed = parseColor(inlineHex.value)
+  if (parsed) {
+    parsed.a = alpha.value
+    const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b)
+    hue.value = hsv.h
+    sat.value = hsv.s
+    val.value = hsv.v
+    panelHex.value = inlineHex.value.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)
+    commit(currentHex())
+  } else {
+    const raw = inlineHex.value.trim()
+    commit(raw ? (raw.startsWith('#') ? raw : `#${raw}`) : '')
+  }
 }
 
-function onBlur() {
-  const n = parseHex(display.value)
-  if (display.value.trim() === '') {
+function onInlineBlur() {
+  const t = inlineHex.value.trim()
+  if (!t) {
     commit('')
+    syncTextsFromState()
     return
   }
-  if (n && n !== display.value) commit(n)
+  const parsed = parseColor(t)
+  if (parsed) {
+    parsed.a = alpha.value
+    applyRgba(parsed, true)
+  } else {
+    loadFromModel(props.modelValue)
+  }
+}
+
+function onPanelHexInput(e: Event) {
+  const v = (e.target as HTMLInputElement).value.replace(/^#/, '')
+  panelHex.value = v
+  const parsed = parseColor(v)
+  if (parsed) {
+    parsed.a = alpha.value
+    const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b)
+    hue.value = hsv.h
+    sat.value = hsv.s
+    val.value = hsv.v
+    inlineHex.value = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)
+    commit(currentHex())
+  }
+}
+
+function onPanelHexBlur() {
+  const parsed = parseColor(panelHex.value)
+  if (parsed) {
+    parsed.a = alpha.value
+    applyRgba(parsed, true)
+  } else {
+    syncTextsFromState()
+  }
+}
+
+function onAlphaPctInput(e: Event) {
+  alphaPctText.value = (e.target as HTMLInputElement).value
+  const n = Number(String(alphaPctText.value).replace(/%/g, '').trim())
+  if (!Number.isFinite(n)) return
+  alpha.value = clamp(n / 100, 0, 1)
+  commitFromState()
+}
+
+function onAlphaPctBlur() {
+  const n = Number(String(alphaPctText.value).replace(/%/g, '').trim())
+  if (Number.isFinite(n)) {
+    alpha.value = clamp(n / 100, 0, 1)
+  }
+  syncTextsFromState()
+  commit(currentHex())
+}
+
+function ratioFromEvent(el: HTMLElement, e: PointerEvent, axis: 'x' | 'y' | 'both') {
+  const r = el.getBoundingClientRect()
+  const x = clamp((e.clientX - r.left) / r.width, 0, 1)
+  const y = clamp((e.clientY - r.top) / r.height, 0, 1)
+  if (axis === 'x') return { x, y: 0 }
+  if (axis === 'y') return { x: 0, y }
+  return { x, y }
+}
+
+function bindDrag(
+  el: HTMLElement,
+  e: PointerEvent,
+  onMove: (ev: PointerEvent) => void,
+) {
+  e.preventDefault()
+  el.setPointerCapture(e.pointerId)
+  onMove(e)
+  const move = (ev: PointerEvent) => onMove(ev)
+  const up = (ev: PointerEvent) => {
+    el.releasePointerCapture(ev.pointerId)
+    el.removeEventListener('pointermove', move)
+    el.removeEventListener('pointerup', up)
+    el.removeEventListener('pointercancel', up)
+  }
+  el.addEventListener('pointermove', move)
+  el.addEventListener('pointerup', up)
+  el.addEventListener('pointercancel', up)
+}
+
+function onSvPointer(e: PointerEvent) {
+  const el = svRef.value
+  if (!el) return
+  bindDrag(el, e, (ev) => {
+    const { x, y } = ratioFromEvent(el, ev, 'both')
+    sat.value = x
+    val.value = 1 - y
+    commitFromState()
+  })
+}
+
+function onHuePointer(e: PointerEvent) {
+  const el = hueRef.value
+  if (!el) return
+  bindDrag(el, e, (ev) => {
+    const { x } = ratioFromEvent(el, ev, 'x')
+    hue.value = x * 360
+    commitFromState()
+  })
 }
+
+function onAlphaPointer(e: PointerEvent) {
+  const el = alphaRef.value
+  if (!el) return
+  bindDrag(el, e, (ev) => {
+    const { x } = ratioFromEvent(el, ev, 'x')
+    alpha.value = x
+    commitFromState()
+  })
+}
+
+async function pickEyeDropper() {
+  const ED = (window as unknown as { EyeDropper?: new () => { open: () => Promise<{ sRGBHex: string }> } }).EyeDropper
+  if (!ED) return
+  try {
+    const result = await new ED().open()
+    const parsed = parseColor(result.sRGBHex)
+    if (parsed) {
+      parsed.a = alpha.value
+      applyRgba(parsed, true)
+    }
+  } catch {
+    /* 用户取消 */
+  }
+}
+
+function syncPanelPos() {
+  const el = triggerRef.value
+  if (!el) return
+  const r = el.getBoundingClientRect()
+  const width = 240
+  let left = r.left
+  if (left + width > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - width - 8)
+  }
+  let top = r.bottom + 6
+  const estH = 280
+  if (top + estH > window.innerHeight - 8) {
+    top = Math.max(8, r.top - estH - 6)
+  }
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${width}px`,
+    zIndex: '100',
+  }
+}
+
+async function openPanel() {
+  if (props.disabled || suppressOpen.value) return
+  loadFromModel(props.modelValue)
+  open.value = true
+  await nextTick()
+  syncPanelPos()
+}
+
+function onPanelUnmountAutoFocus(event: Event) {
+  event.preventDefault()
+}
+
+function closePanel() {
+  if (!open.value) return
+  suppressOpen.value = true
+  open.value = false
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      suppressOpen.value = false
+    })
+  })
+}
+
+async function toggle() {
+  if (props.disabled) return
+  if (open.value) {
+    closePanel()
+    return
+  }
+  await openPanel()
+}
+
+function onDocPointer(e: Event) {
+  if (!open.value) return
+  const t = e.target as Node | null
+  if (!t) return
+  if (rootRef.value?.contains(t)) return
+  if (panelRef.value?.contains(t)) return
+  closePanel()
+}
+
+function onWinChange() {
+  if (open.value) syncPanelPos()
+}
+
+onMounted(() => {
+  hasEyeDropper.value =
+    typeof window !== 'undefined' &&
+    'EyeDropper' in window
+  document.addEventListener('pointerdown', onDocPointer, true)
+  window.addEventListener('resize', onWinChange)
+  window.addEventListener('scroll', onWinChange, true)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', onDocPointer, true)
+  window.removeEventListener('resize', onWinChange)
+  window.removeEventListener('scroll', onWinChange, true)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -128,19 +657,35 @@ function onBlur() {
   flex-shrink: 0;
   width: var(--vm-control-height);
   height: var(--vm-control-height);
+  padding: 0;
   border: 1px solid var(--border);
   border-radius: var(--vm-control-radius);
   background: var(--muted);
   cursor: pointer;
   overflow: hidden;
+
+  &:hover:not(:disabled),
+  .is-open & {
+    border-color: var(--brand, #4e5dff);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.vm-color-picker.is-sm .vm-color-picker__swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
 }
 
 .vm-color-picker__swatch-fill {
   display: block;
   width: 100%;
   height: 100%;
-  /* 无效色时显示棋盘，便于识别透明/空 */
-  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
+  background-image:
+    linear-gradient(45deg, #ccc 25%, transparent 25%),
     linear-gradient(-45deg, #ccc 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #ccc 75%),
     linear-gradient(-45deg, transparent 75%, #ccc 75%);
@@ -152,17 +697,6 @@ function onBlur() {
     -4px 0;
 }
 
-.vm-color-picker__native {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
 .vm-color-picker__input {
   flex: 1;
   min-width: 0;
@@ -185,4 +719,198 @@ function onBlur() {
     color: var(--muted-foreground);
   }
 }
+
+.vm-color-picker.is-sm .vm-color-picker__input {
+  height: 24px;
+  padding: 0 6px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+</style>
+
+<style lang="scss">
+/* Teleport 到 body，不可 scoped */
+.vm-color-picker__panel {
+  box-sizing: border-box;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--popover, var(--background, #fff));
+  color: var(--foreground);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 10%),
+    0 10px 24px -4px rgb(0 0 0 / 12%);
+  user-select: none;
+}
+
+.vm-color-picker__sv {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  cursor: crosshair;
+  touch-action: none;
+  overflow: hidden;
+}
+
+.vm-color-picker__sv-cursor {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin: -7px 0 0 -7px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
+  pointer-events: none;
+}
+
+.vm-color-picker__sliders {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.vm-color-picker__eyedropper {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: 15px;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--brand, #4e5dff);
+    color: var(--brand, #4e5dff);
+  }
+}
+
+.vm-color-picker__slider-col {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vm-color-picker__hue,
+.vm-color-picker__alpha {
+  position: relative;
+  height: 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.vm-color-picker__hue {
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+}
+
+.vm-color-picker__alpha {
+  background-image:
+    linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
+    linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #c8c8c8 75%),
+    linear-gradient(-45deg, transparent 75%, #c8c8c8 75%);
+  background-size: 8px 8px;
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+  background-color: #fff;
+  overflow: hidden;
+}
+
+.vm-color-picker__alpha-fill {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.vm-color-picker__slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  margin: -7px 0 0 -7px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: transparent;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
+  pointer-events: none;
+}
+
+.vm-color-picker__footer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.vm-color-picker__format {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 28px;
+  padding: 0 6px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--muted);
+  color: var(--muted-foreground, var(--foreground));
+  font-size: 12px;
+  line-height: 1;
+  cursor: default;
+
+  i {
+    font-size: 14px;
+    opacity: 0.7;
+  }
+}
+
+.vm-color-picker__hex,
+.vm-color-picker__alpha-pct {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  outline: none;
+
+  &:focus {
+    border-color: var(--brand, #4e5dff);
+  }
+}
+
+.vm-color-picker__hex {
+  flex: 1;
+  min-width: 0;
+}
+
+.vm-color-picker__alpha-pct {
+  width: 52px;
+  flex-shrink: 0;
+  text-align: center;
+}
 </style>