refactor: replace Aura surface theme variants with class names (#10188)

Author: web-padawan

dev/aura.html

@@ -461,13 +461,13 @@ <h1>Components</h1>
             </style>
             <div class="components-view">
               <div class="grid">
-                <div class="component wide" theme="surface">
+                <div class="aura-surface component wide">
                   <vaadin-button theme="primary">Primary</vaadin-button>
                   <vaadin-button>Default</vaadin-button>
                   <vaadin-button theme="tertiary">Tertiary</vaadin-button>
                 </div>
 
-                <div class="component" theme="surface">
+                <div class="aura-surface component">
                   <div class="flex justify-center">
                     <vaadin-button id="showNotificationBtn">
                       <vaadin-icon src="./assets/lucide-icons/layers.svg" slot="prefix"></vaadin-icon>
@@ -476,7 +476,7 @@ <h1>Components</h1>
                   </div>
                 </div>
 
-                <div class="component wide tall" theme="surface">
+                <div class="aura-surface component wide tall">
 
                   <div class="badges">
                     <span theme="badge">Default</span>
@@ -555,23 +555,23 @@ <h1>Components</h1>
                   </div>
                 </div>
 
-                <div class="component" theme="surface">
+                <div class="aura-surface component">
                   <vaadin-radio-group label="Options">
                     <vaadin-radio-button label="Option 1" value="1" checked></vaadin-radio-button>
                     <vaadin-radio-button label="Option 2" value="2"></vaadin-radio-button>
                     <vaadin-radio-button label="Option 3" value="3"></vaadin-radio-button>
                   </vaadin-radio-group>
                 </div>
 
-                <div class="component" theme="surface">
+                <div class="aura-surface component">
                   <vaadin-menu-bar></vaadin-menu-bar>
                 </div>
 
-                <div class="component wide" theme="surface">
+                <div class="aura-surface component wide">
                   <vaadin-date-time-picker style="width: 20em" value="2025-09-09T12:00"></vaadin-date-time-picker>
                 </div>
 
-                <div class="component" theme="surface">
+                <div class="aura-surface component">
                   <div class="sizes">
                     <h5>Sizes</h5>
                     <div class="xs" style="--size: var(--vaadin-padding-xs)"></div>
@@ -582,19 +582,19 @@ <h5>Sizes</h5>
                   </div>
                 </div>
 
-                <div class="component" theme="surface">
+                <div class="aura-surface component">
                   <vaadin-checkbox-group label="Options">
                     <vaadin-checkbox label="Option 1" value="1" checked></vaadin-checkbox>
                     <vaadin-checkbox label="Option 2" value="2"></vaadin-checkbox>
                     <vaadin-checkbox label="Option 3" value="3"></vaadin-checkbox>
                   </vaadin-checkbox-group>
                 </div>
 
-                <div class="component" theme="surface">
+                <div class="aura-surface component">
                   <vaadin-combo-box item-label-path="name" item-value-path="id" label="Country"></vaadin-combo-box>
                 </div>
 
-                <div class="component" theme="surface">
+                <div class="aura-surface component">
                   <div class="type-scale">
                     <h1>Heading</h1>
                     <h2>Heading</h2>
@@ -605,34 +605,34 @@ <h6>Heading</h6>
                   </div>
                 </div>
 
-                <div class="component wide" theme="surface">
+                <div class="aura-surface component wide">
                   <vaadin-select label="Options"></vaadin-select>
                 </div>
 
-                <div class="component widest tall no-padding" theme="surface">
+                <div class="aura-surface component widest tall no-padding">
                   <vaadin-grid theme="no-border">
                     <vaadin-grid-selection-column></vaadin-grid-selection-column>
                     <vaadin-grid-column path="name"></vaadin-grid-column>
                     <vaadin-grid-column path="email"></vaadin-grid-column>
                   </vaadin-grid>
                 </div>
 
-                <div class="component" theme="surface">
+                <div class="aura-surface component">
                   <vaadin-avatar-group></vaadin-avatar-group>
                 </div>
 
-                <div class="component tall wide column" theme="surface">
+                <div class="aura-surface component tall wide column">
                   <vaadin-message-list></vaadin-message-list>
                   <vaadin-message-input></vaadin-message-input>
                 </div>
 
-                <div class="component" theme="surface">
+                <div class="aura-surface component">
                   <vaadin-text-field clear-button-visible value="Projects">
                     <vaadin-icon src="./assets/lucide-icons/folder.svg" slot="prefix"></vaadin-icon>
                   </vaadin-text-field>
                 </div>
 
-                <div class="component wide" theme="surface">
+                <div class="aura-surface component wide">
                   <vaadin-multi-select-combo-box
                     class="Countries"
                     class="w-full"

packages/aura/src/surface.css

@@ -4,8 +4,8 @@
 
 /* List all elements that are surfaces */
 :is(:root, :host),
-[theme~='surface'],
-[theme~='surface-solid'],
+.aura-surface,
+.aura-surface-solid,
 vaadin-app-layout::part(navbar),
 vaadin-app-layout::part(drawer),
 vaadin-button,
@@ -44,11 +44,11 @@ vaadin-side-nav-item::part(content),
   --vaadin-background-color: var(--aura-surface-solid);
 }
 
-[theme~='surface'] {
+.aura-surface {
   background: var(--aura-surface) padding-box;
 }
 
-[theme~='surface-solid'] {
+.aura-surface-solid {
   --aura-surface-opacity: 1;
   background: var(--aura-surface-solid) padding-box;
 }