@vimeo/iris/color/storyComponents.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../tslib.es6-3ec409b7.js');
var React = require('react');
var styled = require('styled-components');
var polished = require('polished');
var StoryControlBar = require('../StoryControlBar-b3d81e88.js');
var typography_Header_Header = require('../typography/Header/Header.js');
require('./colors.js');
require('../tokens/core.js');
require('../tokens/color/index.js');
require('../tokens/color/background/background.js');
require('../tokens/util/readToken.js');
require('../tokens/util/clamp.js');
require('../tokens/color/format/format.js');
require('../tokens/color/format/primary.js');
require('../tokens/color/format/secondary.js');
require('../tokens/color/format/tertiary.js');
require('../tokens/color/rainbow/rainbow.js');
require('../tokens/color/rainbow/conic/index.js');
require('../tokens/color/rainbow/conic/sm.js');
require('../tokens/color/rainbow/conic/xl.js');
require('../tokens/color/rainbow/linear/index.js');
require('../tokens/color/rainbow/linear/sm.js');
require('../tokens/color/rainbow/linear/xl.js');
require('../tokens/color/livestream/livestream.js');
require('../tokens/color/status/status.js');
require('../tokens/color/status/caution.js');
require('../tokens/color/status/negative.js');
require('../tokens/color/status/positive.js');
require('../tokens/color/stroke/stroke.js');
require('../tokens/color/surface/surface.js');
require('../tokens/color/text/text.js');
require('../tokens/util/round.js');
require('../tokens/color/upsell/upsell.js');
require('../tokens/color/upsell/sm.js');
require('../tokens/color/upsell/xl.js');
require('../tokens/color/upsell/new.js');
require('../tokens/edge/edge.js');
require('../tokens/space/space.js');
require('../tokens/typography/index.js');
require('../tokens/typography/size/size.js');
require('../typography/Header/Header.style.js');
require('../typography/typography.js');
require('../typography/Text/Text.js');
require('../typography/Text/Text.style.js');
require('../typography/Text/EditableText.js');
require('../utils/HOCs/withIris.js');
require('../utils/hooks/useLayoutStyles.js');
require('../utils/DOM/geometry.js');
require('../utils/css.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

function ColorStory(colorName, colorFn) {
    var _a = tslib_es6.__read(React.useState(500), 2), grade = _a[0], gradeSet = _a[1];
    var hex = colorFn(grade);
    var color = { grade: grade, hex: hex, rgb: polished.rgba(hex, 1) };
    var fontColor = polished.readableColor(color.hex);
    return (React__default["default"].createElement(StoryControlBar.Story, { title: "Colors", width: "100%", flex: true },
        React__default["default"].createElement(typography_Header_Header.Header, { size: "3" }, colorName),
        React__default["default"].createElement("div", { style: {
                background: color.hex,
                border: "3px solid ".concat(fontColor),
                borderRadius: '0.2rem',
                padding: '1rem',
                margin: '1rem 0',
                width: '100%',
            } },
            React__default["default"].createElement("h1", { style: { color: fontColor } }, color.grade),
            React__default["default"].createElement("h1", { style: { color: fontColor } }, color.hex),
            React__default["default"].createElement("h1", { style: { color: fontColor } }, color.rgb)),
        React__default["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["default"].createElement(ColorPalette, { color: colorFn })));
}
function ColorPalette(_a) {
    var color = _a.color;
    outputCache(color);
    return (React__default["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["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 = tslib_es6.__rest(_a, ["color", "title"]);
    return (React__default["default"].createElement("div", tslib_es6.__assign({ style: { display: 'inline-block', overflow: 'hidden' } }, props),
        React__default["default"].createElement(ColorSwatchStyled, { color: color }),
        React__default["default"].createElement(typography_Header_Header.Header, { size: "5" }, title)));
}
var ColorSwatchStyled = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__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;

exports.ColorPalette = ColorPalette;
exports.ColorStory = ColorStory;
exports.ColorSwatch = ColorSwatch;