Skip to content

Commit 811ada6

Browse files
vursenvursen
authored
refactor: update RTE Lumo CSS to better support base properties (#10568)
1 parent 66ea535 commit 811ada6

File tree

3 files changed

+59
-22
lines changed

3 files changed

+59
-22
lines changed

‎packages/rich-text-editor/src/vaadin-rich-text-editor.d.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,25 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
9292
* `toolbar-button-code-block` | The "code block" button
9393
* `toolbar-button-clean` | The "clean formatting" button
9494
*
95+
* The following custom CSS properties are available for styling:
96+
*
97+
* Custom CSS property |
98+
* :-------------------------------|
99+
* `--vaadin-rich-text-editor-background` |
100+
* `--vaadin-rich-text-editor-content-color` |
101+
* `--vaadin-rich-text-editor-content-font-size` |
102+
* `--vaadin-rich-text-editor-content-line-height` |
103+
* `--vaadin-rich-text-editor-content-padding` |
104+
* `--vaadin-rich-text-editor-toolbar-background` |
105+
* `--vaadin-rich-text-editor-toolbar-gap` |
106+
* `--vaadin-rich-text-editor-toolbar-padding` |
107+
* `--vaadin-rich-text-editor-toolbar-button-background` |
108+
* `--vaadin-rich-text-editor-toolbar-button-border-width` |
109+
* `--vaadin-rich-text-editor-toolbar-button-border-color` |
110+
* `--vaadin-rich-text-editor-toolbar-button-border-radius` |
111+
* `--vaadin-rich-text-editor-toolbar-button-text-color` |
112+
* `--vaadin-rich-text-editor-toolbar-button-padding` |
113+
*
95114
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
96115
*
97116
* @fires {Event} change - Fired when the user commits a value change.

‎packages/rich-text-editor/src/vaadin-rich-text-editor.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,25 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
9191
* `toolbar-button-code-block` | The "code block" button
9292
* `toolbar-button-clean` | The "clean formatting" button
9393
*
94+
* The following custom CSS properties are available for styling:
95+
*
96+
* Custom CSS property |
97+
* :-------------------------------|
98+
* `--vaadin-rich-text-editor-background` |
99+
* `--vaadin-rich-text-editor-content-color` |
100+
* `--vaadin-rich-text-editor-content-font-size` |
101+
* `--vaadin-rich-text-editor-content-line-height` |
102+
* `--vaadin-rich-text-editor-content-padding` |
103+
* `--vaadin-rich-text-editor-toolbar-background` |
104+
* `--vaadin-rich-text-editor-toolbar-gap` |
105+
* `--vaadin-rich-text-editor-toolbar-padding` |
106+
* `--vaadin-rich-text-editor-toolbar-button-background` |
107+
* `--vaadin-rich-text-editor-toolbar-button-border-width` |
108+
* `--vaadin-rich-text-editor-toolbar-button-border-color` |
109+
* `--vaadin-rich-text-editor-toolbar-button-border-radius` |
110+
* `--vaadin-rich-text-editor-toolbar-button-text-color` |
111+
* `--vaadin-rich-text-editor-toolbar-button-padding` |
112+
*
94113
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
95114
*
96115
* @fires {Event} change - Fired when the user commits a value change.

‎packages/vaadin-lumo-styles/src/components/rich-text-editor.css‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
}
2424

2525
.vaadin-rich-text-editor-container {
26-
background: transparent;
26+
background: var(--vaadin-rich-text-editor-background, transparent);
2727
border: none;
2828
border-radius: 0;
2929
}
@@ -33,22 +33,22 @@
3333
}
3434

3535
[part='toolbar'] {
36-
background-color: var(--lumo-contrast-5pct);
37-
padding: calc(var(--lumo-space-s) - 1px) var(--lumo-space-xs);
38-
gap: 0;
36+
background-color: var(--vaadin-rich-text-editor-toolbar-background, var(--lumo-contrast-5pct));
37+
padding: var(--vaadin-rich-text-editor-toolbar-padding, calc(var(--lumo-space-s) - 1px) var(--lumo-space-xs));
38+
gap: var(--vaadin-rich-text-editor-toolbar-gap, 0);
3939
}
4040

4141
[part~='toolbar-button'] {
42-
padding: 0;
42+
padding: var(--vaadin-rich-text-editor-toolbar-button-padding, 0);
4343
font: inherit;
4444
line-height: 1;
4545
text-transform: none;
46-
background: transparent;
47-
border: none;
46+
background: var(--vaadin-rich-text-editor-toolbar-button-background, transparent);
47+
border-width: var(--vaadin-rich-text-editor-toolbar-button-border-width, 0);
4848
width: var(--lumo-size-m);
4949
height: var(--lumo-size-m);
5050
border-radius: var(--lumo-border-radius-m);
51-
color: var(--lumo-contrast-60pct);
51+
color: var(--vaadin-rich-text-editor-toolbar-button-text-color, var(--lumo-contrast-60pct));
5252
margin: 2px 1px;
5353
cursor: var(--lumo-clickable-cursor);
5454
transition:
@@ -58,8 +58,8 @@
5858

5959
[part~='toolbar-button']:not([part~='toolbar-button-pressed']):hover {
6060
outline: none;
61-
background-color: var(--lumo-contrast-5pct);
62-
color: var(--lumo-contrast-80pct);
61+
--vaadin-rich-text-editor-toolbar-button-background: var(--lumo-contrast-5pct);
62+
--vaadin-rich-text-editor-toolbar-button-text-color: var(--lumo-contrast-80pct);
6363
}
6464

6565
[part~='toolbar-button']::before {
@@ -202,7 +202,7 @@
202202
}
203203

204204
:host([disabled]) [part~='toolbar-button'] {
205-
background-color: transparent;
205+
--vaadin-rich-text-editor-toolbar-button-background: transparent;
206206
}
207207

208208
[part~='toolbar-button']:focus,
@@ -213,18 +213,18 @@
213213

214214
@media (hover: none) {
215215
[part~='toolbar-button']:hover {
216-
background-color: transparent;
216+
--vaadin-rich-text-editor-toolbar-button-background: transparent;
217217
}
218218
}
219219

220220
[part~='toolbar-button-pressed'] {
221-
background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
222-
color: var(--lumo-primary-contrast-color);
221+
--vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-selection-color, var(--lumo-primary-color));
222+
--vaadin-rich-text-editor-toolbar-button-text-color: var(--lumo-primary-contrast-color);
223223
}
224224

225225
[part~='toolbar-button']:not([part~='toolbar-button-pressed']):active {
226-
background-color: var(--lumo-contrast-10pct);
227-
color: var(--lumo-contrast-90pct);
226+
--vaadin-rich-text-editor-toolbar-button-background: var(--lumo-contrast-10pct);
227+
--vaadin-rich-text-editor-toolbar-button-text-color: var(--lumo-contrast-90pct);
228228
}
229229

230230
[part~='toolbar-button-undo']::before {
@@ -310,8 +310,7 @@
310310
}
311311

312312
:host([theme~='no-border']) [part='toolbar'] {
313-
padding-top: var(--lumo-space-s);
314-
padding-bottom: var(--lumo-space-s);
313+
--vaadin-rich-text-editor-toolbar-padding: var(--lumo-space-s) var(--lumo-space-xs);
315314
}
316315

317316
/* Compact */
@@ -320,11 +319,11 @@
320319
}
321320

322321
:host([theme~='compact']) [part='toolbar'] {
323-
padding: var(--lumo-space-xs) 0;
322+
--vaadin-rich-text-editor-toolbar-padding: var(--lumo-space-xs) 0;
324323
}
325324

326325
:host([theme~='compact'][theme~='no-border']) [part='toolbar'] {
327-
padding: calc(var(--lumo-space-xs) + 1px) 0;
326+
--vaadin-rich-text-editor-toolbar-padding: calc(var(--lumo-space-xs) + 1px) 0;
328327
}
329328

330329
:host([theme~='compact']) [part~='toolbar-button'] {
@@ -337,8 +336,8 @@
337336
}
338337

339338
.ql-editor {
340-
color: inherit;
341-
padding: var(--lumo-space-s) var(--lumo-space-m);
339+
color: var(--vaadin-rich-text-editor-content-color, inherit);
340+
padding: var(--vaadin-rich-text-editor-content-padding, var(--lumo-space-s) var(--lumo-space-m));
342341
}
343342

344343
.ql-code-block-container {

0 commit comments

Comments
 (0)