@ambita/design-system 5.7.1-3101.0 → 5.7.1-3121.0

package/dist/css/_tokens/_byggesoknaden.scss

@@ -1,7 +1,7 @@
 // Do not edit directly, this file was auto-generated.
 
-$amb-font-family-display-serif: PT Serif;
-$amb-font-family-sans-serif: Inter;
+$amb-font-family-display-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+$amb-font-family-sans-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
 $amb-font-weight-bold: 700;
 $amb-font-weight-medium: 500;
 $amb-font-weight-regular: 400;
@@ -32,7 +32,7 @@ $bs-color-red-3: #b74a40; // For UI
 $bs-color-white: #ffffff; // For marketing and UI
 $bs-color-yellow-1: #fefaed; // For UI
 $bs-color-yellow-2: #dfbb2c; // For UI
-$bs-font-family-bs-font: Source Sans pro;
+$bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
 $bs-font-line-height-14: 14px;
 $bs-font-line-height-16: 16px;
 $bs-font-line-height-18: 18px;

package/dist/css/_tokens/byggesoknaden.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: PT Serif;
-  --amb-font-family-sans-serif: Inter;
+  --amb-font-family-display-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --amb-font-family-sans-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: Source Sans pro;
+  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;
@@ -164,7 +164,7 @@
     --bs-color-red-3
   ); /** Fyllfarge for å bruke på en ramme for å indikere en feil. */
   --border-color-focus: var(
-    --bs-color-blue-3
+    --bs-color-blue-5
   ); /** Fyllfarge for å bruke på en ramme i interaktive komponenter som er i fokusert tilstand. */
   --border-color-input: var(
     --bs-color-grey-5
@@ -217,7 +217,7 @@
   ); /** Fyllfarge for høykontrast elementer i deaktivert tilstand. */
   --fill-error: var(--bs-color-red-1); /** Dempet fyllfarge som indikerer feilmelding. */
   --fill-error-stronger: var(--bs-color-red-2); /** Sterk fyllfarge som indikerer feilmelding. */
-  --fill-hover-default: var(--bs-color-blue-2); /** Fyllfarge for interaktive elementer */
+  --fill-hover-default: var(--bs-color-blue-1); /** Fyllfarge for interaktive elementer */
   --fill-info: var(--bs-color-blue-1); /** Dempet fyllfarge som indikerer nøytral informasjon. */
   --fill-info-stronger: var(
     --bs-color-blue-2

package/dist/css/_tokens/component-tokens.css

@@ -28,7 +28,14 @@
      TYPOGRAPHY TOKENS
      Global font settings that can be overridden per theme
      ======================================================================== */
-  --font-family-base: 'ff-din-round-web', sans-serif;
+  --font-family-base: var(--font-family-sans-serif, 'Inter', Arial, Helvetica, sans-serif);
+  --font-family-display: var(
+    --font-family-display-serif,
+    'PT Serif',
+    Georgia,
+    'Times New Roman',
+    serif
+  );
   /* ------------------------------------------------------------------------
     SHADOW TOKENS
     ------------------------------------------------------------------------ */
@@ -37,7 +44,7 @@
   --Shadow-Error: 0 0 0 2px var(--text-error);
   --Shadow-Dropdown: 0px 4px 8px 3px rgba(0, 0, 0, 0.05), 0px 1px 3px 0px rgba(85, 85, 85, 0.4);
   /* TagsInput Dropdown */
-  --tags-dropdown-max-height: 15rem;
+  --tags-dropdown-max-height: 240px;
   --tags-dropdown-separator-margin: 5px;
   --tags-dropdown-separator-height: 1px;
   /* TagsInput Dropdown Label */

package/dist/css/_typography.scss

@@ -0,0 +1,228 @@
+/* ============================================================================
+   TYPOGRAPHY MIXINS & UTILITIES
+   ============================================================================
+
+   Semantic typography mixins based on the Ambita design system.
+   These provide pre-composed text styles matching the design specifications.
+
+   Usage:
+   ```scss
+   @use '@ambita/design-system/dist/scss/_typography.scss' as *;
+
+   .my-title {
+     @include heading-xxl-display;
+   }
+
+   h1 { @include heading-xxl-display; }
+   h2 { @include heading-xl; }
+   p { @include body-m; }
+
+   // Using the rem() function:
+   .custom-element {
+     font-size: rem(18);      // => 1.125rem (18/16)
+     padding: rem(24) rem(16); // => 1.5rem 1rem
+   }
+   ```
+
+   Heading styles:
+   - Display variants use the display font (PT Serif in ambita-light/dark)
+   - Regular variants use the base font (Inter in ambita-light/dark)
+
+   Note: These mixins use CSS custom properties defined in your theme.
+   Make sure to import a theme CSS file before using these mixins:
+   - @ambita/design-system/dist/themes/ambita-light.css
+   - @ambita/design-system/dist/themes/ambita-dark.css
+   - @ambita/design-system/dist/themes/ambita-old.css
+   - @ambita/design-system/dist/themes/byggesoknaden.css
+============================================================================ */
+
+@use 'sass:math';
+
+/* ============================================================================
+   UTILITY FUNCTIONS
+   ============================================================================ */
+
+/**
+ * Convert pixel values to rem units
+ *
+ * @param $px - The pixel value to convert
+ * @param $base - The base font size (default: 16px, browser default)
+ * @return rem value
+ *
+ * Examples:
+ *   rem(16)  => 1rem
+ *   rem(24)  => 1.5rem
+ *   rem(14)  => 0.875rem
+ *   rem(18, 18) => 1rem (custom base)
+ */
+@function rem($px, $base: 16) {
+  @return math.div($px, $base) * 1rem;
+}
+
+/* ============================================================================
+   HEADING MIXINS
+   ============================================================================ */
+
+/**
+ * Heading XXL Display
+ * Font: PT Serif (display), Size: 50px, Weight: 400, Line-height: 54px
+ * Use for: Hero titles, marketing headlines
+ */
+@mixin heading-xxl-display {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-xxl);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xxxl);
+}
+
+/**
+ * Heading XXL
+ * Font: Inter (base), Size: 50px, Weight: 400, Line-height: 54px
+ * Use for: Large page titles
+ */
+@mixin heading-xxl {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xxl);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xxxl);
+}
+
+/**
+ * Heading XL Display
+ * Font: PT Serif (display), Size: 30px, Weight: 400, Line-height: 34px
+ * Use for: Section titles with display styling
+ */
+@mixin heading-xl-display {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xxl);
+}
+
+/**
+ * Heading XL
+ * Font: Inter (base), Size: 30px, Weight: 500, Line-height: 34px
+ * Use for: Page sections, major content divisions
+ */
+@mixin heading-xl {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-xxl);
+}
+
+/**
+ * Heading L
+ * Font: Inter (base), Size: 22px, Weight: 500, Line-height: 26px
+ * Use for: Card titles, subsections
+ */
+@mixin heading-l {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-xl);
+}
+
+/**
+ * Heading L Link
+ * Font: Inter (base), Size: 22px, Weight: 400, Line-height: 26px
+ * Use for: Clickable headings, navigation items
+ */
+@mixin heading-l-link {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xl);
+}
+
+/**
+ * Heading M
+ * Font: Inter (base), Size: 20px, Weight: 500, Line-height: 24px
+ * Use for: Component titles, list headers
+ */
+@mixin heading-m {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-l);
+}
+
+/**
+ * Heading S
+ * Font: Inter (base), Size: 18px, Weight: 500, Line-height: 22px
+ * Use for: Small titles, form section headers
+ */
+@mixin heading-s {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-m);
+}
+
+/* ============================================================================
+   BODY TEXT MIXINS
+   ============================================================================ */
+
+/**
+ * Body L
+ * Font: Inter (base), Size: 18px, Weight: 400, Line-height: 26px
+ * Use for: Lead paragraphs, introductions
+ */
+@mixin body-l {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xl);
+}
+
+/**
+ * Body M
+ * Font: Inter (base), Size: 16px, Weight: 400, Line-height: 22px
+ * Use for: Default body text, paragraphs
+ */
+@mixin body-m {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-m);
+}
+
+/**
+ * Body S
+ * Font: Inter (base), Size: 14px, Weight: 400, Line-height: 19px
+ * Use for: Secondary text, descriptions
+ */
+@mixin body-s {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-s);
+}
+
+/* ============================================================================
+   UTILITY TEXT MIXINS
+   ============================================================================ */
+
+/**
+ * Caption
+ * Font: Inter (base), Size: 12px, Weight: 400, Line-height: 16px
+ * Use for: Image captions, footnotes, meta information
+ */
+@mixin caption {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xxxs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xxs);
+}
+
+/**
+ * Label
+ * Font: Inter (base), Size: 16px, Weight: 500, Line-height: 19px
+ * Use for: Form labels, input labels
+ */
+@mixin label {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-s);
+}

package/dist/css/ambita-dark.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: PT Serif;
-  --amb-font-family-sans-serif: Inter;
+  --amb-font-family-display-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
+  --amb-font-family-sans-serif: 'Inter', Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: Source Sans pro;
+  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;

package/dist/css/ambita-dark.scss

@@ -6,6 +6,9 @@
  *
  * Usage:
  *   import '@ambita/design-system/dist/css/ambita-dark.css';
+ *
+ * Fonts: Add this to your HTML <head>:
+ *   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
  */
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */

package/dist/css/ambita-light.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: PT Serif;
-  --amb-font-family-sans-serif: Inter;
+  --amb-font-family-display-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
+  --amb-font-family-sans-serif: 'Inter', Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: Source Sans pro;
+  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;

package/dist/css/ambita-light.scss

@@ -7,6 +7,9 @@
  * Usage:
  *   import '@ambita/design-system/dist/css/ambita-light.css';
  *
+ * Fonts: Add this to your HTML <head>:
+ *   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
+ *
  * This is the default theme for the design system.
  */
 

package/dist/css/ambita-old.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: PT Serif;
-  --amb-font-family-sans-serif: Inter;
+  --amb-font-family-display-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
+  --amb-font-family-sans-serif: 'Inter', Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: Source Sans pro;
+  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;

package/dist/css/ambita-old.scss

@@ -7,6 +7,9 @@
  * Usage:
  *   import '@ambita/design-system/dist/css/ambita-old.css';
  *
+ * Fonts: DIN Round is not available on Google Fonts.
+ * Host the font files and add @font-face declarations, or use the fallback (Arial).
+ *
  * This theme maintains backwards compatibility with older designs.
  */
 

package/dist/css/base.scss

@@ -0,0 +1,19 @@
+/**
+ * Design System Base Styles (Font-Free)
+ *
+ * DO NOT import this file directly in consuming projects.
+ * Use theme entry points instead:
+ * - @ambita/design-system/dist/themes/ambita-light.css
+ * - @ambita/design-system/dist/themes/ambita-dark.css
+ * - @ambita/design-system/dist/themes/ambita-old.css
+ * - @ambita/design-system/dist/themes/byggesoknaden.css
+ */
+
+/* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
+@use './colors-css-variables.scss';
+
+/* Layer 1: Semantic Tokens - Using Ambita Light as default */
+@import url('./themes/ambita-light/semantic-tokens.css');
+
+/* Layer 2: Component Tokens - Using Ambita Light as default */
+@import url('./themes/ambita-light/component-tokens.css');

package/dist/css/byggesoknaden.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: PT Serif;
-  --amb-font-family-sans-serif: Inter;
+  --amb-font-family-display-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --amb-font-family-sans-serif: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   --amb-font-weight-bold: 700;
   --amb-font-weight-medium: 500;
   --amb-font-weight-regular: 400;
@@ -35,7 +35,7 @@
   --bs-color-white: #ffffff; /** For marketing and UI */
   --bs-color-yellow-1: #fefaed; /** For UI */
   --bs-color-yellow-2: #dfbb2c; /** For UI */
-  --bs-font-family-bs-font: Source Sans pro;
+  --bs-font-family-bs-font: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;

package/dist/css/byggesoknaden.scss

@@ -6,6 +6,9 @@
  *
  * Usage:
  *   import '@ambita/design-system/dist/css/byggesoknaden.css';
+ *
+ * Fonts: DIN Round is not available on Google Fonts.
+ * Host the font files and add @font-face declarations, or use the fallback (Arial).
  */
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */

package/dist/css/neo-mixins.scss

@@ -185,7 +185,7 @@
  * Dropdown item with icon indicator (for multi-select)
  * Adds padding-left to accommodate the indicator
  */
-@mixin dropdown-item-with-indicator($indicator-width: 2.5rem) {
+@mixin dropdown-item-with-indicator($indicator-width: 40px) {
   @include dropdown-item-base;
   padding-left: $indicator-width;
   display: flex;
@@ -196,7 +196,7 @@
  * Dropdown empty state
  * Shown when no items match search/filter
  */
-@mixin dropdown-empty($padding-y: 0.5rem, $padding-x: 0.5rem) {
+@mixin dropdown-empty($padding-y: 8px, $padding-x: 8px) {
   padding: $padding-y $padding-x;
   text-align: center;
   font-size: 16px;
@@ -207,7 +207,7 @@
  * Dropdown separator
  * Divides groups of items
  */
-@mixin dropdown-separator($margin-y: 0rem) {
+@mixin dropdown-separator($margin-y: 0px) {
   margin-top: $margin-y;
   margin-bottom: $margin-y;
   height: 1px;
@@ -218,7 +218,7 @@
  * Dropdown group label
  * Labels for grouped items
  */
-@mixin dropdown-label($padding-y: 0.5rem, $padding-x: 0.75rem) {
+@mixin dropdown-label($padding-y: 8px, $padding-x: 12px) {
   padding: $padding-y $padding-x;
   font-size: 14px;
   font-weight: 600;
@@ -382,7 +382,7 @@
 
   @keyframes slideInFromTop {
     from {
-      transform: translateY(-0.5rem);
+      transform: translateY(-8px);
     }
     to {
       transform: translateY(0);
@@ -391,7 +391,7 @@
 
   @keyframes slideInFromBottom {
     from {
-      transform: translateY(0.5rem);
+      transform: translateY(8px);
     }
     to {
       transform: translateY(0);
@@ -400,7 +400,7 @@
 
   @keyframes slideInFromLeft {
     from {
-      transform: translateX(-0.5rem);
+      transform: translateX(-8px);
     }
     to {
       transform: translateX(0);
@@ -409,10 +409,135 @@
 
   @keyframes slideInFromRight {
     from {
-      transform: translateX(0.5rem);
+      transform: translateX(8px);
     }
     to {
       transform: translateX(0);
     }
   }
 }
+
+/* ============================================================================
+   TYPOGRAPHY MIXINS
+   ============================================================================
+
+   Semantic typography mixins based on the Ambita design system.
+   These provide pre-composed text styles matching the design specifications.
+
+   Usage:
+   ```scss
+   @use '@/css/neo-mixins' as *;
+
+   .my-title {
+     @include heading-xxl-display;
+   }
+   ```
+
+   Heading styles:
+   - Display variants use PT Serif (--font-family-display)
+   - Regular variants use Inter (--font-family-base)
+============================================================================ */
+
+/* Heading XXL Display - PT Serif, 50px, weight 400, line-height 54px */
+@mixin heading-xxl-display {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-xxl);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xxxl);
+}
+
+/* Heading XXL - Inter, 50px, weight 400, line-height 54px */
+@mixin heading-xxl {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xxl);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xxxl);
+}
+
+/* Heading XL Display - PT Serif, 30px, weight 400, line-height 34px */
+@mixin heading-xl-display {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xxl);
+}
+
+/* Heading XL - Inter, 30px, weight 500, line-height 34px */
+@mixin heading-xl {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-xxl);
+}
+
+/* Heading L - Inter, 22px, weight 500, line-height 26px */
+@mixin heading-l {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-xl);
+}
+
+/* Heading L Link - Inter, 22px, weight 400, line-height 26px */
+@mixin heading-l-link {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xl);
+}
+
+/* Heading M - Inter, 20px, weight 500, line-height 24px */
+@mixin heading-m {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-l);
+}
+
+/* Heading S - Inter, 18px, weight 500, line-height 22px */
+@mixin heading-s {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-m);
+}
+
+/* Body L - Inter, 18px, weight 400, line-height 26px */
+@mixin body-l {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xl);
+}
+
+/* Body M - Inter, 16px, weight 400, line-height 22px */
+@mixin body-m {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-m);
+}
+
+/* Body S - Inter, 14px, weight 400, line-height 19px */
+@mixin body-s {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-s);
+}
+
+/* Caption - Inter, 12px, weight 400, line-height 16px */
+@mixin caption {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xxxs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xxs);
+}
+
+/* Label - Inter, 16px, weight 500, line-height 19px */
+@mixin label {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-s);
+}

package/dist/css/themes/_base/component-tokens.css

@@ -21,7 +21,14 @@
      Global font settings that can be overridden per theme
      ======================================================================== */
 
-  --font-family-base: 'ff-din-round-web', sans-serif;
+  --font-family-base: var(--font-family-sans-serif, 'Inter', Arial, Helvetica, sans-serif);
+  --font-family-display: var(
+    --font-family-display-serif,
+    'PT Serif',
+    Georgia,
+    'Times New Roman',
+    serif
+  );
 
   /* ========================================================================
      SHADOW TOKENS
@@ -43,7 +50,7 @@
   --tags-input-padding-x: 6px;
 
   /* TagsInput Dropdown */
-  --tags-dropdown-max-height: 15rem;
+  --tags-dropdown-max-height: 240px;
   --tags-dropdown-separator-margin: 5px;
   --tags-dropdown-separator-height: 1px;