@react-theming/storybook-addon/dist/manager/components/ThemeBrowser.styled.js

Develop themes and themable components with Emotion, Styled Components, Material-UI and your custom solution

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ButtonsEditor = exports.SelectedCard = exports.Copy = exports.ThemeHolder = exports.Container = void 0;

var _theming = require("@storybook/theming");

var _addonDevkit = require("@storybook/addon-devkit");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Container = (0, _theming.styled)(_addonDevkit.Block)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-left: 1px solid gray;\n  border-right: 1px solid gray;\n  display: flex;\n  flex-direction: column;\n  height: auto;\n  label: Container;\n"])));
exports.Container = Container;

var ThemeHolder = _theming.styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: auto;\n  overflow: auto;\n  flex-grow: 1;\n  label: ThemeHolder;\n"])));

exports.ThemeHolder = ThemeHolder;
var copyIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTE2IDFINGMtMS4xIDAtMiAuOS0yIDJ2MTRoMlYzaDEyVjF6bTMgNEg4Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDExYzEuMSAwIDItLjkgMi0yVjdjMC0xLjEtLjktMi0yLTJ6bTAgMTZIOFY3aDExdjE0eiIvPjwvc3ZnPg=';

var Copy = _theming.styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: unset;\n  border: none;\n  background: url(", ");\n  background-repeat: no-repeat;\n  background-size: contain;\n  width: 35px;\n  height: 20px;\n  cursor: pointer;\n  opacity: 0.6;\n  :hover {\n    opacity: 1;\n  }\n"])), copyIcon);

exports.Copy = Copy;

var SelectedCard = _theming.styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: #f6f9fc;\n  padding: 12px;\n  margin-top: 4px;\n  font-size: 16px;\n"])));

exports.SelectedCard = SelectedCard;

var ButtonsEditor = _theming.styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  button {\n    position: relative;\n    background-color: ", ";\n    border: none;\n    border-radius: 2px;\n    font-size: 11px;\n    font-weight: 800;\n    padding: 1px 8px;\n    margin: 0 0 0 10px;\n    color: ", ";\n    cursor: pointer;\n\n    :hover {\n      opacity: 0.7;\n    }\n  }\n  button.active {\n    :hover {\n      opacity: 1;\n    }\n    ::after {\n      content: '\uD83D\uDFE2';\n      font-size: 4px;\n      position: absolute;\n      top: 1px;\n      left: 1px;\n    }\n  }\n"])), function (_ref) {
  var isDark = _ref.isDark;
  return isDark ? '#525252' : '#cbcbcb';
}, function (_ref2) {
  var isDark = _ref2.isDark;
  return isDark ? '#bcbaba' : '#565454';
});

exports.ButtonsEditor = ButtonsEditor;