@adia-ai/web-components 0.0.1

package/components/color-picker/color-picker.css

@@ -0,0 +1,182 @@
+@scope (color-picker-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --color-picker-gap:              var(--a-space-2);
+    --color-picker-area-height:      10rem;
+    --color-picker-area-radius:      var(--a-radius-md);
+    --color-picker-track-height:     0.75rem;
+    --color-picker-track-radius:     var(--a-radius-full);
+    --color-picker-thumb-size:       1.125rem;
+    --color-picker-thumb-border:     2px solid var(--a-chrome-border);
+    --color-picker-thumb-shadow:     0 0 0 1px var(--a-chrome-ring-subtle), 0 2px 4px var(--a-chrome-shadow-soft);
+    --color-picker-font:             var(--a-font-family-code);
+    --color-picker-font-size:        var(--a-ui-sm);
+    --color-picker-fg:               var(--a-fg);
+    --color-picker-label-fg:         var(--a-fg-muted);
+    --color-picker-border:           var(--a-border-subtle);
+    --color-picker-output-bg:        var(--a-bg-muted);
+    --color-picker-output-radius:    var(--a-radius-sm);
+    --color-picker-fg-disabled:      var(--a-ui-text-disabled);
+
+    /* ── Spacing ── */
+    --color-picker-gap-sm:           var(--a-space-1);
+    --color-picker-pad-sm:           var(--a-space-2);
+
+    /* ── Interactive ── */
+    --color-picker-focus-color:      var(--a-accent);
+    --color-picker-disabled-border:  var(--a-border-subtle);
+
+    /* ── Transitions ── */
+    --color-picker-duration:         var(--a-duration-fast);
+    --color-picker-easing:           var(--a-easing);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--color-picker-gap);
+    width: 100%;
+  }
+
+  /* ═══════ 2D Color Area ═══════ */
+
+  [data-area] {
+    position: relative;
+    width: 100%;
+    height: var(--color-picker-area-height);
+    border-radius: var(--color-picker-area-radius);
+    border: 1px solid var(--color-picker-border);
+    overflow: hidden;
+    cursor: crosshair;
+    touch-action: none;
+  }
+
+  [data-area]:focus-visible {
+    outline: 2px solid var(--color-picker-focus-color);
+    outline-offset: 2px;
+  }
+
+  [data-area] canvas {
+    image-rendering: auto;
+  }
+
+  [data-area-thumb] {
+    position: absolute;
+    width: var(--color-picker-thumb-size);
+    height: var(--color-picker-thumb-size);
+    border-radius: 50%;
+    border: var(--color-picker-thumb-border);
+    box-shadow: var(--color-picker-thumb-shadow);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  /* ═══════ Slider Rows (H / C / L) ═══════ */
+
+  [data-sliders] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--color-picker-gap-sm);
+  }
+
+  /* ═══════ Hue Track ═══════ */
+
+  [data-hue-track] {
+    position: relative;
+    width: 100%;
+    height: var(--color-picker-track-height);
+    border-radius: var(--color-picker-track-radius);
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  [data-hue-track]:focus-visible {
+    outline: 2px solid var(--color-picker-focus-color);
+    outline-offset: 2px;
+  }
+
+  [data-hue-thumb] {
+    position: absolute;
+    top: 50%;
+    width: var(--color-picker-thumb-size);
+    height: var(--color-picker-thumb-size);
+    border-radius: 50%;
+    border: var(--color-picker-thumb-border);
+    box-shadow: var(--color-picker-thumb-shadow);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  /* ═══════ Output Values ═══════ */
+
+  [data-output] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--color-picker-gap-sm);
+  }
+
+  [data-output-group] {
+    display: flex;
+    align-items: center;
+    gap: var(--color-picker-gap-sm);
+    padding: var(--color-picker-gap-sm) var(--color-picker-pad-sm);
+    background: var(--color-picker-output-bg);
+    border-radius: var(--color-picker-output-radius);
+  }
+
+  [data-output-value] {
+    font-family: var(--color-picker-font);
+    font-size: var(--color-picker-font-size);
+    color: var(--color-picker-fg);
+    user-select: all;
+    -webkit-user-select: all;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Copy button */
+  [data-copy] {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--color-picker-label-fg);
+    transition: color var(--color-picker-duration) var(--color-picker-easing);
+  }
+
+  [data-copy]:hover {
+    color: var(--color-picker-fg);
+  }
+
+  [data-copy] icon-ui {
+    --a-icon-size: var(--color-picker-font-size);
+  }
+
+  /* ═══════ Disabled ═══════ */
+
+  :scope[disabled] {
+    pointer-events: none;
+    color: var(--color-picker-fg-disabled);
+  }
+  :scope[disabled] [data-area],
+  :scope[disabled] [data-hue-track] {
+    filter: grayscale(1);
+    cursor: not-allowed;
+  }
+  :scope[disabled] slider-ui {
+    --slider-fill-bg: var(--color-picker-disabled-border);
+    --slider-thumb-bg: var(--color-picker-disabled-border);
+  }
+  :scope[disabled] [data-output-value] {
+    color: var(--color-picker-fg-disabled);
+  }
+}