refactor: update message to use base styles, cleanup Lumo CSS (#10061)

Author: web-padawan

packages/message-list/src/vaadin-message.js

@@ -57,6 +57,12 @@ class Message extends MessageMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoI
     return messageStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`

packages/vaadin-lumo-styles/src/components/message.css

@@ -5,49 +5,38 @@
  */
 @media lumo_components_message {
   :host {
-    display: flex;
-    flex-direction: row;
-    outline: none;
     color: var(--lumo-body-text-color);
     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;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: 100%;
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
   }
 
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+  :host(:is(:focus-visible, [focus-ring])) {
+    outline: none;
   }
 
   [part='header'] {
-    align-items: baseline;
-    display: flex;
-    flex-flow: row wrap;
     min-height: calc(var(--lumo-font-size-m) * var(--lumo-line-height-m));
   }
 
   [part='name'] {
-    font-weight: 500;
-    margin-right: var(--lumo-space-s);
+    color: inherit;
+    margin-inline-end: var(--lumo-space-s);
   }
 
   [part='name']:empty {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   [part='message'] {
-    white-space: pre-wrap;
+    color: inherit;
   }
 
   [part='time'] {
@@ -58,25 +47,11 @@
   ::slotted([slot='avatar']) {
     --vaadin-avatar-outline-width: 0;
     --vaadin-avatar-size: var(--lumo-size-m);
-    flex-shrink: 0;
     margin-top: calc(var(--lumo-space-s));
     margin-inline-end: calc(var(--lumo-space-m));
   }
 
-  ::slotted(vaadin-markdown) {
-    white-space: normal;
-  }
-
   :host([focus-ring]) {
     box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
-
-  :host([dir='rtl']) [part='name'] {
-    margin-left: var(--lumo-space-s);
-    margin-right: 0;
-  }
-
-  :host([dir='rtl']) [part='name']:empty {
-    margin-left: 0;
-  }
 }