@vimeo/iris
Version:
Vimeo Design System
41 lines (38 loc) • 3.46 kB
JavaScript
import { a as __makeTemplateObject, c as __assign, b as __rest } from '../../../tslib.es6-7f0e734f.js';
import React__default from 'react';
import styled, { css } from 'styled-components';
import { hsl } from 'polished';
import { SliderStyled } from './Slider.style.esm.js';
import '../../../color/colors.esm.js';
function HueSlider(props) {
return React__default.createElement(Slider, __assign({ kind: "hue", max: "36000", step: "100" }, props));
}
function Slider(_a) {
var dragging = _a.dragging, kind = _a.kind, colorMeta = _a.colorMeta, props = __rest(_a, ["dragging", "kind", "colorMeta"]);
var HEX = colorMeta.HEX, HSL = colorMeta.HSL;
var style = {
display: 'flex',
alignItems: 'center',
marginTop: dragging ? '-6.5rem' : '1.5rem',
padding: '0 1.5rem',
};
return (React__default.createElement("div", { style: style },
React__default.createElement(Dot, { style: { background: HEX }, "aria-label": "color preview", color: HEX }),
React__default.createElement(Wrapper, { kind: kind, HSL: HSL },
React__default.createElement(SliderStyled, __assign({ type: "range", min: "0.01" }, props)))));
}
var Dot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 50%;\n width: 2rem;\n height: 2rem;\n min-width: 2rem;\n min-height: 2rem;\n margin: 0 1rem 0 0;\n display: inline-flex;\n"], ["\n border-radius: 50%;\n width: 2rem;\n height: 2rem;\n min-width: 2rem;\n min-height: 2rem;\n margin: 0 1rem 0 0;\n display: inline-flex;\n"])));
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 1.9rem;\n width: calc(100% - 1.5rem);\n border-radius: 0.25rem;\n margin: 0;\n position: relative;\n display: inline-flex;\n ", ";\n"], ["\n height: 1.9rem;\n width: calc(100% - 1.5rem);\n border-radius: 0.25rem;\n margin: 0;\n position: relative;\n display: inline-flex;\n ", ";\n"])), sliderBackground);
function sliderBackground(_a) {
var kind = _a.kind, HSL = _a.HSL;
switch (kind) {
case 'hue':
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: linear-gradient(\n to right,\n #f00 0%,\n #ff0 17%,\n #0f0 33%,\n #0ff 50%,\n #00f 67%,\n #f0f 83%,\n #f00 100%\n );\n "], ["\n background: linear-gradient(\n to right,\n #f00 0%,\n #ff0 17%,\n #0f0 33%,\n #0ff 50%,\n #00f 67%,\n #f0f 83%,\n #f00 100%\n );\n "])));
case 'sat':
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: linear-gradient(\n to right,\n ", " 0%,\n ", " 100%\n );\n "], ["\n background: linear-gradient(\n to right,\n ", " 0%,\n ", " 100%\n );\n "])), hsl(HSL.hue, 0, 0.5), hsl(HSL.hue, 1, 0.5));
case 'lit':
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: linear-gradient(to right, #000 0%, #fff 100%);\n "], ["\n background: linear-gradient(to right, #000 0%, #fff 100%);\n "])));
}
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
export { Dot, HueSlider, Slider };