@sakoa/ui 0.1.0

package/registry/source/components/ui/color-picker/SColorPickerAlphaSlider.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref, computed, inject, onBeforeUnmount } from 'vue'
+import { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'
+
+const ctx = inject<SColorPickerContext>(SColorPickerContextKey)
+if (!ctx) console.warn('[SColorPickerAlphaSlider] Must be used inside SColorPicker')
+
+const sliderRef = ref<HTMLElement | null>(null)
+const isDragging = ref(false)
+
+const cursorPosition = computed(() => ({
+  left: `${(ctx?.hsva.value.a ?? 1) * 100}%`
+}))
+
+const alphaGradient = computed(() => {
+  if (!ctx) return ''
+  const { r, g, b } = ctx.currentRgb.value
+  return `linear-gradient(to right, transparent, rgb(${r}, ${g}, ${b}))`
+})
+
+function updateFromEvent(event: MouseEvent) {
+  if (!sliderRef.value || !ctx) return
+  const rect = sliderRef.value.getBoundingClientRect()
+  const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+  ctx.hsva.value.a = x / rect.width
+  ctx.emitInput()
+}
+
+function updateFromTouch(event: TouchEvent) {
+  if (!sliderRef.value || !ctx || !event.touches[0]) return
+  const rect = sliderRef.value.getBoundingClientRect()
+  const x = Math.max(0, Math.min(event.touches[0].clientX - rect.left, rect.width))
+  ctx.hsva.value.a = x / rect.width
+  ctx.emitInput()
+}
+
+function onMouseDown(event: MouseEvent) {
+  if (ctx?.disabled.value || ctx?.readonly.value) return
+  isDragging.value = true
+  updateFromEvent(event)
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+}
+
+function onTouchStart(event: TouchEvent) {
+  if (ctx?.disabled.value || ctx?.readonly.value) return
+  event.preventDefault()
+  isDragging.value = true
+  updateFromTouch(event)
+  document.addEventListener('touchmove', onTouchMove, { passive: false })
+  document.addEventListener('touchend', onTouchEnd)
+}
+
+function onMouseMove(event: MouseEvent) {
+  if (!isDragging.value) return
+  updateFromEvent(event)
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (!isDragging.value) return
+  event.preventDefault()
+  updateFromTouch(event)
+}
+
+function onMouseUp() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+  ctx?.emitChange()
+}
+
+function onTouchEnd() {
+  isDragging.value = false
+  document.removeEventListener('touchmove', onTouchMove)
+  document.removeEventListener('touchend', onTouchEnd)
+  ctx?.emitChange()
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+  document.removeEventListener('touchmove', onTouchMove)
+  document.removeEventListener('touchend', onTouchEnd)
+})
+</script>
+
+<template>
+  <div
+    ref="sliderRef"
+    class="s-color-picker__slider s-color-picker__slider--alpha"
+    :class="ctx?.sizeConfig.value?.slider"
+    @mousedown="onMouseDown"
+    @touchstart="onTouchStart"
+  >
+    <div class="s-color-picker__slider-alpha-bg"></div>
+    <div
+      class="s-color-picker__slider-alpha-gradient"
+      :style="{ background: alphaGradient }"
+    ></div>
+    <div
+      class="s-color-picker__slider-cursor"
+      :class="{ 's-color-picker__slider-cursor--dragging': isDragging }"
+      :style="cursorPosition"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.s-color-picker__slider {
+  position: relative;
+  border-radius: 999px;
+  cursor: pointer;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.s-color-picker__slider--alpha {
+  position: relative;
+}
+
+.s-color-picker__slider-alpha-bg {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  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%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+}
+
+.s-color-picker__slider-alpha-gradient {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+}
+
+.s-color-picker__slider-cursor {
+  position: absolute;
+  top: 50%;
+  width: 1rem;
+  height: 1rem;
+  transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  transition: transform 0.1s ease;
+}
+
+.s-color-picker__slider-cursor--dragging {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+</style>

package/registry/source/components/ui/color-picker/SColorPickerCopy.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref, inject } from 'vue'
+import { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'
+
+const ctx = inject<SColorPickerContext>(SColorPickerContextKey)
+if (!ctx) console.warn('[SColorPickerCopy] Must be used inside SColorPicker')
+
+const copied = ref(false)
+
+async function copyToClipboard() {
+  if (!ctx) return
+
+  try {
+    await navigator.clipboard.writeText(ctx.displayValue.value)
+    copied.value = true
+    setTimeout(() => copied.value = false, 1500)
+  } catch {
+    const textarea = document.createElement('textarea')
+    textarea.value = ctx.displayValue.value
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+    copied.value = true
+    setTimeout(() => copied.value = false, 1500)
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="s-color-picker__tool-btn"
+    :class="{ 's-color-picker__tool-btn--copied': copied }"
+    title="Copy color"
+    @click="copyToClipboard"
+  >
+    <slot :copied="copied">
+      <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    </slot>
+  </button>
+</template>
+
+<style scoped>
+.s-color-picker__tool-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--s-border);
+  background: var(--s-muted);
+  color: var(--s-muted-foreground);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.s-color-picker__tool-btn:hover:not(:disabled) {
+  background: var(--s-accent);
+  color: var(--s-foreground);
+  border-color: var(--s-primary);
+}
+
+.s-color-picker__tool-btn--copied {
+  background: var(--s-primary);
+  color: white;
+  border-color: var(--s-primary);
+}
+</style>

package/registry/source/components/ui/color-picker/SColorPickerEyeDropper.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, inject, onMounted } from 'vue'
+import { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'
+
+const ctx = inject<SColorPickerContext>(SColorPickerContextKey)
+if (!ctx) console.warn('[SColorPickerEyeDropper] Must be used inside SColorPicker')
+
+const supportsEyeDropper = ref(false)
+
+onMounted(() => {
+  supportsEyeDropper.value = typeof window !== 'undefined' && 'EyeDropper' in window
+})
+
+async function openEyeDropper() {
+  if (ctx?.disabled.value || ctx?.readonly.value || !supportsEyeDropper.value) return
+
+  try {
+    // @ts-expect-error EyeDropper API may not be in types
+    const eyeDropper = new EyeDropper()
+    const result = await eyeDropper.open()
+    ctx?.parseColor(result.sRGBHex)
+    ctx?.emitChange()
+  } catch {
+    // User cancelled or error
+  }
+}
+</script>
+
+<template>
+  <button
+    v-if="supportsEyeDropper"
+    type="button"
+    class="s-color-picker__tool-btn"
+    title="Pick color from screen"
+    :disabled="ctx?.disabled.value || ctx?.readonly.value"
+    @click="openEyeDropper"
+  >
+    <slot>
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="m2 22 1-1h3l9-9" />
+        <path d="M3 21v-3l9-9" />
+        <path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" />
+      </svg>
+    </slot>
+  </button>
+</template>
+
+<style scoped>
+.s-color-picker__tool-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--s-border);
+  background: var(--s-muted);
+  color: var(--s-muted-foreground);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.s-color-picker__tool-btn:hover:not(:disabled) {
+  background: var(--s-accent);
+  color: var(--s-foreground);
+  border-color: var(--s-primary);
+}
+</style>

package/registry/source/components/ui/color-picker/SColorPickerHueSlider.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref, computed, inject, onBeforeUnmount } from 'vue'
+import { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'
+
+const ctx = inject<SColorPickerContext>(SColorPickerContextKey)
+if (!ctx) console.warn('[SColorPickerHueSlider] Must be used inside SColorPicker')
+
+const sliderRef = ref<HTMLElement | null>(null)
+const isDragging = ref(false)
+
+const cursorPosition = computed(() => ({
+  left: `${((ctx?.hsva.value.h ?? 0) / 360) * 100}%`
+}))
+
+function updateFromEvent(event: MouseEvent) {
+  if (!sliderRef.value || !ctx) return
+  const rect = sliderRef.value.getBoundingClientRect()
+  const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+  ctx.hsva.value.h = (x / rect.width) * 360
+  ctx.emitInput()
+}
+
+function updateFromTouch(event: TouchEvent) {
+  if (!sliderRef.value || !ctx || !event.touches[0]) return
+  const rect = sliderRef.value.getBoundingClientRect()
+  const x = Math.max(0, Math.min(event.touches[0].clientX - rect.left, rect.width))
+  ctx.hsva.value.h = (x / rect.width) * 360
+  ctx.emitInput()
+}
+
+function onMouseDown(event: MouseEvent) {
+  if (ctx?.disabled.value || ctx?.readonly.value) return
+  isDragging.value = true
+  updateFromEvent(event)
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+}
+
+function onTouchStart(event: TouchEvent) {
+  if (ctx?.disabled.value || ctx?.readonly.value) return
+  event.preventDefault()
+  isDragging.value = true
+  updateFromTouch(event)
+  document.addEventListener('touchmove', onTouchMove, { passive: false })
+  document.addEventListener('touchend', onTouchEnd)
+}
+
+function onMouseMove(event: MouseEvent) {
+  if (!isDragging.value) return
+  updateFromEvent(event)
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (!isDragging.value) return
+  event.preventDefault()
+  updateFromTouch(event)
+}
+
+function onMouseUp() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+  ctx?.emitChange()
+}
+
+function onTouchEnd() {
+  isDragging.value = false
+  document.removeEventListener('touchmove', onTouchMove)
+  document.removeEventListener('touchend', onTouchEnd)
+  ctx?.emitChange()
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+  document.removeEventListener('touchmove', onTouchMove)
+  document.removeEventListener('touchend', onTouchEnd)
+})
+</script>
+
+<template>
+  <div
+    ref="sliderRef"
+    class="s-color-picker__slider s-color-picker__slider--hue"
+    :class="ctx?.sizeConfig.value?.slider"
+    @mousedown="onMouseDown"
+    @touchstart="onTouchStart"
+  >
+    <div
+      class="s-color-picker__slider-cursor"
+      :class="{ 's-color-picker__slider-cursor--dragging': isDragging }"
+      :style="cursorPosition"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.s-color-picker__slider {
+  position: relative;
+  border-radius: 999px;
+  cursor: pointer;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.s-color-picker__slider--hue {
+  background: linear-gradient(
+    to right,
+    hsl(0, 100%, 50%),
+    hsl(60, 100%, 50%),
+    hsl(120, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(240, 100%, 50%),
+    hsl(300, 100%, 50%),
+    hsl(360, 100%, 50%)
+  );
+}
+
+.s-color-picker__slider-cursor {
+  position: absolute;
+  top: 50%;
+  width: 1rem;
+  height: 1rem;
+  transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  transition: transform 0.1s ease;
+}
+
+.s-color-picker__slider-cursor--dragging {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+</style>

package/registry/source/components/ui/color-picker/SColorPickerInputs.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref, watch, inject } from 'vue'
+import { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'
+
+const ctx = inject<SColorPickerContext>(SColorPickerContextKey)
+if (!ctx) console.warn('[SColorPickerInputs] Must be used inside SColorPicker')
+
+const hexInput = ref('')
+const rgbInputs = ref({ r: 0, g: 0, b: 0, a: 100 })
+const hslInputs = ref({ h: 0, s: 0, l: 0, a: 100 })
+
+// Sync inputs with current color
+watch([() => ctx?.currentHex.value, () => ctx?.currentRgb.value, () => ctx?.currentHsl.value], () => {
+  if (!ctx) return
+  hexInput.value = ctx.currentHex.value.toUpperCase()
+  rgbInputs.value = {
+    r: ctx.currentRgb.value.r,
+    g: ctx.currentRgb.value.g,
+    b: ctx.currentRgb.value.b,
+    a: Math.round(ctx.hsva.value.a * 100)
+  }
+  hslInputs.value = {
+    h: ctx.currentHsl.value.h,
+    s: ctx.currentHsl.value.s,
+    l: ctx.currentHsl.value.l,
+    a: Math.round(ctx.hsva.value.a * 100)
+  }
+}, { immediate: true })
+
+function handleHexInput() {
+  if (!ctx) return
+  const hex = hexInput.value.startsWith('#') ? hexInput.value : '#' + hexInput.value
+  if (/^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(hex)) {
+    ctx.parseColor(hex)
+    ctx.emitChange()
+  }
+}
+
+function handleRgbInput() {
+  if (!ctx) return
+  const { r, g, b, a } = rgbInputs.value
+  if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
+    const hsv = ctx.rgbToHsv(r, g, b)
+    ctx.hsva.value = { ...hsv, a: a / 100 }
+    ctx.emitChange()
+  }
+}
+
+function handleHslInput() {
+  if (!ctx) return
+  const { h, s, l, a } = hslInputs.value
+  if (h >= 0 && h <= 360 && s >= 0 && s <= 100 && l >= 0 && l <= 100) {
+    const sNorm = s / 100
+    const lNorm = l / 100
+    const v = lNorm + sNorm * Math.min(lNorm, 1 - lNorm)
+    const sv = v === 0 ? 0 : 2 * (1 - lNorm / v)
+    ctx.hsva.value = { h, s: sv * 100, v: v * 100, a: a / 100 }
+    ctx.emitChange()
+  }
+}
+</script>
+
+<template>
+  <div v-if="ctx" class="s-color-picker__inputs">
+    <div class="s-color-picker__format-toggle">
+      <button
+        type="button"
+        class="s-color-picker__format-btn"
+        :class="ctx.sizeConfig.value?.input"
+        @click="ctx.cycleFormat()"
+      >
+        {{ ctx.activeFormat.value.toUpperCase() }}
+      </button>
+    </div>
+
+    <!-- HEX Input -->
+    <div v-if="ctx.activeFormat.value === 'hex'" class="s-color-picker__input-group s-color-picker__input-group--hex">
+      <input
+        v-model="hexInput"
+        type="text"
+        class="s-color-picker__input"
+        :class="ctx.sizeConfig.value?.input"
+        :disabled="ctx.disabled.value || ctx.readonly.value"
+        maxlength="9"
+        @blur="handleHexInput"
+        @keydown.enter="handleHexInput"
+      />
+    </div>
+
+    <!-- RGB Inputs -->
+    <div v-if="ctx.activeFormat.value === 'rgb'" class="s-color-picker__input-group s-color-picker__input-group--rgb">
+      <div class="s-color-picker__input-field">
+        <input v-model.number="rgbInputs.r" type="number" class="s-color-picker__input" :class="ctx.sizeConfig.value?.input" :disabled="ctx.disabled.value || ctx.readonly.value" min="0" max="255" @blur="handleRgbInput" @keydown.enter="handleRgbInput" />
+        <span class="s-color-picker__input-label">R</span>
+      </div>
+      <div class="s-color-picker__input-field">
+        <input v-model.number="rgbInputs.g" type="number" class="s-color-picker__input" :class="ctx.sizeConfig.value?.input" :disabled="ctx.disabled.value || ctx.readonly.value" min="0" max="255" @blur="handleRgbInput" @keydown.enter="handleRgbInput" />
+        <span class="s-color-picker__input-label">G</span>
+      </div>
+      <div class="s-color-picker__input-field">
+        <input v-model.number="rgbInputs.b" type="number" class="s-color-picker__input" :class="ctx.sizeConfig.value?.input" :disabled="ctx.disabled.value || ctx.readonly.value" min="0" max="255" @blur="handleRgbInput" @keydown.enter="handleRgbInput" />
+        <span class="s-color-picker__input-label">B</span>
+      </div>
+      <div v-if="ctx.showAlpha.value" class="s-color-picker__input-field">
+        <input v-model.number="rgbInputs.a" type="number" class="s-color-picker__input" :class="ctx.sizeConfig.value?.input" :disabled="ctx.disabled.value || ctx.readonly.value" min="0" max="100" @blur="handleRgbInput" @keydown.enter="handleRgbInput" />
+        <span class="s-color-picker__input-label">A</span>
+      </div>
+    </div>
+
+    <!-- HSL Inputs -->
+    <div v-if="ctx.activeFormat.value === 'hsl'" class="s-color-picker__input-group s-color-picker__input-group--hsl">
+      <div class="s-color-picker__input-field">
+        <input v-model.number="hslInputs.h" type="number" class="s-color-picker__input" :class="ctx.sizeConfig.value?.input" :disabled="ctx.disabled.value || ctx.readonly.value" min="0" max="360" @blur="handleHslInput" @keydown.enter="handleHslInput" />
+        <span class="s-color-picker__input-label">H</span>
+      </div>
+      <div class="s-color-picker__input-field">
+        <input v-model.number="hslInputs.s" type="number" class="s-color-picker__input" :class="ctx.sizeConfig.value?.input" :disabled="ctx.disabled.value || ctx.readonly.value" min="0" max="100" @blur="handleHslInput" @keydown.enter="handleHslInput" />
+        <span class="s-color-picker__input-label">S</span>
+      </div>
+      <div class="s-color-picker__input-field">
+        <input v-model.number="hslInputs.l" type="number" class="s-color-picker__input" :class="ctx.sizeConfig.value?.input" :disabled="ctx.disabled.value || ctx.readonly.value" min="0" max="100" @blur="handleHslInput" @keydown.enter="handleHslInput" />
+        <span class="s-color-picker__input-label">L</span>
+      </div>
+      <div v-if="ctx.showAlpha.value" class="s-color-picker__input-field">
+        <input v-model.number="hslInputs.a" type="number" class="s-color-picker__input" :class="ctx.sizeConfig.value?.input" :disabled="ctx.disabled.value || ctx.readonly.value" min="0" max="100" @blur="handleHslInput" @keydown.enter="handleHslInput" />
+        <span class="s-color-picker__input-label">A</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.s-color-picker__inputs {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+}
+
+.s-color-picker__format-toggle {
+  flex-shrink: 0;
+}
+
+.s-color-picker__format-btn {
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--s-border);
+  background: var(--s-muted);
+  color: var(--s-muted-foreground);
+  font-weight: 600;
+  font-size: 0.625rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 2.5rem;
+}
+
+.s-color-picker__format-btn:hover {
+  background: var(--s-accent);
+  color: var(--s-foreground);
+}
+
+.s-color-picker__input-group {
+  display: flex;
+  gap: 0.375rem;
+  flex: 1;
+}
+
+.s-color-picker__input-group--hex .s-color-picker__input {
+  flex: 1;
+  font-family: ui-monospace, monospace;
+}
+
+.s-color-picker__input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.s-color-picker__input {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--s-border);
+  background: var(--s-muted);
+  color: var(--s-foreground);
+  text-align: center;
+  transition: all 0.2s ease;
+}
+
+.s-color-picker__input:focus {
+  outline: none;
+  border-color: var(--s-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--s-primary) 15%, transparent);
+}
+
+.s-color-picker__input::-webkit-inner-spin-button,
+.s-color-picker__input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.s-color-picker__input[type='number'] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.s-color-picker__input-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--s-muted-foreground);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+@media (max-width: 400px) {
+  .s-color-picker__input-group--rgb,
+  .s-color-picker__input-group--hsl {
+    flex-wrap: wrap;
+  }
+
+  .s-color-picker__input-field {
+    min-width: calc(50% - 0.25rem);
+    flex: 1 1 calc(50% - 0.25rem);
+  }
+}
+</style>