@otto-de/b2b-core-components 1.37.0 → 1.37.2

package/dist/collection/components/radio/radio.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/radio/radio.stories.js

@@ -2,15 +2,15 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ label, required, name, checked, disabled, invalid, value, hint, error, }) => {
     return html ` <b2b-radio-button
-    label="${label}"
-    required="${required}"
-    name="${name}"
-    checked="${checked}"
-    value="${value}"
-    invalid="${invalid}"
-    disabled="${disabled}"
-    hint="${hint}"
-    error="${error}"></b2b-radio-button>`;
+    label=${label}
+    required=${required}
+    name=${name}
+    checked=${checked}
+    value=${value}
+    invalid=${invalid}
+    disabled=${disabled}
+    hint=${hint}
+    error=${error}></b2b-radio-button>`;
 };
 const defaultArgs = {
     label: 'Single Radio Button Label',

package/dist/collection/components/radio-group/radio-group.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/radio-group/radio-group.stories.js

@@ -2,21 +2,21 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ label, required, name, disabled, invalid, alignment, hint, error, }) => {
     return html ` <b2b-radio-group
-    label="${label}"
-    required="${required}"
-    name="${name}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    alignment="${alignment}"
-    hint="${hint}"
-    error="${error}">
+    label=${label}
+    required=${required}
+    name=${name}
+    disabled=${disabled}
+    invalid=${invalid}
+    alignment=${alignment}
+    hint=${hint}
+    error=${error}>
     <b2b-radio-button
       label="Option 1"
-      name="${name}"
+      name=${name}
       value="one"></b2b-radio-button>
     <b2b-radio-button
       label="Option 2"
-      name="${name}"
+      name=${name}
       value="two"></b2b-radio-button>
   </b2b-radio-group>`;
 };

package/dist/collection/components/required-separator/required-separator.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/required-separator/required-separator.stories.js

@@ -3,7 +3,7 @@ import { html } from "lit-html";
 const Template = ({ label }) => {
     return html `<div style="width: 400px">
     <b2b-input required="true" label="Name"></b2b-input
-    ><br /><b2b-required-separator label="${label}"></b2b-required-separator>
+    ><br /><b2b-required-separator label=${label}></b2b-required-separator>
   </div>`;
 };
 const defaultArgs = {

package/dist/collection/components/rounded-icon/rounded-icon.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/rounded-icon/rounded-icon.stories.js

@@ -2,8 +2,8 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const TemplateIcon = ({ color, contentColor, iconName }) => {
     return html `<div>
-    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
-      <b2b-icon-100 slot="icon" icon="${iconName}"></b2b-icon-100>
+    <b2b-rounded-icon color=${color} content-color=${contentColor}>
+      <b2b-icon-100 slot="icon" icon=${iconName}></b2b-icon-100>
     </b2b-rounded-icon>
   </div>`;
 };
@@ -16,7 +16,7 @@ story010Icon.args = {
 story010Icon.storyName = 'Icon Content';
 const TemplateText = ({ color, contentColor, textContent }) => {
     return html `<div>
-    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
+    <b2b-rounded-icon color=${color} content-color=${contentColor}>
       <span slot="text">${textContent}</span>
     </b2b-rounded-icon>
   </div>`;

package/dist/collection/components/scrollable-container/scrollable-container.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/search/search.stories.js

@@ -26,7 +26,7 @@ const Template = ({ placeholder, optionsList, disabled }) => {
       contenteditable
       data-testid="search-element"
       disabled=${disabled}
-      placeholder="${placeholder}"
+      placeholder=${placeholder}
       .optionsList=${optionsList}
       @b2b-input=${onInput}></b2b-search>
   </div>`;
@@ -64,7 +64,7 @@ const CustomSearchTemplate = ({ placeholder, optionsList }) => {
     <b2b-input-group>
       <b2b-input-list
         slot="start"
-        placeholder="${placeholder}"
+        placeholder=${placeholder}
         .optionsList=${optionsList}></b2b-input-list>
       <b2b-dropdown style="width: 50%" invalid error="an error">
         <option value="one">Option 1</option>

package/dist/collection/components/separator/separator.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/separator/separator.stories.js

@@ -13,9 +13,9 @@ const Template = ({ alignment }) => {
             margin: `margin: 10px 0;`,
             width: null,
         };
-    return html `<div style="${styles.display}">
+    return html `<div style=${styles.display}>
     <p style="${styles.margin} ${styles.width}">${content}</p>
-    <b2b-separator alignment="${alignment}"></b2b-separator>
+    <b2b-separator alignment=${alignment}></b2b-separator>
     <p style="${styles.margin} ${styles.width}">${content}</p>
   </div>`;
 };

package/dist/collection/components/shimmer/shimmer.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/shimmer/shimmer.js

@@ -55,7 +55,7 @@ export class ShimmerComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The width of the shimmer effect im px."
+                    "text": "The width of the shimmer effect in px."
                 },
                 "attribute": "width",
                 "reflect": false

package/dist/collection/components/shimmer/shimmer.stories.js

@@ -24,10 +24,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-shimmer
-      loading="${args.loading}"
-      width="${args.width}"
-      height="${args.height}">
-      This is the mean content which takes a while to load.
+      loading=${args.loading}
+      width=${args.width}
+      height=${args.height}>
+      This is the main content, which takes a while to load.
     </b2b-shimmer>`;
     },
 };

package/dist/collection/components/snackbar/snackbar.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/snackbar/snackbar.stories.js

@@ -45,14 +45,14 @@ const meta = {
       <hr />
       <b2b-snackbar
         @b2b-close=${hideSnackbar}
-        description="${args.description}"
-        type="${args.type}"
-        opened="${args.opened}"
-        timed="${args.timed}"
-        duration="${args.duration}"
-        has-action="${args.hasAction}"
-        action-label="${args.actionLabel}"
-        width="${args.width}"></b2b-snackbar>`;
+        description=${args.description}
+        type=${args.type}
+        opened=${args.opened}
+        timed=${args.timed}
+        duration=${args.duration}
+        has-action=${args.hasAction}
+        action-label=${args.actionLabel}
+        width=${args.width}></b2b-snackbar>`;
     },
 };
 export default meta;

package/dist/collection/components/spinner/spinner.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/spinner/spinner.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ size, color }) => {
-    return html ` <b2b-spinner size="${size}" color="${color}"></b2b-spinner>`;
+    return html ` <b2b-spinner size=${size} color=${color}></b2b-spinner>`;
 };
 const defaultArgs = {
     size: '100',

package/dist/collection/components/tab/tab.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/tab-group/tab-group.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ useRouter }) => {
-    return html ` <b2b-tab-group use-router="${useRouter}">
+    return html ` <b2b-tab-group use-router=${useRouter}>
     <b2b-tab slot="tab">First Tab</b2b-tab>
     <b2b-tab-panel slot="panel"
       ><div>

package/dist/collection/components/tab-panel/tab-panel.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/table/table-cell/table-cell.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/table/table-header/table-header.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/table/table-row/table-row.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/table/table-rowgroup/table-rowgroup.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/table/table.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;