@vimeo/iris/color/storyComponents.esm.js

Vimeo Design System

import { a as __makeTemplateObject, _ as __read, b as __rest, c as __assign } from '../tslib.es6-7f0e734f.js';
import React__default, { useState } from 'react';
import styled from 'styled-components';
import { rgba, readableColor } from 'polished';
import { S as Story } from '../StoryControlBar-5144b19a.js';
import { Header } from '../typography/Header/Header.esm.js';
import './colors.esm.js';
import '../tokens/core.esm.js';
import '../tokens/color/index.esm.js';
import '../tokens/color/background/background.esm.js';
import '../tokens/util/readToken.esm.js';
import '../tokens/util/clamp.esm.js';
import '../tokens/color/format/format.esm.js';
import '../tokens/color/format/primary.esm.js';
import '../tokens/color/format/secondary.esm.js';
import '../tokens/color/format/tertiary.esm.js';
import '../tokens/color/rainbow/rainbow.esm.js';
import '../tokens/color/rainbow/conic/index.esm.js';
import '../tokens/color/rainbow/conic/sm.esm.js';
import '../tokens/color/rainbow/conic/xl.esm.js';
import '../tokens/color/rainbow/linear/index.esm.js';
import '../tokens/color/rainbow/linear/sm.esm.js';
import '../tokens/color/rainbow/linear/xl.esm.js';
import '../tokens/color/livestream/livestream.esm.js';
import '../tokens/color/status/status.esm.js';
import '../tokens/color/status/caution.esm.js';
import '../tokens/color/status/negative.esm.js';
import '../tokens/color/status/positive.esm.js';
import '../tokens/color/stroke/stroke.esm.js';
import '../tokens/color/surface/surface.esm.js';
import '../tokens/color/text/text.esm.js';
import '../tokens/util/round.esm.js';
import '../tokens/color/upsell/upsell.esm.js';
import '../tokens/color/upsell/sm.esm.js';
import '../tokens/color/upsell/xl.esm.js';
import '../tokens/color/upsell/new.esm.js';
import '../tokens/edge/edge.esm.js';
import '../tokens/space/space.esm.js';
import '../tokens/typography/index.esm.js';
import '../tokens/typography/size/size.esm.js';
import '../typography/Header/Header.style.esm.js';
import '../typography/typography.esm.js';
import '../typography/Text/Text.esm.js';
import '../typography/Text/Text.style.esm.js';
import '../typography/Text/EditableText.esm.js';
import '../utils/HOCs/withIris.esm.js';
import '../utils/hooks/useLayoutStyles.esm.js';
import '../utils/DOM/geometry.esm.js';
import '../utils/css.esm.js';

function ColorStory(colorName, colorFn) {
    var _a = __read(useState(500), 2), grade = _a[0], gradeSet = _a[1];
    var hex = colorFn(grade);
    var color = { grade: grade, hex: hex, rgb: rgba(hex, 1) };
    var fontColor = readableColor(color.hex);
    return (React__default.createElement(Story, { title: "Colors", width: "100%", flex: true },
        React__default.createElement(Header, { size: "3" }, colorName),
        React__default.createElement("div", { style: {
                background: color.hex,
                border: "3px solid ".concat(fontColor),
                borderRadius: '0.2rem',
                padding: '1rem',
                margin: '1rem 0',
                width: '100%',
            } },
            React__default.createElement("h1", { style: { color: fontColor } }, color.grade),
            React__default.createElement("h1", { style: { color: fontColor } }, color.hex),
            React__default.createElement("h1", { style: { color: fontColor } }, color.rgb)),
        React__default.createElement("input", { type: "range", value: grade, min: "0", max: "1000", step: "10", onChange: function (event) { return gradeSet(parseInt(event.target.value)); }, style: {
                margin: '0 0 2rem',
                width: '100%',
                cursor: 'pointer',
            } }),
        React__default.createElement(ColorPalette, { color: colorFn })));
}
function ColorPalette(_a) {
    var color = _a.color;
    outputCache(color);
    return (React__default.createElement("div", { style: {
            width: '100%',
            padding: '1rem 0 0 0',
            marginBottom: '1rem',
        } }, [0.5, 1, 2, 3, 3.5, 4, 5, 6, 7, 8, 8.5, 9, 9.5].map(function (num, i) {
        return (React__default.createElement(ColorSwatch, { color: color(num * 100), title: num * 100, key: i }));
    })));
}
function outputCache(color) {
    var Cache = {};
    [
        50, 100, 200, 300, 350, 400, 500, 525, 600, 700, 800, 850, 900,
        950,
    ].map(function (grade) { return (Cache["".concat(grade)] = color(grade)); });
    console.log({ Cache: Cache });
}
// const titles = [
//   'pressed',
//   'selected',
//   'base',
//   'focus',
//   'hover',
//   'disabled',
// ];
function ColorSwatch(_a) {
    var color = _a.color, _b = _a.title, title = _b === void 0 ? color : _b, props = __rest(_a, ["color", "title"]);
    return (React__default.createElement("div", __assign({ style: { display: 'inline-block', overflow: 'hidden' } }, props),
        React__default.createElement(ColorSwatchStyled, { color: color }),
        React__default.createElement(Header, { size: "5" }, title)));
}
var ColorSwatchStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: calc(3rem + 1.25vw);\n  height: calc(3rem + 1.25vw);\n  background: ", ";\n  margin-right: 0.125rem;\n  border-radius: 0.25rem;\n"], ["\n  width: calc(3rem + 1.25vw);\n  height: calc(3rem + 1.25vw);\n  background: ", ";\n  margin-right: 0.125rem;\n  border-radius: 0.25rem;\n"])), function (_a) {
    var color = _a.color;
    return color;
});
var templateObject_1;

export { ColorPalette, ColorStory, ColorSwatch };