@bi-digital/css 0.11.11 → 0.12.1

package/dist/components/link.css

@@ -1,12 +1,14 @@
 .bi-link {
-  --bic-link-background-active: var(--bi-primary-20);
-  --bic-link-color-active: var(--bi-primary-60);
-  --bic-link-color-hover: var(--bi-primary-60);
-  --bic-link-color: var(--bi-primary-50);
+  --bic-link-color-hover: var(--bi-color-primary-contrast-hover);
+  --bic-link-color: var(--bi-color-primary-contrast);
   --bic-link-text-decoration-thickness--hover: .125em;
   --bic-link-text-decoration-thickness: .0625em;
-  --bic-link-focus-shadow-color: var(--bi-basic-white);
-  --bic-link-focus-outline-color: var(--bi-primary-50);
+
+  &[data-color] {
+    --bic-link-color-hover: var(--bi-color-contrast-hover);
+    --bic-link-color: var(--bi-color-contrast);
+  }
+
   color: var(--bic-link-color);
   text-decoration-line: underline;
   text-decoration-style: solid;
@@ -18,29 +20,6 @@
     vertical-align: middle;
   }
 
-  &[data-dark="true"] {
-    --bic-link-background-active: var(--bi-primary-80);
-    --bic-link-color-active: var(--bi-primary-30);
-    --bic-link-color-hover: var(--bi-primary-30);
-    --bic-link-color: var(--bi-primary-40);
-    --bic-link-focus-shadow-color: var(--bi-neutral-95);
-    --bic-link-focus-outline-color: var(--bi-primary-30);
-  }
-
-  &[data-color="neutral"] {
-    --bic-link-background-active: var(--bi-neutral-10);
-    --bic-link-color-active: var(--bi-neutral-100);
-    --bic-link-color-hover: var(--bi-neutral-100);
-    --bic-link-color: var(--bi-neutral-90);
-
-    &[data-dark="true"] {
-      --bic-link-background-active: var(--bi-neutral-90);
-      --bic-link-color-active: var(--bi-neutral-15);
-      --bic-link-color-hover: var(--bi-neutral-15);
-      --bic-link-color: var(--bi-neutral-5);
-    }
-  }
-
   &[data-underline="hover"]:not(:hover) {
     text-decoration: none;
   }
@@ -57,10 +36,11 @@
   }
 
   &:focus-visible {
-    box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
-    outline: var(--_bi--focus, 3px solid var(--bic-link-focus-outline-color));
+    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);
     border-radius: var(--bi-radius-small);
+    text-decoration: none;
 
     & * {
       --_bi--focus: ;
@@ -68,7 +48,7 @@
   }
 
   &:active {
-    background: var(--bic-link-background-active);
-    color: var(--bic-link-color-active);
+    background-color: var(--bi-states-press);
+    border-radius: var(--bi-radius-small);
   }
 }

package/dist/components/logo.css

@@ -1,17 +1,23 @@
-[data-bi-pride="true"] {
+:root, [data-color-scheme="light"] {
+  --bic-logo-international-vertical: url("./assets/logos/vertical.svg");
+  --bic-logo-international: url("./assets/logos/international.svg");
+  --bic-logo-default: url("./assets/logos/default.svg");
   --bic-logo-pride-international-vertical: url("./assets/logos/pride-vertical.svg");
   --bic-logo-pride-international: url("./assets/logos/pride-international.svg");
   --bic-logo-pride-default: url("./assets/logos/pride-default.svg");
-  --bic-logo-pride-dark-international-vertical: url("./assets/logos/pride-vertical-dark.svg");
-  --bic-logo-pride-dark-international: url("./assets/logos/pride-international-dark.svg");
-  --bic-logo-pride-dark-default: url("./assets/logos/pride-dark.svg");
+}
+
+[data-color-scheme="dark"] {
+  --bic-logo-international-vertical: url("./assets/logos/vertical-dark.svg");
+  --bic-logo-international: url("./assets/logos/international-dark.svg");
+  --bic-logo-default: url("./assets/logos/dark.svg");
+  --bic-logo-pride-international-vertical: url("./assets/logos/pride-vertical-dark.svg");
+  --bic-logo-pride-international: url("./assets/logos/pride-international-dark.svg");
+  --bic-logo-pride-default: url("./assets/logos/pride-dark.svg");
 }
 
 .bi-logo {
   --bic-logo-height: var(--bi-scale-12x);
-  --bic-logo-international-vertical: var(--bic-logo-pride-international-vertical, url("./assets/logos/vertical.svg"));
-  --bic-logo-international: var(--bic-logo-pride-international, url("./assets/logos/international.svg"));
-  --bic-logo-default: var(--bic-logo-pride-default, url("./assets/logos/default.svg"));
   height: var(--bic-logo-height);
   aspect-ratio: 1;
   background-position: center;
@@ -20,10 +26,10 @@
   justify-content: center;
   display: flex;
 
-  &[data-dark="true"] {
-    --bic-logo-international-vertical: var(--bic-logo-pride-dark-international-vertical, url("./assets/logos/vertical-dark.svg"));
-    --bic-logo-international: var(--bic-logo-pride-dark-international, url("./assets/logos/international-dark.svg"));
-    --bic-logo-default: var(--bic-logo-pride-dark-default, url("./assets/logos/dark.svg"));
+  &[data-pride="true"] {
+    --bic-logo-international-vertical: var(--bic-logo-pride-international-vertical);
+    --bic-logo-international: var(--bic-logo-pride-international);
+    --bic-logo-default: var(--bic-logo-pride-default);
   }
 
   &[data-size="xs"] {
@@ -50,7 +56,7 @@
     --bic-logo-height: var(--bi-scale-48x);
   }
 
-  @media (width >= 795px) {
+  @media (width >= 768px) {
     &[data-international="true"] {
       &[data-vertical="true"] {
         background-image: var(--bic-logo-international-vertical);

package/dist/components/navbar.css

@@ -9,19 +9,20 @@
 }
 
 .bi-navbar {
-  --bic-navbar-background-color: var(--bi-basic-white);
-  --bic-navbar-color: var(--bi-basic-key);
+  --bic-navbar-background-color: var(--bi-color-primary-surface-subtle);
+  --bic-navbar-color: var(--bi-color-primary-text);
+
+  &[data-color] {
+    --bic-navbar-background-color: var(--bi-color-surface-subtle);
+    --bic-navbar-color: var(--bi-color-text);
+  }
+
   height: var(--bi-layout-navbar-height);
   background-color: var(--bic-navbar-background-color);
   width: 100%;
   color: var(--bic-navbar-color);
   display: flex;
 
-  &[data-dark="true"] {
-    --bic-navbar-background-color: var(--bi-primary-95);
-    --bic-navbar-color: var(--bi-basic-white);
-  }
-
   & > header {
     height: var(--bi-layout-navbar-height);
     align-items: center;

package/dist/components/pagination.css

@@ -1,12 +1,7 @@
 .bi-pagination {
   --bic-pagination-gap: var(--bi-scale-2x);
-  --bic-pagination-color: var(--bi-basic-key);
-  --bic-pagination-selected-background: var(--bi-primary-5);
-
-  &[data-dark="true"] {
-    --bic-pagination-color: var(--bi-basic-white);
-    --bic-pagination-selected-background: var(--bi-primary-80);
-  }
+  --bic-pagination-color: var(--bi-color-text);
+  --bic-pagination-selected-background: var(--bi-color-surface);
 
   & :is(ol, ul) {
     color: var(--bic-pagination-color);

package/dist/components/popover.css

@@ -1,24 +1,15 @@
 .bi-popover {
   --bic-popover-arrow-size: var(--bi-scale-3x);
-  --bic-popover-background: var(--bi-basic-white);
+  --bic-popover-background: var(--bi-color-surface-subtle);
   --bic-popover-border-width: var(--bi-stroke-thin);
   --bic-popover-border-style: solid;
-  --bic-popover-border-color: var(--bi-neutral-15);
-  --bic-popover-color: var(--bi-neutral-90);
+  --bic-popover-border-color: var(--bi-color-stroke);
+  --bic-popover-color: var(--bi-color-text);
   --bic-popover-border-radius: var(--bi-radius-medium);
   --bic-popover-max-width: 300px;
   --bic-popover-padding: var(--bi-scale-1x);
   --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
     0px 2px 2px -1px #26333f0a;
-
-  &[data-dark="true"] {
-    --bic-popover-background: var(--bi-neutral-95);
-    --bic-popover-border-color: var(--bi-neutral-70);
-    --bic-popover-color: var(--bi-neutral-5);
-    --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
-      0px 2px 2px -1px #26333f0a;
-  }
-
   background: var(--bic-popover-background);
   border-radius: var(--bic-popover-border-radius);
   border-width: var(--bic-popover-border-width);

package/dist/components/search.css

@@ -1,7 +1,7 @@
 .bi-search {
   &:has(:focus-visible) {
     & .bi-field--affix:first-child {
-      color: var(--bi-primary-50);
+      color: var(--bi-states-focus);
     }
   }
 

package/dist/components/sub-navbar.css

@@ -3,23 +3,25 @@
   position: relative;
 
   & .bi-sub-navbar {
-    --bic-sub-navbar-background-color: var(--bi-basic-white);
-    --bic-sub-navbar-color: var(--bi-basic-key);
-    --bic-sub-navbar-border-color: var(--bi-neutral-15);
+    --bic-sub-navbar-background-color: var(--bi-color-primary-surface-subtle);
+    --bic-sub-navbar-color: var(--bi-color-primary-text);
+    --bic-sub-navbar-border-color: var(--bi-color-primary-stroke);
+
+    &[data-color] {
+      --bic-sub-navbar-background-color: var(--bi-color-surface-subtle);
+      --bic-sub-navbar-color: var(--bi-color-text);
+      --bic-sub-navbar-border-color: var(--bi-color-stroke);
+    }
+
     height: var(--bi-layout-navbar-height);
     background-color: var(--bic-sub-navbar-background-color);
     border-bottom: 1px solid var(--bic-sub-navbar-border-color);
     width: 100%;
+    color: var(--bic-sub-navbar-color);
     position: absolute;
     top: 0;
     left: 0;
 
-    &[data-dark="true"] {
-      --bic-sub-navbar-background-color: var(--bi-primary-95);
-      --bic-sub-navbar-color: var(--bi-basic-white);
-      --bic-sub-navbar-border-color: var(--bi-neutral-70);
-    }
-
     &[data-fixed="true"] {
       z-index: 120;
       position: fixed;

package/dist/components/tabs.css

@@ -1,22 +1,10 @@
 .bi-tabs {
-  --bic-tabs-tab-color: var(--bi-neutral-90);
-  --bic-tabs-tab-color-selected: var(--bi-primary-50);
-  --bic-tabs-tab-background-hover: var(--bi-states-hover-dark);
-  --bic-tabs-tab-background-press: var(--bi-states-press-dark);
+  --bic-tabs-tab-color: var(--bi-color-text);
+  --bic-tabs-tab-color-selected: var(--bi-color-contrast);
+  --bic-tabs-tab-background-hover: var(--bi-states-hover);
+  --bic-tabs-tab-background-press: var(--bi-states-press);
   --bic-tabs-tab-font: var(--bi-font-title-bold-xs);
   --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
-  --bic-tabs-focus-shadow-color: var(--bi-basic-white);
-  --bic-tabs-focus-outline-color: var(--bi-primary-50);
-
-  &[data-dark="true"] {
-    --bic-tabs-tab-color: var(--bi-neutral-5);
-    --bic-tabs-tab-color-selected: var(--bi-primary-30);
-    --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
-    --bic-tabs-tab-background-press: var(--bi-states-press-light);
-    --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
-    --bic-tabs-focus-outline-color: var(--bi-primary-30);
-  }
-
   flex-direction: column;
   display: flex;
   overflow: hidden;
@@ -73,8 +61,8 @@
       }
 
       &:focus-visible {
-        box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
-        outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
+        box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-states-focus-background));
+        outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
         outline-offset: var(--_bi--focus, -3px);
 
         &:after {
@@ -113,7 +101,7 @@
         color: var(--bic-tabs-tab-color-selected);
 
         &:after {
-          width: calc(100% - var(--bi-scale-6x));
+          width: 100%;
         }
       }
     }
@@ -121,7 +109,7 @@
 
   & :is([role="tabpanel"], ds-tabpanel) {
     padding: var(--bic-tabs-panel-padding);
-    color: var(--bic-tabs-tab-color);
+    color: var(--bi-color-text);
     outline: none;
     flex-grow: 1;
   }

package/dist/components/tooltip.css

@@ -1,7 +1,7 @@
 .bi-tooltip {
   --_ds-floating: var(--bic-tooltip-placement);
-  --bic-tooltip-background: var(--bi-neutral-85);
-  --bic-tooltip-color: var(--bi-neutral-0);
+  --bic-tooltip-background: var(--bi-color-surface);
+  --bic-tooltip-color: var(--bi-color-text);
   --bic-tooltip-border-radius: var(--bi-radius-medium);
   --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
   --bic-tooltip-shift-size: var(--bi-scale-2x);

package/dist/components/validation-message.css

@@ -1,8 +1,8 @@
 .bi-validation-message {
   --bic-validation-message-icon-size: var(--bi-icon-small);
   --bic-validation-message-padding: var(--bi-scale-2x);
-  --bic-validation-message-background: var(--bi-alert-10);
-  --bic-validation-message-color: var(--bi-alert-95);
+  --bic-validation-message-background: var(--bi-color-alert-surface);
+  --bic-validation-message-color: var(--bi-color-alert-text);
   color: var(--bic-validation-message-color);
   padding: var(--bic-validation-message-padding);
   background: var(--bic-validation-message-background);