@bi-digital/css 0.5.0 → 0.6.1

package/dist/components.css

@@ -6,7 +6,6 @@
   --bic-alert-icon-size: var(--bi-icon-medium);
   --bic-alert-gap: var(--bi-scale-1x);
   --bic-alert-padding: var(--bi-scale-2x);
-  --_bic-alert-close-column: 0;
 }
 
 .bi-alert[data-dark="true"] {
@@ -22,7 +21,7 @@
   padding: var(--bic-alert-padding);
   border-radius: var(--bi-radius-medium);
   gap: var(--bic-alert-gap);
-  grid-template-columns: auto 1fr var(--_bic-alert-close-column);
+  grid-template-columns: 1fr;
   width: -webkit-fit-content;
   width: fit-content;
   display: grid;
@@ -33,8 +32,16 @@
   font-size: var(--bic-alert-icon-size);
 }
 
-.bi-alert:has( > .bi-button) {
-  --_bic-alert-close-column: auto;
+.bi-alert:has( > svg:first-child) {
+  grid-template-columns: auto 1fr;
+}
+
+.bi-alert:has( > .bi-button:last-child) {
+  grid-template-columns: 1fr auto;
+}
+
+.bi-alert:has( > .bi-button:last-child):has( > svg:first-child) {
+  grid-template-columns: auto 1fr auto;
 }
 
 .bi-alert > .bi-button {
@@ -131,6 +138,14 @@
   --bic-avatar-color: var(--bi-primary-90);
   --bic-avatar-size: var(--bi-scale-24x);
   --bic-avatar-font-size: 1.75rem;
+}
+
+.bi-avatar[data-dark="true"] {
+  --bic-avatar-background-color: var(--bi-primary-85);
+  --bic-avatar-color: var(--bi-primary-10);
+}
+
+.bi-avatar {
   border-radius: var(--bi-radius-full);
   background-color: var(--bic-avatar-background-color);
   color: var(--bic-avatar-color);
@@ -157,21 +172,41 @@
   --bic-avatar-color: var(--bi-info-90);
 }
 
+.bi-avatar[data-color="info"][data-dark="true"] {
+  --bic-avatar-background-color: var(--bi-info-85);
+  --bic-avatar-color: var(--bi-info-10);
+}
+
 .bi-avatar[data-color="warning"] {
   --bic-avatar-background-color: var(--bi-warning-10);
   --bic-avatar-color: var(--bi-warning-90);
 }
 
+.bi-avatar[data-color="warning"][data-dark="true"] {
+  --bic-avatar-background-color: var(--bi-warning-85);
+  --bic-avatar-color: var(--bi-warning-10);
+}
+
 .bi-avatar[data-color="success"] {
   --bic-avatar-background-color: var(--bi-success-10);
   --bic-avatar-color: var(--bi-success-90);
 }
 
+.bi-avatar[data-color="success"][data-dark="true"] {
+  --bic-avatar-background-color: var(--bi-success-85);
+  --bic-avatar-color: var(--bi-success-10);
+}
+
 .bi-avatar[data-color="alert"] {
   --bic-avatar-background-color: var(--bi-alert-10);
   --bic-avatar-color: var(--bi-alert-90);
 }
 
+.bi-avatar[data-color="alert"][data-dark="true"] {
+  --bic-avatar-background-color: var(--bi-alert-85);
+  --bic-avatar-color: var(--bi-alert-10);
+}
+
 .bi-avatar[data-size="small"] {
   --bic-avatar-size: var(--bi-scale-16x);
   --bic-avatar-font-size: 1.25rem;
@@ -315,6 +350,8 @@
   --bic-button-background: transparent;
   --bic-button-background-hover: transparent;
   --bic-button-background-press: transparent;
+  --bic-button-focus-shadow-color: var(--bi-basic-white);
+  --bic-button-focus-outline-color: var(--bi-primary-50);
   font-family: museo-sans, Arial, sans-serif;
   font-size: var(--bic-button-font-size);
   line-height: var(--bic-button-line-height);
@@ -353,9 +390,14 @@
   box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
 }
 
+.bi-button[data-dark="true"] {
+  --bic-button-focus-shadow-color: var(--bi-neutral-95);
+  --bic-button-focus-outline-color: var(--bi-secondary-50);
+}
+
 .bi-button:focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
-  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  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));
   outline-offset: var(--_bi--focus, 2px);
 }
 
@@ -402,14 +444,14 @@
 
 .bi-button[data-variant="outlined"] {
   --bic-button-color: var(--bi-primary-50);
-  --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-primary-50) inset;
+  --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);
 }
 
 .bi-button[data-variant="outlined"][data-dark="true"] {
   --bic-button-color: var(--bi-basic-white);
-  --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-basic-white) inset;
+  --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);
 }
@@ -970,15 +1012,17 @@
 
 .bi-chip {
   --bic-chip-background: var(--bi-primary-5);
-  --bic-chip-background-hover: var(--bi-primary-10);
-  --bic-chip-background-press: var(--bi-primary-15);
+  --bic-chip-focus-inner: var(--bi-basic-white);
+  --bic-chip-focus-outer: var(--bi-primary-50);
+  --bic-chip-background-hover: var(--bi-states-hover-dark);
+  --bic-chip-background-press: var(--bi-states-press-dark);
   --bic-chip-text-color: var(--bi-neutral-90);
   --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
   --bic-chip-icon-size: var(--bi-scale-6x);
   --bic-chip-font-size: .875rem;
   --bic-chip-line-height: 1.5;
   gap: var(--bi-scale-1x);
-  border-radius: var(--bi-scale-max);
+  border-radius: var(--bi-radius-full);
   width: -webkit-fit-content;
   width: fit-content;
   color: var(--bic-chip-text-color);
@@ -993,6 +1037,163 @@
   overflow: hidden;
 }
 
+.bi-chip[data-size="small"] {
+  --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
+  --bic-chip-font-size: .8125rem;
+  --bic-chip-icon-size: var(--bi-scale-5x);
+}
+
+.bi-chip[data-size="large"] {
+  --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
+  --bic-chip-font-size: 1rem;
+  --bic-chip-size: var(--bi-scale-14x);
+}
+
+.bi-chip[data-dark="true"] {
+  --bic-chip-focus-inner: var(--bi-neutral-95);
+  --bic-chip-focus-outer: var(--bi-secondary-50);
+  --bic-chip-background-hover: var(--bi-states-hover-light);
+  --bic-chip-background-press: var(--bi-states-press-light);
+}
+
+.bi-chip[data-selected="true"] {
+  --bic-chip-background-hover: var(--bi-states-hover-light);
+  --bic-chip-background-press: var(--bi-states-press-light);
+}
+
+.bi-chip[data-color="white"] {
+  --bic-chip-background: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="white"][data-selected="true"] {
+  --bic-chip-background: var(--bi-neutral-60);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="white"][data-dark="true"] {
+  --bic-chip-background: var(--bi-neutral-100);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="white"][data-dark="true"][data-selected="true"] {
+  --bic-chip-background: var(--bi-neutral-50);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="neutral"] {
+  --bic-chip-background: var(--bi-neutral-5);
+}
+
+.bi-chip[data-color="neutral"][data-selected="true"] {
+  --bic-chip-background: var(--bi-neutral-60);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="neutral"][data-dark="true"] {
+  --bic-chip-background: var(--bi-neutral-95);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="neutral"][data-dark="true"][data-selected="true"] {
+  --bic-chip-background: var(--bi-neutral-50);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="primary"] {
+  --bic-chip-background: var(--bi-primary-5);
+}
+
+.bi-chip[data-color="primary"][data-selected="true"] {
+  --bic-chip-background: var(--bi-primary-50);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="primary"][data-dark="true"] {
+  --bic-chip-background: var(--bi-primary-85);
+  --bic-chip-text-color: var(--bi-primary-10);
+}
+
+.bi-chip[data-color="primary"][data-dark="true"][data-selected="true"] {
+  --bic-chip-background: var(--bi-primary-50);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="info"] {
+  --bic-chip-background: var(--bi-info-5);
+}
+
+.bi-chip[data-color="info"][data-selected="true"] {
+  --bic-chip-background: var(--bi-info-50);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="info"][data-dark="true"] {
+  --bic-chip-background: var(--bi-info-95);
+  --bic-chip-text-color: var(--bi-info-15);
+}
+
+.bi-chip[data-color="info"][data-dark="true"][data-selected="true"] {
+  --bic-chip-background: var(--bi-info-50);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="alert"] {
+  --bic-chip-background: var(--bi-alert-10);
+}
+
+.bi-chip[data-color="alert"][data-selected="true"] {
+  --bic-chip-background: var(--bi-alert-60);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="alert"][data-dark="true"] {
+  --bic-chip-background: var(--bi-alert-95);
+  --bic-chip-text-color: var(--bi-alert-15);
+}
+
+.bi-chip[data-color="alert"][data-dark="true"][data-selected="true"] {
+  --bic-chip-background: var(--bi-alert-60);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="warning"] {
+  --bic-chip-background: var(--bi-warning-10);
+}
+
+.bi-chip[data-color="warning"][data-selected="true"] {
+  --bic-chip-background: var(--bi-warning-75);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="warning"][data-dark="true"] {
+  --bic-chip-background: var(--bi-warning-90);
+  --bic-chip-text-color: var(--bi-warning-15);
+}
+
+.bi-chip[data-color="warning"][data-dark="true"][data-selected="true"] {
+  --bic-chip-background: var(--bi-warning-70);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="success"] {
+  --bic-chip-background: var(--bi-success-5);
+}
+
+.bi-chip[data-color="success"][data-selected="true"] {
+  --bic-chip-background: var(--bi-success-70);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="success"][data-dark="true"] {
+  --bic-chip-background: var(--bi-success-90);
+  --bic-chip-text-color: var(--bi-success-10);
+}
+
+.bi-chip[data-color="success"][data-dark="true"][data-selected="true"] {
+  --bic-chip-background: var(--bi-success-70);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
 .bi-chip:-webkit-any(button) {
   cursor: pointer;
   border: none;
@@ -1000,20 +1201,19 @@
 }
 
 .bi-chip:-webkit-any(button):focus-visible {
-  outline-offset: 2px;
-  outline: 1.5px solid var(--bi-primary-50);
-  border-radius: var(--bi-scale-max);
-  box-shadow: 0 0 0 2px #fff;
+  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
+  outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
+  outline-offset: var(--_bi--focus, 2px);
 }
 
 @media (hover: hover) and (pointer: fine) {
   .bi-chip:-webkit-any(button):hover {
-    --bg-color: var(--bic-chip-bg-hover);
+    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
   }
 }
 
 .bi-chip:-webkit-any(button):active {
-  --bg-color: var(--bic-chip-bg-press);
+  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
 }
 
 .bi-chip:is(button) {
@@ -1023,20 +1223,19 @@
 }
 
 .bi-chip:is(button):focus-visible {
-  outline-offset: 2px;
-  outline: 1.5px solid var(--bi-primary-50);
-  border-radius: var(--bi-scale-max);
-  box-shadow: 0 0 0 2px #fff;
+  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
+  outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
+  outline-offset: var(--_bi--focus, 2px);
 }
 
 @media (hover: hover) and (pointer: fine) {
   .bi-chip:is(button):hover {
-    --bg-color: var(--bic-chip-bg-hover);
+    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
   }
 }
 
 .bi-chip:is(button):active {
-  --bg-color: var(--bic-chip-bg-press);
+  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
 }
 
 .bi-chip:-webkit-any(a) {
@@ -1046,20 +1245,19 @@
 }
 
 .bi-chip:-webkit-any(a):focus-visible {
-  outline-offset: 2px;
-  outline: 1.5px solid var(--bi-primary-50);
-  border-radius: var(--bi-scale-max);
-  box-shadow: 0 0 0 2px #fff;
+  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
+  outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
+  outline-offset: var(--_bi--focus, 2px);
 }
 
 @media (hover: hover) and (pointer: fine) {
   .bi-chip:-webkit-any(a):hover {
-    --bg-color: var(--bic-chip-bg-hover);
+    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
   }
 }
 
 .bi-chip:-webkit-any(a):active {
-  --bg-color: var(--bic-chip-bg-press);
+  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
 }
 
 .bi-chip:is(a) {
@@ -1069,88 +1267,19 @@
 }
 
 .bi-chip:is(a):focus-visible {
-  outline-offset: 2px;
-  outline: 1.5px solid var(--bi-primary-50);
-  border-radius: var(--bi-scale-max);
-  box-shadow: 0 0 0 2px #fff;
+  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
+  outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
+  outline-offset: var(--_bi--focus, 2px);
 }
 
 @media (hover: hover) and (pointer: fine) {
   .bi-chip:is(a):hover {
-    --bg-color: var(--bic-chip-bg-hover);
+    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
   }
 }
 
 .bi-chip:is(a):active {
-  --bg-color: var(--bic-chip-bg-press);
-}
-
-.bi-chip[data-size="small"] {
-  --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
-  --bic-chip-font-size: .8125rem;
-  --bic-chip-icon-size: var(--bi-scale-5x);
-}
-
-.bi-chip[data-size="large"] {
-  --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
-  --bic-chip-font-size: 1rem;
-  --bic-chip-size: var(--bi-scale-14x);
-}
-
-.bi-chip[data-color="neutral"] {
-  --bic-chip-background: var(--bi-neutral-5);
-  --bic-chip-background-hover: var(--bi-neutral-20);
-  --bic-chip-background-press: var(--bi-neutral-30);
-  --bic-chip-text-color: var(--bi-neutral-90);
-}
-
-.bi-chip[data-color="primary-light"] {
-  --bic-chip-background: var(--bi-primary-5);
-  --bic-chip-background-hover: var(--bi-primary-20);
-  --bic-chip-background-press: var(--bi-primary-30);
-  --bic-chip-text-color: var(--bi-neutral-90);
-}
-
-.bi-chip[data-color="info"] {
-  --bic-chip-background: var(--bi-info-5);
-  --bic-chip-background-hover: var(--bi-info-20);
-  --bic-chip-background-press: var(--bi-info-30);
-  --bic-chip-text-color: var(--bi-info-90);
-}
-
-.bi-chip[data-color="white"] {
-  --bic-chip-background: var(--bi-basic-white);
-  --bic-chip-background-hover: var(--bi-neutral-20);
-  --bic-chip-background-press: var(--bi-neutral-30);
-  --bic-chip-text-color: var(--bi-neutral-90);
-}
-
-.bi-chip[data-color="primary"] {
-  --bic-chip-background: var(--bi-primary-50);
-  --bic-chip-background-hover: var(--bi-primary-60);
-  --bic-chip-background-press: var(--bi-primary-70);
-  --bic-chip-text-color: var(--bi-basic-white);
-}
-
-.bi-chip[data-color="alert"] {
-  --bic-chip-background: var(--bi-alert-5);
-  --bic-chip-background-hover: var(--bi-alert-20);
-  --bic-chip-background-press: var(--bi-alert-30);
-  --bic-chip-text-color: var(--bi-alert-90);
-}
-
-.bi-chip[data-color="warning"] {
-  --bic-chip-background: var(--bi-warning-5);
-  --bic-chip-background-hover: var(--bi-warning-20);
-  --bic-chip-background-press: var(--bi-warning-30);
-  --bic-chip-text-color: var(--bi-warning-90);
-}
-
-.bi-chip[data-color="success"] {
-  --bic-chip-background: var(--bi-success-5);
-  --bic-chip-background-hover: var(--bi-success-20);
-  --bic-chip-background-press: var(--bi-success-30);
-  --bic-chip-text-color: var(--bi-success-90);
+  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
 }
 
 .bi-chip > svg {
@@ -1165,6 +1294,8 @@ details.bi-details {
   --bic-details-color: var(--bi-neutral-90);
   --bic-details-border-color: var(--bi-neutral-15);
   --bic-details-padding: var(--bi-scale-4x);
+  --bic-details-focus-shadow-color: var(--bi-basic-white);
+  --bic-details-focus-outline-color: var(--bi-primary-50);
 }
 
 details.bi-details[data-dark="true"] {
@@ -1173,6 +1304,8 @@ details.bi-details[data-dark="true"] {
   --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-details-background);
   --bic-details-border-color: var(--bi-neutral-70);
   --bic-details-color: var(--bi-basic-white);
+  --bic-details-focus-shadow-color: var(--bi-neutral-95);
+  --bic-details-focus-outline-color: var(--bi-secondary-50);
 }
 
 details.bi-details {
@@ -1219,8 +1352,8 @@ details.bi-details summary:active {
 }
 
 details.bi-details summary:focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-basic-white));
-  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-details-focus-shadow-color));
+  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-details-focus-outline-color));
   outline-offset: var(--_bi--focus, -2px);
   border-radius: var(--bi-radius-medium);
 }
@@ -1605,6 +1738,8 @@ body:has(.bi-dialog:modal) {
   --bic-field-description-color: var(--bi-neutral-60);
   --bic-field-label-color: var(--bi-neutral-95);
   --bic-field-label-required-color: var(--bi-primary-50);
+  --bic-field-focus-outline-color: var(--bi-primary-50);
+  --bic-field-focus-shadow-color: var(--bi-basic-white);
 }
 
 .bi-field[data-dark="true"] {
@@ -1617,6 +1752,8 @@ body:has(.bi-dialog:modal) {
   --bic-field-description-color: var(--bi-neutral-15);
   --bic-field-label-color: var(--bi-basic-white);
   --bic-field-label-required-color: var(--bi-secondary-50);
+  --bic-field-focus-outline-color: var(--bi-secondary-50);
+  --bic-field-focus-shadow-color: var(--bi-neutral-95);
 }
 
 .bi-field > * {
@@ -1716,8 +1853,8 @@ body:has(.bi-dialog:modal) {
 }
 
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
-  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
+  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
   outline-offset: var(--_bi--focus, 2px);
 }
 
@@ -1791,8 +1928,8 @@ body:has(.bi-dialog:modal) {
 }
 
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
-  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
+  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
   outline-offset: var(--_bi--focus, 2px);
 }
 
@@ -1839,7 +1976,7 @@ body:has(.bi-dialog:modal) {
 }
 
 .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
-  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
+  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
   outline-offset: 0;
   box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
 }
@@ -1952,6 +2089,8 @@ body:has(.bi-dialog:modal) {
   --bic-filter-group-background-expanded: var(--bi-neutral-15);
   --bic-filter-group-border-color: var(--bi-neutral-15);
   --bic-filter-group-text-color: var(--bi-neutral-90);
+  --bic-filter-focus-shadow-color: var(--bi-basic-white);
+  --bic-filter-focus-outline-color: var(--bi-primary-50);
 }
 
 .bi-filter-group[data-dark="true"] {
@@ -1961,6 +2100,8 @@ body:has(.bi-dialog:modal) {
   --bic-filter-group-background-expanded: var(--bi-neutral-80);
   --bic-filter-group-border-color: var(--bi-neutral-70);
   --bic-filter-group-text-color: var(--bi-basic-white);
+  --bic-filter-focus-shadow-color: var(--bi-neutral-95);
+  --bic-filter-focus-outline-color: var(--bi-secondary-50);
 }
 
 .bi-filter-group {
@@ -1997,8 +2138,8 @@ body:has(.bi-dialog:modal) {
 }
 
 .bi-filter-group > button:focus-visible {
-  box-shadow: 0 0 0 4.5px var(--bi-basic-white);
-  outline: 1.5px solid var(--bi-primary-50);
+  box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
+  outline: var(--bi-stroke-thick) solid var(--bic-filter-focus-outline-color);
   outline-offset: 2px;
   border-radius: var(--bi-radius-small);
 }
@@ -2296,6 +2437,8 @@ svg[data-color="white"] {
   --bic-input-color: var(--bi-neutral-95);
   --bic-input-disabled-color: var(--bi-neutral-50);
   --bic-input-placeholder-color: var(--bi-neutral-60);
+  --bic-input-focus-outline-color: var(--bi-primary-50);
+  --bic-input-focus-shadow-color: var(--bi-basic-white);
   --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
 }
 
@@ -2307,6 +2450,8 @@ svg[data-color="white"] {
   --bic-input-color: var(--bi-basic-white);
   --bic-input-disabled-color: var(--bi-neutral-40);
   --bic-input-placeholder-color: var(--bi-neutral-30);
+  --bic-input-focus-outline-color: var(--bi-secondary-50);
+  --bic-input-focus-shadow-color: var(--bi-neutral-95);
   --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
 }
 
@@ -2341,11 +2486,11 @@ svg[data-color="white"] {
 }
 
 .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
-  --bic-input-border-color: var(--bi-primary-50);
+  --bic-input-border-color: var(--bic-input-focus-outline-color);
 }
 
 .bi-input:focus-visible {
-  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
+  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
   outline-offset: 0;
   box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
 }
@@ -2448,8 +2593,8 @@ svg[data-color="white"] {
 }
 
 .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
-  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
+  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
   outline-offset: var(--_bi--focus, 2px);
 }
 
@@ -2541,8 +2686,8 @@ svg[data-color="white"] {
 }
 
 .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
-  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
+  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
   outline-offset: var(--_bi--focus, 2px);
 }
 
@@ -2670,6 +2815,8 @@ svg[data-color="white"] {
   --bic-link-color: var(--bi-primary-50);
   --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);
   color: var(--bic-link-color);
   -webkit-text-decoration-line: underline;
   text-decoration-line: underline;
@@ -2693,6 +2840,8 @@ svg[data-color="white"] {
   --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-secondary-50);
 }
 
 .bi-link[data-color="neutral"] {
@@ -2725,8 +2874,8 @@ svg[data-color="white"] {
 }
 
 .bi-link:focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
-  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  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, var(--bi-stroke-thick) solid var(--bic-link-focus-outline-color));
   outline-offset: var(--_bi--focus, 2px);
   border-radius: var(--bi-radius-small);
 }
@@ -3061,7 +3210,7 @@ svg[data-color="white"] {
   transform: translate(-50%, var(--bi-scale-2x));
   border-radius: var(--bi-radius-medium);
   outline-offset: 2px;
-  outline: 1.5px solid var(--bi-primary-50);
+  outline: var(--bi-stroke-thick) solid var(--bi-primary-50);
   box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
 }
 
@@ -3132,10 +3281,14 @@ svg[data-color="white"] {
 .bi-tabs {
   --bic-tabs-tab-color-selected: var(--bi-primary-50);
   --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);
 }
 
 .bi-tabs[data-dark="true"] {
   --bic-tabs-tab-color-selected: var(--bi-primary-30);
+  --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
+  --bic-tabs-focus-outline-color: var(--bi-secondary-50);
 }
 
 .bi-tabs {
@@ -3172,8 +3325,8 @@ svg[data-color="white"] {
 }
 
 .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-basic-white));
-  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
+  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-tabs-focus-outline-color));
   outline-offset: var(--_bi--focus, -2px);
 }