blip-ds 1.243.2 → 1.244.0

package/dist/collection/components/button/button.css

@@ -41,6 +41,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  overflow: hidden;
   border-radius: 8px;
   padding-left: 16px;
   padding-right: 16px;
@@ -57,15 +58,22 @@
 .button * {
   pointer-events: none;
 }
+.button:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: transparent;
+  mix-blend-mode: multiply;
+}
 .button--size-tall {
   padding-top: 14px;
   padding-bottom: 14px;
-  height: 40px;
+  height: 56px;
 }
 .button--size-tall--icon {
   padding-top: 12px;
   padding-bottom: 12px;
-  height: 40px;
+  height: 56px;
 }
 .button--size-standard {
   padding-top: 9px;
@@ -110,185 +118,94 @@
   display: flex;
   align-items: center;
 }
-.button__primary {
-  background: #3f7de8;
-  color: #ffffff;
-}
-.button__primary:hover {
-  background: #125ad5;
-}
-.button__primary:active {
-  background: #0747a6;
-  color: #ffffff;
-}
-.button__primary--disabled {
-  background: #e8f2ff;
+.button__disabled {
   pointer-events: none;
-  color: #637798;
+  opacity: 0.5;
 }
-.button__primary--disabled:hover, .button__primary--disabled:active {
-  background: #e8f2ff;
-  color: #637798;
+.button__primary {
+  background: var(--color-primary, #3f7de8);
+  color: var(--color-content-bright, #fff);
 }
-.button__secondary {
-  background: transparent;
-  color: #505f79;
+.button__primary:hover:before {
+  background: #d2dfe6;
 }
-.button__secondary:hover {
-  background: #e8f2ff;
-  color: #3f7de8;
+.button__primary:active:before {
+  background: #b9cbd3;
 }
-.button__secondary:active {
-  background: #d1e3fa;
-  color: #3f7de8;
+.button__secondary {
+  background: var(--color-secondary, #3f7de8);
+  color: var(--color-content-bright, #fff);
 }
-.button__secondary--disabled {
-  background: transparent;
-  pointer-events: none;
-  color: #637798;
+.button__secondary:hover:before {
+  background: #d2dfe6;
 }
-.button__secondary--disabled:hover, .button__secondary--disabled:active {
-  background: transparent;
-  color: #637798;
+.button__secondary:active:before {
+  background: #b9cbd3;
 }
 .button__tertiary {
   background: transparent;
-  color: #3f7de8;
-  border: 1px solid #d2dfe6;
-}
-.button__tertiary:hover {
-  border: 1px solid #3f7de8;
-  color: #3f7de8;
+  color: var(--color-primary, #3f7de8);
+  border: 2px solid var(--color-primary, #3f7de8);
 }
-.button__tertiary:active {
-  background: #d1e3fa;
-  border: 1px solid #3f7de8;
-  color: #3f7de8;
+.button__tertiary:hover:before {
+  background: #e7edf4;
 }
-.button__tertiary--disabled {
-  background: transparent;
-  pointer-events: none;
-  color: #637798;
-  border: 1px solid #637798;
-}
-.button__tertiary--disabled:hover, .button__tertiary--disabled:active {
-  background: transparent;
-  color: #637798;
-  border: 1px solid #637798;
+.button__tertiary:active:before {
+  background: #d2dfe6;
 }
 .button__secondary--white {
   background: transparent;
-  color: #ffffff;
-}
-.button__secondary--white:hover {
-  background: rgba(255, 255, 255, 0.3);
-  color: #ffffff;
+  color: var(--color-content-bright, #fff);
 }
-.button__secondary--white:active {
-  background: rgba(255, 255, 255, 0.4);
-  color: #ffffff;
+.button__secondary--white:hover:before {
+  background: #e7edf4;
 }
-.button__secondary--white--disabled {
-  background: #e8f2ff;
-  pointer-events: none;
-  color: #8ca0b3;
-}
-.button__secondary--white--disabled:hover, .button__secondary--white--disabled:active {
-  background: #e8f2ff;
-  color: #8ca0b3;
+.button__secondary--white:active:before {
+  background: #d2dfe6;
 }
 .button__ghost {
   background: transparent;
-  color: #3f7de8;
-  border: 1px solid #3f7de8;
-}
-.button__ghost:hover {
-  background: #e8f2ff;
-  color: #3f7de8;
-  border: 1px solid #3f7de8;
+  color: var(--color-primary, #3f7de8);
 }
-.button__ghost:active {
-  background: #d1e3fa;
-  color: #3f7de8;
-  border: 1px solid #3f7de8;
+.button__ghost:hover:before {
+  background: #e7edf4;
 }
-.button__ghost--disabled {
-  background: transparent;
-  pointer-events: none;
-  color: #637798;
-  border: 1px solid #637798;
-}
-.button__ghost--disabled:hover, .button__ghost--disabled:active {
-  background: transparent;
-  color: #637798;
-  border: 1px solid #637798;
+.button__ghost:active:before {
+  background: #d2dfe6;
 }
 .button__delete {
-  background: #ff4c4c;
-  color: #ffffff;
-}
-.button__delete:hover {
-  background: #a01c2c;
-  color: #ffffff;
+  background: var(--color-delete, #ff4c4c);
+  color: var(--color-content-bright, #fff);
 }
-.button__delete:active {
-  background: #6a2026;
-  color: #ffffff;
+.button__delete:hover:before {
+  background: #d2dfe6;
 }
-.button__delete--disabled {
-  background: #fccccc;
-  pointer-events: none;
-  color: #ba5a5a;
-}
-.button__delete--disabled:hover, .button__delete--disabled:active {
-  background: #fccccc;
-  color: #ba5a5a;
+.button__delete:active:before {
+  background: #b9cbd3;
 }
 .button__dashed {
   background: transparent;
-  color: #3f7de8;
-  border: 1px dashed #3f7de8;
+  color: var(--color-primary, #3f7de8);
+  border: 1px dashed var(--color-primary, #3f7de8);
 }
-.button__dashed:hover {
-  background: transparent;
-  color: #125ad5;
-  border: 1px dashed #125ad5;
+.button__dashed:hover:before {
+  background: #e7edf4;
 }
-.button__dashed:active {
-  background: transparent;
-  color: #3f7de8;
-  border: 1px dashed #3f7de8;
-}
-.button__dashed--disabled {
-  background: transparent;
-  pointer-events: none;
-  color: #8ca0b3;
-  border: 1px dashed #8ca0b3;
-}
-.button__dashed--disabled:hover, .button__dashed--disabled:active {
-  background: transparent;
-  color: #8ca0b3;
-  border: 1px dashed #8ca0b3;
+.button__dashed:active:before {
+  background: #d2dfe6;
 }
 .button__facebook {
   background: #1877f2;
   color: #f8fbfb;
 }
-.button__facebook:hover {
-  background: #1771e6;
+.button__facebook:hover:before {
+  background: #d2dfe6;
 }
-.button__facebook:active {
-  background: #3f7de8;
-  color: #f8fbfb;
+.button__facebook:active:before {
+  background: #b9cbd3;
 }
-.button__facebook--disabled {
-  background: #e8f2ff;
-  pointer-events: none;
-  color: #8ca0b3;
-}
-.button__facebook--disabled:hover, .button__facebook--disabled:active {
-  background: #e8f2ff;
-  color: #8ca0b3;
+.button bds-typo {
+  position: relative;
 }
 .button bds-loading-spinner {
   width: auto;

package/dist/collection/components/button/button.js

@@ -38,7 +38,6 @@ export class Button {
     return (h("div", { class: {
         button__content: true,
         [`button__content__${this.variant}`]: true,
-        [`button__content__${this.variant}--disabled`]: this.disabled,
         hide: this.bdsLoading && true,
       } }, h("bds-typo", { variant: "fs-14", lineHeight: "simple", bold: "bold" }, h("slot", null))));
   }
@@ -58,7 +57,7 @@ export class Button {
     return (h("button", { onClick: (ev) => this.handleClick(ev), disabled: this.disabled, type: this.type, class: {
         button: true,
         [`button__${this.variant}`]: true,
-        [`button__${this.variant}--disabled`]: this.disabled,
+        [`button__disabled`]: this.disabled,
         [sizeClass]: true,
         'button--size-icon--left': !!this.icon,
         'button--size-icon--right': this.arrow,

package/dist/collection/components/checkbox/checkbox.css

@@ -36,24 +36,25 @@
   outline: 0;
 }
 .checkbox__icon {
-  background: #ffffff;
+  background: var(--color-content-bright, #fff);
 }
 .checkbox__icon:hover {
-  border-color: #125ad5;
+  border-color: var(--color-brand, #3f7de8);
 }
 .checkbox--selected .checkbox__icon {
-  background-color: #3f7de8;
+  background-color: var(--color-brand, #3f7de8);
 }
 .checkbox--selected .checkbox__icon:hover {
-  background-color: #125ad5;
+  background-color: var(--color-brand, #3f7de8);
 }
 .checkbox--selected-disabled .checkbox__label {
   cursor: not-allowed;
 }
 .checkbox--selected-disabled .checkbox__icon {
-  color: #637798;
-  border: 1px solid #637798;
-  background-color: #e8f2ff;
+  color: var(--color-content-bright, #fff);
+  border: 1px solid var(--color-brand, #3f7de8);
+  background-color: var(--color-brand, #3f7de8);
+  opacity: 50%;
 }
 .checkbox--deselected .checkbox__icon__svg {
   display: none;
@@ -62,8 +63,9 @@
   cursor: not-allowed;
 }
 .checkbox--deselected-disabled .checkbox__icon {
-  background-color: #e8f2ff;
-  border: 1px solid #637798;
+  opacity: 50%;
+  background-color: var(--color-surface-1, #ffffff);
+  border: 1px solid var(--color-brand, #3f7de8);
 }
 .checkbox--deselected-disabled .checkbox__icon__svg {
   display: none;
@@ -86,8 +88,8 @@
   height: 18px;
   width: 18px;
   border-radius: 4px;
-  color: #f8fbfb;
-  border: 1px solid #3f7de8;
+  color: var(--color-surface-1, #ffffff);
+  border: 1px solid var(--color-brand, #3f7de8);
   box-sizing: border-box;
   border-radius: 4px;
   transition: all 0.3s;
@@ -98,5 +100,5 @@
 }
 .checkbox__text {
   margin-left: 8px;
-  color: #505f79;
+  color: var(--color-content-default, #202c44);
 }

package/dist/collection/components/chip-clickable/chip-clickable.css

@@ -46,7 +46,7 @@
   height: 100%;
   padding: 2px;
   border-radius: 4px;
-  outline: #c226fb solid 2px;
+  outline: var(--color-focus, #c226fb) solid 2px;
 }
 :host .chip_clickable--click {
   cursor: pointer;
@@ -71,13 +71,13 @@
 }
 :host .chip_clickable--disabled {
   cursor: default;
-  background-color: #f3f6fa;
+  background-color: var(--color-surface-3, #e7edf4);
 }
 :host .chip_clickable--disabled .chip_clickable--icon {
-  color: #505f79;
+  color: var(--color-content-default, #202c44);
 }
 :host .chip_clickable--disabled .chip_clickable--text {
-  color: #505f79;
+  color: var(--color-content-default, #202c44);
 }
 :host .chip_clickable--disabled .chip_clickable--close {
   cursor: default;
@@ -87,7 +87,7 @@
   align-items: center;
   height: 20px;
   padding-left: 4px;
-  color: #202c44;
+  color: var(--color-content-default, #202c44);
   z-index: 2;
 }
 :host .chip_clickable--close {
@@ -96,7 +96,7 @@
   height: 20px;
   padding-right: 4px;
   mix-blend-mode: hard-light;
-  color: #202c44;
+  color: var(--color-content-default, #202c44);
   opacity: 0.7;
   z-index: 2;
   position: relative;
@@ -108,7 +108,7 @@
   height: 100%;
   left: -2px;
   border-radius: 4px;
-  outline: #c226fb solid 2px;
+  outline: var(--color-focus, #c226fb) solid 2px;
 }
 :host .chip_clickable--text {
   display: flex;
@@ -117,7 +117,7 @@
   height: 20px;
   margin: 0 8px;
   z-index: 2;
-  color: #202c44;
+  color: var(--color-content-default, #202c44);
   font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
 }
 :host .chip_clickable--tall {
@@ -125,23 +125,23 @@
   border-radius: 24px;
 }
 :host .chip_clickable--default {
-  background-color: #b3d4ff;
+  background-color: var(--color-system, #b3d4ff);
 }
 :host .chip_clickable--info {
-  background-color: #80e3eb;
+  background-color: var(--color-info, #80e3eb);
 }
 :host .chip_clickable--success {
-  background-color: #90e6bc;
+  background-color: var(--color-success, #90e6bc);
 }
 :host .chip_clickable--warning {
-  background-color: #fff6a8;
+  background-color: var(--color-warning, #fff6a8);
 }
 :host .chip_clickable--danger {
-  background-color: #ffa5a5;
+  background-color: var(--color-error, #ffa5a5);
 }
 :host .chip_clickable--outline {
-  background-color: #ffffff;
-  border: 1px solid #b9cbd3;
+  background-color: var(--color-surface-1, #ffffff);
+  border: 1px solid var(--color-surface-3, #e7edf4);
 }
 :host .chip_clickable:focus-visible {
   outline: none;

package/dist/collection/components/chip-selected/chip-selected.css

@@ -48,7 +48,7 @@
   height: 100%;
   padding: 2px;
   border-radius: 4px;
-  outline: #c226fb solid 2px;
+  outline: var(--color-focus, #c226fb) solid 2px;
 }
 :host .chip .chip_darker {
   position: absolute;
@@ -64,7 +64,7 @@
   align-items: center;
   padding-left: 4px;
   height: 20px;
-  color: #202c44;
+  color: var(--color-content-default, #202c44);
   z-index: 2;
 }
 :host .chip--text {
@@ -74,7 +74,7 @@
   z-index: 2;
   margin: 0 8px;
   flex-wrap: nowrap;
-  color: #202c44;
+  color: var(--color-content-default, #202c44);
   font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
 }
 :host .chip--tall {
@@ -82,23 +82,23 @@
   border-radius: 24px;
 }
 :host .chip--default {
-  background-color: #b3d4ff;
+  background-color: var(--color-system, #b3d4ff);
 }
 :host .chip--info {
-  background-color: #80e3eb;
+  background-color: var(--color-info, #80e3eb);
 }
 :host .chip--success {
-  background-color: #90e6bc;
+  background-color: var(--color-success, #90e6bc);
 }
 :host .chip--warning {
-  background-color: #fff6a8;
+  background-color: var(--color-warning, #fff6a8);
 }
 :host .chip--danger {
-  background-color: #ffa5a5;
+  background-color: var(--color-error, #ffa5a5);
 }
 :host .chip--outline {
-  background-color: #ffffff;
-  border: 1px solid #b9cbd3;
+  background-color: var(--color-surface-1, #ffffff);
+  border: 1px solid var(--color-surface-3, #e7edf4);
   padding: 2px 3px;
 }
 :host .chip--outline .chip_darker {
@@ -128,15 +128,15 @@
   padding: 2px;
   align-items: center;
   box-sizing: border-box;
-  background-color: #ffffff;
-  border: 2px solid #3f7de8;
+  background-color: var(--color-surface-1, #ffffff);
+  border: 2px solid var(--color-brand, #3f7de8);
 }
 :host .chip_selected--icon {
   display: flex;
   align-items: center;
   height: 20px;
   padding-left: 4px;
-  color: #125ad5;
+  color: var(--color-brand, #3f7de8);
 }
 :host .chip_selected--text {
   display: flex;
@@ -144,7 +144,7 @@
   height: 20px;
   margin: 0 8px;
   flex-wrap: nowrap;
-  color: #125ad5;
+  color: var(--color-brand, #3f7de8);
   font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
 }
 :host .chip_selected--tall {
@@ -152,11 +152,11 @@
   border-radius: 24px;
 }
 :host .chip_selected:hover {
-  background-color: #e8f2ff;
+  opacity: 38%;
   cursor: pointer;
 }
 :host .chip_selected:active {
-  background-color: #d1e3fa;
+  opacity: 38%;
 }
 :host .chip_disabled {
   display: flex;
@@ -170,7 +170,7 @@
   justify-content: center;
   position: relative;
   z-index: 0;
-  background-color: #f3f6fa;
+  background-color: var(--color-surface-3, #e7edf4);
 }
 :host .chip_disabled--icon {
   display: flex;
@@ -178,7 +178,7 @@
   padding-left: 4px;
   width: 16px;
   height: 20px;
-  color: #505f79;
+  color: var(--color-content-default, #202c44);
   z-index: 2;
 }
 :host .chip_disabled--text {
@@ -188,7 +188,7 @@
   z-index: 2;
   margin: 0 8px;
   flex-wrap: nowrap;
-  color: #505f79;
+  color: var(--color-content-default, #202c44);
   font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
 }
 :host .chip_disabled--tall {

package/dist/collection/components/chip-tag/chip-tag.css

@@ -34,35 +34,35 @@
   align-items: center;
   width: 16px;
   height: 20px;
-  color: #202c44;
+  color: var(--color-content-default, #202c44);
 }
 :host .chip_tag--text {
   display: flex;
   align-items: center;
   height: 20px;
   margin: 0 8px;
-  color: #202c44;
+  color: var(--color-content-default, #202c44);
   font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
 }
 :host .chip_tag--default {
-  background-color: #b3d4ff;
+  background-color: var(--color-system, #b3d4ff);
 }
 :host .chip_tag--info {
-  background-color: #80e3eb;
+  background-color: var(--color-info, #80e3eb);
 }
 :host .chip_tag--success {
-  background-color: #90e6bc;
+  background-color: var(--color-success, #90e6bc);
 }
 :host .chip_tag--warning {
-  background-color: #fff6a8;
+  background-color: var(--color-warning, #fff6a8);
 }
 :host .chip_tag--danger {
-  background-color: #ffa5a5;
+  background-color: var(--color-error, #ffa5a5);
 }
 :host .chip_tag--outline {
-  background-color: #ffffff;
-  border: 1px solid #b9cbd3;
+  background-color: var(--color-surface-1, #ffffff);
+  border: 1px solid var(--color-surface-3, #e7edf4);
 }
 :host .chip_tag--disabled {
-  background-color: #f3f6fa;
+  background-color: var(--color-surface-3, #e7edf4);
 }