@bi-digital/css 0.11.11 → 0.12.0

package/dist/components/alert.css

@@ -1,16 +1,16 @@
 .bi-alert {
-  --bic-alert-background: var(--bi-primary-5);
-  --bic-alert-border-color: var(--bi-primary-10);
+  --bic-alert-background: var(--bi-color-primary-surface-strong);
+  --bic-alert-border-color: var(--bi-color-primary-stroke);
   --bic-alert-border-width: var(--bi-stroke-thin);
-  --bic-alert-color: var(--bi-primary-90);
+  --bic-alert-color: var(--bi-color-primary-text-subtle);
   --bic-alert-icon-size: var(--bi-icon-medium);
   --bic-alert-gap: var(--bi-scale-1x);
   --bic-alert-padding: var(--bi-scale-2x);
 
-  &[data-dark="true"] {
-    --bic-alert-background: var(--bi-primary-95);
-    --bic-alert-border-color: var(--bi-primary-85);
-    --bic-alert-color: var(--bi-primary-5);
+  &[data-color] {
+    --bic-alert-background: var(--bi-color-surface-strong);
+    --bic-alert-border-color: var(--bi-color-stroke);
+    --bic-alert-color: var(--bi-color-text-subtle);
   }
 
   background: var(--bic-alert-background);
@@ -57,66 +57,6 @@
     --bic-alert-gap: var(--bi-scale-2x);
   }
 
-  &[data-variant="success"] {
-    --bic-alert-background: var(--bi-success-5);
-    --bic-alert-border-color: var(--bi-success-10);
-    --bic-alert-color: var(--bi-success-90);
-
-    &[data-dark="true"] {
-      --bic-alert-background: var(--bi-success-95);
-      --bic-alert-border-color: var(--bi-success-85);
-      --bic-alert-color: var(--bi-success-5);
-    }
-  }
-
-  &[data-variant="alert"] {
-    --bic-alert-background: var(--bi-alert-10);
-    --bic-alert-border-color: var(--bi-alert-15);
-    --bic-alert-color: var(--bi-alert-90);
-
-    &[data-dark="true"] {
-      --bic-alert-background: var(--bi-alert-95);
-      --bic-alert-border-color: var(--bi-alert-85);
-      --bic-alert-color: var(--bi-alert-5);
-    }
-  }
-
-  &[data-variant="warning"] {
-    --bic-alert-background: var(--bi-warning-10);
-    --bic-alert-border-color: var(--bi-warning-15);
-    --bic-alert-color: var(--bi-warning-90);
-
-    &[data-dark="true"] {
-      --bic-alert-background: var(--bi-warning-95);
-      --bic-alert-border-color: var(--bi-warning-85);
-      --bic-alert-color: var(--bi-warning-5);
-    }
-  }
-
-  &[data-variant="info"] {
-    --bic-alert-background: var(--bi-info-5);
-    --bic-alert-border-color: var(--bi-info-10);
-    --bic-alert-color: var(--bi-info-90);
-
-    &[data-dark="true"] {
-      --bic-alert-background: var(--bi-info-90);
-      --bic-alert-border-color: var(--bi-info-80);
-      --bic-alert-color: var(--bi-info-10);
-    }
-  }
-
-  &[data-variant="neutral"] {
-    --bic-alert-background: var(--bi-neutral-10);
-    --bic-alert-border-color: var(--bi-neutral-15);
-    --bic-alert-color: var(--bi-neutral-95);
-
-    &[data-dark="true"] {
-      --bic-alert-background: var(--bi-neutral-90);
-      --bic-alert-border-color: var(--bi-neutral-90);
-      --bic-alert-color: var(--bi-neutral-30);
-    }
-  }
-
   &:has( > .bi-alert--footer) {
     width: 100%;
   }

package/dist/components/avatar.css

@@ -1,14 +1,8 @@
 .bi-avatar {
-  --bic-avatar-background-color: var(--bi-primary-10);
-  --bic-avatar-color: var(--bi-primary-90);
+  --bic-avatar-background-color: var(--bi-color-surface-strong);
+  --bic-avatar-color: var(--bi-color-text-subtle);
   --bic-avatar-size: var(--bi-scale-24x);
   --bic-avatar-font-size: 1.75rem;
-
-  &[data-dark="true"] {
-    --bic-avatar-background-color: var(--bi-primary-85);
-    --bic-avatar-color: var(--bi-primary-10);
-  }
-
   border-radius: var(--bi-radius-full);
   background-color: var(--bic-avatar-background-color);
   color: var(--bic-avatar-color);
@@ -29,46 +23,6 @@
   display: flex;
   overflow: hidden;
 
-  &[data-color="info"] {
-    --bic-avatar-background-color: var(--bi-info-10);
-    --bic-avatar-color: var(--bi-info-90);
-
-    &[data-dark="true"] {
-      --bic-avatar-background-color: var(--bi-info-85);
-      --bic-avatar-color: var(--bi-info-10);
-    }
-  }
-
-  &[data-color="warning"] {
-    --bic-avatar-background-color: var(--bi-warning-10);
-    --bic-avatar-color: var(--bi-warning-90);
-
-    &[data-dark="true"] {
-      --bic-avatar-background-color: var(--bi-warning-85);
-      --bic-avatar-color: var(--bi-warning-10);
-    }
-  }
-
-  &[data-color="success"] {
-    --bic-avatar-background-color: var(--bi-success-10);
-    --bic-avatar-color: var(--bi-success-90);
-
-    &[data-dark="true"] {
-      --bic-avatar-background-color: var(--bi-success-85);
-      --bic-avatar-color: var(--bi-success-10);
-    }
-  }
-
-  &[data-color="alert"] {
-    --bic-avatar-background-color: var(--bi-alert-10);
-    --bic-avatar-color: var(--bi-alert-90);
-
-    &[data-dark="true"] {
-      --bic-avatar-background-color: var(--bi-alert-85);
-      --bic-avatar-color: var(--bi-alert-10);
-    }
-  }
-
   &[data-size="small"] {
     --bic-avatar-size: var(--bi-scale-16x);
     --bic-avatar-font-size: 1.25rem;

package/dist/components/badge.css

@@ -1,12 +1,17 @@
 .bi-badge {
-  --bic-badge-background: transparent;
-  --bic-badge-color: var(--bi-neutral-60);
-  --bic-badge-border-color: var(--bi-neutral-25);
+  --bic-badge-background: var(--bi-color-neutral-fill);
+  --bic-badge-color: var(--bi-color-neutral-on-fill);
   --bic-badge-border-radius: var(--bi-radius-medium);
   --bic-badge-border-width: var(--bi-stroke-thin);
   --bic-badge-height: var(--bi-scale-6x);
   --bic-badge-font: var(--bi-font-body-medium);
   --bic-badge-padding: 0 var(--bi-scale-1-5x);
+
+  &[data-color] {
+    --bic-badge-background: var(--bi-color-fill);
+    --bic-badge-color: var(--bi-color-on-fill);
+  }
+
   padding: var(--bic-badge-padding);
   border-radius: var(--bic-badge-border-radius);
   background-color: var(--bic-badge-background);
@@ -15,17 +20,11 @@
   width: max-content;
   height: fit-content;
   min-height: var(--bic-badge-height);
-  box-shadow: 0 0 0 var(--bic-badge-border-width) var(--bic-badge-border-color) inset;
   word-break: break-word;
   justify-content: center;
   align-items: center;
   display: inline-flex;
 
-  &[data-dark="true"] {
-    --bic-badge-border-color: var(--bi-neutral-50);
-    --bic-badge-color: var(--bi-neutral-10);
-  }
-
   &[data-single-letter="true"]:not([data-size="xs"]) {
     --bic-badge-border-radius: var(--bi-radius-full);
     min-width: var(--bic-badge-height);
@@ -43,70 +42,4 @@
     --bic-badge-font: var(--bi-font-body-xs);
     --bic-badge-height: var(--bi-scale-5x);
   }
-
-  &[data-color="warning"] {
-    --bic-badge-background: var(--bi-secondary-10);
-    --bic-badge-color: var(--bi-secondary-95);
-    --bic-badge-border-color: var(--bic-badge-background);
-
-    &[data-dark="true"] {
-      --bic-badge-background: var(--bi-secondary-100);
-      --bic-badge-color: var(--bi-secondary-10);
-    }
-  }
-
-  &[data-color="alert"] {
-    --bic-badge-background: var(--bi-alert-10);
-    --bic-badge-color: var(--bi-alert-85);
-    --bic-badge-border-color: var(--bic-badge-background);
-
-    &[data-dark="true"] {
-      --bic-badge-background: var(--bi-alert-100);
-      --bic-badge-color: var(--bi-alert-10);
-    }
-  }
-
-  &[data-color="success"] {
-    --bic-badge-background: var(--bi-success-10);
-    --bic-badge-color: var(--bi-success-95);
-    --bic-badge-border-color: var(--bic-badge-background);
-
-    &[data-dark="true"] {
-      --bic-badge-background: var(--bi-success-100);
-      --bic-badge-color: var(--bi-success-10);
-    }
-  }
-
-  &[data-color="brand"] {
-    --bic-badge-background: var(--bi-primary-10);
-    --bic-badge-color: var(--bi-primary-85);
-    --bic-badge-border-color: var(--bic-badge-background);
-
-    &[data-dark="true"] {
-      --bic-badge-background: var(--bi-primary-100);
-      --bic-badge-color: var(--bi-primary-10);
-    }
-  }
-
-  &[data-color="info"] {
-    --bic-badge-background: var(--bi-info-10);
-    --bic-badge-color: var(--bi-info-9);
-    --bic-badge-border-color: var(--bic-badge-background);
-
-    &[data-dark="true"] {
-      --bic-badge-background: var(--bi-info-100);
-      --bic-badge-color: var(--bi-info-10);
-    }
-  }
-
-  &[data-color="negative"] {
-    --bic-badge-background: var(--bi-neutral-90);
-    --bic-badge-color: var(--bi-basic-white);
-    --bic-badge-border-color: var(--bic-badge-background);
-
-    &[data-dark="true"] {
-      --bic-badge-background: var(--bi-neutral-100);
-      --bic-badge-color: var(--bi-neutral-10);
-    }
-  }
 }

package/dist/components/button.css

@@ -6,13 +6,17 @@
   --bic-button-size: var(--bi-scale-11x);
   --bic-button-font-size: 1rem;
   --bic-button-line-height: 1.5;
-  --bic-button-color: var(--bi-basic-white);
-  --bic-button-background: transparent;
-  --bic-button-background-hover: transparent;
-  --bic-button-background-press: transparent;
-  --bic-button-active-color: var(--bi-primary-50);
-  --bic-button-focus-shadow-color: var(--bi-basic-white);
-  --bic-button-focus-outline-color: var(--bi-primary-50);
+  --bic-button-color: var(--bi-color-primary-on-fill);
+  --bic-button-background: var(--bi-color-primary-fill);
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-button-background);
+  --bic-button-active-color: var(--bi-states-focus);
+
+  &[data-color] {
+    --bic-button-color: var(--bi-color-on-fill);
+    --bic-button-background: var(--bi-color-fill);
+  }
+
   font-family: var(--bi-font-family-plain);
   font-size: var(--bic-button-font-size);
   line-height: var(--bic-button-line-height);
@@ -41,12 +45,6 @@
   position: relative;
   overflow: hidden;
 
-  &[data-dark="true"] {
-    --bic-button-active-color: var(--bi-primary-30);
-    --bic-button-focus-shadow-color: var(--bi-neutral-95);
-    --bic-button-focus-outline-color: var(--bi-primary-30);
-  }
-
   &[data-fullwidth="true"] {
     width: 100%;
   }
@@ -56,8 +54,8 @@
   }
 
   &:focus-visible {
-    box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-button-focus-shadow-color), var(--bic-button-box-shadow));
-    outline: var(--_bi--focus, 3px solid var(--bic-button-focus-outline-color));
+    box-shadow: var(--bic-button-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
+    outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
     outline-offset: var(--_bi--focus, 2px);
 
     & * {
@@ -110,57 +108,36 @@
   }
 
   &:not([data-variant]), &[data-variant="filled"] {
-    --bic-button-color: var(--bi-basic-white);
-    --bic-button-background: var(--bi-primary-50);
-    --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
-      var(--bic-button-background);
-    --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
-      var(--bic-button-background);
     --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset,
       0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
   }
 
   &[data-variant="outlined"] {
-    --bic-button-color: var(--bi-primary-50);
-    --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
-    --bic-button-background-hover: var(--bi-states-hover-dark);
-    --bic-button-background-press: var(--bi-states-press-dark);
-
-    &[data-dark="true"] {
-      --bic-button-color: var(--bi-basic-white);
-      --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-basic-white) inset;
-      --bic-button-background-hover: var(--bi-states-hover-light);
-      --bic-button-background-press: var(--bi-states-press-light);
+    --bic-button-color: var(--bi-color-primary-contrast);
+    --bic-button-background: transparent;
+    --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bic-button-color) inset;
+    --bic-button-background-hover: var(--bi-states-hover);
+    --bic-button-background-press: var(--bi-states-press);
+
+    &[data-color] {
+      --bic-button-color: var(--bi-color-contrast);
     }
   }
 
   &[data-variant="text"] {
-    --bic-button-color: var(--bi-neutral-90);
-    --bic-button-background-hover: var(--bi-states-hover-dark);
-    --bic-button-background-press: var(--bi-states-press-dark);
-
-    &[data-dark="true"] {
-      --bic-button-color: var(--bi-basic-white);
-      --bic-button-background-hover: var(--bi-states-hover-light);
-      --bic-button-background-press: var(--bi-states-press-light);
-    }
+    --bic-button-color: var(--bi-color-text);
+    --bic-button-background: transparent;
+    --bic-button-background-hover: var(--bi-states-hover);
+    --bic-button-background-press: var(--bi-states-press);
   }
 
   &[data-variant="flat"] {
-    --bic-button-color: var(--bi-primary-90);
-    --bic-button-background: var(--bi-primary-5);
-    --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
-      var(--bic-button-background);
-    --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
-      var(--bic-button-background);
-
-    &[data-dark="true"] {
-      --bic-button-color: var(--bi-basic-white);
-      --bic-button-background: #ffffff1a;
-      --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
-        var(--bic-button-background);
-      --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
-        var(--bic-button-background);
+    --bic-button-color: var(--bi-color-primary-text);
+    --bic-button-background: var(--bi-color-primary-surface-strong);
+
+    &[data-color] {
+      --bic-button-color: var(--bi-color-text);
+      --bic-button-background: var(--bi-color-surface-strong);
     }
   }
 

package/dist/components/card.css

@@ -1,12 +1,11 @@
 .bi-card {
-  --bic-card-background-color: var(--bi-basic-white);
-  --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
-  --bic-card-border-color: var(--bi-neutral-15);
-  --bic-card-color: var(--bi-neutral-95);
-  --bic-card-header-title-color: var(--bi-neutral-95);
-  --bic-card-header-bold-color: var(--bi-primary-60);
-  --bic-card-header-label-color: var(--bi-neutral-50);
-  --bic-card-content-color: var(--bi-neutral-50);
+  --bic-card-background-color: var(--bi-color-surface-subtle);
+  --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-color-stroke);
+  --bic-card-color: var(--bi-color-text-secondary);
+  --bic-card-header-title-color: var(--bi-color-text);
+  --bic-card-header-bold-color: var(--bi-color-text-accent);
+  --bic-card-header-label-color: var(--bi-color-text-secondary);
+  --bic-card-content-color: var(--bi-color-text-secondary);
   --bic-card-content-padding: var(--bi-scale-4x);
   --bic-card-border-radius: var(--bi-radius-medium);
   --bic-card-content-lines: 2;
@@ -14,40 +13,11 @@
   --bic-card-media-date-width: 3.1875rem;
   --bic-card-media-date-height: 2.875rem;
   --bic-card-actions-flex-direction: column;
-  --bic-card-actions-background-color: var(--bi-neutral-10);
-  --bic-card-actions-icon-color: var(--bi-primary-50);
-  --bic-card-border-hover-color: var(--bi-neutral-50);
+  --bic-card-actions-background-color: var(--bi-color-surface-strong);
+  --bic-card-actions-icon-color: var(--bi-color-contrast);
+  --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
   --bic-card-box-shadow-hover-color: #0000000d;
-  --bic-card-box-shadow-focus-color: var(--bi-primary-50);
-  --bic-card-box-shadow-focus-background-color: var(--bi-basic-white);
-  --bic-card-box-shadow-focus-outer-border: 6px;
-  --bic-card-box-shadow-focus-inner-border: 4px;
-  --bic-card-border-active-color: var(--bi-primary-50);
   --bic-card-box-shadow-active-color: #0000000d;
-  --bic-card-box-shadow-active-outer-border: 20px;
-  --bic-card-box-shadow-active-inner-border: 10px;
-
-  &[data-dark="true"] {
-    --bic-card-background-color: var(--bi-neutral-90);
-    --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
-    --bic-card-border-color: var(--bi-neutral-70);
-    --bic-card-color: var(--bi-neutral-5);
-    --bic-card-header-title-color: var(--bi-neutral-5);
-    --bic-card-header-bold-color: var(--bi-primary-20);
-    --bic-card-header-label-color: var(--bi-neutral-30);
-    --bic-card-content-color: var(--bi-neutral-30);
-    --bic-card-actions-background-color: var(--bi-neutral-75);
-    --bic-card-actions-icon-color: var(--bi-neutral-10);
-    --bic-card-border-hover-color: var(--bi-neutral-25);
-    --bic-card-box-shadow-hover-color: #b2cdf40d;
-    --bic-card-box-shadow-focus-color: var(--bi-primary-30);
-    --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
-    --bic-card-box-shadow-focus-outer-border: 4.5px;
-    --bic-card-box-shadow-focus-inner-border: 4px;
-    --bic-card-border-active-color: var(--bi-primary-50);
-    --bic-card-box-shadow-active-color: #b2cdf40d;
-  }
-
   width: 100%;
   box-shadow: var(--bic-card-box-shadow);
   border-radius: var(--bic-card-border-radius);
@@ -100,44 +70,8 @@
     }
   }
 
-  &[data-color="info"] {
-    --bic-card-background-color: var(--bi-info-5);
-    --bic-card-color: var(--bi-info-90);
-    --bic-card-border-color: var(--bi-info-15);
-    --bic-card-header-title-color: var(--bi-info-90);
-    --bic-card-header-bold-color: var(--bi-info-90);
-    --bic-card-header-label-color: var(--bi-info-90);
-  }
-
-  &[data-color="warning"] {
-    --bic-card-background-color: var(--bi-warning-10);
-    --bic-card-color: var(--bi-warning-90);
-    --bic-card-border-color: var(--bi-warning-15);
-    --bic-card-header-title-color: var(--bi-warning-90);
-    --bic-card-header-bold-color: var(--bi-warning-90);
-    --bic-card-header-label-color: var(--bi-warning-90);
-  }
-
-  &[data-color="primary"][data-dark="true"] {
-    --bic-card-background-color: var(--bi-primary-90);
-    --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
-    --bic-card-border-color: var(--bi-primary-75);
-    --bic-card-color: var(--bi-neutral-5);
-    --bic-card-header-title-color: var(--bi-neutral-5);
-    --bic-card-header-bold-color: var(--bi-primary-20);
-    --bic-card-header-label-color: var(--bi-neutral-30);
-    --bic-card-content-color: var(--bi-neutral-30);
-    --bic-card-actions-background-color: var(--bi-primary-85);
-    --bic-card-actions-icon-color: var(--bi-primary-10);
-    --bic-card-border-hover-color: var(--bi-primary-40);
-    --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
-    --bic-card-box-shadow-focus-background-color: var(--bi-primary-30);
-    --bic-card-border-active-color: var(--bi-primary-10);
-  }
-
   &[data-error="true"] {
-    box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
-    --bic-card-border-color: transparent;
+    box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-color-alert-fill);
   }
 
   & .bi-card--content {
@@ -179,9 +113,8 @@
 
       &:not(.disabled) {
         &:focus-visible {
-          box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
-            0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
-          outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
+          box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
+          outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
           outline-offset: var(--_bi--focus, 2px);
 
           & * {
@@ -198,7 +131,7 @@
         }
 
         &:active {
-          box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
+          box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
             0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
             0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
         }
@@ -231,6 +164,10 @@
       @media (width < 600px) {
         --bic-button-size: var(--bi-scale-11x);
       }
+
+      &[data-color] {
+        --bic-card-actions-icon-color: var(--bi-color-contrast);
+      }
     }
   }
 

package/dist/components/checkbox-subsection.css

@@ -1,11 +1,7 @@
 .bi-checkbox-subsection {
-  --bic-checkbox-subsection-line-bg: var(--bi-neutral-30);
+  --bic-checkbox-subsection-line-bg: var(--bi-color-neutral-stroke-strong);
   display: flex;
 
-  &[data-dark="true"] {
-    --bic-checkbox-subsection-line-bg: var(--bi-neutral-50);
-  }
-
   & > div:first-child {
     margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
     background-color: var(--bic-checkbox-subsection-line-bg);