@dxos/react-ui-editor 0.6.8-staging.77f93a3 → 0.6.8-staging.dec6b33

package/src/styles/theme.ts

@@ -22,6 +22,7 @@ export type ThemeStyles = Record<string, StyleSpec>;
  *
  * Main layout:
  * https://codemirror.net/examples/styling
+ * https://codemirror.net/docs/guide (DOM Structure).
  *
  * <div class="cm-editor [cm-focused] [generated classes]">
  *   <div class="cm-scroller">
@@ -51,13 +52,17 @@ export const defaultTheme: ThemeStyles = {
     outline: 'none',
   },
 
-  // Scroller.
-  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
+  /**
+   * Scroller
+   */
   '.cm-scroller': {
     overflowY: 'auto',
   },
 
-  // Content.
+  /**
+   * Content
+   * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
+   */
   '.cm-content': {
     padding: 'unset',
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
@@ -72,6 +77,18 @@ export const defaultTheme: ThemeStyles = {
     color: getToken('extend.semanticColors.base.fg.dark', 'white'),
   },
 
+  /**
+   * Gutters
+   * NOTE: Gutters should have the same top margin as the content.
+   */
+  '.cm-gutters': {
+    background: 'transparent',
+  },
+  '.cm-gutter': {},
+  '.cm-gutterElement': {
+    lineHeight: 1.5,
+  },
+
   //
   // Cursor
   //
@@ -197,46 +214,9 @@ export const defaultTheme: ThemeStyles = {
     opacity: 0.5,
   },
 
-  //
-  // table
-  //
-  '.cm-table *': {
-    fontFamily: `${getToken('fontFamily.mono')} !important`,
-    textDecoration: 'none !important',
-  },
-  '.cm-table-head': {
-    padding: '2px 16px 2px 0px',
-    textAlign: 'left',
-    borderBottom: `1px solid ${getToken('extend.colors.primary.500')}`,
-    color: getToken('extend.colors.neutral.500'),
-  },
-  '.cm-table-cell': {
-    padding: '2px 16px 2px 0px',
-  },
-
-  //
-  // image
-  //
-  '.cm-image': {
-    display: 'block',
-    height: '0',
-  },
-  '.cm-image.cm-loaded-image': {
-    height: 'auto',
-    borderTop: '0.5rem solid transparent',
-    borderBottom: '0.5rem solid transparent',
-  },
-
   // TODO(burdon): Override vars --cm-background.
   //  https://www.npmjs.com/package/codemirror-theme-vars
 
-  /**
-   * Gutters
-   */
-  '.cm-gutters': {
-    background: 'transparent',
-  },
-
   /**
    * Panels
    * TODO(burdon): Needs styling attention (esp. dark mode).
@@ -293,4 +273,36 @@ export const defaultTheme: ThemeStyles = {
       background: getToken('extend.colors.neutral.600'),
     },
   },
+
+  // TODO(burdon): Factor out element specific logic.
+
+  //
+  // table
+  //
+  '.cm-table *': {
+    fontFamily: `${getToken('fontFamily.mono')} !important`,
+    textDecoration: 'none !important',
+  },
+  '.cm-table-head': {
+    padding: '2px 16px 2px 0px',
+    textAlign: 'left',
+    borderBottom: `1px solid ${getToken('extend.colors.primary.500')}`,
+    color: getToken('extend.colors.neutral.500'),
+  },
+  '.cm-table-cell': {
+    padding: '2px 16px 2px 0px',
+  },
+
+  //
+  // image
+  //
+  '.cm-image': {
+    display: 'block',
+    height: '0',
+  },
+  '.cm-image.cm-loaded-image': {
+    height: 'auto',
+    borderTop: '0.5rem solid transparent',
+    borderBottom: '0.5rem solid transparent',
+  },
 };