kitchen-color-studio/es/styles/index.js

an open-source color editor for designing color system

import { DraggablePanel } from '@ant-design/pro-editor';
import styled from 'styled-components';
export var EditorView = styled.div.withConfig({
  displayName: "EditorView",
  componentId: "kitchen-color-studio__sc-1lbj44u-0"
})(["position:relative;overflow:hidden;display:flex;align-items:stretch;height:100vh;"]);
export var PanelView = styled(DraggablePanel).withConfig({
  displayName: "PanelView",
  componentId: "kitchen-color-studio__sc-1lbj44u-1"
})(["position:relative;overflow:hidden;height:100%;label > svg{stroke:", ";}.studio-collapse-title{margin:0 8px;font-size:10px;}.ant-collapse-content-box,.studio-collapse-title{> div{background:transparent !important;}.studio-collapse-title{margin-top:4px;background:", " !important;border-radius:4px !important;> div > div > div > div{border:none !important;}}.studio-divider{border-color:", " !important;}}div[class^='leva']{--leva-sizes-controlWidth:66%;--leva-colors-elevation1:", ";--leva-colors-elevation2:transparent;--leva-colors-elevation3:", ";--leva-colors-accent1:", ";--leva-colors-accent2:", ";--leva-colors-accent3:", ";--leva-colors-highlight1:", ";--leva-colors-highlight2:", ";--leva-colors-highlight3:", ";--leva-colors-vivid1:", ";--leva-shadows-level1:unset;--leva-shadows-level2:unset;}.ant-tabs-nav-list{padding:1px 24px 2px;}.ant-tabs-tab-btn{font-size:12px;}.ant-collapse-header{padding:12px 14px !important;font-size:10px;font-weight:700;}.ant-tabs-nav{margin-bottom:0;}.ant-collapse-content-box{padding:0 4px 8px !important;}.ant-collapse-item:not(:last-child){border-bottom:1px solid ", ";border-radius:0 !important;}.ant-tabs{position:relative;overflow:hidden;height:100%;}.ant-tabs-content-holder{position:relative;overflow-y:auto !important;height:100%;}"], 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.withConfig({
  displayName: "CanvasView",
  componentId: "kitchen-color-studio__sc-1lbj44u-2"
})(["position:relative;overflow:hidden;flex:1;height:100%;"]);
var ContentView = styled.div.withConfig({
  displayName: "ContentView",
  componentId: "kitchen-color-studio__sc-1lbj44u-3"
})(["position:relative;overflow-x:hidden;overflow-y:auto;width:100%;height:calc(100% - 46px);padding:24px;"]);
export var ColorView = styled(ContentView).withConfig({
  displayName: "ColorView",
  componentId: "kitchen-color-studio__sc-1lbj44u-4"
})(["padding-bottom:48px;"]);
export var CodeView = styled(ContentView).withConfig({
  displayName: "CodeView",
  componentId: "kitchen-color-studio__sc-1lbj44u-5"
})(["pre{background:none !important;}"]);
export var PanelTitle = styled.div.withConfig({
  displayName: "PanelTitle",
  componentId: "kitchen-color-studio__sc-1lbj44u-6"
})(["display:flex;align-items:center;> svg{margin-right:4px;}"]);