antd-color-editor/es/styles/index.js

An open-source color editor for designing color system

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { DraggablePanel } from '@ant-design/pro-editor';
import styled from 'styled-components';
export var EditorView = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  overflow: hidden;\n  display: flex;\n  align-items: stretch;\n\n  height: 100vh;\n"])));
export var PanelView = styled(DraggablePanel)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n\n  label > svg {\n    stroke: ", ";\n  }\n\n  .studio-collapse-title {\n    margin: 0 8px;\n    font-size: 10px;\n  }\n\n  .ant-collapse-content-box,\n  .studio-collapse-title {\n    > div {\n      background: transparent !important;\n    }\n\n    .studio-collapse-title {\n      margin-top: 4px;\n      background: ", " !important;\n      border-radius: 4px !important;\n\n      > div > div > div > div {\n        border: none !important;\n      }\n    }\n\n    .studio-divider {\n      border-color: ", " !important;\n    }\n  }\n\n  div[class^='leva'] {\n    --leva-sizes-controlWidth: 66%;\n    --leva-colors-elevation1: ", ";\n    --leva-colors-elevation2: transparent;\n    --leva-colors-elevation3: ", ";\n    --leva-colors-accent1: ", ";\n    --leva-colors-accent2: ", ";\n    --leva-colors-accent3: ", ";\n    --leva-colors-highlight1: ", ";\n    --leva-colors-highlight2: ", ";\n    --leva-colors-highlight3: ", ";\n    --leva-colors-vivid1: ", ";\n    --leva-shadows-level1: unset;\n    --leva-shadows-level2: unset;\n  }\n\n  .ant-tabs-nav-list {\n    padding: 1px 24px 2px;\n  }\n\n  .ant-tabs-tab-btn {\n    font-size: 12px;\n  }\n\n  .ant-collapse-header {\n    padding: 12px 14px !important;\n    font-size: 10px;\n    font-weight: 700;\n  }\n\n  .ant-tabs-nav {\n    margin-bottom: 0;\n  }\n\n  .ant-collapse-content-box {\n    padding: 0 4px 8px !important;\n  }\n\n  .ant-collapse-item:not(:last-child) {\n    border-bottom: 1px solid ", ";\n    border-radius: 0 !important;\n  }\n\n  .ant-tabs {\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .ant-tabs-content-holder {\n    position: relative;\n    overflow-y: auto !important;\n    height: 100%;\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.colorBgLayout;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colorFillTertiary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colorBorder;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colorFill;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colorFillSecondary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colorPrimary;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.colorPrimaryHover;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.colorPrimaryActive;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.colorTextTertiary;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.colorTextSecondary;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.colorText;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.colorWarning;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.colorBorderSecondary;
});
export var CanvasView = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n  flex: 1;\n  height: 100%;\n"])));
var ContentView = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  width: 100%;\n  height: calc(100% - 46px);\n  padding: 24px;\n"])));
export var ColorView = styled(ContentView)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding-bottom: 48px;\n"])));
export var CodeView = styled(ContentView)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  pre {\n    background: none !important;\n  }\n"])));
export var PanelTitle = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > svg {\n    margin-right: 4px;\n  }\n"])));