Skip to content

Commit 03bf431

Browse files
jounijouni
authored
feat: aura CRUD theme (#10284)
1 parent 322c15b commit 03bf431

File tree

8 files changed

+73
-34
lines changed

8 files changed

+73
-34
lines changed

‎packages/aura/aura.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
@import './src/components/button.css';
1313
@import './src/components/card.css';
1414
@import './src/components/checkbox-radio.css';
15+
@import './src/components/confirm-dialog.css';
16+
@import './src/components/crud.css';
1517
@import './src/components/date-picker.css';
1618
@import './src/components/dialog.css';
1719
@import './src/components/grid.css';

‎packages/aura/src/color.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
:where(:root, :host),
8484
vaadin-button,
8585
vaadin-context-menu-item,
86+
vaadin-crud-edit,
8687
vaadin-drawer-toggle,
8788
vaadin-menu-bar-button,
8889
vaadin-menu-bar-item,

‎packages/aura/src/components/button.css‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
--vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
33
}
44

5-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle) {
5+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
66
transition: scale 180ms;
77
position: relative;
88
--_accent: light-dark(
@@ -16,18 +16,19 @@
1616
--_background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
1717
}
1818

19-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='tertiary'])) {
19+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='tertiary'])) {
2020
--aura-surface-level: 6;
2121
--aura-surface-opacity: 0.3;
2222
box-shadow: var(--vaadin-button-shadow);
2323
}
2424

25-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([theme~='primary'], [theme~='tertiary']) {
25+
/* prettier-ignore */
26+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
2627
background: var(--vaadin-button-background, var(--_background));
2728
--vaadin-button-border-color: var(--_accent-border);
2829
}
2930

30-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='primary'])) {
31+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='primary'])) {
3132
outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
3233
--vaadin-button-text-color: var(--aura-accent-text);
3334
}
@@ -37,7 +38,7 @@ Increase padding, but only for buttons that don't have an icon in the default sl
3738
Buttons that place an icon in the default slot are assumed to be icon-only buttons.
3839
*/
3940
/* prettier-ignore */
40-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not(:has(:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
41+
: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]))) {
4142
--vaadin-button-padding: round(var(--vaadin-padding-s) / 1.4, 1px)
4243
max(var(--vaadin-padding-m), round(var(--vaadin-radius-m) / 1.5, 1px));
4344
}
@@ -49,24 +50,27 @@ vaadin-drawer-toggle:empty {
4950
}
5051

5152
/* prettier-ignore */
52-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):has([slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
53+
: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)),
5354
vaadin-drawer-toggle:empty,
5455
vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
5556
padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
5657
}
5758

58-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where([theme~='primary']) {
59+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where([theme~='primary']) {
5960
outline-offset: 2px;
6061
--vaadin-button-font-weight: var(--aura-font-weight-semibold);
6162
--vaadin-button-text-color: var(--aura-accent-contrast);
6263
--vaadin-button-background: var(--aura-accent-color);
64+
--vaadin-button-border-color: var(--vaadin-border-color-secondary);
65+
--vaadin-button-shadow: 0 2px 3px -1px hsla(0, 0%, 0%, 0.24);
6366
}
6467

65-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~='primary']::part(label) {
68+
/* prettier-ignore */
69+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[disabled][theme~='primary']::part(label) {
6670
color: color-mix(in srgb, currentColor 50%, transparent);
6771
}
6872

69-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
73+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled])::before {
7074
content: '';
7175
position: absolute;
7276
inset: calc(var(--vaadin-button-border-width, 1px) * -1);
@@ -80,18 +84,19 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
8084
}
8185

8286
@supports (color: hsl(0 0 0)) {
83-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
87+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled])::before {
8488
background-color: oklch(from currentColor calc(l + 0.4 - c) c h / calc(1 - l / 2));
8589
}
8690
}
8791

8892
@media (any-hover: hover) {
89-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):hover:not([disabled], [active])::before {
93+
/* prettier-ignore */
94+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active])::before {
9095
opacity: 0.03;
9196
}
9297

9398
/* prettier-ignore */
94-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary']:hover:not([disabled], [active])::before {
99+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary']:hover:not([disabled], [active])::before {
95100
opacity: 0.12;
96101
}
97102
}
@@ -104,13 +109,18 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
104109
}
105110
}
106111

107-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[active]:not([disabled])::before {
112+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled]) {
113+
box-shadow: none;
114+
}
115+
116+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled])::before {
108117
transition-duration: 0s;
109118
opacity: 0.08;
110119
background: oklch(from currentColor min(c, 1 - l + c) calc(c * 0.9) h);
111120
}
112121

113-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'][active]:not([disabled])::before {
122+
/* prettier-ignore */
123+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'][active]:not([disabled])::before {
114124
opacity: 0.16;
115125
}
116126

@@ -122,17 +132,13 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
122132

123133
/* Color variants */
124134

125-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='accent'])) {
135+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='accent'])) {
126136
--aura-accent-light: var(--aura-text-light);
127137
--aura-accent-dark: var(--aura-text-dark);
128138
}
129139

130-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):is([theme~='danger'], [theme~='error']) {
140+
/* prettier-ignore */
141+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):is([theme~='danger'], [theme~='error']) {
131142
--aura-accent-light: var(--aura-red);
132143
--aura-accent-dark: var(--aura-red);
133144
}
134-
135-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='success'] {
136-
--aura-accent-light: var(--aura-green);
137-
--aura-accent-dark: var(--aura-green);
138-
}

‎packages/aura/src/components/confirm-dialog.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
vaadin-confirm-dialog::part(footer) {
2+
width: fit-content;
3+
margin-inline-start: auto;
4+
}
5+
6+
vaadin-confirm-dialog::part(cancel-button),
7+
vaadin-confirm-dialog::part(reject-button),
8+
vaadin-confirm-dialog::part(confirm-button) {
9+
flex: 1;
10+
}
11+
12+
vaadin-confirm-dialog :is([slot='cancel-button'], [slot='reject-button'], [slot='confirm-button']) {
13+
display: flex;
14+
}

‎packages/aura/src/components/crud.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
:where(:root, :host) {
2+
--vaadin-crud-background: var(--aura-surface) padding-box;
3+
}
4+
5+
vaadin-crud-edit {
6+
padding: var(--vaadin-padding-xs);
7+
--vaadin-icon-visual-size: 0.75lh;
8+
}
9+
10+
vaadin-crud::part(editor) {
11+
background: var(--aura-surface);
12+
}

‎packages/aura/src/components/dialog.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
}
55

66
vaadin-dialog,
7-
vaadin-confirm-dialog {
7+
vaadin-confirm-dialog,
8+
vaadin-crud::part(overlay) {
89
color-scheme: var(--aura-content-color-scheme);
910
}
1011

‎packages/aura/src/components/grid.css‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,7 @@
33
--vaadin-grid-background: linear-gradient(var(--aura-surface), var(--aura-surface)) var(--aura-background) padding-box;
44
}
55

6-
vaadin-grid[theme~='no-border']::part(first-column-cell) {
7-
--vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs)
8-
var(--vaadin-padding-l);
9-
}
10-
11-
vaadin-grid[theme~='no-border']::part(last-column-cell) {
12-
--vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs)
13-
var(--vaadin-padding-s);
14-
}
15-
16-
vaadin-grid::part(empty-state) {
6+
:is(vaadin-grid, vaadin-crud-grid)::part(empty-state) {
177
display: flex;
188
align-items: center;
199
justify-content: center;
@@ -23,3 +13,15 @@ vaadin-grid::part(empty-state) {
2313
vaadin-grid::part(active-nav-item) {
2414
--vaadin-grid-row-highlight-background-color: var(--vaadin-background-container);
2515
}
16+
17+
vaadin-grid-sorter::part(indicators) {
18+
transition: color 120ms;
19+
}
20+
21+
:is(vaadin-grid, vaadin-crud)[theme~='column-borders'] {
22+
--vaadin-grid-column-border-width: 1px;
23+
}
24+
25+
:is(vaadin-grid, vaadin-crud)[theme~='no-row-borders'] {
26+
--vaadin-grid-row-border-width: 0px;
27+
}

‎packages/aura/src/surface.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ vaadin-upload-file,
2424
::part(overlay),
2525
vaadin-confirm-dialog::part(overlay),
2626
vaadin-dialog::part(overlay),
27-
vaadin-login-overlay::part(overlay) {
27+
vaadin-login-overlay::part(overlay),
28+
vaadin-crud-dialog::part(overlay) {
2829
--aura-surface-opacity: 0.5;
2930

3031
--aura-surface-solid: light-dark(

0 commit comments

Comments
 (0)