@ctzhian/tiptap 0.4.0

package/dist/themes/componentStyleOverrides.js

@@ -0,0 +1,431 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { addOpacityToColor } from "../util";
+import { custom } from "./color";
+export default function componentStyleOverrides(color) {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          borderRadius: '10px !important',
+          overflow: 'hidden',
+          minHeight: '36px',
+          height: '36px',
+          padding: '0px !important'
+        },
+        indicator: {
+          borderRadius: '0px !important',
+          overflow: 'hidden',
+          backgroundColor: '#21222D !important'
+        }
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          borderRadius: '0px !important',
+          fontWeight: 'normal',
+          fontSize: '14px !important',
+          lineHeight: '34px',
+          padding: '0 16px !important'
+        }
+      }
+    },
+    MuiButton: {
+      styleOverrides: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        root: function root(_ref) {
+          var ownerState = _ref.ownerState;
+          return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+            height: '36px',
+            fontSize: 14,
+            lineHeight: '36px',
+            paddingLeft: '16px',
+            paddingRight: '16px',
+            boxShadow: 'none',
+            transition: 'all 0.2s ease-in-out',
+            borderRadius: '10px',
+            fontWeight: '400'
+          }, ownerState.variant === 'contained' && {
+            color: color.text.inverse,
+            backgroundColor: color.text.primary
+          }), ownerState.variant === 'text' && {}), ownerState.variant === 'outlined' && {
+            color: color.text.primary,
+            border: "1px solid ".concat(color.text.primary)
+          }), ownerState.disabled === true && {
+            cursor: 'not-allowed !important'
+          }), ownerState.size === 'small' && {
+            height: '32px',
+            lineHeight: '32px'
+          }), {}, {
+            '&:hover': _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+              boxShadow: 'none'
+            }, ownerState.variant === 'contained' && {
+              backgroundColor: addOpacityToColor(color.text.primary, 0.9)
+            }), ownerState.variant === 'text' && {
+              backgroundColor: color.background.paper3
+            }), ownerState.variant === 'outlined' && {
+              backgroundColor: color.background.paper3
+            }), ownerState.color === 'neutral' && {
+              color: color.text.primary
+            })
+          });
+        },
+        startIcon: {
+          marginLeft: 0,
+          marginRight: 8,
+          '>*:nth-of-type(1)': {
+            fontSize: 14
+          }
+        }
+      }
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          borderRadius: '10px',
+          maxWidth: '600px',
+          padding: '8px 16px',
+          backgroundColor: color.text.primary,
+          fontSize: '12px',
+          lineHeight: '20px',
+          color: color.primary.contrastText
+        },
+        arrow: {
+          color: color.text.primary
+        }
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          color: color.error.main
+        }
+      }
+    },
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          '.MuiFormLabel-asterisk': {
+            color: color.error.main
+          }
+        }
+      }
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          marginLeft: '0 !important'
+        }
+      }
+    },
+    MuiTableBody: {
+      styleOverrides: {
+        root: {
+          '.MuiTableRow-root:hover': {
+            '.MuiTableCell-root:not(.cx-table-empty-td)': {
+              backgroundColor: color.table.row.hoverColor,
+              overflowX: 'hidden',
+              '.primary-color': {
+                color: color.primary.main
+              },
+              '.no-title-url': {
+                color: "".concat(color.primary.main, " !important")
+              },
+              '.error-color': {
+                opacity: 1
+              }
+            }
+          }
+        }
+      }
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+          svg: {
+            fontSize: '18px'
+          }
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          background: color.background.paper,
+          lineHeight: 1.5,
+          fontSize: '14px',
+          paddingTop: '16px !important',
+          paddingBottom: '16px !important',
+          paddingLeft: 0,
+          '&:first-of-type': {
+            paddingLeft: '0px'
+          },
+          '&:not(:first-of-type)': {
+            paddingLeft: '0px'
+          },
+          '.MuiCheckbox-root': {
+            color: '#CCCCCC',
+            svg: {
+              fontSize: '16px'
+            },
+            '&.Mui-checked': {
+              color: color.text.primary
+            }
+          }
+        },
+        head: {
+          backgroundColor: color.background.paper3,
+          color: color.table.head.color,
+          fontSize: '12px',
+          paddingTop: '0 !important',
+          paddingBottom: '0 !important',
+          borderSpacing: '12px',
+          zIndex: 100
+        },
+        body: {
+          borderBottom: '1px dashed',
+          borderColor: color.table.cell.borderColor,
+          borderSpacing: '12px'
+        }
+      }
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          borderRadius: '10px',
+          boxShadow: custom.selectPopupBoxShadow
+        }
+      }
+    },
+    MuiMenu: {
+      styleOverrides: {
+        paper: {
+          padding: '4px',
+          borderRadius: '10px',
+          backgroundColor: color.background.paper,
+          boxShadow: custom.selectPopupBoxShadow
+        },
+        list: {
+          paddingTop: '0px !important',
+          paddingBottom: '0px !important'
+        }
+      },
+      defaultProps: {
+        elevation: 0
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          height: '40px',
+          borderRadius: '5px',
+          ':hover': {
+            backgroundColor: color.background.paper3
+          },
+          '&.Mui-selected': {
+            fontWeight: '500',
+            backgroundColor: "".concat(custom.selectedMenuItemBgColor, " !important"),
+            color: color.primary.main
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      defaultProps: {
+        elevation: 1
+      },
+      styleOverrides: {
+        root: function root(_ref2) {
+          var ownerState = _ref2.ownerState;
+          return _objectSpread(_objectSpread(_objectSpread({}, ownerState.elevation === 0 && {
+            backgroundColor: color.background.paper2
+          }), ownerState.elevation === 2 && {
+            backgroundColor: color.background.paper3
+          }), {}, {
+            backgroundImage: 'none'
+          });
+        }
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        root: function root(_ref3) {
+          var ownerState = _ref3.ownerState;
+          return _objectSpread(_objectSpread({
+            height: '24px',
+            lineHeight: '24px',
+            borderRadius: '8px',
+            '.MuiChip-label': {
+              padding: '0 8px 0 4px'
+            }
+          }, ownerState.color === 'default' && {
+            backgroundColor: color.background.chip,
+            borderColor: color.text.disabled,
+            '.Mui-focusVisible': {
+              backgroundColor: color.background.chip
+            }
+          }), ownerState.color === 'error' && {
+            backgroundColor: addOpacityToColor(color.error.main, 0.1)
+          });
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        label: function label(_ref4) {
+          var ownerState = _ref4.ownerState;
+          return _objectSpread({
+            padding: '0 14px',
+            fontSize: '14px',
+            lineHeight: '24px'
+          }, ownerState.color === 'default' && {
+            color: color.text.primary
+          });
+        },
+        deleteIcon: {
+          fontSize: '14px',
+          color: color.text.disabled
+        }
+      }
+    },
+    MuiAppBar: {
+      defaultProps: {
+        elevation: 1
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+          'h2.MuiTypography-root button': {
+            marginRight: '2px'
+          },
+          '.MuiDialogActions-root': {
+            paddingTop: '24px',
+            button: {
+              width: '88px',
+              height: '36px !important'
+            },
+            '.MuiButton-text': {
+              width: 'auto',
+              minWidth: 'auto',
+              color: "".concat(color.text.primary, " !important")
+            }
+          }
+        },
+        container: {
+          height: '100vh',
+          bgcolor: color.text.secondary,
+          backdropFilter: 'blur(5px)'
+        },
+        paper: {
+          pb: 1,
+          border: '1px solid',
+          borderColor: color.divider,
+          borderRadius: '10px',
+          backgroundColor: color.background.paper,
+          textarea: {
+            borderRadius: '8px 8px 0 8px'
+          }
+        }
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          paddingTop: '24px',
+          '> button': {
+            top: '20px'
+          }
+        }
+      }
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          lineHeight: '22px',
+          paddingTop: '1px',
+          paddingBottom: '1px',
+          borderRadius: '10px',
+          boxShadow: 'none'
+        },
+        icon: {
+          padding: '10px 0'
+        },
+        standardInfo: {
+          backgroundColor: addOpacityToColor(color.primary.main, 0.1),
+          color: color.text.primary
+        }
+      }
+    },
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+          paddingRight: '8px'
+        }
+      }
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          label: {
+            color: color.text.secondary
+          },
+          'label.Mui-focused': {
+            color: color.text.primary
+          },
+          '& .MuiInputBase-input::placeholder': {
+            fontSize: '12px'
+          }
+        }
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          borderRadius: '10px !important',
+          backgroundColor: color.background.paper3,
+          '.MuiOutlinedInput-notchedOutline': {
+            borderColor: "".concat(color.background.paper3, " !important"),
+            borderWidth: '1px !important'
+          },
+          '&.Mui-focused': {
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor: "".concat(color.text.primary, " !important"),
+              borderWidth: '1px !important'
+            }
+          },
+          '&:hover': {
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor: "".concat(color.text.primary, " !important"),
+              borderWidth: '1px !important'
+            }
+          },
+          input: {
+            height: '19px',
+            '&.Mui-disabled': {
+              color: "".concat(color.text.secondary, " !important"),
+              WebkitTextFillColor: "".concat(color.text.secondary, " !important")
+            }
+          }
+        }
+      }
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          height: '36px',
+          borderRadius: '10px !important',
+          backgroundColor: color.background.paper3
+        },
+        select: {
+          paddingRight: '0 !important'
+        }
+      }
+    }
+  };
+}

package/dist/themes/custom.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    selectPopupBoxShadow: string;
+    selectedMenuItemBgColor: string;
+};
+export default _default;

package/dist/themes/custom.js

@@ -0,0 +1,4 @@
+export default {
+  selectPopupBoxShadow: '0px 10px 20px 0px rgba(54,59,76,0.2)',
+  selectedMenuItemBgColor: 'rgba(50,72,242,0.1)'
+};

package/dist/themes/dark.d.ts

@@ -0,0 +1,86 @@
+declare const dark: {
+    primary: {
+        main: string;
+        contrastText: string;
+    };
+    secondary: {
+        main: string;
+        lighter: string;
+        light: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    info: {
+        main: string;
+        lighter: string;
+        light: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    success: {
+        main: string;
+        lighter: string;
+        light: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    warning: {
+        main: string;
+        lighter: string;
+        light: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    neutral: {
+        main: string;
+        contrastText: string;
+    };
+    error: {
+        main: string;
+        lighter: string;
+        light: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        auxiliary: string;
+        disabled: string;
+        slave: string;
+        inverse: string;
+        inverseAuxiliary: string;
+        inverseDisabled: string;
+    };
+    divider: string;
+    background: {
+        paper2: string;
+        paper: string;
+        paper3: string;
+        default: string;
+        chip: string;
+        circle: string;
+    };
+    shadows: string;
+    table: {
+        head: {
+            backgroundColor: string;
+            color: string;
+        };
+        row: {
+            hoverColor: string;
+        };
+        cell: {
+            borderColor: string;
+        };
+    };
+    charts: {
+        color: string[];
+    };
+};
+export default dark;

package/dist/themes/dark.js

@@ -0,0 +1,86 @@
+var dark = {
+  primary: {
+    main: '#3248F2',
+    contrastText: '#000'
+  },
+  secondary: {
+    main: '#2196F3',
+    lighter: '#D6E4FF',
+    light: '#84A9FF',
+    dark: '#1939B7',
+    darker: '#091A7A',
+    contrastText: '#fff'
+  },
+  info: {
+    main: '#1890FF',
+    lighter: '#D0F2FF',
+    light: '#74CAFF',
+    dark: '#0C53B7',
+    darker: '#04297A',
+    contrastText: '#fff'
+  },
+  success: {
+    main: '#00DF98',
+    lighter: '#E9FCD4',
+    light: '#AAF27F',
+    dark: '#229A16',
+    darker: '#08660D',
+    contrastText: 'rgba(0,0,0,0.7)'
+  },
+  warning: {
+    main: '#F7B500',
+    lighter: '#FFF7CD',
+    light: '#FFE16A',
+    dark: '#B78103',
+    darker: '#7A4F01',
+    contrastText: 'rgba(0,0,0,0.7)'
+  },
+  neutral: {
+    main: '#1A1A1A',
+    contrastText: 'rgba(255, 255, 255, 0.60)'
+  },
+  error: {
+    main: '#D93940',
+    lighter: '#FFE7D9',
+    light: '#FFA48D',
+    dark: '#B72136',
+    darker: '#7A0C2E',
+    contrastText: '#fff'
+  },
+  text: {
+    primary: '#fff',
+    secondary: 'rgba(255,255,255,0.7)',
+    auxiliary: 'rgba(255,255,255,0.5)',
+    disabled: 'rgba(255,255,255,0.26)',
+    slave: 'rgba(255,255,255,0.05)',
+    inverse: '#000000',
+    inverseAuxiliary: 'rgba(0,0,0,0.5)',
+    inverseDisabled: 'rgba(0,0,0,0.15)'
+  },
+  divider: '#ededed',
+  background: {
+    paper2: '#060608',
+    paper: '#18181b',
+    paper3: '#27272a',
+    default: 'rgba(255,255,255,0.6)',
+    chip: 'rgba(145,147,171,0.16)',
+    circle: '#3B476A'
+  },
+  shadows: 'transparent',
+  table: {
+    head: {
+      backgroundColor: '#484848',
+      color: '#fff'
+    },
+    row: {
+      hoverColor: 'rgba(48, 58, 70, 0.4)'
+    },
+    cell: {
+      borderColor: '#484848'
+    }
+  },
+  charts: {
+    color: ['#7267EF', '#36B37E']
+  }
+};
+export default dark;

package/dist/themes/index.d.ts

@@ -0,0 +1,19 @@
+declare module '@mui/material/styles' {
+    interface Palette {
+        neutral: Palette['primary'];
+    }
+    interface PaletteOptions {
+        neutral: PaletteOptions['primary'];
+    }
+}
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        neutral: true;
+    }
+}
+export declare const theme: <T extends string = "light" | "dark">({ mode, colors, theme: customTheme, }: {
+    mode: T;
+    colors?: Record<T, any> | undefined;
+    theme?: any;
+}) => import("@mui/material/styles").Theme;
+export default theme;

package/dist/themes/index.js

@@ -0,0 +1,37 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { zhCN } from '@mui/material/locale';
+import { createTheme } from '@mui/material/styles';
+import { deepmerge } from '@mui/utils';
+import { dark, light } from "./color";
+import componentStyleOverrides from "./componentStyleOverrides";
+import themePalette from "./palette";
+import shadows from "./shadows";
+import themeTypography from "./typography";
+export var theme = function theme(_ref) {
+  var mode = _ref.mode,
+    colors = _ref.colors,
+    _ref$theme = _ref.theme,
+    customTheme = _ref$theme === void 0 ? {} : _ref$theme;
+  var color = colors ? colors[mode] : mode === 'light' ? light : dark;
+  var themeOptions = {
+    cssVariables: true,
+    shape: {
+      borderRadius: 10
+    },
+    palette: customTheme.palette ? customTheme.palette(color, mode) : themePalette(color, mode),
+    shadows: shadows(color),
+    typography: themeTypography(),
+    components: customTheme.components ? customTheme.components(color) : componentStyleOverrides(color)
+  };
+  var otherOptions = _objectSpread({}, customTheme);
+  if (otherOptions.palette) delete otherOptions.palette;
+  if (otherOptions.components) delete otherOptions.components;
+  var themes = createTheme(deepmerge(themeOptions, otherOptions), zhCN);
+  return themes;
+};
+export default theme;