fix: update crud base styles (#10294)

* fix: update crud base styles

* Update vaadin-crud-base-styles.js

* test: update screenshots

Author: jouni

packages/component-base/src/styles/style-props.js

@@ -19,7 +19,7 @@ export const crudStyles = css`
     --vaadin-crud-editor-max-width: 40%;
     border: var(--vaadin-crud-border-width, 1px) solid
       var(--vaadin-crud-border-color, var(--vaadin-border-color-secondary));
-    border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-l));
+    border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-m));
     height: 400px;
     width: 100%;
     background: var(--vaadin-crud-background, var(--vaadin-background-color));
@@ -92,7 +92,7 @@ export const crudStyles = css`
     display: flex;
     flex-shrink: 0;
     justify-content: flex-end;
-    padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-padding-m));
+    padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
   }
 
   :host([no-toolbar]) [part='toolbar'] {
@@ -131,11 +131,11 @@ export const crudStyles = css`
   }
 
   [part='header'] {
-    color: var(--vaadin-crud-header-color, var(--vaadin-text-color));
-    font-size: var(--vaadin-crud-header-font-size, 1em);
-    font-weight: var(--vaadin-crud-header-font-weight, 600);
-    line-height: var(--vaadin-crud-header-line-height, inherit);
-    padding: var(--vaadin-crud-header-padding, var(--vaadin-padding-m));
+    color: var(--vaadin-crud-header-color, var(--vaadin-dialog-title-color, var(--vaadin-text-color)));
+    font-size: var(--vaadin-crud-header-font-size, var(--vaadin-dialog-title-font-size, 1em));
+    font-weight: var(--vaadin-crud-header-font-weight, var(--vaadin-dialog-title-font-weight, 600));
+    line-height: var(--vaadin-crud-header-line-height, var(--vaadin-dialog-title-line-height, inherit));
+    padding: var(--vaadin-crud-header-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
   }
 
   ::slotted([slot='header']) {
@@ -146,7 +146,8 @@ export const crudStyles = css`
   }
 
   ::slotted([slot='form']) {
-    padding: var(--vaadin-crud-form-padding, var(--vaadin-padding-m));
+    padding: var(--vaadin-crud-form-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
+    padding-top: 0;
   }
 
   [part='footer'] {
@@ -156,10 +157,15 @@ export const crudStyles = css`
     display: flex;
     flex: none;
     gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-s));
-    padding: var(--vaadin-crud-footer-padding, var(--vaadin-padding-m));
+    padding: var(--vaadin-crud-footer-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
   }
 
   ::slotted([slot='delete-button']) {
     margin-inline-start: auto;
   }
+
+  :host([theme~='no-border']) {
+    border: 0;
+    border-radius: 0;
+  }
 `;

packages/crud/src/styles/vaadin-crud-base-styles.js

@@ -14,11 +14,11 @@ import { dialogOverlayStyles } from '@vaadin/dialog/src/styles/vaadin-dialog-ove
 
 const crudDialogOverlay = css`
   [part='header'] {
-    color: var(--vaadin-crud-dialog-header-color, var(--vaadin-text-color));
-    font-size: var(--vaadin-crud-dialog-header-font-size, 1em);
-    font-weight: var(--vaadin-crud-dialog-header-font-weight, 600);
-    line-height: var(--vaadin-crud-dialog-header-line-height, inherit);
-    padding: var(--vaadin-crud-header-padding, var(--vaadin-padding-l));
+    color: var(--vaadin-dialog-title-color, var(--vaadin-text-color));
+    font-size: var(--vaadin-dialog-title-font-size, 1em);
+    font-weight: var(--vaadin-dialog-title-font-weight, 600);
+    line-height: var(--vaadin-dialog-title-line-height, inherit);
+    padding: var(--vaadin-crud-header-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
   }
 
   ::slotted([slot='header']) {

packages/crud/src/styles/vaadin-crud-dialog-overlay-base-styles.js

@@ -16,7 +16,7 @@ export const crudEditStyles = css`
     background: currentColor;
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask: var(--_vaadin-icon-edit) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
+    mask: var(--_vaadin-icon-pen) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 

packages/crud/src/styles/vaadin-crud-edit-base-styles.js

@@ -39,12 +39,12 @@ class CrudEditColumn extends GridColumn {
   static get properties() {
     return {
       /**
-       * Width of the cells for this column.
+       * Automatically sets the width of the column based on the column contents when this is set to `true`.
        * @private
        */
-      width: {
-        type: String,
-        value: '4rem',
+      autoWidth: {
+        type: Boolean,
+        value: true,
       },
 
       /**