feat(EditorView): change default selection variable names

gravity-ui · Dec 10, 2024 · 9234cf7 · 9234cf7
1 parent 0ae5e41
commit 9234cf7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/demo/stories/css-variables/CSSVariables.stories.tsx b/demo/stories/css-variables/CSSVariables.stories.tsx
@@ -28,27 +28,27 @@ export const Story: StoryObj<typeof component> = {
             control: {type: 'text'},
             description: 'Editor contents padding',
         },
-        '--g-selection-bg-color': {
+        '--g-md-wysiwyg-selection-bg-color': {
             control: {type: 'text'},
             description: 'Editor selection bg color',
         },
-        '--g-selection-border': {
+        '--g-md-wysiwyg-selection-border': {
             control: {type: 'text'},
             description: 'Editor selection border',
         },
-        '--g-selection-border-radius': {
+        '--g-md-wysiwyg-selection-border-radius': {
             control: {type: 'text'},
             description: 'Editor selection border radius',
         },
-        '--g-selection-outline': {
+        '--g-md-wysiwyg-selection-outline': {
             control: {type: 'text'},
             description: 'Editor selection outline',
         },
-        '--g-selection-background': {
+        '--g-md-wysiwyg-selection-background': {
             control: {type: 'text'},
             description: 'Editor selection background',
         },
-        '--g-selection-box-shadow': {
+        '--g-md-wysiwyg-selection-box-shadow': {
             control: {type: 'text'},
             description: 'Editor selection box-shadow',
         },

diff --git a/docs/how-to-customize-the-editor.md b/docs/how-to-customize-the-editor.md
@@ -15,8 +15,8 @@ You can use CSS variables to make editor contents fit your own needs
 
 ### Selection styles
 | **Variable** | **Description** | **CSS Property Type** | **Default** |
-| `--g-selection-border` | Editor selection border | border | none |
-| `--g-selection-border-radius` | Editor selection border radius | border-radius | 6px |
-| `--g-selection-outline` | Editor selection outline | outline | none |
-| `--g-selection-background` | Editor selection background | background | #e6e6e6 |
-| `--g-selection-box-shadow` | Editor selection box shadow | box-shadow | none |
+| `--g-md-wysiwyg-selection-border` | Editor selection border | border | none |
+| `--g-md-wysiwyg-selection-border-radius` | Editor selection border radius | border-radius | 6px |
+| `--g-md-wysiwyg-selection-outline` | Editor selection outline | outline | none |
+| `--g-md-wysiwyg-selection-background` | Editor selection background | background | #e6e6e6 |
+| `--g-md-wysiwyg-selection-box-shadow` | Editor selection box shadow | box-shadow | none |
diff --git a/src/extensions/behavior/Selection/selection.scss b/src/extensions/behavior/Selection/selection.scss
@@ -22,16 +22,16 @@ $default-li-marker-width: var(--g-spacing-4);
     border: $default-selection-border;
     border-radius: $default-selection-border-radius;
     outline: $default-selection-outline;
-    background: var(--g-selection-background, $default-selection-background);
+    background: var(--g-md-wysiwyg-selection-background, $default-selection-background);
     box-shadow: $default-selection-box-shadow;
 }
 
 @mixin selection-props {
-    border: var(--g-selection-border, $default-selection-border);
-    border-radius: var(--g-selection-border-radius, $default-selection-border-radius);
-    outline: var(--g-selection-outline, $default-selection-outline);
-    background: var(--g-selection-background, $default-selection-background);
-    box-shadow: var(--g-selection-box-shadow, $default-selection-box-shadow);
+    border: var(--g-md-wysiwyg-selection-border, $default-selection-border);
+    border-radius: var(--g-md-wysiwyg-selection-border-radius, $default-selection-border-radius);
+    outline: var(--g-md-wysiwyg-selection-outline, $default-selection-outline);
+    background: var(--g-md-wysiwyg-selection-background, $default-selection-background);
+    box-shadow: var(--g-md-wysiwyg-selection-box-shadow, $default-selection-box-shadow);
 }
 
 [class].g-md-editor {