@bi-digital/css 0.7.0 → 0.9.0

package/dist/baseline.css

@@ -1,5 +1,5 @@
 body, :host {
-  font-family: museo-sans, Arial, sans-serif, system-ui;
+  font-family: var(--bi-font-family-plain), system-ui;
   line-height: 1.5;
 }
 

package/dist/components/avatar.css

@@ -17,6 +17,9 @@
   width: var(--bic-avatar-size);
   height: var(--bic-avatar-size);
   font-size: var(--bic-avatar-font-size);
+  font-weight: var(--bi-font-weight-regular);
+  line-height: 1;
+  font-family: var(--bi-font-family-plain);
   text-transform: uppercase;
   -webkit-user-select: none;
   user-select: none;
@@ -24,9 +27,6 @@
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  font-family: museo-sans, Arial, sans-serif;
-  font-weight: 500;
-  line-height: 1;
   text-decoration: none;
   display: flex;
   overflow: hidden;

package/dist/components/badge.css

@@ -5,16 +5,13 @@
   --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-size: .875rem;
-  --bic-badge-line-height: 1.4;
+  --bic-badge-font: var(--bi-font-body-medium);
   --bic-badge-padding: 0 var(--bi-scale-1-5x);
   padding: var(--bic-badge-padding);
   border-radius: var(--bic-badge-border-radius);
   background-color: var(--bic-badge-background);
   color: var(--bic-badge-color);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: var(--bic-badge-font-size);
-  line-height: var(--bic-badge-line-height);
+  font: var(--bic-badge-font);
   width: max-content;
   height: fit-content;
   min-height: var(--bic-badge-height);
@@ -22,7 +19,6 @@
   word-break: break-word;
   justify-content: center;
   align-items: center;
-  font-weight: 500;
   display: inline-flex;
 }
 
@@ -38,16 +34,14 @@
 
 .bi-badge[data-size="xs"] {
   --bic-badge-padding: 0 var(--bi-scale-0-50x);
-  --bic-badge-font-size: .8125rem;
-  --bic-badge-line-height: 1.15;
+  --bic-badge-font: var(--bi-font-body-xs);
   --bic-badge-border-radius: var(--bi-radius-small);
   --bic-badge-height: var(--bi-scale-4x);
 }
 
 .bi-badge[data-size="small"] {
   --bic-badge-padding: 0 var(--bi-scale-1x);
-  --bic-badge-font-size: .8125rem;
-  --bic-badge-line-height: 1.15;
+  --bic-badge-font: var(--bi-font-body-xs);
   --bic-badge-height: var(--bi-scale-5x);
 }
 

package/dist/components/button.css

@@ -9,9 +9,10 @@
   --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);
-  font-family: museo-sans, Arial, sans-serif;
+  font-family: var(--bi-font-family-plain);
   font-size: var(--bic-button-font-size);
   line-height: var(--bic-button-line-height);
   -webkit-font-smoothing: antialiased;
@@ -22,6 +23,7 @@
   cursor: pointer;
   color: var(--bic-button-color);
   background: var(--bic-button-background);
+  font-weight: var(--bi-font-weight-bold);
   box-shadow: var(--bic-button-box-shadow);
   height: fit-content;
   min-height: var(--bic-button-size);
@@ -33,23 +35,23 @@
   text-align: inherit;
   border: none;
   flex-shrink: 0;
-  font-weight: 600;
   display: flex;
   position: relative;
   overflow: hidden;
 }
 
-.bi-button[data-stretch="true"] {
-  width: 100%;
+.bi-button[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);
 }
 
-.bi-button[data-active="true"] {
-  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
+.bi-button[data-fullwidth="true"], .bi-button[data-stretch="true"] {
+  width: 100%;
 }
 
-.bi-button[data-dark="true"] {
-  --bic-button-focus-shadow-color: var(--bi-neutral-95);
-  --bic-button-focus-outline-color: var(--bi-primary-30);
+.bi-button[data-active="true"], .bi-button[aria-expanded="true"] {
+  box-shadow: 0px 0px 0px 1.5px var(--bic-button-active-color) inset;
 }
 
 .bi-button:focus-visible {

package/dist/components/card.css

@@ -161,15 +161,13 @@
 
 .bi-card .bi-card--content > p {
   color: var(--bic-card-content-color);
+  font: var(--bi-font-body-medium);
   white-space: break-spaces;
   text-overflow: ellipsis;
   -webkit-line-clamp: var(--bic-card-content-lines);
   line-clamp: var(--bic-card-content-lines);
   -webkit-box-orient: vertical;
   margin: 0;
-  font-size: .875rem;
-  font-weight: 500;
-  line-height: 1.5;
   display: -webkit-box;
   overflow: hidden;
 }
@@ -246,31 +244,29 @@
 }
 
 .bi-card .bi-card--header {
+  font: var(--bi-font-body-medium);
   gap: var(--bi-scale-0-50x);
   word-wrap: break-word;
   word-break: break-word;
   flex-direction: column;
   width: 100%;
-  font-family: museo-sans, Arial, sans-serif;
-  line-height: 1.5;
   display: flex;
 }
 
 .bi-card .bi-card--header .bi-card--header-label {
   color: var(--bic-card-header-label-color);
   margin: 0;
-  font-size: .875rem;
 }
 
 @media (width < 600px) {
   .bi-card .bi-card--header .bi-card--header-label {
-    font-size: .8125rem;
+    font: var(--bi-font-body-small);
   }
 }
 
 .bi-card .bi-card--header .bi-card--header-label .bi-card--header-bold {
   color: var(--bic-card-header-bold-color);
-  font-weight: 600;
+  font-weight: var(--bi-font-weight-bold);
 }
 
 .bi-card .bi-card--header .bi-card--header-label .bi-card--header-dot {
@@ -284,22 +280,20 @@
 }
 
 .bi-card .bi-card--header .bi-card--header-title {
+  font: var(--bi-font-title-bold-small);
   color: var(--bic-card-header-title-color);
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.3;
   display: -webkit-box;
   overflow: hidden;
 }
 
 @media (width < 600px) {
   .bi-card .bi-card--header .bi-card--header-title {
-    font-size: 1rem;
+    font: var(--bi-font-title-bold-xs);
   }
 }
 
@@ -344,14 +338,11 @@
       0px 4px 6px 0px #26333f0d;
   color: var(--bic-card-header-title-color);
   text-align: center;
+  font: var(--bi-font-title-bold-medium);
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0;
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.3;
   display: flex;
 }
 

package/dist/components/chip.css

@@ -7,17 +7,14 @@
   --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.5rem;
+  --bic-chip-font: var(--bi-font-body-medium);
+  font: var(--bic-chip-font);
   gap: var(--bi-scale-1x);
   border-radius: var(--bi-radius-full);
   width: fit-content;
   color: var(--bic-chip-text-color);
   background-color: var(--bic-chip-background);
   padding: var(--bic-chip-padding);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: var(--bic-chip-font-size);
-  line-height: var(--bic-chip-line-height);
   justify-content: flex-start;
   align-items: center;
   display: inline-flex;
@@ -26,14 +23,13 @@
 
 .bi-chip[data-size="small"] {
   --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
-  --bic-chip-font-size: .8125rem;
-  --bic-chip-line-height: 1.25rem;
+  --bic-chip-font: var(--bi-font-body-small);
   --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-font: var(--bi-font-body-large);
 }
 
 .bi-chip[data-dark="true"] {

package/dist/components/details.css

@@ -24,6 +24,7 @@ details.bi-details[data-dark="true"] {
 }
 
 details.bi-details {
+  font: var(--bi-font-body-large);
   background-color: var(--bic-details-background);
   color: var(--bic-details-color);
   border: 0;
@@ -31,10 +32,6 @@ details.bi-details {
   border-style: solid;
   border-top-width: var(--bi-stroke-thin);
   border-bottom-width: var(--bi-stroke-thin);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.5;
 }
 
 details.bi-details + :is(details.bi-details) {
@@ -49,8 +46,8 @@ details.bi-details summary {
   gap: var(--bi-scale-2x);
   -webkit-user-select: none;
   user-select: none;
+  font-weight: var(--bi-font-weight-bold);
   flex-direction: row;
-  font-weight: 700;
   list-style: none;
   display: flex;
   position: relative;

package/dist/components/dialog.css

@@ -60,11 +60,9 @@
 .bi-dialog .bi-dialog--header {
   padding: var(--bic-dialog-padding);
   min-height: var(--bi-scale-16x);
+  font: var(--bi-font-title-bold-medium);
   align-items: center;
   margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.3;
   display: flex;
 }
 

package/dist/components/dropdown.css

@@ -8,6 +8,7 @@
   --bic-dropdown-border-color: var(--bi-neutral-15);
   --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
     0px 2px 2px -1px #26333f0a;
+  --bic-dropdown-min-width: var(--bi-scale-64x);
 }
 
 .bi-dropdown[data-dark="true"] {
@@ -26,7 +27,7 @@
   border-color: var(--bic-dropdown-border-color);
   box-shadow: var(--bic-dropdown-box-shadow);
   box-sizing: border-box;
-  min-width: var(--bi-scale-64x);
+  min-width: max(var(--bic-dropdown-min-width), var(--bic-popover-trigger-width, 0px));
   padding: var(--bic-dropdown-padding);
   list-style: none;
 }
@@ -50,7 +51,3 @@
 .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
   margin-left: auto;
 }
-
-.bi-button[aria-expanded="true"] {
-  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
-}

package/dist/components/field.css

@@ -45,9 +45,7 @@
 
 .bi-field .bi-field--description {
   color: var(--bic-field-description-color);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: .8125rem;
-  font-weight: 500;
+  font: var(--bi-font-body-small);
   line-height: 1.15;
 }
 

package/dist/components/fieldset.css

@@ -28,10 +28,7 @@
 .bi-fieldset > legend + p {
   margin-block: var(--bi-scale-1x) 0;
   color: var(--bic-fieldset-description-color);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.15;
+  font: var(--bi-font-body-large);
 }
 
 .bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {

package/dist/components/filter-group.css

@@ -72,12 +72,9 @@
 
 .bi-filter-group > button > h3 {
   text-align: left;
+  font: var(--bi-font-title-bold-xs);
   flex: 1;
   margin: 0;
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.5;
 }
 
 .bi-filter-group > div {

package/dist/components/footer.css

@@ -12,6 +12,7 @@
   width: 100%;
   color: var(--bic-footer-color);
   background-color: var(--bic-footer-background);
+  font-family: var(--bi-font-family-plain);
   padding: var(--bi-scale-16x) 0;
   justify-content: center;
   align-items: center;
@@ -20,7 +21,6 @@
   align-items: center;
   width: 100%;
   margin-top: -1px;
-  font-family: museo-sans, Arial, sans-serif;
   display: flex;
 }
 
@@ -38,15 +38,12 @@
 }
 
 .bi-footer .bi-footer--links-container .bi-footer--links {
+  min-height: 44px;
+  font: var(--bi-font-label-large);
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  min-height: 44px;
   margin: auto;
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.5;
   display: flex;
 }
 
@@ -149,9 +146,7 @@
 
 .bi-footer .bi-footer--copyright {
   text-align: center;
+  font: var(--bi-font-body-large);
+  font-weight: var(--bi-font-weight-regular);
   margin: 0;
-  font-family: museo-slab, serif;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.5;
 }

package/dist/components/label.css

@@ -10,14 +10,11 @@
 
 .bi-label {
   color: var(--bic-label-color);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: .875rem;
-  font-weight: 700;
-  line-height: 1.4;
+  font: var(--bi-font-label-medium);
 }
 
 .bi-label[data-weight="medium"] {
-  font-weight: 500;
+  font-weight: var(--bi-font-weight-regular);
 }
 
 .bi-label[data-weight="regular"] {

package/dist/components/skip-link.css

@@ -1,6 +1,7 @@
 .bi-skip-link {
   --bic-skip-link-color: var(--bi-basic-white);
   --bic-skip-link-background: var(--bi-primary-50);
+  font: var(--bi-font-body-large);
   background: var(--bic-skip-link-background);
   color: var(--bic-skip-link-color);
   outline-offset: 0px;
@@ -9,8 +10,6 @@
   align-content: center;
   height: 44px;
   padding: 0 7px;
-  font-size: 1rem;
-  font-weight: 500;
   transition: transform .3s ease-in-out;
   position: absolute;
   left: 50%;

package/dist/components/spinner.css

@@ -7,6 +7,7 @@
   width: 1em;
   height: 1em;
   animation: 1s linear infinite bi-spinner;
+  display: inline-block;
   -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
   mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
 }

package/dist/components/validation-message.css

@@ -7,11 +7,8 @@
   padding: var(--bic-validation-message-padding);
   background: var(--bic-validation-message-background);
   border-radius: 0px 0px var(--bi-radius-medium) var(--bi-radius-medium);
+  font: var(--bi-font-label-medium);
   margin: 0;
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: .875rem;
-  font-weight: 700;
-  line-height: 1.4;
   position: relative;
 }