Color picker improvements

dist/css/ueb-style.css

@@ -676,13 +676,46 @@ ueb-color-handler {
 
 .ueb-color-picker-saturation,
 .ueb-color-picker-value {
-  margin: 0 8px;
+  margin: 0 6px;
   width: 30px;
-  background: linear-gradient(to bottom, transparent 10%, #000000 100%), rebeccapurple;
+  background-color: rgb(calc(var(--ueb-color-r) * 255), calc(var(--ueb-color-g) * 255), calc(var(--ueb-color-b) * 255));
+}
+
+.ueb-color-picker-saturation {
+  background-image: linear-gradient(to bottom, transparent 10px, #FFFFFF 100%);
 }
 
 .ueb-color-picker-value {
-  background: linear-gradient(to bottom, transparent 10%, #FFFFFF 100%), rebeccapurple;
+  background-image: linear-gradient(to bottom, transparent 10px, #000000 100%);
+}
+
+.ueb-color-picker-slider {
+  position: relative;
+  padding-bottom: 10px;
+}
+.ueb-color-picker-slider::before, .ueb-color-picker-slider::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+}
+.ueb-color-picker-slider::before {
+  left: -4px;
+  border-left-color: #e0e0e0;
+}
+.ueb-color-picker-slider::after {
+  right: -4px;
+  border-right-color: #e0e0e0;
+}
+
+.ueb-color-picker-saturation .ueb-color-picker-slider {
+  top: calc(100% - var(--ueb-color-s) * 100%);
+}
+
+.ueb-color-picker-value .ueb-color-picker-slider {
+  top: calc(100% - var(--ueb-color-v) * 100%);
 }
 
 /*# sourceMappingURL=ueb-style.css.map */

dist/css/ueb-style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}

dist/css/ueb-style.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}

js/Blueprint.js

@@ -14,7 +14,7 @@ import Utility from "./Utility"
  *     primaryInf: Number,
  *     primarySup: Number,
  *     secondaryInf: Number,
- *     secondarySup: Number
+ *     secondarySup: Number,
  * }} BoundariesInfo
  */
 

js/Utility.js

@@ -244,10 +244,14 @@ export default class Utility {
     }
 
     /**  @param {[Number, Number]} param0 */
-    static getPolarCoordinates([x, y]) {
+    static getPolarCoordinates([x, y], positiveTheta = false) {
+        let theta = Math.atan2(y, x)
+        if (positiveTheta && theta < 0) {
+            theta = 2 * Math.PI + theta
+        }
         return [
             Math.sqrt(x * x + y * y),
-            Math.atan2(y, x),
+            theta,
         ]
     }
 

js/element/ColorHandlerElement.js

@@ -1,6 +1,5 @@
-import LinearColorEntity from "../entity/LinearColorEntity"
 import ColorHandlerTemplate from "../template/ColorHandlerTemplate"
-import IDraggableElement from "./IDraggableElement"
+import IDraggableControlElement from "./IDraggableControlElement"
 
 /** @typedef {import("../template/ColorPickerWindowTemplate").default} ColorPickerWindowTemplate */
 /**
@@ -8,29 +7,12 @@ import IDraggableElement from "./IDraggableElement"
  * @typedef {import("./WindowElement").default<T>} WindowElement
  */
 
-/** @extends {IDraggableElement<Object, ColorHandlerTemplate>} */
-export default class ColorHandlerElement extends IDraggableElement {
-
-    /** @type {WindowElement<ColorPickerWindowTemplate>} */
-    windowElement
+/** @extends {IDraggableControlElement<Object, ColorHandlerTemplate>} */
+export default class ColorHandlerElement extends IDraggableControlElement {
 
     constructor() {
         super({}, new ColorHandlerTemplate())
     }
-
-    connectedCallback() {
-        super.connectedCallback()
-        this.windowElement = this.closest("ueb-window")
-    }
-
-    /** @param {Number[]} param0 */
-    setLocation([x, y]) {
-        super.setLocation(this.template.adjustLocation([x, y]))
-    }
-
-    computeColor() {
-        return new LinearColorEntity()
-    }
 }
 
 customElements.define("ueb-color-handler", ColorHandlerElement)

js/element/ColorSliderElement.js

@@ -0,0 +1,14 @@
+import ColorSliderTemplate from "../template/ColorSliderTemplate"
+import IDraggableControlElement from "./IDraggableControlElement"
+
+/** @typedef {import("../template/IDraggableControlTemplate").default} IDraggableControlTemplate */
+
+/** @extends {IDraggableControlElement<Object, ColorSliderTemplate>} */
+export default class ColorSliderElement extends IDraggableControlElement {
+
+    constructor() {
+        super({}, new ColorSliderTemplate())
+    }
+}
+
+customElements.define("ueb-color-slider", ColorSliderElement)

js/element/IDraggableControlElement.js

@@ -0,0 +1,37 @@
+import IDraggableElement from "./IDraggableElement"
+
+/**
+ * @typedef {import("../element/WindowElement").default} WindowElement
+ * @typedef {import("../entity/IEntity").default} IEntity
+ * @typedef {import("../template/IDraggableControlTemplate").default} IDraggableControlTemplate
+ */
+
+/**
+ * @template {IEntity} T
+ * @template {IDraggableControlTemplate} U
+ * @extends {IDraggableElement<T, U>}
+ */
+export default class IDraggableControlElement extends IDraggableElement {
+
+    /** @type {WindowElement} */
+    windowElement
+
+    /**
+     * @param {T} entity
+     * @param {U} template
+     */
+    constructor(entity, template) {
+        super(entity, template)
+    }
+
+    connectedCallback() {
+        super.connectedCallback()
+        this.windowElement = this.closest("ueb-window")
+    }
+
+    /** @param {Number[]} param0 */
+    setLocation([x, y]) {
+        super.setLocation(this.template.adjustLocation([x, y]))
+    }
+
+}

js/element/IDraggableElement.js

@@ -28,9 +28,12 @@ export default class IDraggableElement extends IElement {
     static dragEventName = Configuration.dragEventName
     static dragGeneralEventName = Configuration.dragGeneralEventName
 
-    constructor(...args) {
-        // @ts-expect-error
-        super(...args)
+    /**
+     * @param {T} entity
+     * @param {U} template
+     */
+    constructor(entity, template) {
+        super(entity, template)
         this.locationX = 0
         this.locationY = 0
     }

js/element/IElement.js

@@ -91,7 +91,7 @@ export default class IElement extends LitElement {
         this.template.inputSetup()
     }
 
-    /** @param {Map<String, String>} */
+    /** @param {Map<String, String>} changedProperties */
     updated(changedProperties) {
         super.updated(changedProperties)
         this.template.updated(changedProperties)

js/entity/LinearColorEntity.js

@@ -11,22 +11,27 @@ export default class LinearColorEntity extends IEntity {
         A: new RealUnitEntity(1),
     }
 
-    static fromWheelLocation([x, y], radius) {
+    static fromWheelLocation([x, y], radius, v, a) {
         x -= radius
         y -= radius
-        const [r, theta] = Utility.getPolarCoordinates([x, y])
-        return LinearColorEntity.fromHSV([-theta, r])
+        const [r, theta] = Utility.getPolarCoordinates([x, y], true)
+        return LinearColorEntity.fromHSVA([
+            1 - theta / (2 * Math.PI),
+            r / radius,
+            v,
+            a,
+        ])
     }
 
     /** @param {Number[]} param0 */
-    static fromHSV([h, s, v, a = 1]) {
+    static fromHSVA([h, s, v, a = 1]) {
         const i = Math.floor(h * 6)
         const f = h * 6 - i
         const p = v * (1 - s)
         const q = v * (1 - f * s)
         const t = v * (1 - (1 - f) * s)
         const values = [v, q, p, p, t, v]
-        const [r, g, b] = [values[i % 6], values[(i + 4) % 6], values[(i + 2) % 6]]
+        const [r, g, b] = [values[i % 6], values[(i + 2) % 6], values[(i + 4) % 6]]
         return new LinearColorEntity({
             R: r,
             G: g,
@@ -44,33 +49,38 @@ export default class LinearColorEntity extends IEntity {
     }
 
     toRGBA() {
-        return [this.R.value * 255, this.G.value * 255, this.B.value * 255, this.A.value * 255]
+        return [
+            Math.round(this.R.value * 255),
+            Math.round(this.G.value * 255),
+            Math.round(this.B.value * 255),
+            Math.round(this.A.value * 255),
+        ]
     }
 
-    toHSV() {
-        const [r, g, b, a] = this.toRGBA()
+    toHSVA() {
+        const [r, g, b, a] = [this.R.value, this.G.value, this.B.value, this.A.value]
         const max = Math.max(r, g, b)
         const min = Math.min(r, g, b)
         const d = max - min
         let h
         const s = (max == 0 ? 0 : d / max)
-        const v = max / 255
+        const v = max
         switch (max) {
             case min:
                 h = 0
                 break
             case r:
-                h = (g - b) + d * (g < b ? 6 : 0)
+                h = (g - b) / d + (g < b ? 6 : 0)
                 break
             case g:
-                h = (b - r) + d * 2
+                h = (b - r) / d + 2
                 break
             case b:
-                h = (r - g) + d * 4
+                h = (r - g) / d + 4
                 break
         }
-        h /= 6 * d
-        return [h, s, v]
+        h /= 6
+        return [new RealUnitEntity(h), new RealUnitEntity(s), new RealUnitEntity(v), new RealUnitEntity(a)]
     }
 
     toNumber() {

js/template/BlueprintTemplate.js

@@ -81,7 +81,7 @@ export default class BlueprintTemplate extends ITemplate {
             <div class="ueb-viewport-overlay"></div>
             <div class="ueb-viewport-body">
                 <div class="ueb-grid"
-                    .style="--ueb-additional-x: ${this.element}; --ueb-additional-y: ${this.element.translateY}; --ueb-translate-x: ${this.element.translateX}; --ueb-translate-y: ${this.element.translateY};">
+                    style="--ueb-additional-x: ${this.element}; --ueb-additional-y: ${this.element.translateY}; --ueb-translate-x: ${this.element.translateX}; --ueb-translate-y: ${this.element.translateY};">
                     <div class="ueb-grid-content">
                         <div data-links></div>
                         <div data-nodes></div>

js/template/BoolPinTemplate.js

@@ -15,7 +15,7 @@ export default class BoolPinTemplate extends PinTemplate {
         super.firstUpdated(changedProperties)
         this.#input = this.element.querySelector(".ueb-pin-input")
         let self = this
-        this.onChangeHandler = _ => this.element.setDefaultValue(self.#input.checked ? true : false)
+        this.onChangeHandler = _ => this.element.setDefaultValue(self.#input.checked)
         this.#input.addEventListener("change", this.onChangeHandler)
     }
 
@@ -31,22 +31,10 @@ export default class BoolPinTemplate extends PinTemplate {
         ]
     }
 
-    getInputs() {
-        return [this.#input.checked ? "true" : "false"]
-    }
-
-    /**
-     * @param {Boolean[]} values
-     * @param {String[]} rawValues
-     */
-    setDefaultValue(values = [], rawValues) {
-        this.element.setDefaultValue(values[0])
-    }
-
     renderInput() {
         if (this.element.isInput()) {
             return html`
-                <input type="checkbox" class="ueb-pin-input" checked="${this.element.defaultValue ? "" : nothing}" />
+                <input type="checkbox" class="ueb-pin-input" ?checked="${this.element.defaultValue ? "" : nothing}" />
             `
         }
         return super.renderInput()

js/template/ColorHandlerTemplate.js

@@ -1,32 +1,10 @@
-import IDraggableTemplate from "./IDraggableTemplate"
-import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
+import IDraggableControlTemplate from "./IDraggableControlTemplate"
 import Utility from "../Utility"
 
 /** @typedef {import("../element/ColorHandlerElement").default} ColorHandlerElement */
 
-/** @extends {IDraggableTemplate<ColorHandlerElement>} */
-export default class ColorHandlerTemplate extends IDraggableTemplate {
-
-    #locationChangeCallback
-
-    connectedCallback() {
-        super.connectedCallback()
-        this.window = this.element.closest("ueb-window")
-        this.movementSpace = this.element.parentElement
-        const bounding = this.movementSpace.getBoundingClientRect()
-        this.movementSpaceSize = [bounding.width, bounding.height]
-    }
-
-    createDraggableObject() {
-        return new MouseMoveDraggable(this.element, this.element.blueprint, {
-            draggableElement: this.element.parentElement,
-            ignoreTranslateCompensate: true,
-            moveEverywhere: true,
-            movementSpace: this.element.parentElement,
-            repositionOnClick: true,
-            stepSize: 1,
-        })
-    }
+/** @extends {IDraggableControlTemplate<ColorHandlerElement>} */
+export default class ColorHandlerTemplate extends IDraggableControlTemplate {
 
     /**  @param {[Number, Number]} param0 */
     adjustLocation([x, y]) {
@@ -37,11 +15,12 @@ export default class ColorHandlerTemplate extends IDraggableTemplate {
         r = Math.min(r, radius), [x, y] = Utility.getCartesianCoordinates([r, theta])
         x = Math.round(x + radius)
         y = Math.round(-y + radius)
-        this.#locationChangeCallback?.([x, y])
+        const hsva = this.getColor().toHSVA()
+        this.locationChangeCallback?.([x, y], radius, hsva[2], hsva[3])
         return [x, y]
     }
 
-    setLocationChangeCallback(callback) {
-        this.#locationChangeCallback = callback
+    getColor() {
+        return this.element.windowElement.template.color
     }
 }

js/template/ColorPickerWindowTemplate.js

@@ -1,16 +1,14 @@
 import { html } from "lit"
+import { styleMap } from "lit/directives/style-map.js"
 import ColorHandlerElement from "../element/ColorHandlerElement"
-import Configuration from "../Configuration"
+import ColorSliderElement from "../element/ColorSliderElement"
 import LinearColorEntity from "../entity/LinearColorEntity"
-import Utility from "../Utility"
 import WindowTemplate from "./WindowTemplate"
 
 /** @typedef {import("../element/WindowElement").default} WindowElement */
 
 export default class ColorPickerWindowTemplate extends WindowTemplate {
 
-    static windowName = html`Color Picker`
-
     /** @type {LinearColorEntity} */
     #color
     get color() {
@@ -34,26 +32,38 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
     firstUpdated(changedProperties) {
         const wheelHandler = new ColorHandlerElement()
         const spectrumHandler = new ColorHandlerElement()
-        wheelHandler.template.setLocationChangeCallback(([x, y]) => {
-            const [r, theta] = Utility.getPolarCoordinates([x, y])
-            this.color = LinearColorEntity.fromWheelLocation(x, y)
-        })
-        this.element.querySelector(".ueb-color-picker-wheel").appendChild(new ColorHandlerElement())
-
+        const saturationSlider = new ColorSliderElement()
+        wheelHandler.template.locationChangeCallback = ([x, y], radius, v, a) => {
+            this.color = LinearColorEntity.fromWheelLocation([x, y], radius, v, a)
+        }
+        this.element.querySelector(".ueb-color-picker-wheel").appendChild(wheelHandler)
     }
 
     renderContent() {
+        const [h, s, v] = this.color.toHSVA()
+        const style = {
+            "--ueb-color-r": this.color.R.toString(),
+            "--ueb-color-g": this.color.G.toString(),
+            "--ueb-color-b": this.color.B.toString(),
+            "--ueb-color-a": this.color.A.toString(),
+            "--ueb-color-h": h.toString(),
+            "--ueb-color-s": s.toString(),
+            "--ueb-color-v": v.toString(),
+        }
         return html`
-            <div class="ueb-color-picker"
-                .style="--ueb-color-r: ${this.color.R}; --ueb-color-g: ${this.color.G}; --ueb-color-b: ${this.color.B}; --ueb-color-a: ${this.color.A};">
+            <div class="ueb-color-picker" style=${styleMap(style)}>
                 <div class="ueb-color-picker-toolbar">
                     <div class="ueb-color-picker-theme"></div>
                     <div class="ueb-color-picker-srgb"></div>
                 </div>
                 <div class="ueb-color-picker-main">
                     <div class="ueb-color-picker-wheel"></div>
-                    <div class="ueb-color-picker-saturation"></div>
-                    <div class="ueb-color-picker-value"></div>
+                    <div class="ueb-color-picker-saturation">
+                        <div class="ueb-color-picker-slider"></div>
+                    </div>
+                    <div class="ueb-color-picker-value">
+                        <div class="ueb-color-picker-slider"></div>
+                    </div>
                     <div class="ueb-color-picker-preview">
                         <div class="ueb-color-picker-preview-old"></div>
                         <div class="ueb-color-picker-preview-new"></div>
@@ -77,7 +87,7 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
         `
     }
 
-    cleanup() {
-        this.element.blueprint.removeEventListener(Configuration.colorWindowEventName, this.colorWindowHandler)
+    renderWindowName() {
+        return html`Color Picker`
     }
 }

js/template/ColorSliderTemplate.js

@@ -0,0 +1,21 @@
+import IDraggableControlTemplate from "./IDraggableControlTemplate"
+import Utility from "../Utility"
+
+/** @typedef {import("../element/ColorHandlerElement").default} ColorHandlerElement */
+
+/** @extends {IDraggableControlTemplate<ColorHandlerElement>} */
+export default class ColorSliderTemplate extends IDraggableControlTemplate {
+
+    /**  @param {[Number, Number]} param0 */
+    adjustLocation([x, y]) {
+        x = 0
+        y = Utility.clamp(y, 0, this.movementSpaceSize[1])
+        const hsva = this.getColor().toHSVA()
+        this.locationChangeCallback?.([x, y])
+        return [x, y]
+    }
+
+    getColor() {
+        return this.element.windowElement.template.color
+    }
+}

js/template/IDraggableControlTemplate.js

@@ -0,0 +1,48 @@
+import IDraggableTemplate from "./IDraggableTemplate"
+import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
+
+/**
+ * @typedef {import("../element/IDraggableElement").default} IDraggableElement
+ */
+
+/**
+ * @template {IDraggableElement} T
+ * @extends {IDraggableTemplate<T>}
+ */
+export default class IDraggableControlTemplate extends IDraggableTemplate {
+
+    #locationChangeCallback = ([x, y], ...args) => [x, y]
+    get locationChangeCallback() {
+        return this.#locationChangeCallback
+    }
+    set locationChangeCallback(callback) {
+        this.#locationChangeCallback = callback
+    }
+
+    movementSpace
+    movementSpaceSize = [0, 0]
+
+    connectedCallback() {
+        super.connectedCallback()
+        this.movementSpace = this.element.parentElement
+        const bounding = this.movementSpace.getBoundingClientRect()
+        this.movementSpaceSize = [bounding.width, bounding.height]
+    }
+
+    createDraggableObject() {
+        return new MouseMoveDraggable(this.element, this.element.blueprint, {
+            draggableElement: this.movementSpace,
+            ignoreTranslateCompensate: true,
+            moveEverywhere: true,
+            movementSpace: this.movementSpace,
+            repositionOnClick: true,
+            stepSize: 1,
+        })
+    }
+
+    /**  @param {[Number, Number]} param0 */
+    adjustLocation([x, y]) {
+        this.#locationChangeCallback([x, y])
+        return [x, y]
+    }
+}

js/template/LinearColorPinTemplate.js

@@ -31,7 +31,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
                     /** @param {LinearColorEntity} color */
                     setPinColor: color => this.element.setDefaultValue(color),
                 },
-            })
+            }),
         ]
     }
 
@@ -47,7 +47,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
         if (this.element.isInput()) {
             return html`
                 <span class="ueb-pin-input" data-linear-color="${this.element.defaultValue.toString()}"
-                    .style="--ueb-linear-color:rgba(${this.element.defaultValue.toString()})">
+                    style="--ueb-linear-color:rgba(${this.element.defaultValue.toString()})">
                 </span>
             `
         }

js/template/WindowTemplate.js

@@ -7,8 +7,6 @@ import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
 /** @extends {IDraggableTemplate<WindowElement>} */
 export default class WindowTemplate extends IDraggableTemplate {
 
-    static windowName = html`Window`
-
     toggleAdvancedDisplayHandler
 
     getDraggableElement() {
@@ -24,20 +22,11 @@ export default class WindowTemplate extends IDraggableTemplate {
         })
     }
 
-    createInputObjects() {
-        return [
-            ...super.createInputObjects(),
-            this.createDraggableObject(),
-        ]
-    }
-
     render() {
         return html`
             <div class="ueb-window">
                 <div class="ueb-window-top">
-                    <div class="ueb-window-name ueb-ellipsis-nowrap-text">${
-                         // @ts-expect-error
-                         this.constructor.windowName}</div>
+                    <div class="ueb-window-name ueb-ellipsis-nowrap-text">${this.renderWindowName()}</div>
                     <div class="ueb-window-close">
                         <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                             <line x1="2" y1="2" x2="30" y2="30" stroke="currentColor" stroke-width="4" />
@@ -52,6 +41,10 @@ export default class WindowTemplate extends IDraggableTemplate {
         `
     }
 
+    renderWindowName() {
+        return html`Window`
+    }
+
     renderContent() {
         return html``
     }

scss/ueb-window.scss

@@ -73,11 +73,48 @@ ueb-color-handler {
 
 .ueb-color-picker-saturation,
 .ueb-color-picker-value {
-    margin: 0 8px;
+    margin: 0 6px;
     width: 30px;
-    background: linear-gradient(to bottom, transparent 10%, #000000 100%), rebeccapurple;
+    background-color: rgb(calc(var(--ueb-color-r) * 255), calc(var(--ueb-color-g) * 255), calc(var(--ueb-color-b) * 255));
+}
+
+.ueb-color-picker-saturation {
+    background-image: linear-gradient(to bottom, transparent 10px, #FFFFFF 100%);
 }
 
 .ueb-color-picker-value {
-    background: linear-gradient(to bottom, transparent 10%, #FFFFFF 100%), rebeccapurple;
+    background-image: linear-gradient(to bottom, transparent 10px, #000000 100%);
+}
+
+.ueb-color-picker-slider {
+    position: relative;
+    padding-bottom: 10px;
+
+    &::before,
+    &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+    }
+
+    &::before {
+        left: -4px;
+        border-left-color: #e0e0e0;
+    }
+
+    &::after {
+        right: -4px;
+        border-right-color: #e0e0e0;
+    }
+}
+
+.ueb-color-picker-saturation .ueb-color-picker-slider {
+    top: calc(100% - var(--ueb-color-s) * 100%)
+}
+
+.ueb-color-picker-value .ueb-color-picker-slider {
+    top: calc(100% - var(--ueb-color-v) * 100%)
 }