feat: 🎸 rename widget to mixin

mixtan · Aug 29, 2021 · 4d8f5e3 · 4d8f5e3
1 parent 381d308
commit 4d8f5e3
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 46 deletions.
diff --git a/packages/core/src/internal-plugin/theme.ts b/packages/core/src/internal-plugin/theme.ts
@@ -5,7 +5,7 @@ import { createCtx } from '../context';
 import { MilkdownPlugin } from '../utility';
 
 export const themeToolCtx = createCtx<ThemeTool>({
-    widget: {},
+    mixin: {},
     font: {},
     size: {},
     palette: () => '',

diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
@@ -11,19 +11,19 @@ export type ThemePack = {
     color?: { light?: PR<Color>; dark?: PR<Color> } & PR<Color>;
     font?: PR<Font, string[]>;
     size?: PR<Size>;
-    widget?: (utils: Omit<ThemeTool, 'widget' | 'global'>) => Partial<WidgetFactory>;
+    mixin?: (utils: Omit<ThemeTool, 'mixin' | 'global'>) => Partial<MixinFactory>;
     global?: (utils: Omit<ThemeTool, 'global'>) => void;
 };
 
-export type WidgetFactory = {
+export type MixinFactory = {
     icon: (id: string) => string;
     scrollbar: (direction?: 'x' | 'y') => string;
     shadow: () => string;
     border: (direction?: 'left' | 'right' | 'top' | 'bottom') => string;
 };
 
 export type ThemeTool = {
-    widget: Partial<WidgetFactory>;
+    mixin: Partial<MixinFactory>;
     palette: (key: Color, alpha?: number) => string;
     font: PR<Font>;
     size: PR<Size>;
@@ -47,7 +47,7 @@ export const injectVar = (themePack: ThemePack) => {
 };
 
 export const pack2Tool = (themePack: ThemePack): ThemeTool => {
-    const { font, size = {}, widget, global } = themePack;
+    const { font, size = {}, mixin: _mixin, global } = themePack;
 
     const palette = (key: Color, alpha = 1) => {
         return `rgba(var(--${key}), ${alpha})`;
@@ -64,11 +64,11 @@ export const pack2Tool = (themePack: ThemePack): ThemeTool => {
         size: toMap(size),
         font: toMap(font),
     };
-    const widgetMap = widget?.(_tool) || {};
+    const mixin = _mixin?.(_tool) || {};
 
     const tool = {
         ..._tool,
-        widget: widgetMap,
+        mixin,
     };
 
     global?.(tool);

diff --git a/packages/plugin-collaborative/src/index.ts b/packages/plugin-collaborative/src/index.ts
@@ -9,7 +9,7 @@ import { Doc, XmlFragment } from 'yjs';
 const collaborative = (doc: Doc, awareness: Awareness) => {
     const type = doc.get('prosemirror', XmlFragment);
     return prosePluginFactory((ctx) => {
-        const { size, palette, widget } = ctx.get(themeToolCtx);
+        const { size, palette, mixin } = ctx.get(themeToolCtx);
 
         const css = injectGlobal;
 
@@ -35,8 +35,8 @@ const collaborative = (doc: Doc, awareness: Awareness) => {
                 position: relative;
                 margin-left: -${size.lineWidth};
                 margin-right: -${size.lineWidth};
-                ${widget.border?.('left')};
-                ${widget.border?.('right')};
+                ${mixin.border?.('left')};
+                ${mixin.border?.('right')};
                 word-break: normal;
                 pointer-events: none;
             }

diff --git a/packages/plugin-emoji/src/filter/style.ts b/packages/plugin-emoji/src/filter/style.ts
@@ -2,17 +2,17 @@
 import { css } from '@emotion/css';
 import type { ThemeTool } from '@milkdown/core';
 
-export const injectStyle = ({ size, widget, palette, font }: ThemeTool) => {
+export const injectStyle = ({ size, mixin, palette, font }: ThemeTool) => {
     return css`
         position: absolute;
         &.hide {
             display: none;
         }
 
-        ${widget.border?.()};
+        ${mixin.border?.()};
         border-radius: ${size.radius};
         background: ${palette('surface')};
-        ${widget.shadow?.()};
+        ${mixin.shadow?.()};
 
         .milkdown-emoji-filter_item {
             display: flex;

diff --git a/packages/plugin-slash/src/style.ts b/packages/plugin-slash/src/style.ts
@@ -39,23 +39,23 @@ const itemStyle = ({ font, palette }: ThemeTool) => {
 };
 
 export const injectStyle = (themeTool: ThemeTool) => {
-    const { widget, size, palette } = themeTool;
+    const { mixin, size, palette } = themeTool;
     const style = css`
         width: 20.5rem;
         max-height: 20.5rem;
         overflow-y: auto;
-        ${widget.border?.()};
+        ${mixin.border?.()};
         border-radius: ${size.radius};
         position: absolute;
         background: ${palette('surface')};
 
-        ${widget.shadow?.()};
+        ${mixin.shadow?.()};
 
         &.hide {
             display: none;
         }
 
-        ${widget.scrollbar?.()};
+        ${mixin.scrollbar?.()};
 
         ${itemStyle(themeTool)}
     `;

diff --git a/packages/plugin-table/src/nodes/style.ts b/packages/plugin-table/src/nodes/style.ts
@@ -49,14 +49,14 @@ const proseTableStyle = css`
 
 export const injectStyle = (utils: Utils) => {
     const css = injectGlobal;
-    return utils.getStyle(({ size, palette, widget }) => {
+    return utils.getStyle(({ size, palette, mixin }) => {
         css`
             ${proseTableStyle}
 
             .tableWrapper {
                 margin: 0 !important;
 
-                ${widget.scrollbar?.('x')};
+                ${mixin.scrollbar?.('x')};
 
                 width: 100%;
 
@@ -72,7 +72,7 @@ export const injectStyle = (utils: Utils) => {
                         font-size: 1rem;
                     }
                     tr {
-                        ${widget.border?.('bottom')};
+                        ${mixin.border?.('bottom')};
                     }
 
                     th {
@@ -83,7 +83,7 @@ export const injectStyle = (utils: Utils) => {
                     th,
                     td {
                         min-width: 100px;
-                        ${widget.border?.()};
+                        ${mixin.border?.()};
                         text-align: left;
                         position: relative;
                         line-height: 3rem;
@@ -156,7 +156,7 @@ export const injectStyle = (utils: Utils) => {
                         height: 1rem;
 
                         &::after {
-                            ${widget.icon?.('select_all')};
+                            ${mixin.icon?.('select_all')};
                             color: ${palette('solid', 0.87)};
                             font-size: inherit;
                         }

diff --git a/packages/plugin-table/src/operator-plugin/style.ts b/packages/plugin-table/src/operator-plugin/style.ts
@@ -2,7 +2,7 @@
 import { css } from '@emotion/css';
 import { ThemeTool } from '@milkdown/core';
 
-export const injectStyle = ({ size, widget, palette }: ThemeTool) => css`
+export const injectStyle = ({ size, mixin, palette }: ThemeTool) => css`
     display: inline-flex;
     cursor: pointer;
 
@@ -12,9 +12,9 @@ export const injectStyle = ({ size, widget, palette }: ThemeTool) => css`
 
     border-radius: ${size.radius};
 
-    ${widget.border?.()};
+    ${mixin.border?.()};
 
-    ${widget.shadow?.()};
+    ${mixin.shadow?.()};
 
     overflow: hidden;
     background: ${palette('surface')};

diff --git a/packages/plugin-tooltip/src/button-manager/style.ts b/packages/plugin-tooltip/src/button-manager/style.ts
@@ -3,16 +3,16 @@ import { css } from '@emotion/css';
 import { ThemeTool } from '@milkdown/core';
 
 export const injectStyle = (themeTool: ThemeTool) => {
-    const { palette, widget, size } = themeTool;
+    const { palette, mixin, size } = themeTool;
     return css`
         display: inline-flex;
         cursor: pointer;
         justify-content: space-evenly;
         position: absolute;
         border-radius: ${size.radius};
 
-        ${widget.border?.()};
-        ${widget.shadow?.()};
+        ${mixin.border?.()};
+        ${mixin.shadow?.()};
 
         overflow: hidden;
         background: ${palette('surface')};

diff --git a/packages/plugin-tooltip/src/input-manager/style.ts b/packages/plugin-tooltip/src/input-manager/style.ts
@@ -3,12 +3,11 @@ import { css } from '@emotion/css';
 import { ThemeTool } from '@milkdown/core';
 
 export const injectStyle = (themeTool: ThemeTool) => {
-    const { palette, widget, size } = themeTool;
+    const { palette, mixin, size } = themeTool;
 
     return css`
-        ${widget.border?.()};
-
-        ${widget.shadow?.()};
+        ${mixin.border?.()};
+        ${mixin.shadow?.()};
 
         display: inline-flex;
         justify-content: space-between;

diff --git a/packages/preset-commonmark/src/node/code-fence.ts b/packages/preset-commonmark/src/node/code-fence.ts
@@ -34,8 +34,8 @@ export const TurnIntoCodeFence = createCmdKey();
 
 const id = 'fence';
 export const codeFence = createNode<Keys, { languageList?: string[] }>((options, utils) => {
-    const style = utils.getStyle(({ palette, widget, size, font }) => {
-        const { shadow, icon, scrollbar, border } = widget;
+    const style = utils.getStyle(({ palette, mixin, size, font }) => {
+        const { shadow, icon, scrollbar, border } = mixin;
         const { lineWidth, radius } = size;
         return css`
             background-color: ${palette('background')};

diff --git a/packages/preset-commonmark/src/node/image.ts b/packages/preset-commonmark/src/node/image.ts
@@ -75,7 +75,7 @@ export const image = createNode((_, utils) => {
                 &.loading {
                     .icon {
                         &::before {
-                            ${themeTool.widget.icon?.('hourglass_empty')}
+                            ${themeTool.mixin.icon?.('hourglass_empty')}
                         }
                     }
 
@@ -89,7 +89,7 @@ export const image = createNode((_, utils) => {
                 &.empty {
                     .icon {
                         &::before {
-                            ${themeTool.widget.icon?.('image')}
+                            ${themeTool.mixin.icon?.('image')}
                         }
                     }
                     .placeholder {
@@ -102,7 +102,7 @@ export const image = createNode((_, utils) => {
                 &.failed {
                     .icon {
                         &::before {
-                            ${themeTool.widget.icon?.('broken_image')}
+                            ${themeTool.mixin.icon?.('broken_image')}
                         }
                     }
 

diff --git a/packages/preset-gfm/src/task-list-item.ts b/packages/preset-gfm/src/task-list-item.ts
@@ -18,7 +18,7 @@ export const TurnIntoTaskList = createCmdKey();
 export const taskListItem = createNode<Keys>((options, utils) => {
     const id = 'task_list_item';
     const style = utils.getStyle(
-        ({ palette, widget, size }) =>
+        ({ palette, mixin, size }) =>
             css`
                 list-style-type: none;
                 position: relative;
@@ -53,13 +53,13 @@ export const taskListItem = createNode<Keys>((options, utils) => {
                 }
                 &[data-checked='true'] {
                     label:before {
-                        ${widget.icon?.('check_box')};
+                        ${mixin.icon?.('check_box')};
                         color: ${palette('primary')};
                     }
                 }
                 &[data-checked='false'] {
                     label:before {
-                        ${widget.icon?.('check_box_outline_blank')};
+                        ${mixin.icon?.('check_box_outline_blank')};
                         color: ${palette('solid', 0.87)};
                     }
                 }

diff --git a/packages/theme-nord/src/index.ts b/packages/theme-nord/src/index.ts
@@ -3,9 +3,9 @@ import { injectGlobal } from '@emotion/css';
 import { themeFactory } from '@milkdown/core';
 
 import { font, fontCode } from './font';
+import { mixin } from './mixin';
 import { color } from './nord';
 import { view } from './view';
-import { widget } from './widget';
 
 export const nord = themeFactory({
     font: {
@@ -17,8 +17,8 @@ export const nord = themeFactory({
         lineWidth: '1px',
     },
     color,
-    widget,
-    global: ({ palette, font, widget, size }) => {
+    mixin: mixin,
+    global: ({ palette, font, mixin, size }) => {
         const css = injectGlobal;
         css`
             ${view};
@@ -30,7 +30,7 @@ export const nord = themeFactory({
                 font-family: ${font.font};
                 margin-left: auto;
                 margin-right: auto;
-                ${widget.shadow?.()};
+                ${mixin.shadow?.()};
                 padding: 3.125rem 1.25rem;
                 box-sizing: border-box;
 
@@ -50,7 +50,7 @@ export const nord = themeFactory({
                 }
 
                 li.ProseMirror-selectednode::after {
-                    ${widget.border?.()}
+                    ${mixin.border?.()};
                 }
 
                 @media only screen and (min-width: 72rem) {

diff --git a/packages/theme-nord/src/widget.ts → packages/theme-nord/src/mixin.ts b/packages/theme-nord/src/widget.ts → packages/theme-nord/src/mixin.ts
@@ -2,7 +2,7 @@
 import { css } from '@emotion/css';
 import { ThemePack } from '@milkdown/design-system';
 
-export const widget: ThemePack['widget'] = ({ palette, size }) => ({
+export const mixin: ThemePack['mixin'] = ({ palette, size }) => ({
     icon: (key: string) => css`
         content: '${key}';