feat(EditorView): add sticky toolbar border variable (#499)

Author: whiteformed

demo/stories/css-variables/CSSVariables.stories.tsx

@@ -20,6 +20,10 @@ export const Story: StoryObj<typeof component> = {
             control: {type: 'text'},
             description: 'Toolbar padding in sticky mode',
         },
+        '--g-md-toolbar-sticky-border': {
+            control: {type: 'text'},
+            description: 'Toolbar border in sticky mode',
+        },
         '--g-md-editor-padding': {
             control: {type: 'text'},
             description: 'Editor contents padding',

docs/how-to-customize-the-editor.md

@@ -9,4 +9,5 @@ You can use CSS variables to make editor contents fit your own needs
 | `--g-md-toolbar-sticky-padding` | Toolbar padding in sticky mode | padding | -4px |
 | `--g-md-toolbar-sticky-inset` | Toolbar inset in sticky mode | inset | -4px |
 | `--g-md-toolbar-sticky-offset` | Toolbar offset in sticky mode | top | 0px |
+| `--g-md-toolbar-sticky-border` | Toolbar border in sticky mode | border | 1px solid var(--g-color-line-generic-solid) |
 | `--g-md-editor-padding` | Editor contents padding | padding | 0px |

src/bundle/sticky/sticky.scss

@@ -23,7 +23,7 @@ $block: 'g-md-editor-sticky';
 
             content: '';
 
-            border: 1px solid var(--g-color-line-generic-solid);
+            border: var(--g-md-toolbar-sticky-border, 1px solid var(--g-color-line-generic-solid));
             border-radius: 4px;
             background-color: var(--g-color-base-background);
         }