@otto-de/b2b-core-components 1.9.0-beta.2 → 1.10.0

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

@@ -1,17 +1,16 @@
 var __rest = (this && this.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s)
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 import { getArgTypes } from "../../docs/config/utils";
-import { userEvent } from "@storybook/testing-library";
 import { html } from "lit-html";
 import { repeat } from "lit/directives/repeat.js";
 import { sampleData, smallSampleData, longSampleData, userSampleData, } from "./stories.data";
@@ -21,41 +20,41 @@ const cellArgs = getArgTypes('b2b-table-cell');
 const rowArgs = getArgTypes('b2b-table-row');
 const headerArgs = getArgTypes('b2b-table-header');
 const meta = {
-  title: 'Components/Table/Table',
-  component: 'b2b-table',
-  parameters: {
-    backgrounds: {
-      default: 'docsBackground',
-      values: [{ name: 'docsBackground', value: '#ffffff' }],
+    title: 'Components/Table/Table',
+    component: 'b2b-table',
+    parameters: {
+        backgrounds: {
+            default: 'docsBackground',
+            values: [{ name: 'docsBackground', value: '#ffffff' }],
+        },
     },
-  },
-  args: {
-    size: 'expand',
-    textWrap: false,
-    align: 'left',
-    highlight: true,
-    withDividers: false,
-    color: 'default',
-    data: sampleData,
-    parentWidth: '600px',
-    firstColumnWidth: 'auto',
-    firstRowHeight: 'auto',
-    contentAlign: 'left',
-  },
-  argTypes: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, tableArgs), cellArgs), rowArgs), headerArgs), { data: { table: { disable: true } }, parentWidth: { table: { disable: true } }, firstColumnWidth: { table: { disable: true } }, firstRowHeight: { table: { disable: true } } }),
-  render: (_a) => {
-    var args = __rest(_a, []);
-    return html `<div style="width: ${args.parentWidth}"><b2b-table size="${args.size}">
+    args: {
+        size: 'expand',
+        textWrap: false,
+        align: 'left',
+        highlight: true,
+        withDividers: false,
+        color: 'default',
+        data: sampleData,
+        parentWidth: '600px',
+        firstColumnWidth: 'auto',
+        firstRowHeight: 'auto',
+        contentAlign: 'left',
+    },
+    argTypes: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, tableArgs), cellArgs), rowArgs), headerArgs), { data: { table: { disable: true } }, parentWidth: { table: { disable: true } }, firstColumnWidth: { table: { disable: true } }, firstRowHeight: { table: { disable: true } }, colspan: { table: { disable: true } }, divider: { table: { disable: true } }, checked: { table: { disable: true } }, indeterminate: { table: { disable: true } }, fixed: { table: { disable: true } }, sortId: { table: { disable: true } } }),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div style="width: ${args.parentWidth}"><b2b-table size="${args.size}">
         <b2b-table-rowgroup type="header">
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
-      return html `<b2b-table-header
+            return html `<b2b-table-header
                 ?divider=${args.withDividers &&
-        index !== args.data.columns.length - 1}
+                index !== args.data.columns.length - 1}
                 style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
                 >${columnName}</b2b-table-header
               >`;
-    })}
+        })}
     </b2b-table-rowgroup>
     <b2b-table-rowgroup type="body">
       ${repeat(args.data.rows, (row, index) => html `
@@ -63,8 +62,8 @@ const meta = {
             highlight="${args.highlight}"
             color=${index === 0 ? args.color : 'default'}>
             ${repeat(
-    // @ts-ignore
-    row, (cell, index) => html `<b2b-table-cell
+        // @ts-ignore
+        row, (cell, index) => html `<b2b-table-cell
                 ?divider=${args.withDividers && index === 0}
                 align="${args.align}"
                 text-wrap="${args.textWrap}"
@@ -76,58 +75,58 @@ const meta = {
         `)}
     </b2b-table-rowgroup>
   </b2b-table></div>`;
-  },
+    },
 };
 export default meta;
 export const SizeExpand = {
-  args: Object.assign({}, meta.args),
+    args: Object.assign({}, meta.args),
 };
 export const SizeEqual = {
-  args: Object.assign(Object.assign({}, meta.args), { size: 'equal' }),
+    args: Object.assign(Object.assign({}, meta.args), { size: 'equal' }),
 };
 export const SizeExpandFullWidth = {
-  args: Object.assign(Object.assign({}, meta.args), { parentWidth: '100%' }),
+    args: Object.assign(Object.assign({}, meta.args), { parentWidth: '100%' }),
 };
 export const SmallTableExpand = {
-  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, parentWidth: '450px' }),
+    args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, parentWidth: '450px' }),
 };
 export const SmallTableEqual = {
-  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, size: 'equal', parentWidth: '450px' }),
+    args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, size: 'equal', parentWidth: '450px' }),
 };
 export const FixedCellSize = {
-  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, size: 'equal', firstColumnWidth: '50%', withDividers: true }),
+    args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, size: 'equal', firstColumnWidth: '50%', withDividers: true }),
 };
 export const FixedRowHeight = {
-  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, size: 'expand', firstRowHeight: '120px' }),
+    args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, size: 'expand', firstRowHeight: '120px' }),
 };
 export const WithDividers = {
-  args: Object.assign(Object.assign({}, meta.args), { withDividers: true }),
+    args: Object.assign(Object.assign({}, meta.args), { withDividers: true }),
 };
 export const ColoredRow = {
-  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, color: 'group' }),
+    args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, color: 'group' }),
 };
 export const ScrollableTable = {
-  args: Object.assign(Object.assign({}, meta.args), { parentWidth: '600px', parentHeight: '250px', columnsWidth: '80px', data: longSampleData, size: 'expand', withDividers: true, textWrap: false, align: 'left' }),
-  render: (_a) => {
-    var args = __rest(_a, []);
-    return html `<b2b-scrollable-container
+    args: Object.assign(Object.assign({}, meta.args), { parentWidth: '600px', parentHeight: '250px', columnsWidth: '80px', data: longSampleData, size: 'expand', withDividers: true, textWrap: false, align: 'left' }),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<b2b-scrollable-container
     style="width: ${args.parentWidth}; height: ${args.parentHeight};">
     <b2b-table size="${args.size}">
       <b2b-table-rowgroup type="header">
         <b2b-table-row>
           ${args.data.columns.map((columnName, index) => {
-      return html ` <b2b-table-header
+            return html ` <b2b-table-header
               ?divider=${args.withDividers &&
-        index !== args.data.columns.length - 1}
+                index !== args.data.columns.length - 1}
               style=${`min-width: ${args.columnsWidth}`}
               >${columnName}</b2b-table-header
             >`;
-    })}
+        })}
         </b2b-table-row>
       </b2b-table-rowgroup>
       <b2b-table-rowgroup type="body">
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
+            return html `<b2b-table-row
             highlight="${args.highlight}"
             color=${index === 0 ? args.color : 'default'}>
             ${row.map((data, index) => html `<b2b-table-cell
@@ -137,18 +136,18 @@ export const ScrollableTable = {
                   >${data}</b2b-table-cell
                 >`)}
           </b2b-table-row>`;
-    })}
+        })}
       </b2b-table-rowgroup>
     </b2b-table>
   </b2b-scrollable-container>`;
-  },
+    },
 };
 const RenderSortableTable = (_a) => {
-  var args = __rest(_a, []);
-  return html `
+    var args = __rest(_a, []);
+    return html `
       <b2b-table-rowgroup type="body">
         ${args.data.rows.map((row, index) => {
-    return html `<b2b-table-row
+        return html `<b2b-table-row
             highlight="${args.highlight}"
             color=${index === 0 ? args.color : 'default'}>
             ${row.map(data => html `<b2b-table-cell
@@ -158,112 +157,98 @@ const RenderSortableTable = (_a) => {
                   >${data}</b2b-table-cell
                 >`)}
           </b2b-table-row>`;
-  })}
+    })}
       </b2b-table-rowgroup>
     </b2b-table>
   </div>`;
 };
 const SortableTableMeta = {
-  args: Object.assign({}, meta.args),
-  decorators: [
-    story => {
-      const [args, updateArgs] = useArgs();
-      const onSort = (event, index, data) => {
-        switch (event.detail) {
-          case 'ascending':
-            data.rows.sort((a, b) => {
-              if (a[index] < b[index]) {
-                return -1;
-              }
-              else if (a[index] > b[index]) {
-                return 1;
-              }
-              else {
-                return 0;
-              }
-            });
-            break;
-          case 'descending':
-            data.rows.sort((a, b) => {
-              if (a[index] < b[index]) {
-                return 1;
-              }
-              else if (a[index] > b[index]) {
-                return -1;
-              }
-              else {
-                return 0;
-              }
-            });
-            break;
-        }
-        updateArgs({ data: data });
-      };
-      return html `<div>
+    args: Object.assign({}, meta.args),
+    decorators: [
+        story => {
+            const [args, updateArgs] = useArgs();
+            const onSort = (event, index, data) => {
+                switch (event.detail) {
+                    case 'ascending':
+                        data.rows.sort((a, b) => {
+                            if (a[index] < b[index]) {
+                                return -1;
+                            }
+                            else if (a[index] > b[index]) {
+                                return 1;
+                            }
+                            else {
+                                return 0;
+                            }
+                        });
+                        break;
+                    case 'descending':
+                        data.rows.sort((a, b) => {
+                            if (a[index] < b[index]) {
+                                return 1;
+                            }
+                            else if (a[index] > b[index]) {
+                                return -1;
+                            }
+                            else {
+                                return 0;
+                            }
+                        });
+                        break;
+                }
+                updateArgs({ data: data });
+            };
+            return html `<div>
         <b2b-table size="expand">
           <b2b-table-rowgroup type="header">
             <b2b-table-row>
               ${userSampleData.columns.map(column => {
-        return html ` <b2b-table-header
+                return html ` <b2b-table-header
                   sort-direction="not-sorted"
                   content-align=${args.contentAlign}
                   @b2b-change=${event => onSort(event, column.id, userSampleData)}
                   ?divider="false"
                   >${column.name}</b2b-table-header
                 >`;
-      })}
+            })}
             </b2b-table-row> </b2b-table-rowgroup
           >${story()}</b2b-table
         >
       </div>`;
-    },
-  ],
+        },
+    ],
 };
 export const SortableTable = {
-  args: Object.assign(Object.assign({}, SortableTableMeta.args), { contentAlign: 'left', align: 'left', data: userSampleData }),
-  decorators: SortableTableMeta.decorators,
-  render: RenderSortableTable,
-  play: async ({ canvasElement }) => {
-    setTimeout(async () => {
-      const header = await canvasElement.querySelector('b2b-table-header');
-      const sortArrow = header.shadowRoot.querySelector('div');
-      await userEvent.click(sortArrow);
-    }, 2000);
-  },
+    args: Object.assign(Object.assign({}, SortableTableMeta.args), { contentAlign: 'left', align: 'left', data: userSampleData }),
+    decorators: SortableTableMeta.decorators,
+    render: RenderSortableTable,
 };
 export const SortableTableRightAlign = {
-  args: Object.assign(Object.assign({}, SortableTableMeta.args), { contentAlign: 'right', align: 'right', data: userSampleData }),
-  decorators: SortableTableMeta.decorators,
-  render: RenderSortableTable,
-  play: async ({ canvasElement }) => {
-    setTimeout(async () => {
-      const header = await canvasElement.querySelector('b2b-table-header');
-      const sortArrow = header.shadowRoot.querySelector('div');
-      await userEvent.click(sortArrow);
-    }, 1000);
-  },
+    args: Object.assign(Object.assign({}, SortableTableMeta.args), { contentAlign: 'right', align: 'right', data: userSampleData }),
+    decorators: SortableTableMeta.decorators,
+    render: RenderSortableTable,
 };
 export const AccordionTable = {
-  args: Object.assign({}, meta.args),
-  render: (_a) => {
-    var args = __rest(_a, []);
-    return html `<div>
+    args: Object.assign({}, meta.args),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div>
     <b2b-table size="${args.size}">
       <b2b-table-rowgroup type="header" accordion>
         <b2b-table-row>
           ${args.data.columns.map((columnName, index) => {
-      return html ` <b2b-table-header
+            return html ` <b2b-table-header
               ?divider=${args.withDividers &&
-        index !== args.data.columns.length - 1}
+                index !== args.data.columns.length - 1}
               style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
               >${columnName}</b2b-table-header
             >`;
-    })}
+        })}
         </b2b-table-row>
       </b2b-table-rowgroup>
       <b2b-table-rowgroup type="body" accordion>
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
+            return html `<b2b-table-row
             highlight="${args.highlight}"
             color=${index === 0 ? args.color : 'default'}>
             ${row.map(data => html `<b2b-table-cell
@@ -276,11 +261,11 @@ export const AccordionTable = {
               ><b2b-button size="50">Action</b2b-button></b2b-table-cell
             >
           </b2b-table-row>`;
-    })}
+        })}
       </b2b-table-rowgroup>
       <b2b-table-rowgroup type="body" accordion opened>
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
+            return html `<b2b-table-row
             highlight="${args.highlight}"
             color=${index === 0 ? args.color : 'default'}>
             ${row.map(data => html `<b2b-table-cell
@@ -293,33 +278,33 @@ export const AccordionTable = {
               ><b2b-button size="50">Action</b2b-button></b2b-table-cell
             >
           </b2b-table-row>`;
-    })}
+        })}
       </b2b-table-rowgroup>
     </b2b-table>
   </div>`;
-  },
+    },
 };
-export const Selectable = {
-  args: Object.assign({}, meta.args),
-  render: (_a) => {
-    var args = __rest(_a, []);
-    return html `<div>
+export const SelectableTable = {
+    args: Object.assign({}, meta.args),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div>
     <b2b-table size="${args.size}">
       <b2b-table-rowgroup type="header" accordion selectable>
         <b2b-table-row>
           ${args.data.columns.map((columnName, index) => {
-      return html ` <b2b-table-header
+            return html ` <b2b-table-header
               ?divider=${args.withDividers &&
-        index !== args.data.columns.length - 1}
+                index !== args.data.columns.length - 1}
               style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
               >${columnName}</b2b-table-header
             >`;
-    })}
+        })}
         </b2b-table-row>
       </b2b-table-rowgroup>
       <b2b-table-rowgroup type="body" accordion selectable>
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
+            return html `<b2b-table-row
             highlight="${args.highlight}"
             color=${index === 0 ? args.color : 'default'}>
             ${row.map(data => html `<b2b-table-cell
@@ -332,11 +317,11 @@ export const Selectable = {
               ><b2b-button size="50">Action</b2b-button></b2b-table-cell
             >
           </b2b-table-row>`;
-    })}
+        })}
       </b2b-table-rowgroup>
       <b2b-table-rowgroup type="body" accordion opened selectable>
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
+            return html `<b2b-table-row
             highlight="${args.highlight}"
             color=${index === 0 ? args.color : 'default'}>
             ${row.map(data => html `<b2b-table-cell
@@ -349,9 +334,59 @@ export const Selectable = {
               ><b2b-button size="50">Action</b2b-button></b2b-table-cell
             >
           </b2b-table-row>`;
-    })}
+        })}
       </b2b-table-rowgroup>
     </b2b-table>
   </div>`;
-  },
+    },
+};
+export const ColspanTable = {
+    args: Object.assign(Object.assign({}, meta.args), { size: 'colspan', selectable: false, withDividers: true }),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div style="width: 500px">
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header" selectable="${args.selectable}">
+        <b2b-table-row>
+          <b2b-table-header divider="${args.withDividers}" colspan="2"
+            >2 Columns</b2b-table-header
+          >
+          <b2b-table-header divider="${args.withDividers}"
+            >1 Column</b2b-table-header
+          >
+          <b2b-table-header>1 Column</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" selectable="${args.selectable}">
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell>1 Column</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}" colspan="2"
+            >2 Columns</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell>1 Column</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+    </b2b-table>
+  </div>`;
+    },
 };

package/dist/collection/components/table/utils.js

@@ -1,18 +1,32 @@
 export function updateCheckboxState(rows, header) {
-  let someSelected = rows.some(item => item.checked === true);
-  let everySelected = rows.every(item => item.checked === true);
-  header.checked = everySelected;
-  header.indeterminate = someSelected && !everySelected;
+    let someSelected = rows.some(item => item.checked === true);
+    let everySelected = rows.every(item => item.checked === true);
+    header.checked = everySelected;
+    header.indeterminate = someSelected && !everySelected;
+}
+/** Sets appropriate column width for colspan table */
+export function setFlexBase(host, colspan, totalCols, selectable, accordion) {
+    const flexBase = colspan != undefined ? colspan : 1;
+    let border = 0;
+    // factor in dividers for multi columns
+    if (flexBase > 1) {
+        border = flexBase;
+    }
+    // calculate space for control columns
+    const checkboxSpace = selectable ? (40 / totalCols) * flexBase : 0;
+    const accordionSpace = accordion ? (48 / totalCols) * flexBase : 0;
+    const style = `calc((${(flexBase / totalCols) * 100}% - ${checkboxSpace + accordionSpace}px) - ${24 - border}px)`;
+    host.style.flexBasis = style;
 }
 export function getAllRows(hostEl) {
-  return Array.from(hostEl.querySelectorAll('b2b-table-row'));
+    return Array.from(hostEl.querySelectorAll('b2b-table-row'));
 }
 export function getRemainingRows(hostEl) {
-  return Array.from(hostEl.querySelectorAll('b2b-table-row')).slice(1);
+    return Array.from(hostEl.querySelectorAll('b2b-table-row')).slice(1);
 }
 export function getFirstRow(hostEl) {
-  const firstRow = hostEl.querySelector('b2b-table-row');
-  if (firstRow != null) {
-    return firstRow;
-  }
+    const firstRow = hostEl.querySelector('b2b-table-row');
+    if (firstRow != null) {
+        return firstRow;
+    }
 }

package/dist/collection/components/textarea/textarea.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -28,7 +28,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -150,7 +151,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-info-100: #003264;
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;