refactor: update message Lumo CSS to support base properties (#10562)

web-padawan · web-flow · commit 94b4c0c90a86 · 2025-12-03T11:13:56.000+02:00
diff --git a/packages/vaadin-lumo-styles/src/components/message.css b/packages/vaadin-lumo-styles/src/components/message.css
@@ -9,8 +9,8 @@
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
     line-height: var(--lumo-line-height-m);
-    padding: var(--lumo-space-s) var(--lumo-space-m);
-    gap: 0;
+    padding: var(--vaadin-message-padding, var(--lumo-space-s) var(--lumo-space-m));
+    gap: var(--vaadin-message-gap, 0);
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: 100%;
@@ -27,7 +27,7 @@
   }
 
   [part='name'] {
-    color: inherit;
+    color: var(--vaadin-message-name-color, inherit);
     margin-inline-end: var(--lumo-space-s);
   }
 
@@ -36,12 +36,12 @@
   }
 
   [part='message'] {
-    color: inherit;
+    color: var(--vaadin-message-text-color, inherit);
   }
 
   [part='time'] {
-    color: var(--lumo-secondary-text-color);
-    font-size: var(--lumo-font-size-s);
+    color: var(--vaadin-message-time-color, var(--lumo-secondary-text-color));
+    font-size: var(--vaadin-message-time-font-size, var(--lumo-font-size-s));
   }
 
   ::slotted([slot='avatar']) {

Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,8 @@`
`9`	`9`	`font-family: var(--lumo-font-family);`
`10`	`10`	`font-size: var(--lumo-font-size-m);`
`11`	`11`	`line-height: var(--lumo-line-height-m);`
`12`		`- padding: var(--lumo-space-s) var(--lumo-space-m);`
`13`		`- gap: 0;`
	`12`	`+ padding: var(--vaadin-message-padding, var(--lumo-space-s) var(--lumo-space-m));`
	`13`	`+ gap: var(--vaadin-message-gap, 0);`
`14`	`14`	`-moz-osx-font-smoothing: grayscale;`
`15`	`15`	`-webkit-font-smoothing: antialiased;`
`16`	`16`	`-webkit-text-size-adjust: 100%;`
`@@ -27,7 +27,7 @@`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`[part='name'] {`
`30`		`- color: inherit;`
	`30`	`+ color: var(--vaadin-message-name-color, inherit);`
`31`	`31`	`margin-inline-end: var(--lumo-space-s);`
`32`	`32`	`}`
`33`	`33`
`@@ -36,12 +36,12 @@`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`[part='message'] {`
`39`		`- color: inherit;`
	`39`	`+ color: var(--vaadin-message-text-color, inherit);`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`[part='time'] {`
`43`		`- color: var(--lumo-secondary-text-color);`
`44`		`- font-size: var(--lumo-font-size-s);`
	`43`	`+ color: var(--vaadin-message-time-color, var(--lumo-secondary-text-color));`
	`44`	`+ font-size: var(--vaadin-message-time-font-size, var(--lumo-font-size-s));`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`::slotted([slot='avatar']) {`