feat: aura CRUD theme (#10284)

jouni · web-flow · commit 03bf4313e88e · 2025-10-02T17:25:43.000+03:00
diff --git a/packages/aura/aura.css b/packages/aura/aura.css
@@ -12,6 +12,8 @@
 @import './src/components/button.css';
 @import './src/components/card.css';
 @import './src/components/checkbox-radio.css';
+@import './src/components/confirm-dialog.css';
+@import './src/components/crud.css';
 @import './src/components/date-picker.css';
 @import './src/components/dialog.css';
 @import './src/components/grid.css';
diff --git a/packages/aura/src/color.css b/packages/aura/src/color.css
@@ -83,6 +83,7 @@
 :where(:root, :host),
 vaadin-button,
 vaadin-context-menu-item,
+vaadin-crud-edit,
 vaadin-drawer-toggle,
 vaadin-menu-bar-button,
 vaadin-menu-bar-item,
diff --git a/packages/aura/src/components/button.css b/packages/aura/src/components/button.css
@@ -2,7 +2,7 @@
   --vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
   transition: scale 180ms;
   position: relative;
   --_accent: light-dark(
@@ -16,18 +16,19 @@
   --_background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='tertiary'])) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='tertiary'])) {
   --aura-surface-level: 6;
   --aura-surface-opacity: 0.3;
   box-shadow: var(--vaadin-button-shadow);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([theme~='primary'], [theme~='tertiary']) {
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
   background: var(--vaadin-button-background, var(--_background));
   --vaadin-button-border-color: var(--_accent-border);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='primary'])) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='primary'])) {
   outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
   --vaadin-button-text-color: var(--aura-accent-text);
 }
@@ -37,7 +38,7 @@ Increase padding, but only for buttons that don't have an icon in the default sl
 Buttons that place an icon in the default slot are assumed to be icon-only buttons.
 */
 /* prettier-ignore */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not(:has(:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(:has(:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
   --vaadin-button-padding: round(var(--vaadin-padding-s) / 1.4, 1px)
     max(var(--vaadin-padding-m), round(var(--vaadin-radius-m) / 1.5, 1px));
 }
@@ -49,24 +50,27 @@ vaadin-drawer-toggle:empty {
 }
 
 /* prettier-ignore */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):has([slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):has([slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
 vaadin-drawer-toggle:empty,
 vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
   padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where([theme~='primary']) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where([theme~='primary']) {
   outline-offset: 2px;
   --vaadin-button-font-weight: var(--aura-font-weight-semibold);
   --vaadin-button-text-color: var(--aura-accent-contrast);
   --vaadin-button-background: var(--aura-accent-color);
+  --vaadin-button-border-color: var(--vaadin-border-color-secondary);
+  --vaadin-button-shadow: 0 2px 3px -1px hsla(0, 0%, 0%, 0.24);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~='primary']::part(label) {
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[disabled][theme~='primary']::part(label) {
   color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled])::before {
   content: '';
   position: absolute;
   inset: calc(var(--vaadin-button-border-width, 1px) * -1);
@@ -80,18 +84,19 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
 }
 
 @supports (color: hsl(0 0 0)) {
-  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
+  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled])::before {
     background-color: oklch(from currentColor calc(l + 0.4 - c) c h / calc(1 - l / 2));
   }
 }
 
 @media (any-hover: hover) {
-  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):hover:not([disabled], [active])::before {
+  /* prettier-ignore */
+  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active])::before {
     opacity: 0.03;
   }
 
   /* prettier-ignore */
-  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary']:hover:not([disabled], [active])::before {
+  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary']:hover:not([disabled], [active])::before {
     opacity: 0.12;
   }
 }
@@ -104,13 +109,18 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
   }
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[active]:not([disabled])::before {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled]) {
+  box-shadow: none;
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled])::before {
   transition-duration: 0s;
   opacity: 0.08;
   background: oklch(from currentColor min(c, 1 - l + c) calc(c * 0.9) h);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'][active]:not([disabled])::before {
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'][active]:not([disabled])::before {
   opacity: 0.16;
 }
 
@@ -122,17 +132,13 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
 
 /* Color variants */
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='accent'])) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='accent'])) {
   --aura-accent-light: var(--aura-text-light);
   --aura-accent-dark: var(--aura-text-dark);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):is([theme~='danger'], [theme~='error']) {
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):is([theme~='danger'], [theme~='error']) {
   --aura-accent-light: var(--aura-red);
   --aura-accent-dark: var(--aura-red);
 }
-
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='success'] {
-  --aura-accent-light: var(--aura-green);
-  --aura-accent-dark: var(--aura-green);
-}
diff --git a/packages/aura/src/components/confirm-dialog.css b/packages/aura/src/components/confirm-dialog.css
@@ -0,0 +1,14 @@
+vaadin-confirm-dialog::part(footer) {
+  width: fit-content;
+  margin-inline-start: auto;
+}
+
+vaadin-confirm-dialog::part(cancel-button),
+vaadin-confirm-dialog::part(reject-button),
+vaadin-confirm-dialog::part(confirm-button) {
+  flex: 1;
+}
+
+vaadin-confirm-dialog :is([slot='cancel-button'], [slot='reject-button'], [slot='confirm-button']) {
+  display: flex;
+}
diff --git a/packages/aura/src/components/crud.css b/packages/aura/src/components/crud.css
@@ -0,0 +1,12 @@
+:where(:root, :host) {
+  --vaadin-crud-background: var(--aura-surface) padding-box;
+}
+
+vaadin-crud-edit {
+  padding: var(--vaadin-padding-xs);
+  --vaadin-icon-visual-size: 0.75lh;
+}
+
+vaadin-crud::part(editor) {
+  background: var(--aura-surface);
+}
diff --git a/packages/aura/src/components/dialog.css b/packages/aura/src/components/dialog.css
@@ -4,7 +4,8 @@
 }
 
 vaadin-dialog,
-vaadin-confirm-dialog {
+vaadin-confirm-dialog,
+vaadin-crud::part(overlay) {
   color-scheme: var(--aura-content-color-scheme);
 }
 
diff --git a/packages/aura/src/components/grid.css b/packages/aura/src/components/grid.css
@@ -3,17 +3,7 @@
   --vaadin-grid-background: linear-gradient(var(--aura-surface), var(--aura-surface)) var(--aura-background) padding-box;
 }
 
-vaadin-grid[theme~='no-border']::part(first-column-cell) {
-  --vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs)
-    var(--vaadin-padding-l);
-}
-
-vaadin-grid[theme~='no-border']::part(last-column-cell) {
-  --vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs)
-    var(--vaadin-padding-s);
-}
-
-vaadin-grid::part(empty-state) {
+:is(vaadin-grid, vaadin-crud-grid)::part(empty-state) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,3 +13,15 @@ vaadin-grid::part(empty-state) {
 vaadin-grid::part(active-nav-item) {
   --vaadin-grid-row-highlight-background-color: var(--vaadin-background-container);
 }
+
+vaadin-grid-sorter::part(indicators) {
+  transition: color 120ms;
+}
+
+:is(vaadin-grid, vaadin-crud)[theme~='column-borders'] {
+  --vaadin-grid-column-border-width: 1px;
+}
+
+:is(vaadin-grid, vaadin-crud)[theme~='no-row-borders'] {
+  --vaadin-grid-row-border-width: 0px;
+}
diff --git a/packages/aura/src/surface.css b/packages/aura/src/surface.css
@@ -24,7 +24,8 @@ vaadin-upload-file,
 ::part(overlay),
 vaadin-confirm-dialog::part(overlay),
 vaadin-dialog::part(overlay),
-vaadin-login-overlay::part(overlay) {
+vaadin-login-overlay::part(overlay),
+vaadin-crud-dialog::part(overlay) {
   --aura-surface-opacity: 0.5;
 
   --aura-surface-solid: light-dark(
