Skip to content

Commit 751e132

Browse files
[update] minor fixes
1 parent 547e1bd commit 751e132

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

docs/guides/stylization.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,16 @@ RichText uses the following core classes to structure its UI:
1717
| Class name | Description |
1818
|------------------------|---------------------------------------------|
1919
| `.wx-richtext` | Root container of the RichText widget |
20-
| `.wx-richtext-menu` | Toolbar and menu area |
21-
| `.wx-richtext-popup` | Popup panels (e.g., color picker, font size)|
22-
| `.wx-richtext-editor` | Main editable content area |
20+
| `.wx-richtext-menubar` | Container for menubar |
21+
| `.wx-richtext-menu` | Container for menubar dropdown menu |
22+
| `.wx-richtext-toolbar` | Container for toolbar |
23+
| `.wx-editor-area` | Container for main editable content area |
2324

2425
You can use these classes in your custom CSS selectors to override the appearance of the RichText editor.
2526

2627
## Overriding default styles
2728

28-
You can override RichText's default colors by redefining CSS variables on the `#root` container or on specific sub-elements:
29+
You can override RichText's default styles by redefining CSS variables on the `#root` container or on specific sub-elements:
2930

3031
```html
3132
<div id="root" style="width: 100%; height: 100%;"></div>
@@ -63,20 +64,19 @@ These styles will apply a dark background, adjust button and icon colors, and im
6364
| Variable name | Description |
6465
| ---------------------------- | ------------------------------------ |
6566
| `--wx-background` | Background color of editor and popup |
66-
| `--wx-background-alt` | Alternate background (menus and toolbar)|
67-
| `--wx-color-primary` | Accent color for links |
67+
| `--wx-background-alt` | Alternate background for menubar |
68+
| `--wx-color-primary` | Accent color for links, blockquotes, and borders of resizing pictures |
6869
| `--wx-color-font` | Main font color (for editor, menubar, and toolbar)|
6970
| `--wx-color-font-alt` | Alternate font color |
7071
| `--wx-color-font-disabled` | Disabled text color (for menubar and toolbar elements)|
7172
| `--wx-border` | Border style used across the editor |
7273
| `--wx-color-secondary-hover` | Hover state background for buttons within menubar and toolbar |
7374
| `--wx-button-active` | Active state background for buttons within menubar and toolbar |
74-
| `--wx-icon-color` | Color used for toolbar icons |
75+
| `--wx-icon-color` | Color for toolbar arrow icons used for dropdown |
7576
| `--wx-popup-border` | Border for popup elements |
7677

7778
## Best practices
7879

79-
* Apply custom styles **after** the RichText component is initialized
8080
* Use `color-scheme: dark` to improve native input styling in dark mode
8181
* Avoid changing layout-related properties (like `display`, `position`) unless necessary
8282

0 commit comments

Comments
 (0)