@adyen/bento-vue2 1.71.0 → 1.72.0

package/dist/styles/bento.css

@@ -149,10 +149,9 @@
   --b-data-grid-resizer-last-child-right: -4px;
   --b-data-grid-resizer-width: 8px;
   --b-data-grid-cell-hover-padding: 14px 15px;
-  --b-data-grid-row-nested-rows-loading-container-padding: 14px;
   --b-data-grid-column-separator-height: 100%;
   --b-data-grid-column-with-sorting-or-column-panel-hover-padding: 3px 15px;
-  --b-data-grid-column-hover-padding: 7px 15px;
+  --b-data-grid-column-min-height: 34px;
   --b-data-grid-column-height: auto;
   --b-data-grid-overflow-shadow-right-background: linear-gradient(270deg, rgba(0, 17, 44, 0.12), rgba(0, 0, 0, 0));
   --b-data-grid-overflow-shadow-left-background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 17, 44, 0.12));
@@ -196,6 +195,8 @@
   --b-avatar-image-small-height: 24px;
   --b-alert-tip-icon-height: 20px;
   --b-alert-icon-height: 24px;
+  --b-ai-button-button-z-index: 1;
+  --b-ai-button-animation-background-z-index: -1;
   --b-action-bar-container-border-radius: 28px;
   --b-z-index-local-tier-4: 4;
   --b-z-index-local-tier-3: 3;
@@ -388,12 +389,16 @@
   --b-color-background-success-strong: #008845;
   --b-color-background-success-weak: #e4faef;
   --b-color-background-warning-strong: #d77f00;
+  --b-color-background-warning-weak-active: #ffe0b3;
+  --b-color-background-warning-weak-hover: #ffecd0;
   --b-color-background-warning-weak: #fff4e5;
   --b-color-background-critical-strong-active: #751e00;
   --b-color-background-critical-strong-hover: #c13101;
   --b-color-background-critical-strong: #dc3801;
   --b-color-background-critical-weak: #fff3ef;
   --b-color-background-spotlight: #ffe379;
+  --b-color-background-selected-active: #c8dff7;
+  --b-color-background-selected-hover: #d4e6f9;
   --b-color-background-selected: #e3effb;
   --b-color-background-disabled: #ecedef;
   --b-color-background-modal-active: #ecedef;
@@ -411,6 +416,8 @@
   --b-color-background-primary-active: #ecedef;
   --b-color-background-primary-hover: #f4f5f6;
   --b-color-background-primary: #ffffff;
+  --b-gradient-data-grid-highlighted-hover: linear-gradient(270deg, var(--b-color-background-warning-weak-hover) 0%, rgba(255, 236, 208, .82) 53.34%, rgba(255, 236, 208, .75) 61.73%, rgba(255, 236, 208, .11) 99.25%, rgba(255, 236, 208, 0) 100%);
+  --b-gradient-data-grid-selected-hover: linear-gradient(270deg, var(--b-color-background-selected-hover) 0%, rgba(212, 230, 249, .82) 53.34%, rgba(212, 230, 249, .75) 61.73%, rgba(212, 230, 249, .11) 99.25%, rgba(212, 230, 249, 0) 100%);
   --b-gradient-data-grid-zebra-hover: linear-gradient(270deg, var(--b-color-background-secondary-hover) 0%, rgba(236, 237, 239, .82) 53.34%, rgba(236, 237, 239, .75) 61.73%, rgba(236, 237, 239, .11) 99.25%, rgba(236, 237, 239, 0) 100%);
   --b-gradient-data-grid-hover: linear-gradient(270deg, var(--b-color-background-primary-hover) 0%, rgba(247, 247, 248, .82) 53.34%, rgba(247, 247, 248, .75) 61.73%, rgba(247, 247, 248, .11) 99.25%, rgba(247, 247, 248, 0) 100%);
   --b-tutorial-indicator-border: var(--b-border-width-m) solid var(--b-color-decorative-green);
@@ -716,6 +723,7 @@
   --b-selection-card-container-color: var(--b-color-label-primary);
   --b-selection-card-container-border-radius: var(--b-border-radius-l);
   --b-selection-card-container-border: var(--b-border-width-s) solid var(--b-color-outline-primary);
+  --b-selection-card-container-background-color: var(--b-color-background-primary);
   --b-selection-card-group-error-message-margin-top: var(--b-spacer-060);
   --b-selection-card-group-items-gap: var(--b-spacer-040);
   --b-segmented-control-button-label-container-checked-color: var(--b-color-label-primary);
@@ -1531,28 +1539,33 @@
   --b-data-grid-footer-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-footer-padding: var(--b-spacer-040) var(--b-spacer-090);
   --b-data-grid-footer-background-color: var(--b-color-background-primary);
-  --b-data-grid-select-cell-margin-left: var(--b-spacer-040);
+  --b-data-grid-select-cell-margin-left: calc(var(--b-spacer-040) - var(--b-border-width-s));
   --b-data-grid-cell-actions-column-selection-padding: var(--b-spacer-050) var(--b-spacer-070);
   --b-data-grid-cell-actions-column-nested-content-padding: var(--b-spacer-050) var(--b-spacer-070);
   --b-data-grid-cell-actions-row-actions-padding: 0 var(--b-spacer-060);
-  --b-data-grid-cell-actions-padding: 0 var(--b-spacer-070) 0 0;
+  --b-data-grid-cell-actions-padding: 0 calc(var(--b-spacer-070) - var(--b-border-width-s)) 0 0;
   --b-data-grid-cell-actions-gap: var(--b-spacer-040);
   --b-data-grid-cell-actions-background-gradient-width: var(--b-spacer-100);
   --b-data-grid-cell-actions-animation-duration: var(--b-animation-duration-fast);
   --b-data-grid-cell-condensed-column-hovered-padding: var(--b-spacer-030) 14px;
   --b-data-grid-cell-condensed-padding: var(--b-spacer-030) 15px;
-  --b-data-grid-cell-padding: 14px var(--b-spacer-070);
-  --b-data-grid-cell-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
+  --b-data-grid-cell-hover-border-color: var(--b-color-separator-primary);
+  --b-data-grid-cell-padding: calc(var(--b-spacer-070) - (var(--b-border-width-s) * 2)) calc(var(--b-spacer-070) - var(--b-border-width-s));
+  --b-data-grid-cell-border: var(--b-border-width-s) solid transparent;
   --b-data-grid-cell-background-color: var(--b-color-background-primary);
   --b-data-grid-row-row-actions-container-row-actions-menu-open-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-row-row-actions-container-hover-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-row-row-actions-container-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-row-row-actions-container-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-rows-loading-container-padding: calc(var(--b-spacer-070) - (var(--b-border-width-s) * 2));
   --b-data-grid-row-nested-row-hover-background-color: var(--b-color-background-primary-hover);
   --b-data-grid-row-nested-row-hover: var(--b-color-background-secondary-hover);
   --b-data-grid-row-nested-row-background-color: var(--b-color-background-primary);
   --b-data-grid-row-nested-slot-background-color: var(--b-color-background-primary);
-  --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
+  --b-data-grid-row-selected-hover-background-color: var(--b-color-background-selected-hover);
+  --b-data-grid-row-selected-background-color: var(--b-color-background-selected);
+  --b-data-grid-row-highlighted-hover-background-color: var(--b-color-background-warning-weak-hover);
+  --b-data-grid-row-highlighted-background-color: var(--b-color-background-warning-weak);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);
   --b-data-grid-row-hover-background-color: var(--b-color-background-primary-hover);
   --b-data-grid-row-color: var(--b-color-label-primary);
@@ -1568,6 +1581,7 @@
   --b-data-grid-column-actions-padding-left: var(--b-spacer-030);
   --b-data-grid-column-actions-gap: var(--b-spacer-010);
   --b-data-grid-column-draggable-ghost-background-color: var(--b-color-background-selected);
+  --b-data-grid-column-header-padding: calc(var(--b-spacer-040) - var(--b-border-width-s)) 0;
   --b-data-grid-column-header-gap: var(--b-spacer-040);
   --b-data-grid-column-header-and-actions-gap: var(--b-spacer-020);
   --b-data-grid-column-separator-z-index: var(--b-z-index-local-tier-1);
@@ -1582,7 +1596,7 @@
   --b-data-grid-column-hover-sort-icon-color: var(--b-color-label-tertiary);
   --b-data-grid-column-hover-background-color: var(--b-color-background-tertiary);
   --b-data-grid-column-color: var(--b-color-label-primary);
-  --b-data-grid-column-padding: 7px var(--b-spacer-070);
+  --b-data-grid-column-padding: 0 calc(var(--b-spacer-070) - var(--b-border-width-s));
   --b-data-grid-column-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-data-grid-column-background-color: var(--b-color-background-primary);
   --b-data-grid-columns-small-container-padding: var(--b-spacer-070);
@@ -1591,7 +1605,7 @@
   --b-data-grid-columns-select-column-all-padding-left: var(--b-spacer-010);
   --b-data-grid-columns-select-column-gap: var(--b-spacer-020);
   --b-data-grid-columns-select-column-padding-right: var(--b-spacer-020);
-  --b-data-grid-columns-select-column-padding-left: var(--b-spacer-040);
+  --b-data-grid-columns-select-column-padding-left: calc(var(--b-spacer-040) - var(--b-border-width-s));
   --b-data-grid-columns-frozen-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-columns-frozen-border-right-width: var(--b-border-width-s);
   --b-data-grid-columns-frozen-border-right-color: var(--b-color-separator-secondary);
@@ -1636,7 +1650,9 @@
   --b-dashboard-section-controls-gap: var(--b-spacer-040);
   --b-dashboard-section-columns-m-and-up-gap: var(--b-spacer-120);
   --b-dashboard-section-columns-gap: var(--b-spacer-090);
-  --b-dashboard-section-content-gap: var(--b-spacer-100);
+  --b-dashboard-section-content-gap: var(--b-spacer-090);
+  --b-dashboard-section-l-and-up-padding-bottom: var(--b-spacer-100);
+  --b-dashboard-section-padding-bottom: var(--b-spacer-090);
   --b-dashboard-section-gap: var(--b-spacer-060);
   --b-dashboard-template-sticky-border-border-bottom: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-dashboard-template-sticky-items-z-index: var(--b-z-index-local-tier-3);
@@ -1645,10 +1661,13 @@
   --b-dashboard-template-top-section-gap: var(--b-spacer-040);
   --b-dashboard-template-header-padding-bottom: var(--b-spacer-040);
   --b-dashboard-template-container-m-and-up-spacing: var(--b-spacer-100);
+  --b-dashboard-template-container-l-and-up-spacing: var(--b-spacer-100);
   --b-dashboard-template-container-spacing: var(--b-spacer-090);
   --b-dashboard-template-xxl-padding: var(--b-spacer-110) var(--b-spacer-130);
   --b-dashboard-template-m-and-up-padding: var(--b-spacer-110) var(--b-spacer-110);
-  --b-dashboard-template-padding: var(--b-spacer-090) var(--b-spacer-090);
+  --b-dashboard-template-l-and-up-padding: var(--b-spacer-080) var(--b-spacer-090);
+  --b-dashboard-template-s-and-up-padding: var(--b-spacer-070) var(--b-spacer-090);
+  --b-dashboard-template-padding: var(--b-spacer-070) var(--b-spacer-070);
   --b-currency-color: var(--b-color-label-primary);
   --b-country-label-color: var(--b-color-label-primary);
   --b-controls-group-label-container-margin-bottom: var(--b-spacer-060);
@@ -2037,6 +2056,8 @@
   --b-alert-padding-mobile: var(--b-spacer-070);
   --b-alert-padding: var(--b-spacer-080);
   --b-alert-border-radius: var(--b-border-radius-m);
+  --b-ai-button-icon-color: var(--b-color-decorative-green);
+  --b-ai-button-animation-background: var(--b-color-decorative-green);
   --b-action-bar-animation-duration: var(--b-animation-duration-moderate);
   --b-action-bar-close-button-margin-right-mobile: var(--b-spacer-070);
   --b-action-bar-close-button-margin-right: var(--b-spacer-090);
@@ -2080,6 +2101,8 @@
   --b-text-rich-text-heading-margin: var(--b-spacer-100) 0 var(--b-spacer-050) 0;
   --b-focus-ring-outline: var(--b-border-width-l);
   --b-focus-ring-spacer: var(--b-border-width-s);
+  --b-data-grid-cell-actions-background-gradient-highlighted-background: var(--b-gradient-data-grid-highlighted-hover);
+  --b-data-grid-cell-actions-background-gradient-selected-background: var(--b-gradient-data-grid-selected-hover);
   --b-data-grid-cell-actions-background-gradient-zebra-background: var(--b-gradient-data-grid-zebra-hover);
   --b-data-grid-cell-actions-background-gradient-background: var(--b-gradient-data-grid-hover);
 }