npm - @bi-digital/css - Versions diffs - 0.8.0 → 0.9.0 - Mend

@bi-digital/css 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/baseline.css +1 -1
package/dist/components/avatar.css +3 -3
package/dist/components/badge.css +4 -10
package/dist/components/button.css +11 -9
package/dist/components/card.css +7 -16
package/dist/components/chip.css +4 -8
package/dist/components/details.css +2 -5
package/dist/components/dialog.css +1 -3
package/dist/components/dropdown.css +0 -4
package/dist/components/field.css +1 -3
package/dist/components/fieldset.css +1 -4
package/dist/components/filter-group.css +1 -4
package/dist/components/footer.css +5 -10
package/dist/components/label.css +2 -5
package/dist/components/skip-link.css +1 -2
package/dist/components/validation-message.css +1 -4
package/dist/components.css +44 -90
package/dist/index.css +1 -1
package/dist/salesforce.css +44 -90
package/package.json +3 -6

package/dist/baseline.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -51,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/validation-message.css CHANGED Viewed

@@ -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;
 }

package/dist/components.css CHANGED Viewed

@@ -151,6 +151,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;
@@ -158,9 +161,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;
@@ -224,16 +224,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);
@@ -241,7 +238,6 @@
   word-break: break-word;
   justify-content: center;
   align-items: center;
-  font-weight: 500;
   display: inline-flex;
 }
@@ -257,16 +253,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);
 }
@@ -347,9 +341,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;
@@ -360,6 +355,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);
@@ -371,23 +367,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 {
@@ -666,15 +662,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;
 }
@@ -751,31 +745,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 {
@@ -789,22 +781,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);
   }
 }
@@ -849,14 +839,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;
 }
@@ -898,17 +885,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;
@@ -917,14 +901,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"] {
@@ -1127,6 +1110,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;
@@ -1134,10 +1118,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) {
@@ -1152,8 +1132,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;
@@ -1309,11 +1289,9 @@ details.bi-details > *:not(summary) + * {
 .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;
 }
@@ -1587,10 +1565,6 @@ body:has(.bi-dialog:modal) {
   margin-left: auto;
 }
-.bi-button[aria-expanded="true"] {
-  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
-}
 :where(.bi-input) {
   margin: 0;
 }
@@ -1875,9 +1849,7 @@ body:has(.bi-dialog:modal) {
 .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;
 }
@@ -2087,10 +2059,7 @@ body:has(.bi-dialog:modal) {
 .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 {
@@ -2171,12 +2140,9 @@ body:has(.bi-dialog:modal) {
 .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 {
@@ -2226,6 +2192,7 @@ body:has(.bi-dialog:modal) {
   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;
@@ -2234,7 +2201,6 @@ body:has(.bi-dialog:modal) {
   align-items: center;
   width: 100%;
   margin-top: -1px;
-  font-family: museo-sans, Arial, sans-serif;
   display: flex;
 }
@@ -2252,15 +2218,12 @@ body:has(.bi-dialog:modal) {
 }
 .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;
 }
@@ -2363,11 +2326,9 @@ body:has(.bi-dialog:modal) {
 .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;
 }
 svg {
@@ -2428,14 +2389,11 @@ svg[data-color="white"] {
 .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"] {
@@ -2728,6 +2686,7 @@ svg[data-color="white"] {
 .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;
@@ -2736,8 +2695,6 @@ svg[data-color="white"] {
   align-content: center;
   height: 44px;
   padding: 0 7px;
-  font-size: 1rem;
-  font-weight: 500;
   transition: transform .3s ease-in-out;
   position: absolute;
   left: 50%;
@@ -2925,11 +2882,8 @@ svg[data-color="white"] {
   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;
 }

package/dist/index.css CHANGED Viewed

@@ -425,7 +425,7 @@ summary {
 }
 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/salesforce.css CHANGED Viewed

@@ -377,6 +377,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;
@@ -384,9 +387,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;
@@ -450,16 +450,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);
@@ -467,7 +464,6 @@
   word-break: break-word;
   justify-content: center;
   align-items: center;
-  font-weight: 500;
   display: inline-flex;
 }
@@ -483,16 +479,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);
 }
@@ -573,9 +567,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;
@@ -586,6 +581,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);
@@ -597,23 +593,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 {
@@ -892,15 +888,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;
 }
@@ -977,31 +971,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 {
@@ -1015,22 +1007,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);
   }
 }
@@ -1075,14 +1065,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;
 }
@@ -1124,17 +1111,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;
@@ -1143,14 +1127,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"] {
@@ -1353,6 +1336,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;
@@ -1360,10 +1344,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) {
@@ -1378,8 +1358,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;
@@ -1535,11 +1515,9 @@ details.bi-details > *:not(summary) + * {
 .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;
 }
@@ -1813,10 +1791,6 @@ body:has(.bi-dialog:modal) {
   margin-left: auto;
 }
-.bi-button[aria-expanded="true"] {
-  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
-}
 :where(.bi-input) {
   margin: 0;
 }
@@ -2101,9 +2075,7 @@ body:has(.bi-dialog:modal) {
 .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;
 }
@@ -2313,10 +2285,7 @@ body:has(.bi-dialog:modal) {
 .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 {
@@ -2397,12 +2366,9 @@ body:has(.bi-dialog:modal) {
 .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 {
@@ -2452,6 +2418,7 @@ body:has(.bi-dialog:modal) {
   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;
@@ -2460,7 +2427,6 @@ body:has(.bi-dialog:modal) {
   align-items: center;
   width: 100%;
   margin-top: -1px;
-  font-family: museo-sans, Arial, sans-serif;
   display: flex;
 }
@@ -2478,15 +2444,12 @@ body:has(.bi-dialog:modal) {
 }
 .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;
 }
@@ -2589,11 +2552,9 @@ body:has(.bi-dialog:modal) {
 .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;
 }
 svg {
@@ -2654,14 +2615,11 @@ svg[data-color="white"] {
 .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"] {
@@ -2954,6 +2912,7 @@ svg[data-color="white"] {
 .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;
@@ -2962,8 +2921,6 @@ svg[data-color="white"] {
   align-content: center;
   height: 44px;
   padding: 0 7px;
-  font-size: 1rem;
-  font-weight: 500;
   transition: transform .3s ease-in-out;
   position: absolute;
   left: 50%;
@@ -3151,11 +3108,8 @@ svg[data-color="white"] {
   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;
 }

package/package.json CHANGED Viewed

@@ -1,10 +1,7 @@
 {
   "name": "@bi-digital/css",
   "type": "module",
-  "version": "0.8.0",
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  },
+  "version": "0.9.0",
   "description": "CSS for the BI Design System",
   "author": "BI Digital",
   "homepage": "https://designsystem.bi.no/",
@@ -31,11 +28,11 @@
   ],
   "devDependencies": {
     "browserslist": "^4.28.1",
-    "glob": "^13.0.3",
+    "glob": "^13.0.5",
     "lightningcss": "^1.31.1",
     "modern-normalize": "^3.0.1",
     "rimraf": "^6.1.2",
-    "@bi-digital/tokens": "0.8.0"
+    "@bi-digital/tokens": "0.9.0"
   },
   "scripts": {
     "build": "rimraf dist && node config.js",