npm - @otto-de/b2b-core-components - Versions diffs - 1.31.1 → 1.31.3 - Mend

@otto-de/b2b-core-components 1.31.1 → 1.31.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (321) hide show

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

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/toggle-button/toggle-button.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/toggle-chip/toggle-chip.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/toggle-group/toggle-group.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/toggle-switch/toggle-switch.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/tooltip/tooltip.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/wizard/wizard.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/wizard-icon/wizard-icon.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/docs/tokens/color.stories.js CHANGED Viewed

@@ -45,7 +45,7 @@ const semanticBottomTokensList = [
     'info',
     'hover',
 ];
-const basicTokensList = ['black', 'white', 'grey', 'red'];
+const basicTokensList = ['black', 'white', 'grey', 'red', 'blue'];
 const ColorTokens = ({}) => {
     return html `
     <b2b-headline>Color</b2b-headline>